Как протестировать компонент angular 2 с вложенными компонентами внутри со своими зависимостями? (TestBed.configureTestingModule)

У меня есть компонент A, который использует компонент B, c, D в своем шаблоне:

###template-compA.html

    <comp-b></comp-b>
    <comp-c [myinput]="obj.myinput"></comp-c>
    <comp-d ></comp-d>

... и т.д.

Чтобы упростить, скажем, их только одна директива в компоненте A:

 ###template-compA.html

    <comp-b></comp-b>

Мой comp-b имеет свои собственные зависимости (службы или другие comp).

Если я хочу протестировать comp-a следующим образом:

TestBed.configureTestingModule({
    declarations: [comp-A],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

он не будет работать должным образом. Поэтому я:

TestBed.configureTestingModule({
    declarations: [comp-A, comp-B],
    imports: [ReactiveFormsModule],
}).overrideComponent(FAQListComponent, {
    set: {
    providers: [
        { provide: comp-AService, useValue: comp-AListSVC }
    ]
    }
})
    .compileComponents();

Это не работает, так как comp-b не имеет собственных зависимостей. И здесь я смущен, как я могу сделать unit test, если мне нужно каждый раз импортировать и удалять все остальные компоненты? Это похоже на очень большой объем работы. Есть ли другой способ? Какова была бы лучшая практика для тестирования компонента с вложенными компонентами, которые имеют свои собственные зависимости?

Большое спасибо,

Stéphane.

Ответ 1

Если вам не нужно ссылаться на comp-b каким-либо образом в ваших тестах, вы можете добавить schemas: [NO_ERRORS_SCHEMA] в конфигурацию TestBed или переопределить шаблон comp-A и удалить тег для comp-b

Если вам нужно ссылаться на comp-b, вам может не понадобиться предоставлять его зависимостями специально в переопределении.

Настройка providers в overrideComponent необходима только в том случае, если зависимость указана в самом компоненте. (Если у вас есть список поставщиков в comp-A.ts)

скажем, comp-b требуется comp-AService и comp-AService в вашем переопределении comp-A, так как comp-b является дочерним элементом comp-A, для него будет предоставлен comp-AService.

Если вы предоставляете эти зависимости в своем app.module или где-то выше самого компонента, вам не нужно переопределять. Например, если comp-b нуждается в comp-AService и someOtherService, которые оба предоставляются в вашей app.module, ваша конфигурация TestBed может выглядеть так:

TestBed.configureTestingModule({
  declarations: [comp-A, comp-B],
  imports: [ReactiveFormsModule],
  providers: [
    { provide: comp-AService, useValue: comp-AListSVC },
    { provide: someOtherService, useValue: someOtherServiceSVC }
  ]
})

Edit:

Подробнее о тестировании неглубоких компонентов вы можете прочитать здесь:

https://angular.io/guide/testing#shallow-component-tests-with-no_errors_schema

Ответ 2

Следуя совету @yurzui:

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [comp-a],
      schemas: [NO_ERRORS_SCHEMA]
    })
      .compileComponents();
  }));