Project 28: Dashboard Sidebar

Angular Engineer

Builds on these lessons

Component Task

Objective

TestBed creates a real component instance in a test environment — createComponent plus detectChanges() renders it, so assertions can check the actual DOM output.

You're building a dashboard sidebar, with a test for it.

Task: write a SidebarComponent rendering a title in an <h3>, and a spec that renders it via TestBed and asserts the heading's text.

component.ts

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

@Component({
  selector: 'app-sidebar',
  standalone: true,
  template: `<h3>{{ title }}</h3>`
})
export class SidebarComponent {
  title = 'Dashboard';
}

describe('SidebarComponent', () => {
  it('should render the title', () => {
    TestBed.configureTestingModule({ imports: [SidebarComponent] });
    const fixture = TestBed.createComponent(SidebarComponent);
    fixture.detectChanges();
    const el = fixture.nativeElement as HTMLElement;
    expect(el.querySelector('h3')?.textContent).toBe('Dashboard');
  });
});

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →