Testing with fixtures and debug elements in Angular - Mini Project: Build & Apply

Testing with fixtures and debug elements

📖 Scenario: You are building a simple Angular component that displays a greeting message. You want to write tests to check if the component renders the message correctly using Angular's testing fixtures and debug elements.

🎯 Goal: Create an Angular component called GreetingComponent that shows a greeting message. Then write tests using TestBed, ComponentFixture, and DebugElement to verify the message is displayed properly.

📋 What You'll Learn

Create a component with a template that displays a greeting message

Set up Angular testing module with TestBed

Use ComponentFixture to create the component instance

Use DebugElement to query the DOM and check the rendered message

💡 Why This Matters

🌍 Real World

Testing Angular components ensures your app shows the right content and behaves correctly before users see it.

💼 Career

Angular developers must write tests using TestBed and DebugElement to maintain reliable, bug-free applications.

1

Create GreetingComponent with a greeting message

Create an Angular component class called GreetingComponent with a template that contains a <p> tag showing the text 'Hello, Angular!'.

Angular

// Create GreetingComponent class with template showing 'Hello, Angular!'
// Your code here

Need a hint?

Use @Component decorator with selector and template properties. The template should have a <p> tag with the exact text Hello, Angular!.

2

Set up TestBed and create ComponentFixture

In the test file, import TestBed and ComponentFixture from @angular/core/testing. Configure the testing module with GreetingComponent declared. Then create a ComponentFixture<GreetingComponent> variable called fixture and initialize it with TestBed.createComponent(GreetingComponent).

Angular

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

// Configure TestBed and create fixture for GreetingComponent
// Your code here

Need a hint?

Use TestBed.configureTestingModule with declarations array including GreetingComponent. Then create the fixture with TestBed.createComponent(GreetingComponent).

3

Use DebugElement to query the paragraph element

Import DebugElement from @angular/core. Use fixture.debugElement to get the debug element. Then query the <p> element using debugElement.query(By.css('p')). Store the result in a variable called pElement. Import By from @angular/platform-browser.

Angular

import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

// Use fixture.debugElement to query the  element and store in pElement
// Your code here

Need a hint?

Import DebugElement and By. Use fixture.debugElement.query(By.css('p')) to find the paragraph element.

4

Check the paragraph text content

Call fixture.detectChanges() to update the view. Then access the native element of pElement and check its textContent. Assign the text content to a variable called text.

Angular

// Call fixture.detectChanges() and get the text content of pElement
// Your code here

Need a hint?

Call fixture.detectChanges() before reading the DOM. Then get the text with pElement.nativeElement.textContent.