Tests d'intégration Angular - Writing pour un composant enfant référençant un composant via @ViewChild

Question

Je dois écrire le cas de test où il appelle la fonction dans la fonction.

1. c'est le composant principal dont je veux écrire le cas de test. Vous voulez écrire un test unitaire pour la fonction openModel.

@ViewChild(SecondComponent) public secondComponent: SecondComponent; 
 

 
openModal() { 
 
    this.secondComponent.showModal(); 
 
}

2. Ceci est le deuxième composant qui a showModal fonction.

@ViewChild(ModalComponent) public modalComponent: ModalComponent; 
 

 
public showModal() { 
 
    this.modalComponent.showModal(); 
 
}

3. Ceci est ma tentative de cas de test jusqu'à présent.

it(
 
    'should open drop modal',() => { 
 
    const showModalSpy = spyOn(SecondComponent, 'showModal').and.callThrough(); 
 
    component.openModal(); 
 
    expect(showModalSpy).toHaveBeenCalled(); 
 
    } 
 
);

Answer 1

Eh bien, ce que vous voulez vraiment faire ici est d'écrire le test d'intégration pour vos MainComponentopenModal. Donc, vous devriez vous demander, que fait cette méthode?

Règle de pouce pour l'écriture des tests d'automatisation: Vous devriez toujours se concentrer sur les tests que l'unité (MainComponent dans ce cas) fait. Tout le reste (SecondComponent) dans ce cas, peut être moqué.

Maintenant, pour répondre à la question que vous allez vous demander en écrivant le test est la méthode openModal appelle une fonction nommée showModal sur la propriété secondComponent que vous avez sur votre MainComponent.

Ainsi, selon la Règle de Pouce, nous moquons la méthode showModal sur la secondComponent que nous pouvons obtenir de la propriété de componentInstancefixture.

Ainsi, vos tests d'intégration pour ce qui devrait ressembler à ce qui suit:

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

 
import { MainComponent } from './main.component'; 
 
import { ModalComponent } from './../modal/modal.component'; 
 
import { SecondComponent } from './../second/second.component'; 
 

 
describe('MainComponent',() => { 
 
    let component: MainComponent; 
 
    let fixture: ComponentFixture<MainComponent>; 
 

 
    beforeEach(async(() => { 
 
    TestBed.configureTestingModule({ 
 
     declarations: [ MainComponent, ModalComponent, SecondComponent ] 
 
    }) 
 
    .compileComponents(); 
 
    })); 
 

 
    beforeEach(() => { 
 
    fixture = TestBed.createComponent(MainComponent); 
 
    component = fixture.componentInstance; 
 
    fixture.detectChanges(); 
 
    }); 
 

 
    it('should be created',() => { 
 
    expect(component).toBeTruthy(); 
 
    }); 
 

 
    describe('openModal',() => { 
 

 
    it('should call the `showModal` method on the `secondComponent` property we have on our component',() => { 
 
     // Arrange 
 
     let secondComponent = component.secondComponent; 
 
     let spy = spyOn(secondComponent, 'showModal'); 
 

 
     // Act 
 
     component.openModal(); 
 
    
 
     // Assert 
 
     expect(spy).toHaveBeenCalled(); 
 

 
    }); 
 

 
    }); 
 

 
});

Hope this helps!