OverrideComponent с TestBed

Question

Я имею MainComponent который использует ChildComponentA как @ViewChild, MainComponent вызывает метод на ChildComponentA,

Я хочу написать юнит тестовый кейс ChildComponentA, Как я могу сделать это с помощью TestBed (в Angular 2 RC5)?

До того, как я использовал overrideDirective(MainComponentName, ChildComponentA, MockChildComponentA); Есть ли эквивалент этого использования TestBed?

Я пытался с помощью

TestBed.overrideComponent(ChildComponentA,{
        set: {
          template: '<div></div>'
        }
      }); 

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

Answer 1

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

@Component({
  selector: 'child',
  template: '<div></div>'
})
class MockComponent {

}

И в вашем тесте сделайте это, чтобы использовать фиктивный компонент:

    TestBed.configureTestingModule({
        imports: [MyModule],
        declarations: [ParentComponent, MockComponent]
    });

    TestBed.overrideModule(MyModule, {
        remove: {
            declarations: [ParentComponent, ChildComponent],
            exports: [ParentComponent, ChildComponent]
        }
    });

Более подробная информация здесь: https://github.com/angular/angular/issues/10689. Обязательно повторно объявите ParentComponent, иначе он не работает (не знаю почему).

Если вы используете @ViewChild для получения ссылки на дочерний компонент, вам нужно будет изменить его, чтобы использовать не тип компонента, а идентификатор. Используйте @ViewChild('child') вместо @ViewChild(ChildComponent). Смотрите второй пример отсюда: http://learnangular2.com/viewChild/

Answer 2

Обратите внимание, что если ChildComponent объявляется в самом TestModule, нет необходимости переопределять модуль, в котором был объявлен оригинал.

Итак, если ваше объявление TestBed выглядит так:

TestBed.configureTestingModule({
    declarations: [
        ParentComponent,
        ChildComponent         // This is what you'd like to mock
    ]
});

Затем, чтобы переопределить ChildComponent все, что тебе нужно:

@Component({
    selector: 'child',
    template: '<div></div>'
})
class MockChildComponent {
}

TestBed.configureTestingModule({
    declarations: [
        ParentComponent,
        MockChildComponent      // Notice the original is replaced by the mock
    ]
});

Так долго как ChildComponent а также MockChildComponent есть тот же селектор, этот должен работать.

Другой ответ на этот вопрос работает для случаев, когда ChildComponentприносится из другого модуля в Подопытный.

Запись

Если твой ChildComponent есть какие-либо @Input или @Output, а затем включите их в свой MockChildComponent.