Есть ли способ настроить component.spec.ts автоматически?

Question

Я добавляю юнит-тесты в приложение Angular 7. У меня есть 100 компонентов для тестирования, по крайней мере, и каждый из них дает сбой из-за конфигурации: им нужно объявление каждой необходимой зависимости.

Это мой component.spec.ts, где находится конфигурация при выполнении ng test:

    import { async, ComponentFixture, TestBed } from 
    '@angular/core/testing';

    import { myComponent } from './mycomponent';
    import { FontAwesomeModule } from '@fortawesome/angular- 
    fontawesome';

    describe('myComponent', () => {
      let component: myComponent;
      let fixture: ComponentFixture<myComponent>;

      beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [ myComponent ],
          imports: [
            FontAwesomeModule
            // + Others imports
          ]
        })
        .compileComponents();
      }));

      beforeEach(() => {
        fixture = TestBed.createComponent(myComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });

      it('should create', () => {
        expect(component).toBeTruthy();
      });
    });

В некоторых компонентах я добавляю провайдеров. В некоторых случаях я использую mockService. Все, что я сделал, исходит из угловых документов.

Есть ли способ легко или автоматически настроить модульные тесты (или сквозные тесты) с Angular вместо добавления каждого модуля, необходимого вручную?

Я использую Angular 7, жасмин (3.3.1) и карму (4.0.0).

Answer 1

Я обычно импортирую все зависимости по отдельности, так как проверяю, что тест загружает только те зависимости, которые ему действительно нужны. Тем не менее, я нашел способ легко сделать все зависимости доступными для вашего тестового скрипта без необходимости индивидуального импорта каждой зависимости. Вместо того, чтобы импортировать все зависимости по отдельности, импортируйте модуль, который объявляет ваш компонент тестируемым. Импортируя модуль в свой модульный тест, вы сделаете все зависимости, включая сервисы и сам компонент, доступными для ваших тестов.

Я обычно беру на себя задачу объявления зависимостей, чтобы избежать перегрузки теста кодом, который он не использует, что, теоретически, как правило, замедляет выполнение тестов. Похоже, что это может быть хорошо для вашего варианта использования, так как у вас есть так много тестов, чтобы написать.

Кроме потери скорости я не знаю других недостатков, но они могут быть. Если кто-то знает, пожалуйста, добавьте их в качестве комментариев к этому сообщению.

PS Могут быть зависимости, которые импортируются вашим AppModule. Возможно, их придется импортировать по отдельности вместе с модулем объявления компонента.

Тестовый скрипт

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { EasyImportComponent } from './easy-import.component';
import { EasyImportModule } from './easy-import.module';

describe('EasyImportComponent', () => {
  let component: EasyImportComponent;
  let fixture: ComponentFixture<EasyImportComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ EasyImportModule ]
        //, declarations: [ EasyImportComponent ] <-- No longer needed since module declares this already
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(EasyImportComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Answer 2

Я провел несколько исследований о том, как лучше всего тестировать с Angular, и нашел здесь ответ с несколькими решениями и отличными объяснениями!