angular2 test, comment se moquer de sous-composant

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

Permet donc de commencer par dire que nous avons TaskListComponent qui affiche les tâches, et actualise à chaque fois que l'un d'eux est cliqué:

<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-composant avec la [task] d'entrée et de la (click) de sortie.

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

afin @Klas a suggéré que nous pouvons configurer notre TestModule avec:

schemas: [CUSTOM_ELEMENTS_SCHEMA]

On pourrait pas faire des erreurs lors de la construction ou de l'exécution, mais nous ne serons pas en mesure de tester beaucoup d'autres que l'existence de la sous-composant.

Alors, comment peut-on se moquer de sous-composants?

Nous allons d'abord définir un simulacre de la directive 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 module de test:

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

• Avis que parce que la génération de sous-élément de l'appareil qui se passe de manière asynchrone après sa création, nous activer son autoDetectChanges fonctionnalité.

Lors de nos tests, nous pouvons maintenant nous interroger pour la directive, d'accéder à ses DebugElement de l'injecteur, et profitez de notre maquette directive exemple à 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, pour nettoyeur de 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();
});

Merci à Eric Martinez, j'ai trouvé cette solution.

Nous pouvons utiliser overrideDirective fonction qui est documenté ici,
https://angular.io/docs/ts/latest/api/testing/TestComponentBuilder-class.html

Il faut trois prarmeters;
1. Composant à mettre en œuvre
2. Enfant composant à remplacer
3. Maquette composant

Résolu solution est ici, à http://plnkr.co/edit/a71wxC?p=preview

C'est l'exemple de code à partir de la plunker

import {MyNavbarComponent} from '../src/my-navbar.component';
import {MyToolbarComponent} from '../src/my-toolbar.component';

@Component({template:''})
class EmptyComponent{}

describe('MyComponent', () => {

  beforeEach(injectAsync([TestComponentBuilder], (tcb) => {
    return tcb
      .overrideDirective(MyComponent, MyNavbarComponent, EmptyComponent)
      .overrideDirective(MyComponent, MyToolbarComponent, EmptyComponent)
      .createAsync(MyComponent)
      .then((componentFixture: ComponentFixture) => {
        this.fixture = componentFixture;
      });
  ));

  it('should bind to {{foo}}', () => {
    let el = this.fixture.nativeElement;
    let myComponent = this.fixture.componentInstance;
    myComponent.foo = 'FOO';
    fixture.detectChanges();
    expect(el.innerHTML).toMatch('FOO');    
  });
});