Angular 테스트 전략 완벽 가이드

Angular 애플리케이션의 테스트 전략을 초급 개발자를 위해 정리했습니다. 단위 테스트부터 통합 테스트까지 실제 예제와 함께 학습할 수 있습니다.

---

---

들어가며

이 글에서는 Angular 테스트 전략 완벽 가이드에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. 기본_컴포넌트_테스트
2. 프로퍼티_바인딩_테스트
3. DOM_렌더링_테스트
4. 서비스_의존성_테스트
5. 이벤트_핸들러_테스트
6. 비동기_작업_테스트
7. 입력_폼_검증_테스트
8. HTTP_요청_테스트
9. 라우팅_테스트
10. 디렉티브_테스트

---

1. 기본_컴포넌트_테스트

개요

TestBed를 사용하여 Angular 컴포넌트의 기본 생성과 초기화를 테스트합니다.

코드 예제

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [AppComponent]
    }).compileComponents();
  });

  it('컴포넌트가 생성되어야 함', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const component = fixture.componentInstance;
    expect(component).toBeTruthy();
  });
});

설명

TestBed로 테스트 환경을 설정하고, fixture를 통해 컴포넌트 인스턴스를 생성하여 존재 여부를 검증합니다.

---

2. 프로퍼티_바인딩_테스트

개요

컴포넌트의 프로퍼티 값이 제대로 설정되고 변경되는지 테스트합니다.

코드 예제

it('title 프로퍼티를 테스트', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const component = fixture.componentInstance;

  component.title = 'Test App';
  expect(component.title).toBe('Test App');
});

설명

컴포넌트 인스턴스의 프로퍼티에 값을 할당하고 expect를 통해 기대값과 일치하는지 확인합니다.

---

3. DOM_렌더링_테스트

개요

컴포넌트의 데이터가 실제 DOM에 올바르게 렌더링되는지 검증합니다.

코드 예제

it('제목이 화면에 렌더링되어야 함', () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.componentInstance.title = 'Hello';
  fixture.detectChanges();

  const element = fixture.nativeElement;
  expect(element.querySelector('h1').textContent).toContain('Hello');
});

설명

detectChanges()로 변경 감지를 트리거하고, nativeElement로 실제 DOM 요소에 접근하여 텍스트 내용을 검증합니다.

---

4. 서비스_의존성_테스트

개요

컴포넌트가 의존하는 서비스를 모킹하여 독립적으로 테스트합니다.

코드 예제

it('서비스 메서드 호출 테스트', () => {
  const mockService = jasmine.createSpyObj('DataService', ['getData']);
  mockService.getData.and.returnValue('mock data');

  TestBed.configureTestingModule({
    declarations: [AppComponent],
    providers: [{ provide: DataService, useValue: mockService }]
  });

  const fixture = TestBed.createComponent(AppComponent);
  expect(mockService.getData).toHaveBeenCalled();
});

설명

jasmine.createSpyObj로 서비스를 모킹하고, 컴포넌트에서 해당 메서드가 호출되었는지 검증합니다.

---

5. 이벤트_핸들러_테스트

개요

버튼 클릭 등 사용자 이벤트가 올바르게 처리되는지 테스트합니다.

코드 예제

it('버튼 클릭 이벤트 테스트', () => {
  const fixture = TestBed.createComponent(AppComponent);
  const component = fixture.componentInstance;
  spyOn(component, 'onClick');

  const button = fixture.nativeElement.querySelector('button');
  button.click();

  expect(component.onClick).toHaveBeenCalled();
});

설명

spyOn으로 메서드를 감시하고, DOM 요소를 직접 클릭하여 이벤트 핸들러가 호출되는지 확인합니다.

---

6. 비동기_작업_테스트

개요

HTTP 요청 등 비동기 작업을 fakeAsync와 tick으로 테스트합니다.

코드 예제

it('비동기 데이터 로딩 테스트', fakeAsync(() => {
  const fixture = TestBed.createComponent(AppComponent);
  const component = fixture.componentInstance;

  component.loadData();
  tick(1000);

  expect(component.data).toBeDefined();
}));

설명

fakeAsync 영역 내에서 tick()으로 시간을 제어하여 비동기 작업이 완료된 후의 상태를 동기적으로 테스트합니다.

---

7. 입력_폼_검증_테스트

개요

폼 입력값의 유효성 검증 로직을 테스트합니다.

코드 예제

it('이메일 유효성 검증 테스트', () => {
  const fixture = TestBed.createComponent(LoginComponent);
  const component = fixture.componentInstance;

  component.emailControl.setValue('invalid-email');
  expect(component.emailControl.invalid).toBe(true);

  component.emailControl.setValue('test@example.com');
  expect(component.emailControl.valid).toBe(true);
});

설명

FormControl의 setValue로 값을 설정하고, valid/invalid 속성으로 유효성 검증 결과를 확인합니다.

---

8. HTTP_요청_테스트

개요

HttpClientTestingModule을 사용하여 HTTP 요청을 모킹하고 테스트합니다.

코드 예제

it('HTTP GET 요청 테스트', () => {
  const httpMock = TestBed.inject(HttpTestingController);
  service.getUsers().subscribe(users => {
    expect(users.length).toBe(2);
  });

  const req = httpMock.expectOne('/api/users');
  req.flush([{ id: 1 }, { id: 2 }]);
  httpMock.verify();
});

설명

HttpTestingController로 실제 HTTP 요청을 가로채고, flush로 모킹 데이터를 반환하여 서비스 로직을 검증합니다.

---

9. 라우팅_테스트

개요

Angular Router를 사용한 페이지 이동을 테스트합니다.

코드 예제

it('라우팅 네비게이션 테스트', () => {
  const router = TestBed.inject(Router);
  const fixture = TestBed.createComponent(AppComponent);

  spyOn(router, 'navigate');
  fixture.componentInstance.goToHome();

  expect(router.navigate).toHaveBeenCalledWith(['/home']);
});

설명

Router의 navigate 메서드를 spyOn으로 감시하여 올바른 경로로 이동하는지 확인합니다.

---

10. 디렉티브_테스트

개요

커스텀 디렉티브의 동작을 테스트 컴포넌트를 통해 검증합니다.

코드 예제

@Component({ template: '<div appHighlight>Test</div>' })
class TestComponent {}

it('디렉티브 적용 테스트', () => {
  TestBed.configureTestingModule({
    declarations: [HighlightDirective, TestComponent]
  });
  const fixture = TestBed.createComponent(TestComponent);
  fixture.detectChanges();

  const div = fixture.nativeElement.querySelector('div');
  expect(div.style.backgroundColor).toBe('yellow');
});

설명

테스트용 컴포넌트를 만들어 디렉티브를 적용하고, DOM 스타일 변경 등 디렉티브의 효과를 검증합니다.

---

마치며

이번 글에서는 Angular 테스트 전략 완벽 가이드에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#Angular #Testing #Jasmine #Karma #TestBed