Angulaire de 5 essais de: comment faire pour obtenir une référence vers le composant enfant

Je suis en train de tester l'interaction entre un composant hôte et un composant enfant dans Angulaire de l'application. Je ne sais pas comment faire pour obtenir une référence à l'enfant composant créé lorsque le parent est créé. Voici la configuration:

enfant.composante.spec.ts

@Component({template: `<child [data]="model"></child>`})
class HostComponent {
  public model:any;
}

describe('ChildComponent', () => {
  let hostFixture: ComponentFixture<HostComponent>;
  let childFixture: ComponentFixture<ChildComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ChildComponent, HostComponent]
    });
  }));

  beforeEach(() => {
    //this creates the child component as well, but how to get to it?
    hostFixture = TestBed.createComponent(HostComponent);

    //this creates a NEW instance of child component, not the one from the Host template
    //so it's not the instance I actually want to test
    childFixture = TestBed.createComponent(ChildComponent);
  });
});

La modification de la model valeur dans hostFixture.componentInstance ne change en fait la data valeur d'entrée de childFixture.componentInstance; c'est pourquoi j'ai réalisé qu'il y a deux instances de composant enfant.

Ma question est simple, comment puis-je obtenir childFixture pour désigner le composant luminaire trouvé dans les HostComponent modèle, au lieu d'une instance à l'autre que j'ai actuellement?

Les docs n'ai pas été utile.

  • Généralement, vous pouvez accéder à l'enfant de l'afficher à l'aide du composant parent luminaire.Pourquoi la nécessité, pour Enfant composant de luminaire?
  • Parce que je suis intéressé à tester les propriétés du composant et les méthodes en réaction à des changements dans les valeurs d'entrée de jeu dans le modèle hôte. Un exemple serait de tester les deux sens de la liaison de données entre l'hôte et l'enfant.
  • Comment se fait que les documents n'étaient pas utiles? C'est exactement le scénario qui y est décrite.
InformationsquelleAutor BeetleJuice | 2017-12-13
  1. 40

    Comme expliqué dans le guide, hôte instance de composant est créé avec TestBed.createComponent, et de l'enfant instance de composant peut être sélectionné à partir de debugElement avec Par helper:

    childDebugElement = hostFixture.debugElement.query(By.directive(ChildComponent));

    Ou:

    childDebugElement = hostFixture.debugElement.query(By.css('child'));
    • Ne serait-ce pas votre code me donner un debugElement? Je vais essayer d'obtenir le composant lui-même, et non pas un élément du modèle.
    • Ce n'est pas élément du modèle. C'est angulaire.io/api/core/DebugElement . Vous pouvez obtenir de l'instance avec childDebugElement.componentInstance.
    • Qui fonctionne vraiment!!
    • Je voulais accéder aux propriétés des composants. Pour moi childDebugElement.context a fait le tour ici. +1 pour me guider vers la solution. Merci!
    • C'est plus Par.css('app-enfant") préfixe doit être inclus
    • Si quelqu'un d'autre a ce problème, qui By n'est pas disponible juste comme ça, ici, c'est l'instruction d'importation: import { By } from '@angular/platform-browser';

    InformationsquelleAutor Estus Flask
  2. 4

    La réponse ci-dessus est bon, répond le corps de la question, mais l'en-tête/titre de la question demande quelque chose d'autre. Je voulais répondre à la question posée par l'en-tête ainsi. Estus réponse est bonne pour le cas d'utilisation spécifiques, mais Google vous amène ici basé sur la question dans le titre.

    Pour obtenir le Composant enfant pas l'élément naturel:

    Composant de Test (appelé HostComponent dans la question): <child [data]="model" #child></child>

    Alors dans la définition de classe: 

    @Component({template: `<child #child [data]="model"></child>`})
class HostComponent {
    public model:any;
    @ViewChild('child') child;
}

    Enfin, lors de l'essai, sur un spec:

    it('should do something', () => {
    component.child.value
    component.child.method
    //etc.
}

    Vous pouvez l'utiliser dans un cas de test, et je n'ai, pour trouver le composant enfant que vous êtes vraiment en train de tester.

    Le reste est de satisfaire à un aspect discutable grandi dans les commentaires.

    Il y a aussi un dossier solide pour faire des choses quand c'est possible. Je ne suis pas sûr de ce que je ressens à ce sujet si vous voulez de l'unité de test. Si vous voulez tester un membre privé, vous devez laisser le tapuscrit compilateur que vous voulez de l'objet avec les membres privés accessibles au public par moulage sous et en l'enveloppant dans des parenthèses pour rendre clair ce que vous êtes à la coulée.

    Le composant:

    ...
    @ViewChild('child') private child;
...

    Dans le test:

    ...
    (<any>component).child.value
    (<any>component).child.method
...
    • J'ai essayé les spécifications fournies par vous, mais je suis Cannot read property 'next' of undefined. ici, next est un nom de méthode, je suis en train de l'accès.
    • que faites-vous appel à la méthode suivante sur?
    • @ViewChild('child') child; devrait être privé
    • merci. Je n'avais pas entendu parler avant. Avez-vous des documents à l'appui de qui?
    InformationsquelleAutor Steven Lacks