-
-
Save mahidaparth7/4f2247f7ff37a36e62f9b136bb560f02 to your computer and use it in GitHub Desktop.
Angular 2 test snippets for Angular final version. Codebase for https://developers.livechatinc.com/blog/category/programming/angular-2/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // App | |
| import { Component } from 'angular2/core'; | |
| @Component({ | |
| selector: 'app', | |
| template: '<span>{{ sayHello() }}</span>' | |
| }) | |
| export class App { | |
| public name: string = 'John'; | |
| sayHello(): string { | |
| return `Hello ${this.name}`; | |
| } | |
| } | |
| // App tests | |
| import { | |
| it, | |
| describe, | |
| expect, | |
| } from 'angular2/testing'; | |
| describe('App', () => { | |
| beforeEach(function() { | |
| this.app = new App(); | |
| }); | |
| it('should have name property', function() { | |
| expect(this.app.name).toBe('John'); | |
| }); | |
| it('should say hello with name property', function() { | |
| expect(this.app.sayHello()).toBe('Hello John'); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // App | |
| import { Component, Input } from 'angular2/core'; | |
| import { NgFor } from 'angular2/common'; | |
| @Component({ | |
| selector: 'list', | |
| template: '<span *ngFor="#user of users">{{user}}</span>', | |
| directives: [NgFor], | |
| }) | |
| export class ListComponent { | |
| @Input() public users: Array<string> = []; | |
| } | |
| // App tests | |
| import { | |
| async, | |
| it, | |
| describe, | |
| expect, | |
| inject, | |
| beforeEach, | |
| beforeEachProviders, | |
| ComponentFixture, | |
| TestComponentBuilder, | |
| } from 'angular2/testing'; | |
| import { setBaseTestProviders } from 'angular2/testing'; | |
| import { | |
| TEST_BROWSER_PLATFORM_PROVIDERS, | |
| TEST_BROWSER_APPLICATION_PROVIDERS, | |
| } from 'angular2/platform/testing/browser'; | |
| setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); | |
| describe('ListComponent', () => { | |
| it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { | |
| return tcb.createAsync(ListComponent).then((componentFixture: ComponentFixture) => { | |
| const element = componentFixture.nativeElement; | |
| componentFixture.componentInstance.users = ['John']; | |
| componentFixture.detectChanges(); | |
| expect(element.querySelectorAll('span').length).toBe(1); | |
| }); | |
| })); | |
| }); | |
| // App DI | |
| class UserService { | |
| public users: Array<string> = ['John']; | |
| } | |
| @Component({ | |
| selector: 'list', | |
| template: '<span *ngFor="#user of users">{{ user }}</span>', | |
| directives: [NgFor], | |
| }) | |
| class ListComponentBootstrapDI { | |
| private users: Array<string> = []; | |
| constructor(userService: UserService) { | |
| this.users = userService.users; | |
| } | |
| } | |
| // App DI tests | |
| import { provide } from 'angular2/core'; | |
| class MockUserService { | |
| public users: Array<string> = ['John', 'Steve']; | |
| } | |
| describe('ListComponent DI', () => { | |
| beforeEachProviders(() => [ | |
| provide(UserService, { useClass: MockUserService }) | |
| ]); | |
| it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { | |
| return tcb.createAsync(ListComponentBootstrapDI).then((componentFixture: ComponentFixture) => { | |
| const element = componentFixture.nativeElement; | |
| componentFixture.detectChanges(); | |
| expect(element.querySelectorAll('span').length).toBe(2); | |
| }); | |
| })); | |
| }); | |
| // App DI for Component | |
| @Component({ | |
| selector: 'list', | |
| template: '<span *ngFor="#user of users">{{ user }}</span>', | |
| directives: [NgFor], | |
| providers: [UserService], | |
| }) | |
| class ListComponentComponentDI { | |
| private users: Array<string> = []; | |
| constructor(userService: UserService) { | |
| this.users = userService.users; | |
| } | |
| } | |
| // App DI for Component tests | |
| describe('ListComponent DI Component', () => { | |
| it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { | |
| tcb | |
| .overrideProviders( | |
| ListComponentComponentDI, | |
| [provide(UserService, { useClass: MockUserService })] | |
| ) | |
| .createAsync(ListComponentComponentDI).then((componentFixture: ComponentFixture) => { | |
| const element = componentFixture.nativeElement; | |
| componentFixture.detectChanges(); | |
| expect(element.querySelectorAll('span').length).toBe(2); | |
| }); | |
| })); | |
| }); | |
| // App final test | |
| describe('ListComponent Final', () => { | |
| beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { | |
| tcb | |
| .overrideProviders( | |
| ListComponentComponentDI, | |
| [provide(UserService, { useClass: MockUserService })] | |
| ) | |
| .createAsync(ListComponentComponentDI) | |
| .then((componentFixture: ComponentFixture) => { | |
| this.listComponentFixture = componentFixture; | |
| }); | |
| }))); | |
| it('should render list', () => { | |
| const element = this.listComponentFixture.nativeElement; | |
| this.listComponentFixture.detectChanges(); | |
| expect(element.querySelectorAll('span').length).toBe(2); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // App | |
| class TestService { | |
| public name: string = 'Injected Service'; | |
| } | |
| // App tests | |
| import { | |
| it, | |
| describe, | |
| expect, | |
| inject, | |
| beforeEachProviders, | |
| } from 'angular2/testing'; | |
| import { provide } from 'angular2/core'; | |
| import { setBaseTestProviders } from 'angular2/testing'; | |
| import { | |
| TEST_BROWSER_PLATFORM_PROVIDERS, | |
| TEST_BROWSER_APPLICATION_PROVIDERS, | |
| } from 'angular2/platform/testing/browser'; | |
| setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); | |
| describe('TestService', () => { | |
| beforeEach(function() { | |
| this.testService = new TestService(); | |
| }); | |
| it('should have name property set', function() { | |
| expect(this.testService.name).toBe('Injected Service'); | |
| }); | |
| }); | |
| describe('TestService Injected', () => { | |
| beforeEachProviders(() => [TestService]); | |
| it('should have name property set', inject([TestService], (testService: TestService) => { | |
| expect(testService.name).toBe('Injected Service'); | |
| })); | |
| }); | |
| class MockTestService { | |
| public mockName: string = 'Mocked Service'; | |
| } | |
| describe('TestService Mocked', () => { | |
| beforeEachProviders(() => [ | |
| provide(TestService, {useClass: MockTestService}) | |
| ]); | |
| it('should have name property set', inject([TestService], (testService: TestService) => { | |
| expect(testService.mockName).toBe('Mocked Service'); | |
| })); | |
| }); | |
| class MockTestServiceInherited extends TestService { | |
| public sayHello(): string { | |
| return this.name; | |
| } | |
| } | |
| describe('TestService Mocked Inherited', () => { | |
| beforeEachProviders(() => [ | |
| provide(TestService, { useClass: MockTestServiceInherited }) | |
| ]); | |
| it('should say hello with name', inject([TestService], (testService: TestService) => { | |
| expect(testService.sayHello()).toBe('Injected Service'); | |
| })); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment