Spectacular 시험판 v0.5는 독립 실행형 기능 테스트를 지원하고 부분 Ivy 컴파일을 사용합니다.

DALL-E의 커버 아트.

2022년 7월에 Angular용 통합 테스트 라이브러리인 우리published the version 0.5.0 of Spectacular가 출시되었습니다.

Note that for prerelase versions, that is versions <1.0.0, minor version increases indicate breaking changes, for example releasing version 0.4.0 introduces at least one breaking change compared to version 0.3.0. Patch version increases for prerelease versions indicate bugfixes, refactors, performance improvements, and/or feature additions.

이러한 버전의 주요 변경 사항과 기능에 대해 논의해 보겠습니다.

부분 아이비 컴파일

Spectacular 버전 0.1.0-0.4.0은 NGCC(Angular Compatibility Compiler)를 사용해야 하는 View Engine 호환 번들로 컴파일됩니다.

버전 0.5.0부터 Spectacular는 Angular <=12.2.0을 대상으로 하는 Angular 라이브러리에 대한 권장 사례와 같이 부분적으로 Ivy로 컴파일됩니다. NGCC를 제거하는 향후 Angular 버전부터 View Engine 호환 라이브러리의 작동이 중지됩니다.

부분 컴파일은 대부분의 라이브러리가 패키지 레지스트리에 게시되기 전에 컴파일되므로 성능이 향상됩니다. 그러나 컴포넌트 템플릿은 여전히 ​​애플리케이션 컨텍스트에서 컴파일되어야 합니다.

부분 Ivy 컴파일을 사용하려면 Spectacular 버전 0.5.0에 Angular 12 이상이 필요합니다.

독립형 기능 테스트 공급자

개발자 프리뷰에서 독립형 API가 고려되는 Angular 버전 14부터 독립형 Angular 구성 요소 및 기타 독립형 Angular API가 도입됨에 따라 Spectacular에서 독립형 API를 노출하기 시작합니다.

Spectacular의 첫 번째 독립 실행형 API는 Spectacular의 기능 테스트 API를 위한 독립 실행형 공급자 팩토리입니다.

Spectacular 버전 0.5.0에서는 기능 인식 탐색 서비스 provideSpectacularFeatureTest 및 독립 실행형 Angular 기능을 위한 SpectacularFeatureLocation 을 구성하는 SpectacularFeatureRouter 을 소개합니다.

Angular Testing Library 및 Spectacular를 사용하여 독립형 Angular 기능을 테스트하는 기능:

import {
  provideSpectacularFeatureTest,
  SpectacularAppComponent,
  SpectacularFeatureLocation,
  SpectacularFeatureRouter,
} from '@ngworker/spectacular';
import { render, screen } from '@testing-library/angular';
import { Matcher } from '@testing-library/dom';
import userEvent from '@testing-library/user-event';
import { crisisCenterPath } from '@tour-of-heroes/crisis-center';

const findCrisisCenterHomeGreeting = () =>
  screen.findByText(/welcome to the crisis center/i);
const findCrisisLink = (name: Exclude<Matcher, number>) =>
  screen.findByRole('link', {
    name,
  });
const findNameControl = () => screen.findByPlaceholderText(/name/i);
const findSaveButton = () =>
  screen.findByRole('button', { name: /save/i });
const findSelectedCrisis = (name: Matcher) =>
  screen.findByText(name, {
    selector: '.selected a',
  });
const setup = async () => {
  const user = userEvent.setup();
  const {
    fixture: {
      debugElement: { injector },
    },
  } = await render(SpectacularAppComponent, {
    providers: [
      provideSpectacularFeatureTest({
        featurePath: crisisCenterPath,
      }),
    ],
  });

  return {
    location: injector.get(SpectacularFeatureLocation),
    router: injector.get(SpectacularFeatureRouter),
    user,
  };
};

it('Edit crisis from crisis detail', async () => {
  const { location, router, user } = await setup();
  const crisisId = 2;
  await router.navigate(['~', crisisId]);

  await user.clear(await findNameControl());
  await user.type(
    await findNameControl(),
    'The global temperature is rising'
  );
  await user.click(await findSaveButton());

  expect(
    await findSelectedCrisis(/the global temperature is rising/i)
  ).toBeInTheDocument();
  expect(location.path()).toBe(`~/;id=${crisisId};foo=foo`);
});

it('Edit crisis from crisis center home', async () => {
  const { router, user } = await setup();
  await router.navigateByUrl('~/');

  await user.click(
    await findCrisisLink(/procrastinators meeting delayed again/i)
  );

  await user.clear(await findNameControl());
  await user.type(await findNameControl(), 'Coral reefs are dying');
  await user.click(await findSaveButton());

  expect(await findCrisisCenterHomeGreeting()).toBeInTheDocument();
  expect(
    await findSelectedCrisis(/coral reefs are dying/i)
  ).toBeInTheDocument();
});

이전 예제를 다음 코드 조각과 비교하면 차이점은 setup SIFERS에서 Angular Testing Library의 provideSpectacularFeatureTest 기능을 구성하는 옵션을 조정하기 위해 SpectacularFeatureTestingModule 대신 render 을 사용하는 것입니다.

Angular Testing Library 및 Spectacular를 사용하는 Angular 기능 모듈의 기능 테스트 설정SIFERS:

import {
  SpectacularAppComponent,
  SpectacularFeatureLocation,
  SpectacularFeatureRouter,
  SpectacularFeatureTestingModule,
} from '@ngworker/spectacular';
import { render } from '@testing-library/angular';
import userEvent from '@testing-library/user-event';
import {
  CrisisCenterModule,
  crisisCenterPath,
} from '@tour-of-heroes/crisis-center';

const setup = async () => {
  const user = userEvent.setup();
  const {
    fixture: {
      debugElement: { injector },
    },
  } = await render(SpectacularAppComponent, {
    imports: [
      SpectacularFeatureTestingModule.withFeature({
        featureModule: CrisisCenterModule,
        featurePath: crisisCenterPath,
      }),
    ],
  });

  return {
    location: injector.get(SpectacularFeatureLocation),
    router: injector.get(SpectacularFeatureRouter),
    user,
  };
};

기능 테스트 API를 사용하는 더 많은 예는 the source code for Spectacular을 참조하거나 our documentation을 방문하십시오.