Предварительный релиз Spectacular v0.5 поддерживает автономные тесты функций и использует частичную компиляцию Ivy

Автор обложки — DALL-E.

В июле 2022 года мы опубликовали версию 0.5.0 Spectacular, библиотеки интеграционного тестирования для Angular.

Обратите внимание, что для предрелизных версий, то есть версий <1.0.0, незначительное увеличение версии указывает на разрывные изменения, например, выпуск версии 0.4.0 вносит как минимум одно разрывное изменение по сравнению с версией 0.3.0. Увеличение версии патча для предварительных версий указывает на исправления ошибок, рефакторы, улучшение производительности и/или добавление функций.

Давайте обсудим особенности и разрывные изменения этих версий.

Частичная компиляция Ivy

Spectacular версии 0.1.0-0.4.0 компилируются как совместимые с View Engine пакеты, требующие использования Angular Compatibility Compiler (NGCC).

Начиная с версии 0.5.0, Spectacular частично скомпилирован в Ivy, что является рекомендуемой практикой для библиотек Angular, нацеленных на Angular <=12.2.0. Начиная с будущей версии Angular, в которой будет удален NGCC, совместимые с View Engine библиотеки перестанут работать.

Частичная компиляция улучшает производительность, так как большая часть библиотеки компилируется перед публикацией в реестр пакетов. Однако шаблоны компонентов по-прежнему должны быть скомпилированы в контексте приложения.

Чтобы использовать частичную компиляцию Ivy, Spectacular версии 0.5.0 требует как минимум Angular 12.

Автономный поставщик функциональных тестов

С появлением автономных компонентов Angular и других автономных API Angular, начиная с версии 14 Angular, в которой автономные API рассматриваются в предварительной версии для разработчиков, мы начинаем раскрывать автономные API в Spectacular.

Первый автономный API Spectacular — это фабрика автономных провайдеров для API тестирования функций Spectacular.

В версии 0.5.0 Spectacular появился provideSpectacularFeatureTest, который конфигурирует навигационные сервисы SpectacularFeatureLocation и SpectacularFeatureRouter для автономных функций Angular.

Тестирование отдельной функции Angular с помощью библиотеки тестирования Angular и Spectacular:

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, где мы используем provideSpectacularFeatureTest вместо SpectacularFeatureTestingModule для настройки параметров конфигурации функции render библиотеки тестирования Angular.

Настройка SIFERS для тестирования функционального модуля Angular с помощью Angular Testing Library и Spectacular:

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,
  };
};

Вход в полноэкранный режим Выход из полноэкранного режима

Смотрите исходный код Spectacular для получения дополнительных примеров использования API тестирования функций или посетите нашу документацию.