I am writing unit tests for Angular 2 component with Jasmine. I would like to test if my document title has been set to a specific value when my component is instantiated.
Here is my component
import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';
@Component({
selector: `cx-account`,
templateUrl: `app/account/account.component.html`,
})
export class AccountComponent {
public constructor(titleService: Title) {
titleService.setTitle(`Account`);
}
}
Here what I have written for testing, but it is not working. titleService.getTitle()
gives me Karma debug runner page title.
import { TestBed } from '@angular/core/testing';
import { Title } from '@angular/platform-browser';
import { AccountComponent } from './account.component';
describe(`AppComponent`, () => {
const titleService: Title = new Title();
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [AccountComponent],
providers: [{ provide: Title }],
});
});
it(`Title should be "Account"`, () => {
expect(titleService.getTitle()).toBe(`Account`);
});
});
Karma output is :
Error: Expected 'Karma DEBUG RUNNER' to be 'Account'.
A mock component in Angular tests can be created by MockComponent function. The mock component respects the interface of its original component, but all its methods are dummies. To create a mock component, simply pass its class into MockComponent function.
spec. ts file. This file contains unit tests for the main AppComponent. When running tests using the Angular CLI, all unit tests in files with the *.
Which of the following TestBed method is used to create an Angular component under test? The correct answer is - createComponent!
Introduction. Mocking is a great idea for testing Angular apps because it makes maintenance easier and helps reduce future bugs. There are a few complex tools, such as XUnit, for mocking an Angular CLI project. You can execute the mocking methods described in this guide only if you use vanilla Jasmine + Angular Testbed ...
I finally found a solution to my problem. I used the TestBed to get the service I have injected. Then use that service to get the page Title in the current Test context. Here is my new Code
import { TestBed } from '@angular/core/testing';
import { Title } from '@angular/platform-browser';
import { AccountComponent } from './account.component';
describe(`AccountComponent`, () => {
let titleService: Title;
let fixture: any;
let component: AccountComponent;
beforeEach(async (() => {
TestBed.configureTestingModule({
declarations: [AccountComponent],
providers: [Title],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccountComponent);
// Access the dependency injected component instance
component = fixture.componentInstance;
});
it(`should instantiate component`, () => {
expect(component instanceof AccountComponent).toBe(true, `should create AccountComponent`);
});
it(`Page title should be "Account"`, () => {
titleService = TestBed.get(Title);
expect(titleService.getTitle()).toBe(`Account`);
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With