NickName:Chan15 Ask DateTime:2016-11-11T12:29:43

How to unit test if an angular 2 component contains another component

I'm quite new to angular 2.

I have a component which in turn has some other components in its template.

How do I write unit tests to check if my parent component consists of other components.

Mentioning a sample or directing me to a resource would be really helpful.

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{

}

Copyright Notice：Content Author:「Chan15」，Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/40541123/how-to-unit-test-if-an-angular-2-component-contains-another-component

Answers

disappointed in SO leadership 2017-06-24T04:29:23

To test if a component, when compiled, contains other components:\n\n\nInject the component you're testing\nInject the child components \nCreate the parent component\nDetect changes\nUse querySelector or querySelectorAll to find the child components\n\n\nI typically only check that the element exists and then do further testing in the spec for the individual child component.\n\nimport { TestBed, async } from '@angular/core/testing';\n\nimport { AppComponent } from './app.component';\nimport { OtherComponent } from './other/other.component';\n\ndescribe('AppComponent', () => {\n beforeEach(async(() => {\n TestBed.configureTestingModule({\n declarations: [\n AppComponent,\n OtherComponent\n ],\n }).compileComponents();\n }));\n\n it('should create the app', async(() => {\n const fixture = TestBed.createComponent(AppComponent);\n const app = fixture.debugElement.componentInstance;\n expect(app).toBeTruthy();\n }));\n\n it('should have the other component', async(() => {\n const fixture = TestBed.createComponent(AppComponent);\n fixture.detectChanges();\n const compiled = fixture.debugElement.nativeElement;\n expect(compiled.querySelector('app-other')).not.toBe(null);\n }));\n});\n\n\nChecking for null with querySelector will determine if your component exists. From the querySelector MDN:\n\n\n Returns null if no matches are found; otherwise, it returns the first\n matching element.\n\n\n\n\nIf you'd like to check that there are multiple instances of the same child component, you can use querySelectorAll and check the length property:\n\nexpect(compiled.querySelectorAll('app-other').length).toBeGreaterThan(4);\n",