. . . . . . some content of the main component . . . . . . <ng-container *ngFor="let id of studentIds"> <app-student-profile [studentId]="id" (alertEmitter)="displayAlert($event)></app-student-profile> </ng-container> . . .Our child component:
<div *ngIf="student" class="studentDetails">
<button id="btnTest" (click)="sendAlert()">send alert</button>
<div>
<div>Student ID</div>
<div>{{student.studentId}}</div>
</div>
<div>
<div>First Name</div>
<div>{{student.firstName}}</div>
</div>
<div>
<div>Last Name</div>
<div>{{student.lastName}}</div>
</div>
<div>
<div>Email Address</div>
<div>{{student.email}}</div>
</div>
</div>
The child component also has input and output properties. The input is expecting Student ID to be passed from the parent component and the output will pass a message to the parent component to be displayed.Some of the codes from child component class:
. . .
@Input() studentId!: number;
@Output() alertEmitter: EventEmitter<string> = new EventEmitter<string>();
sendAlert(): void {
this.alertEmitter.emit("an alert from student profile component with Student Id: " + this.studentId);
}
. . .
To test the child component, we can use ng-mocks testing library, which is popularly used for Angular testing. Our tests will look like:
describe('MainComponent', () => {
let component: MainComponent;
let childComponent: StudentComponent;
let fixture: ComponentFixture<MainComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [MainComponent,
MockComponent(StudentComponent)],
//schemas: [NO_ERRORS_SCHEMA]
})
.compileComponents();
fixture = TestBed.createComponent(MainComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it("should have correct numbers of <app-student-profile> child component(s)", () => {
let childComponents = fixture.debugElement.queryAll(By.directive(StudentComponent));
expect(childComponents.length).toEqual(studentIds.length)
})
it("should pass right argument to child components", () => {
let childComponents = fixture.debugElement.queryAll(By.directive(StudentComponent));
for (var i = 0; i < component.studentIds.length; i++) {
let childComponent: StudentComponent = childComponents[i].componentInstance;
expect(childComponent.studentId).toEqual(component.studentIds[i]);
}
})
});
On line 10, we mock the child component with MockComponent().[NO_ERRORS_SCHEMA] is also not needed in the declaration like in other approaches without using ng-mocks library.
On line 25, we use fixture.debugElement.queryAll(By.directive(CHILD_COMPONENT_NAME)) to find all child components. Notice that with the library, we can find the child component by class name (type). Other approaches need to use a fake component class or querying the html element (using By.css() function).
Line 32, we get the child component object with .componentInstance. Then we will be able to access all its properties and methods. We can check the argument passed to its input property by directly inspecting its class property.
Lastly, we need to test the output property. It will relay an event then call this function on parent component:
displayAlert(message: string): void {
console.log(message);
}
We can test this interaction with something like:
it("should be able to catch alert from child component", () => {
const alertMessage: string = "test alert";
spyOn(console, 'log');
//spyOn(component, 'displayAlert'); // if we want to test the parent component function is called
epProfileComponent = fixture.debugElement.query(By.directive(StudentEPProfileComponent)).componentInstance;
epProfileComponent.alertEmitter.emit(alertMessage);
//expect(component.displayAlert).toHaveBeenCalledWith(alertMessage); // if we want to test the parent component function is called
expect(console.log).toHaveBeenCalledWith(alertMessage);
})
Notice on line 6, we can call the emit() function and then on line 8, check that the parent's function we want to be called is called (in our example is console.log).
