Tutoriel tests unitaires Angular #20 - Vérifier la présence d'un composant enfant

Introduction

In this tutorial, we will learn how to verify the presence of a child component in Angular applications using Jasmine and Karma. These tools are essential for performing unit tests in JavaScript applications. This guide will take you through the steps to effectively isolate child components and ensure they are rendered correctly within their parent components.

Step 1: Set Up Your Environment

Before diving into testing, ensure you have the necessary tools installed.

• Install NodeJS and NPM from Node.js official website.
• Install Angular CLI by running the following command in your terminal:

  npm install -g @angular/cli
  

• Set up Visual Studio Code for coding and testing.

Step 2: Create a New Angular Project

If you haven't already created an Angular project, you can do so with the following commands:

1. Open your terminal.
2. Run the command:

   ng new my-angular-app
   

3. Navigate into your project directory:

   cd my-angular-app
   

Step 3: Generate Components

Next, generate the parent and child components that you will be testing.

1. Create the child component:

   ng generate component child
   

2. Create the parent component:

   ng generate component parent
   

Step 4: Implement the Child Component

Define what your child component does. For example, it might simply display a message. In child.component.html, add:

<p>Child Component Works!</p>

Step 5: Use the Child Component in the Parent Component

Integrate the child component into the parent component. In parent.component.html, add:

<app-child></app-child>

Step 6: Write Unit Tests for the Parent Component

Open the parent.component.spec.ts file to write your tests. Here’s a basic structure to get you started:

1. Import the necessary modules:

   import { ComponentFixture, TestBed } from '@angular/core/testing';
   import { ParentComponent } from './parent.component';
   

2. Set up the testing module:

   describe('ParentComponent', () => {
     let component: ParentComponent;
     let fixture: ComponentFixture<ParentComponent>;
   
     beforeEach(async () => {
       await TestBed.configureTestingModule({
         declarations: [ ParentComponent ]
       }).compileComponents();
   
       fixture = TestBed.createComponent(ParentComponent);
       component = fixture.componentInstance;
       fixture.detectChanges();
     });
   

3. Write a test to check if the child component is present:

   it('should create the child component', () => {
     const childComponent = fixture.debugElement.nativeElement.querySelector('app-child');
     expect(childComponent).toBeTruthy();
   });
   

Step 7: Run Your Tests

After writing your tests, run them using the following command in your terminal:

ng test

This will execute the tests with Karma and display the results in your console.

Conclusion

In this tutorial, we explored how to verify the presence of a child component in Angular using Jasmine and Karma. We set up our environment, created and integrated components, and wrote unit tests to check for the child component's existence.

As a next step, consider expanding your tests to cover additional functionality and edge cases within your components. Happy coding!