web-dev-qa-db-fra.com

Comment faire un test unitaire si un composant angular 2 contient un autre composant

Je suis assez nouveau pour angular 2.

J'ai un composant qui à son tour a quelques autres composants dans son modèle.

Comment écrire des tests unitaires pour vérifier si mon composant parent se compose d'autres composants.

Mentionner un échantillon ou me diriger vers une ressource serait vraiment utile.

MyComponent.ts:

import { Component } from '@angular/core';
@Component({
selector: 'my-component',
templateUrl: `<div>
<other-component></other-component>
</div>`
})
export class MyComponent{

}

OtherComponent.ts:

import { Component } from '@angular/core';
@Component({
selector: 'other-component',
templateUrl: `<div>
<h1>Other Component</h1>
</div>`
})
export class OtherComponent{

}
angularkarma-jasmineangular2-testing
14
Chan15

Pour tester si un composant, une fois compilé, contient d'autres composants:

  • Injectez le composant que vous testez
  • Injecter les composants enfants
  • Créer le composant parent
  • Détecter les changements
  • Utilisez querySelector ou querySelectorAll pour rechercher les composants enfants

En règle générale, je vérifie uniquement que l'élément existe, puis je teste davantage la spécification du composant enfant individuel.

import { TestBed, async } from '@angular/core/testing';

import { AppComponent } from './app.component';
import { OtherComponent } from './other/other.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        OtherComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it('should have the other component', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('app-other')).not.toBe(null);
  }));
});

La vérification de null avec querySelector déterminera si votre composant existe. Depuis querySelector MDN :

Renvoie null si aucune correspondance n'est trouvée; sinon, il renvoie le premier élément correspondant.

Si vous souhaitez vérifier qu'il existe plusieurs instances du même composant enfant, vous pouvez utiliser querySelectorAll et vérifier la propriété length:

expect(compiled.querySelectorAll('app-other').length).toBeGreaterThan(4);
22
silencedmessage

Dans la plupart des cas, vous testez simplement le composant externe. Si vous voulez juste angular pour ignorer les composants internes, la manière la plus simple est d'ajouter le NO_ERRORS_SCHEMA à votre spécification.

importer {NO_ERRORS_SCHEMA} à partir de '@ angular/core'

Et puis dans votre TestBed.configureTestingModule ajoutez la ligne:

schémas: [NO_ERRORS_SCHEMA]

Les tests ignoreront alors le fait que vous n'avez pas importé les composants internes dans votre composant HTML.

Si vous souhaitez tester le composant interne avec vos composants externes, si vous utilisez le angular-cli, vous verrez que le fichier component.spec qu'ils génèrent automatiquement pour vous inclut un tableau declarations qui fait partie de l'objet de configuration TestBed. Il vous suffit donc d'importer le fichier et d'ajouter le composant dans vos déclarations.

Donc, votre exemple ci-dessus:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';

import { MyComponent } from './my-component.component';
import { OtherComponent } from './other-component.component';

Ensuite, dans votre bloc describe, vous aurez un beforeEach

beforeEach(async(() =>{
  TestBed.configureTestingModule({
    declarations: [ MyComponent,
                    OtherComponent ]
  })
  .compileComponent();
})

Ensuite, vos composants devraient maintenant se compiler correctement sans erreurs. Si vous voulez voir l'ensemble de la configuration, générez simplement un nouveau projet dans angular-cli et jetez un œil aux documents techniques qu'il génère.

11
Felix Tsai