Component testing basics in Angular - Mini Project: Build & Apply

Component testing basics

📖 Scenario: You are building a simple Angular component that shows a greeting message. You want to write a basic test to check if the component renders the message correctly.

🎯 Goal: Create an Angular component called GreetingComponent that displays a greeting message. Then write a basic test to check if the message appears in the rendered output.

📋 What You'll Learn

Create a standalone Angular component named GreetingComponent

Add a string property message with the value 'Hello, Angular!'

Write a test that checks if the component renders the message text

Use Angular testing utilities and follow Angular 17+ standalone component patterns

💡 Why This Matters

🌍 Real World

Basic component testing is essential in Angular apps to ensure UI parts work as expected before releasing to users.

💼 Career

Frontend developers often write component tests to catch bugs early and maintain code quality in Angular projects.

1

Create the GreetingComponent with a message

Create a standalone Angular component called GreetingComponent. Inside it, define a public string property message and set it to 'Hello, Angular!'. Use the @Component decorator with a selector 'app-greeting' and a template that displays {{ message }}.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `{{ message }}`
})
export class GreetingComponent {
  // Your code here
}

Need a hint?

Use @Component with standalone: true. Define message as a public property with the exact string.

2

Set up the test environment for GreetingComponent

Create a test file for GreetingComponent. Import TestBed and ComponentFixture from @angular/core/testing. Configure the testing module with GreetingComponent as a standalone component. Declare variables fixture and component for the test setup.

Angular

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

// Your code here

Need a hint?

Use TestBed.configureTestingModule with imports array including GreetingComponent. Create fixture and component in beforeEach.

3

Write a test to check the rendered message

Inside the describe block, add an it test that calls fixture.detectChanges() and then checks if the rendered native element's text content includes the message property. Use expect and toContain for the assertion.

Angular

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

describe('GreetingComponent', () => {
  let fixture: ComponentFixture;
  let component: GreetingComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [GreetingComponent]
    });
    fixture = TestBed.createComponent(GreetingComponent);
    component = fixture.componentInstance;
  });

  // Add a test to check the rendered message
  // Your code here
});

Need a hint?

Call fixture.detectChanges() before checking the DOM. Use fixture.nativeElement to access rendered HTML.

4

Complete the test file with necessary imports and exports

Ensure the test file imports Component from @angular/core and exports the GreetingComponent class. Confirm the test file has the full component and test code combined.

Angular

import { Component } from '@angular/core';
// Your code here

Need a hint?

Make sure the component and test code are in the same file with proper imports and exports.