Mocking Child Components - Angular 2

Ответ 1

Осторожно о NO_ERRORS_SCHEMA. Позвольте процитировать другую часть того же документа:

Неглубокие тесты компонентов с помощью NO_ERRORS_SCHEMA значительно упрощают модульное тестирование сложных шаблонов. Однако компилятор больше не предупреждает вас о таких ошибках, как неправильные или неправильно используемые компоненты и директивы.

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

Подход, еще не упомянутый здесь, - это просто объявить их во время конфигурации:

@Component({
  selector: 'product-settings',
  template: '<p>Mock Product Settings Component</p>'
})
class MockProductSettingsComponent {}

@Component({
  selector: 'product-editor',
  template: '<p>Mock Product Editor Component</p>'
})
class MockProductEditorComponent {}

...  // third one

beforeEach(() => {
  TestBed.configureTestingModule({
      declarations: [
        ProductSelectedComponent,
        MockProductSettingsComponent,
        MockProductEditorComponent,
        // ... third one
      ],
      providers: [/* your providers */]
  });
  // ... carry on
});

Ответ 2

Нашел почти идеальное решение, которое также будет корректно выдавать ошибки, если кто-то реорганизует компонент.

npm install --only=dev ng-mocks

Теперь в вашем .spec.ts вы можете сделать

import { MockComponent } from 'ng-mocks';
import { ChildComponent } from './child.component.ts';
...
  beforeEach(
async(() => {
  TestBed.configureTestingModule({
    imports: [FormsModule, ReactiveFormsModule, RouterTestingModule],
    declarations: [
      ComponentUnderTest,
      MockComponent(ChildComponent),
      ...

Это создает новый анонимный компонент, который имеет те же свойства селектора, свойства @Input() и @Output() объекта ChildComponent, но без прикрепленного кода.

Предположим, что ваш ChildComponent имеет @Input() childValue: number, которое связано с тестируемым компонентом, <app-child-component [childValue]="inputValue"/>

Единственный недостаток, который я обнаружил до сих пор, это то, что вы не можете использовать By.directive(ChildComponent) в своих тестах при изменении типа, но вместо этого вы можете использовать By.css('app-child-component') как так

it('sets the right value on the child component', ()=> {
     component.inputValue=5;
     fixture.detectChanges();
     const element = fixture.debugElement.query(By.css('app-child-component'));
     expect(element).toBeTruthy();

     const child: ChildComponent = element.componentInstance;

     expect(child.childValue).toBe(5);
});

Ответ 3

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

import { NO_ERRORS_SCHEMA }          from '@angular/core';

TestBed.configureTestingModule({
        declarations: declarations,
        providers: providers
        schemas:      [ NO_ERRORS_SCHEMA ]
  })

На основе документов:

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

Подробнее об этом: https://angular.io/docs/ts/latest/guide/testing.html#!#shallow-component-test

Ответ 4

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

let declarations = [
  ProductSelectedComponent,
  ProductSettingsComponent,
  ProductEditorComponent,
  ProductOptionsComponent
];

beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: declarations,
            providers: providers
        })
        .overrideComponent(ProductSettingsComponent, {
            set: {
                selector: 'product-settings',
                template: `<h6>Product Settings</h6>`
            }
        })
        .overrideComponent(ProductEditorComponent, {
            set: {
                selector: 'product-editor',
                template: `<h6>Product Editor</h6>`
            }
        })
        .overrideComponent(ProductOptionsComponent, {
            set: {
                selector: 'product-options',
                template: `<h6>Product Options</h6>`
            }
        });

        fixture = TestBed.createComponent(ProductSelectedComponent);
        cmp = fixture.componentInstance;
        de = fixture.debugElement.query(By.css('section'));
        el = de.nativeElement;
    });

Вам нужно связать функцию overrideComponent для каждого из дочерних компонентов.