Going Deeper›Pro· 45 min read

Testing Angular (Jasmine, Karma & TestBed)

Angular ships with a testing toolkit — write small automated tests so you know your code still works after every change.

What you will learn

Explain why automated tests matter
Write a service unit test with Jasmine
Test a component with TestBed

Why write tests at all?

A test is code that checks your other code does the right thing — automatically. Instead of clicking through the app by hand after every change, you run the tests and they tell you in seconds whether anything broke. Employers expect it, and it is what lets you change code confidently without fear.

Angular comes with a testing toolchain built in: Jasmine (the library for writing tests), Karma (the runner that executes them in a browser), and TestBed (an Angular helper that builds a component or service in a test environment). You run them all with one command.

Run the test suite

ng test

Note: Output: Chrome: Executed 3 of 3 SUCCESS (0.4 secs) TOTAL: 3 SUCCESS ng test builds your app in test mode and runs every .spec.ts file. Green means all tests passed; red points you straight at what broke.

The shape of a test

A test reads almost like English. describe groups related tests, it states one expected behaviour, and expect(...).toBe(...) checks an actual value against what you expect.

describe / it / expect — the test pattern

// math.spec.ts — the smallest possible test
describe('addition', () => {
  it('adds two numbers', () => {
    const result = 2 + 3;
    expect(result).toBe(5);     // pass if result is 5
  });
});

Note: Output: ✓ addition adds two numbers The test passes because 2 + 3 really is 5. If you changed it to expect(result).toBe(6), the test would fail and tell you exactly which expectation was wrong.

Testing a service

Services are the easiest thing to test because they are plain classes. Create one, call a method, and check the result.

A simple service unit test

// cart.service.spec.ts
import { CartService } from './cart.service';

describe('CartService', () => {
  it('adds an item to the cart', () => {
    const service = new CartService();
    service.add('Milk');
    expect(service.getItems().length).toBe(1);
  });
});

Note: Output: ✓ CartService adds an item to the cart We make a fresh service, add one item, and expect the cart length to be 1. If add were broken, this test would go red immediately — catching the bug before any user does.

Testing a component with TestBed

Components need Angular around them, so we use TestBed to build one in a test environment, then inspect what it renders. A fixture is the test handle to the built component.

TestBed builds the component and checks its output

// greeting.component.spec.ts
import { TestBed } from '@angular/core/testing';
import { GreetingComponent } from './greeting.component';

describe('GreetingComponent', () => {
  it('shows the name', () => {
    const fixture = TestBed.createComponent(GreetingComponent);
    fixture.componentInstance.name = 'Asha';
    fixture.detectChanges();                       // render with the value
    const text = fixture.nativeElement.textContent;
    expect(text).toContain('Asha');
  });
});

Note: Output: ✓ GreetingComponent shows the name TestBed.createComponent builds the component; we set name, call detectChanges() to render, then read the rendered text and expect it to contain “Asha”. This proves the template really shows the value.

Write tests in .spec.ts files next to the code they test.
Group them with describe and write one behaviour per it.
For services, create the class and assert on its methods.
For components, use TestBed, set inputs, call detectChanges(), and assert on the rendered output.
Run everything with ng test and keep the suite green.

Tip: For checking the whole app like a real user (clicking through pages), teams add end-to-end (E2E) tests with tools like Cypress or Playwright. Unit tests check small pieces; E2E tests check the full journey.

Watch out: Aim to test behaviour, not every internal detail. Good tests survive refactoring; tests that hard-code private internals break constantly and become a burden.

Q. Which Angular helper builds a component inside a test so you can inspect what it renders?

Answer: TestBed creates a component in a test environment, returning a fixture you can configure and inspect. Jasmine writes the assertions and Karma runs the suite in a browser.

✍️ Practice

Write a test for a service method that adds two numbers and returns the sum.
Write a TestBed test that sets an @Input and checks the rendered text.

🏠 Homework

Add a spec file for your task service: test that add increases the list length and that clear empties it.