Przedszkole Komponenty dla dzieci - Angular 2

Question

W jaki sposób kpisz z komponentu potomnego podczas testowania? Mam składnik nadrzędny o nazwie product-selected którego szablon wygląda tak:

<section id="selected-container" class="container-fluid"> 
    <hr/> 
    <product-settings></product-settings> 
    <product-editor></product-editor> 
    <product-options></product-options> 
</section> 

i deklaracji komponent wygląda następująco:

import { Component, Input }    from '@angular/core'; 

import { ProductSettingsComponent } from '../settings/product-settings.component';          
import { ProductEditorComponent } from '../editor/product-editor.component';          
import { ProductOptionsComponent } from '../options/product-options.component';           

@Component({ 
    selector: 'product-selected', 
    templateUrl: './product-selected.component.html', 
    styleUrls: ['./product-selected.component.scss'] 
}) 
export class ProductSelectedComponent {} 

Ten składnik jest naprawdę tylko miejsce na inne składniki do życia i prawdopodobnie nie będzie zawierać żadnych innych funkcji.

Ale kiedy skonfigurować badań pojawia się następujący błąd szablon, powtarza się dla wszystkich trzech komponentów:

Error: Template parse errors: 
    'product-editor' is not a known element: 
    1. If 'product-editor' is an Angular component, then verify that it is part of this module. 
    2. If 'product-editor' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" 
     <hr/> 
     <product-settings></product-settings> 
     [ERROR ->]<product-editor></product-editor> 

Próbowałem załadować szydzili wersję składników podrzędnych, ale nie wiem jak do zrobienia - przykłady, które widziałem, tylko przesłoniły rodzica i nawet nie wspominają o komponentach potomnych. Więc jak mam to zrobić?

Answer 1

Ogólnie rzecz biorąc, jeśli w widoku komponentu, który testujesz, używany jest komponent i nie chcesz go zadeklarować, ponieważ mogą one mieć własne zależności, aby uniknąć ** coś nie jest znanym elementem: ** błąd powinieneś użyć NO_ERRORS_SCHEMA.

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

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

podstawie docs:

Dodaj NO_ERRORS_SCHEMA do schematów metadanych modułu testera, aby poinformować kompilator ignorować nierozpoznane elementy i atrybuty. Nie musisz już deklarować nieistotnych komponentów i dyrektyw.

Więcej na ten temat: https://angular.io/docs/ts/latest/guide/testing.html#!#shallow-component-test

Answer 2

Wysłałem to pytanie, więc mogłem opublikować odpowiedź, gdy walczyłem z tym przez dzień lub dwa. Oto jak to zrobić:

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

Musisz łańcucha funkcję overrideComponent dla każdego z elementów podrzędnych.

Answer 3

Staranne o NO_ERRORS_SCHEMA. Przytoczmy kolejną część tego samego dokumentu:

Testy płytkich komponentów z NO_ERRORS_SCHEMA znacznie upraszczają testowanie jednostkowe złożonych szablonów. Jednak kompilator nie ostrzega już o błędach, takich jak błędne lub niewłaściwe użycie komponentów i dyrektyw.

Uważam, że ta wada jest całkiem sprzeczna z celami napisania testu. Tym bardziej, że nie jest trudno wyśmiać podstawowy komponent.

Podejście jeszcze nie wspomniano tutaj jest po prostu zadeklarować je w czasie config:

@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 
}); 

Answer 4

Znaleziono prawie idealne rozwiązanie, które będzie również prawidłowo rzucać błędy jeśli ktoś refactors komponent.

npm install mock-component 

Teraz w swoim .spec.ts można zrobić

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

ta tworzy nowy anonimowy składnik, który ma ten sam przełącznik, @Input() i @Output() właściwości ChildComponent, ale bez żadnego kodu.

Załóżmy, że ChildComponent ma @Input() childValue: number, który jest związany z komponentu badanego, <app-child-component [childValue]="inputValue" />

Jedynym minusem znalazłem do tej pory, jest to, że nie można używać By.directive(ChildComponent) w badaniach, jak typ zmian, ale zamiast tego można użyć By.css('app-child-component') jak tak

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