test angular2, comment simuler un sous-composant

Comme demandé, je poste une autre réponse sur la façon de se moquer de sous-composants input/output:

commençons donc par dire que nous avons TaskListComponent qui affiche les tâches, et se rafraîchit chaque fois que l'une d'elles est cliquée:

<div id="task-list">
  <div *ngFor="let task of (tasks$ | async)">
    <app-task [task]="task" (click)="refresh()"></app-task>
  </div>
</div>

app-task est un sous-élément [task] et (click) sortie.

Ok super, maintenant nous voulons écrire des tests pour mon TaskListComponent et bien sûr, nous ne voulons pas de test réel app-taskcomposant.

comme @Klas nous a suggéré de configurer notre TestModule avec:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

il se peut que nous n'ayons pas d'erreurs à la compilation ou à l'exécution, mais nous ne pourrons pas tester autre chose que l'existence du sous-composant.

alors comment pouvons-nous simuler des sous-composants?

nous allons d'abord définir une directive mock pour notre sous-composant (même sélecteur):

@Directive({
  selector: 'app-task'
})
class MockTaskDirective {
  @Input('task')
  public task: ITask;
  @Output('click')
  public clickEmitter = new EventEmitter<void>();
}

Maintenant, nous allons déclarer dans le test module:

let fixture : ComponentFixture<TaskListComponent>;
let cmp : TaskListComponent;

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [TaskListComponent, **MockTaskDirective**],
    // schemas: [CUSTOM_ELEMENTS_SCHEMA],
    providers: [
      {
        provide: TasksService,
        useClass: MockService
      }
    ]
  });

  fixture = TestBed.createComponent(TaskListComponent);
  **fixture.autoDetectChanges();**
  cmp = fixture.componentInstance;
});

• notez que puisque la génération du sous-composant de l'appareil se produit de façon asynchrone après sa création, nous activons sa fonctionnalité autoDetectChanges.

dans nos tests, nous pouvons maintenant interroger la directive, accéder à L'injecteur de son Débugelement, et obtenir notre instance de la directive mock à travers elle:

import { By } from '@angular/platform-browser';    
const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));
const mockTaskCmp = mockTaskEl.injector.get(MockTaskDirective) as MockTaskDirective;

[Cette partie doit être habituellement beforeEach section, propre code.]

à Partir d'ici, les tests sont un morceau de gâteau :)

it('should contain task component', ()=> {
  // Arrange.
  const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));

  // Assert.
  expect(mockTaskEl).toBeTruthy();
});

it('should pass down task object', ()=>{
  // Arrange.
  const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));
  const mockTaskCmp = mockTaskEl.injector.get(MockTaskDirective) as MockTaskDirective;

  // Assert.
  expect(mockTaskCmp.task).toBeTruthy();
  expect(mockTaskCmp.task.name).toBe('1');
});

it('should refresh when task is clicked', ()=> {
  // Arrange
  spyOn(cmp, 'refresh');
  const mockTaskEl = fixture.debugElement.query(By.directive(MockTaskDirective));
  const mockTaskCmp = mockTaskEl.injector.get(MockTaskDirective) as MockTaskDirective;

  // Act.
  mockTaskCmp.clickEmitter.emit();

  // Assert.
  expect(cmp.refresh).toHaveBeenCalled();
});