The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Unit Testing

Next ►
►

Unit testing is a crucial part of software development that ensures individual units of code (such as functions, methods, or classes) work as expected. In Angular, unit testing is typically done using Jasmine and Karma.

Key Concepts

  1. Unit Testing Frameworks:

    • Jasmine: A behavior-driven development framework for testing JavaScript code.
    • Karma: A test runner that allows you to execute your tests in various browsers.

  2. Test Bed:

    • Angular's TestBed is a utility that provides a way to configure and initialize an environment for unit testing Angular components and services.

  3. Mocking:

    • Creating mock objects to simulate the behavior of real objects in a controlled way.

Setting Up Unit Testing

Angular projects come pre-configured with Jasmine and Karma. To run unit tests, you can use the Angular CLI command:

ng test

This command will start the Karma test runner and execute all the unit tests in your project.

Writing Your First Unit Test

Example: Testing a Simple Service

Let's create a simple service and write a unit test for it.

Step 1: Create the Service

// src/app/services/math.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MathService {
  add(a: number, b: number): number {
    return a + b;
  }

  subtract(a: number, b: number): number {
    return a - b;
  }
}

Step 2: Write the Unit Test

// src/app/services/math.service.spec.ts
import { TestBed } from '@angular/core/testing';
import { MathService } from './math.service';

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

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

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

  it('should add two numbers correctly', () => {
    expect(service.add(1, 2)).toEqual(3);
  });

  it('should subtract two numbers correctly', () => {
    expect(service.subtract(5, 3)).toEqual(2);
  });
});

Explanation

  • describe: A Jasmine function that groups related tests.
  • beforeEach: A Jasmine function that runs before each test. It is used to set up the testing environment.
  • it: A Jasmine function that defines an individual test case.
  • expect: A Jasmine function that makes an assertion about the result of a function.

Practical Exercises

Exercise 1: Testing a Component

Create a component and write unit tests for it.

Step 1: Create the Component

// src/app/components/counter/counter.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <span>{{ count }}</span>
      <button (click)="decrement()">Decrement</button>
    </div>
  `
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

Step 2: Write the Unit Test

// src/app/components/counter/counter.component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CounterComponent } from './counter.component';

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

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [CounterComponent]
    });
    fixture = TestBed.createComponent(CounterComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should increment the count', () => {
    component.increment();
    expect(component.count).toBe(1);
  });

  it('should decrement the count', () => {
    component.increment();
    component.decrement();
    expect(component.count).toBe(0);
  });
});

Solution Explanation

  • ComponentFixture: A wrapper around the component and its template.
  • fixture.detectChanges(): Triggers change detection and updates the component's view.

Common Mistakes and Tips

  • Not using TestBed correctly: Ensure you configure the testing module properly with all necessary declarations and providers.
  • Forgetting to call fixture.detectChanges(): This is crucial for updating the component's view after changes.
  • Not isolating tests: Each test should be independent. Use beforeEach to reset the state before each test.

Conclusion

Unit testing is an essential practice for ensuring the reliability and maintainability of your Angular applications. By using Jasmine and Karma, you can write and run tests that verify the behavior of your components and services. In the next section, we will delve into component testing, where we will explore more advanced testing techniques and scenarios.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved