Chapter 13.1☕ 15 min read

Testing Setup — Jasmine, Karma, TestBed

Testing catches bugs before production, gives confidence to refactor, and is required by enterprise companies. Angular has a complete testing ecosystem built in.

01Why Testing Matters

Testing is not optional for professional Angular developers. It catches bugs BEFORE they reach production and gives you confidence to refactor code without breaking things.

"Testing = quality check — biryani serve karne se pehle taste karo."

Why test?

Catches bugs before users see them
Confidence to refactor — tests tell you if you broke something
Documentation — tests show how components/services should work
Hyderabad companies: TCS, Wipro, Infosys REQUIRE test coverage
Untested code = deploying and experimenting on customers

02Jasmine — The Test Framework

Jasmine is the test framework that comes built-in with Angular projects. It provides the keywords you use to write tests.

Key Jasmine keywords:

describe("ComponentName", () => { }) — groups related tests
it("should do something", () => { }) — individual test case
expect(actual).toBe(expected) — assertion (pass/fail)
beforeEach(() => { }) — runs setup before each test
afterEach(() => { }) — runs cleanup after each test

"Jasmine = test ka format — describe, it, expect, ye sab keywords."

describe("BiryaniComponent", () => {
  it("should show biryani name", () => {
    expect(component.name).toBe("Hyderabadi");
  });
});

03Karma — The Test Runner

Karma is the test runner. It opens a real browser, runs your Jasmine tests in it, and reports results.

"Karma = exam hall — browser mein test chalata hai."

How it works:

ng test starts Karma server, opens Chrome (or configured browser)
Karma watches your files — re-runs tests on every save
Shows results in terminal: green ✅ pass or red ❌ fail
Configuration in karma.conf.js (browsers, coverage, plugins)

Karma configuration is generated automatically when you create an Angular project with ng new.

04TestBed — Angular Test Environment

TestBed is Angular's testing utility that creates a mini-Angular environment for your tests. It configures modules, creates components, injects services, and renders templates.

"TestBed = mock Angular — testing ke liye chhota Angular banao."

import { TestBed } from "@angular/core/testing";

beforeEach(() => {
  TestBed.configureTestingModule({
    providers: [MyService],
  });
});

it("should use TestBed", () => {
  const service = TestBed.inject(MyService);
  expect(service).toBeTruthy();
});

TestBed key methods:

TestBed.configureTestingModule({}) — setup (imports, providers, declarations)
TestBed.createComponent(MyComponent) — creates component fixture
TestBed.inject(MyService) — gets service instance

05Running Tests

Running tests in Angular:

Commands:

ng test — runs all tests in watch mode (re-runs on file changes)
ng test --watch=false — run once (for CI/CD pipelines)
ng test --code-coverage — generates coverage report
ng test --browsers=ChromeHeadless — no browser window (for CI)

"Coverage report = report card — kitna syllabus cover hua."

Coverage: After running with --code-coverage, open coverage/ folder in the browser to see line-by-line coverage. Aim for 80%+ coverage.

Key Takeaways

Jasmine provides describe/it/expect keywords for writing tests
Karma runs tests in a real browser and watches for file changes
TestBed creates a mini-Angular environment for testing components/services
ng test runs tests in watch mode; ng test --watch=false for CI
--code-coverage generates a report showing what code is tested

Previous12.5 — Security 📋 All Chapters Next Chapter13.2 — Testing Components →