Like unit test if angular 2 component contains another component

Question

I am new to angular 2.

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

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

Mentioning a sample or referring 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{ } 

Answer 1

To check if a component contains compilation other components:

• Paste the component you are testing.
• Insert child components
• Create a parent component
• Change detection
• Use querySelector or querySelectorAll to find child components

I usually check only the fact that this element exists, and then performs additional checks in the specification for the individual child component.

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

Checking a null value with querySelector will determine if your component exists. From querySelector MDN :

Returns null if no matches are found; otherwise, it returns the first matching element.

---

If you want to check for multiple instances of the same child component, you can use querySelectorAll and check the length property:

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

Answer 2

In most cases, you just check the external component. If you just want angular to ignore internal components, the easiest way is to add NO_ERRORS_SCHEMA to your specification.

import {NO_ERRORS_SCHEMA} from '@ angular / core'

And then in TestBed.configureTestingModule add the line:

schemas: [NO_ERRORS_SCHEMA]

Then the tests will ignore the fact that you did not import the internal components into your HTML component.

If you want to test the internal component with your external components, if you use angular-cli, you will see that the component.spec file that they automatically generate for you includes an array of declarations , which is part of the TestBed configuration object. So all you have to do is import the file and add the component to your ads.

So your example above:

 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'; 

Then in your describe block you will have beforeEach

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

Then your components should now compile correctly without errors. If you want to see the whole installation, just generate a new project in angular-cli and take a look at the specifications it created.