The Angular Test Bed (ATB) is a higher level Angular testing framework that allows us to easily test behaviours that depend on the Angular Framework.

Why we use ATB ?

As an Angular developer we prefer to use ATB for many raisons :

  • It allows us to easily test change detection.
  • It allows us to test the interaction of a directive or component with its template.
  • It allows us to test using the NgModule configuration we use in our application.
  • It allows us to test and use Angular’s DI framework.
  • It allows us to test user interaction via clicks and input fields

Fixtures and DI

In the next example we will try to test the loginComponent

//login.component.spec.ts
/* tslint:disable:no-unused-variable */
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { LoginComponent } from './login.component';
import { AuthService } from "./auth.service";

describe('Component: Login', () => {

    let component: LoginComponent;
    let fixture: ComponentFixture<LoginComponent>;
    let authService: AuthService;

    beforeEach(() => {

        // refine the test module by declaring the test component
        TestBed.configureTestingModule({
            declarations: [LoginComponent],
            providers: [AuthService]
        });

        // create component and test fixture
        fixture = TestBed.createComponent(LoginComponent);

        // get test component from the fixture
        component = fixture.componentInstance;

        // UserService provided to the TestBed
        authService = TestBed.get(AuthService);

    });

    it('needsLogin returns true when the user has not been authenticated', () => {
        spyOn(authService, 'isAuthenticated').and.returnValue(false);
        expect(component.needsLogin()).toBeTruthy();
        expect(authService.isAuthenticated).toHaveBeenCalled();
    });

    it('needsLogin returns false when the user has been authenticated', () => {
        spyOn(authService, 'isAuthenticated').and.returnValue(true);
        expect(component.needsLogin()).toBeFalsy();
        expect(authService.isAuthenticated).toHaveBeenCalled();
    });
});
  • A fixture is a wrapper for a component and its template.
  • We create an instance of a component fixture through the TestBed, this injects the AuthService into the component constructor.
  • We can find the actual component from the componentInstance on the fixture.
  • We can get resolve dependencies using the TestBed injector by using the get function.

Test Specs

Now After we configured the TestBed and extracted the component and service we can run the test specs :

it('needsLogin returns true when the user has not been authenticated', () => {
  spyOn(authService, 'isAuthenticated').and.returnValue(false);
  expect(component.needsLogin()).toBeTruthy();
  expect(authService.isAuthenticated).toHaveBeenCalled();
});

it('needsLogin returns false when the user has been authenticated', () => {
  spyOn(authService, 'isAuthenticated').and.returnValue(true);
  expect(component.needsLogin()).toBeFalsy();
  expect(authService.isAuthenticated).toHaveBeenCalled();
});

The final login.component.spec.ts file will be like :

/* tslint:disable:no-unused-variable */
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { LoginComponent } from './login.component';
import { AuthService } from "./auth.service";

describe('Component: Login', () => {

    let component: LoginComponent;
    let fixture: ComponentFixture<LoginComponent>;
    let authService: AuthService;

    beforeEach(() => {

        // refine the test module by declaring the test component
        TestBed.configureTestingModule({
            declarations: [LoginComponent],
            providers: [AuthService]
        });

        // create component and test fixture
        fixture = TestBed.createComponent(LoginComponent);

        // get test component from the fixture
        component = fixture.componentInstance;

        // UserService provided to the TestBed
        authService = TestBed.get(AuthService);

    });

    it('needsLogin returns true when the user has not been authenticated', () => {
        spyOn(authService, 'isAuthenticated').and.returnValue(false);
        expect(component.needsLogin()).toBeTruthy();
        expect(authService.isAuthenticated).toHaveBeenCalled();
    });

    it('needsLogin returns false when the user has been authenticated', () => {
        spyOn(authService, 'isAuthenticated').and.returnValue(true);
        expect(component.needsLogin()).toBeFalsy();
        expect(authService.isAuthenticated).toHaveBeenCalled();
    });
});

References :

CodeCraft

Tagged:

Laisser un commentaire