연기가 있는 곳에 불이 있다. Pixabay의 blickpixel 님의 표지 사진.

이 기사에서는 수정 없이 전체TestBed를 로드하는 통합 테스트를 실행하기 위해 AppModule를 사용하여 Angular 애플리케이션용 스모크 테스트 스위트를 생성합니다. 이것은 우리가 TestBed로 얻을 수 있는 것처럼 종단 간 테스트에 사실상 가깝습니다.

애플리케이션 스모크 테스트 설정

먼저 Angular 애플리케이션의 AppModule 및 AppComponent에만 의존하는 스모크 테스트 설정을 살펴봅니다.

// if needed
// import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

import { AppComponent } from './app.component';
import { AppModule } from './app.module';

function setup() {
  TestBed.configureTestingModule({
    imports: [
      AppModule,
      RouterTestingModule,
      // if needed
      // HttpClientTestingModule,
    ],
  }).compileComponents();

  let rootFixture: ComponentFixture<AppComponent>;
  const initializeRootFixture = () => {
    if (rootFixture == null) {
      rootFixture = TestBed.createComponent(AppComponent);
    }
  };

  return {
    get router() {
      initializeRootFixture();

      return TestBed.inject(Router);
    },
    run<TResult>(task: () => TResult) {
      initializeRootFixture();

      return rootFixture.ngZone == null
        ? task()
        : rootFixture.ngZone.run(task);
    },
  };
}

Angular 애플리케이션 스모크 테스트를 위한 설정입니다.



Angular 테스트 모듈에서 AppModule를 가져오고 RouterTestingModule를 가져와 기록 및 위치 API를 스텁합니다.

공통 설정이 준비되면 Angular 애플리케이션에 대한 첫 번째 연기 테스트 케이스로 이동합니다.

애플리케이션이 부팅될 수 있는지 확인

이 첫 번째 스모크 테스트 사례는 응용 프로그램이 오류 없이 부팅되는지 확인합니다.

describe('Applicaton smoke test', () => {
  it('the application boots up', () => {
    const bootApplication = () => {
      const { router, run } = setup();

      run(() => router.initialNavigation());
    };

    expect(bootApplication).not.toThrow();
  });
});

이 테스트 케이스는 Angular 애플리케이션이 부팅될 수 있는지 확인합니다.


AppModule 함수를 통해 Angular 테스트 모듈에 setup를 로드한 후 라우팅을 설정하고 기본 경로로 이동합니다. 어설션 문은 이로 인해 오류가 발생하지 않는다는 것을 확인합니다.

우리는 AppModule뿐만 아니라 트리거하는 모든 구성 및 초기화를 실행하고 있기 때문에 응용 프로그램과 공동으로 Angular API의 넓은 영역에서 통합 테스트를 수행하고 있습니다.

내비게이션 작동 확인

다음 스모크 테스트 사례는 특정 경로(이 경우 경로 보호 및 경로 확인자를 포함하는 기본 경로)로의 탐색을 연습합니다.

describe('Applicaton smoke test', () => {
  it('navigation works', async () => {
    const { router, run } = setup();

    const canNavigate = await run(() => router.navigateByUrl('/'));

    expect(canNavigate).toBe(true);
  });
});

이 테스트 케이스는 Angular 애플리케이션에서 탐색이 작동하고 기본 경로에 도달할 수 있는지 확인합니다.


canNavigate는 기본 경로 탐색이 허용되고 성공한 경우 true로 확인됩니다. 라우트 가드가 액세스를 거부하거나 라우트 해석기가 실패하면 canNavigate will resolve to false`가 표시되고 어설션이 실패합니다.

애플리케이션의 대부분의 경로가 로그인으로 보호되는 경우 router.navigateByUrl('/')를 router.navigateByUrl('/login')로 변경하거나 로그인 설정을 테스트 스위트에 추가하십시오.

결론

Angular 테스트 피라미드.

통합 테스트에 TestBed를 사용하면 대부분의 종단 간 테스트 프레임워크보다 빠르고 구현이 빠르면서 실제 브라우저에서 하나 이상의 Angular 구성 요소를 렌더링하는 데 충분히 가깝기 때문에 구현 비용과 실행 속도 사이에서 큰 절충안을 얻을 수 있습니다. 이것은 우리에게 돈을 위해 큰 가치를 제공합니다.

부작용

실제 환경에서 부작용을 일으킬 수 있는 API 또는 서비스를 대체하기 위해 가짜 API 또는 서비스를 추가해야 할 수도 있습니다. 애플리케이션 이니셜라이저, OnInit 수명 주기 순간 또는 기타 Angular 트리거에 의해 트리거될 수 있습니다. 이들은 TestBed에서 제어하는 ​​Angular 테스트 모듈을 통해 추가됩니다.

스모크 테스트를 실행하는 동안 웹 API 끝점을 스텁하기 위해 Mock Service Worker와 같은 것을 고려할 수 있습니다. Tim Deschryver의 "Using MSW (Mock Service Worker) in an Angular project"을 읽고 the official Angular examples을 살펴보는 것이 좋습니다.

다음 단계

Angular 연기 테스트 제품군에 두 가지 테스트 사례를 추가했습니다. 첫 번째는 Angular 애플리케이션을 부팅해도 오류가 발생하지 않는지 확인합니다. 두 번째 테스트 사례는 기본 경로로의 탐색을 연습합니다.

또 다른 논리적 단계는 다른 경로로 이동하는 테스트 사례를 추가하는 것입니다. 훨씬 더 유용한 스모크 테스트 스위트는 응용 프로그램의 가장 중요한 사용 사례를 통과합니다.