Mocking des composants enfants - Angular 2

Question

Comment simuler un composant enfant lors d'un test ? J'ai un composant parent appelé product-selected dont le modèle ressemble à ceci :

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

La déclaration du composant ressemble à ceci :

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 {}

Ce composant n'est en fait qu'un emplacement pour les autres composants et ne contiendra probablement pas d'autres fonctions.

Mais lorsque je mets en place les tests, j'obtiens l'erreur de modèle suivante, répétée pour les trois composants :

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>

J'ai essayé de charger une version simulée des composants enfants mais je ne sais pas comment faire - les exemples que j'ai vus ne font que surcharger le parent et ne mentionnent même pas les composants enfants. Alors, comment faire ?

Answer 1

Attention aux NO_ERRORS_SCHEMA . Citons une autre partie de la même documentation :

Les tests de composants peu profonds avec NO_ERRORS_SCHEMA simplifient grandement les tests unitaires de modèles complexes. Cependant, le compilateur ne vous signale plus les erreurs telles que les composants et directives mal orthographiés ou mal utilisés.

Je trouve cet inconvénient tout à fait contraire aux objectifs de la rédaction d'un test. D'autant plus qu'il n'est pas très difficile de se moquer d'un composant de base.

Une approche qui n'a pas encore été mentionnée ici consiste simplement à les déclarer au moment de la configuration :

@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 2

J'ai trouvé une solution presque parfaite, qui permet également de générer correctement des erreurs si quelqu'un remanie un composant : https://www.npmjs.com/package/ng-mocks

npm install ng-mocks --save-dev

Maintenant, dans votre fichier .spec.ts, vous pouvez faire

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

Cela crée un nouveau composant anonyme qui a le même sélecteur, @Input() y @Output() les propriétés de la ChildComponent mais sans code.

Supposons que votre ChildComponent a une @Input() childValue: number qui est lié à votre composant testé, <app-child-component [childValue]="inputValue" />

Bien qu'il ait été tourné en dérision, vous pouvez utiliser By.directive(ChildComponent) dans vos tests, ainsi que By.css('app-child-component') ainsi

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

  const child: ChildComponent = element.componentInstance;
  expect(child.childValue).toBe(5);
});

Answer 3

Généralement, si vous avez un composant utilisé dans la vue du composant que vous testez et que vous ne voulez pas nécessairement déclarer ces composants parce qu'ils peuvent avoir leurs propres dépendances, afin d'éviter l'utilisation de l'option "quelque chose n'est pas un élément connu" vous devez utiliser NO_ERRORS_SCHEMA .

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

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

D'après les documents :

Ajoutez NO_ERRORS_SCHEMA aux métadonnées des schémas du module de test pour indiquer au compilateur d'ignorer les éléments et attributs non reconnus. Vous n'avez plus à déclarer des composants et des directives non pertinents.

Plus d'informations sur ce sujet : https://angular.io/docs/ts/latest/guide/testing.html#!#shallow-component-test

Answer 4

J'ai posé cette question afin de pouvoir poster une réponse car je me suis débattu avec ce problème pendant un jour ou deux. Voici comment procéder :

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

Vous devez enchaîner les overrideComponent pour chacun des composants enfants.