? First Test Case in Angular

Unit Testing Jasmine & Karma

? Quick Overview

Writing your first test case in Angular helps ensure that your components and services work as expected. Angular typically uses Jasmine for writing tests and Karma as the default test runner. In this topic, you will create and understand a simple unit test for an Angular service.

? Key Concepts

Jasmine: Testing framework that provides functions like describe(), it(), and expect().
Karma: Test runner that runs Jasmine tests in a browser environment.
TestBed: Angular testing utility that sets up a testing module and injects dependencies.
describe: Defines a test suite (group of related test cases).
it: Defines an individual test/spec describing one behavior.
expect: Used to write assertions about what should be true.
beforeEach: Runs before every it() to set up a fresh test state.

? Syntax & Theory

A basic Jasmine test in Angular is organized as:

? View Code Example

// Basic Jasmine test structure
describe('MyFeature', () => {
it('should do something', () => {
expect(true).toBeTrue();
});
});

Inside a real Angular test, you usually configure the testing environment using TestBed, create or inject the service/component, and then write expectations using expect().

? First Service Test Example

Let’s create a simple GreetingService with a method that returns a greeting and then write tests for it.

? View Code Example

// greeting.service.ts - simple service that returns a greeting
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class GreetingService {
getGreeting(name: string): string {
return `Hello, ${name}!`;
}
}

// greeting.service.spec.ts - tests for GreetingService
import { TestBed } from '@angular/core/testing';
import { GreetingService } from './greeting.service';

describe('GreetingService', () => {
let service: GreetingService;

beforeEach(() => {
TestBed.configureTestingModule({});
service = TestBed.inject(GreetingService);
});

it('should be created', () => {
expect(service).toBeTruthy();
});

it('should return correct greeting', () => {
const greeting = service.getGreeting('Angular');
expect(greeting).toBe('Hello, Angular!');
});
});

? Live Output / Explanation

? What happens when you run the tests?

You run ng test from the Angular project root.
Karma starts a browser and runs all *.spec.ts files using Jasmine.
TestBed creates a testing module and injects GreetingService before each test.
The first test "should be created" checks that the service instance exists.
The second test calls getGreeting('Angular') and expects the string "Hello, Angular!".
If both assertions are true, Jasmine marks the tests as passed and Karma shows them in green.

✅ Tips & Best Practices

Start testing services before components for easier isolation and less setup.
Use descriptive names for describe() and it() blocks to make debugging easier.
Keep every test focused on a single behavior or scenario.
Avoid relying on shared state between tests; re-create what you need in beforeEach().
Prefer testing public methods and observable behavior instead of private implementation details.

? Try It Yourself

Create a FarewellService with a method getFarewell(name: string) that returns "Goodbye, <name>!". Write tests to ensure it returns the correct farewell.
Build a simple component with an @Input() property (for example, title) and write a test that verifies the input value is rendered in the template.
Intentionally make a test fail (for example, change the expected string) and observe how Karma and Jasmine report the error. This helps you understand failure messages.
Add one more test to GreetingService that checks behavior when an empty name is passed (e.g., return a default greeting).