-
-
Save kkganesan/dcf33f53c814000338a5d3ed7a266b0e to your computer and use it in GitHub Desktop.
Angular 2 test snippets. Codebase for https://developers.livechatinc.com/blog/category/programming/angular-2/
This file contains 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 '@angular/core'; | |
@Component({ | |
selector: 'app', | |
template: '<span>{{ sayHello() }}</span>', | |
}) | |
export class App { | |
public name: string = 'John'; | |
sayHello(): string { | |
return `Hello ${this.name}`; | |
} | |
} | |
// App tests | |
describe('App', () => { | |
beforeEach(() => { | |
this.app = new App(); | |
}); | |
it('should have name property', () => { | |
expect(this.app.name).toBe('John'); | |
}); | |
it('should say hello with name property', () => { | |
expect(this.app.sayHello()).toBe('Hello John'); | |
}); | |
}); |
This file contains 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 '@angular/core'; | |
@Component({ | |
selector: 'list', | |
template: '<span *ngFor="let user of users">{{ user }}</span>', | |
}) | |
export class ListComponent { | |
@Input() public users: Array<string> = []; | |
} | |
// App tests | |
import { | |
async, | |
inject, | |
TestBed | |
} from '@angular/core/testing'; | |
describe('ListComponent', () => { | |
beforeEach(() => { | |
TestBed.configureTestingModule({ | |
declarations: [ListComponent] | |
}); | |
}); | |
beforeEach(async(() => { | |
TestBed.compileComponents(); | |
})); | |
it('should render list', async(() => { | |
const fixture = TestBed.createComponent(ListComponent); | |
fixture.detectChanges(); | |
fixture.debugElement.componentInstance.users = ['John']; | |
fixture.detectChanges(); | |
var compiled = fixture.debugElement.nativeElement; | |
expect(compiled.querySelectorAll('span').length).toBe(1); | |
})); | |
}); | |
// App DI | |
class UserService { | |
public users: Array<string> = ['John']; | |
} | |
@Component({ | |
selector: 'list', | |
template: '<span *ngFor="let user of users">{{ user }}</span>' | |
}) | |
class ListComponentBootstrapDI { | |
private users: Array<string> = []; | |
constructor(userService: UserService) { | |
this.users = userService.users; | |
} | |
} | |
class MockUserService { | |
public users: Array<string> = ['John', 'Steve']; | |
} | |
describe('ListComponent DI', () => { | |
beforeEach(() => { | |
TestBed.configureTestingModule({ | |
declarations: [ListComponentBootstrapDI], | |
providers: [ | |
{provide: UserService, useClass: MockUserService } | |
] | |
}); | |
}); | |
beforeEach(async(() => { | |
TestBed.compileComponents(); | |
})); | |
it('should render list', async(() => { | |
const fixture = TestBed.createComponent(ListComponentBootstrapDI); | |
fixture.detectChanges(); | |
var compiled = fixture.debugElement.nativeElement; | |
expect(compiled.querySelectorAll('span').length).toBe(2); | |
})); | |
}); | |
// App DI for Component | |
@Component({ | |
selector: 'list', | |
template: '<span *ngFor="let user of users">{{ user }}</span>', | |
providers: [UserService], | |
}) | |
class ListComponentComponentDI { | |
private users: Array<string> = []; | |
constructor(userService: UserService) { | |
this.users = userService.users; | |
} | |
} | |
// App DI for Component tests | |
describe('ListComponent DI Component', () => { | |
beforeEach(() => { | |
TestBed.configureTestingModule({ | |
declarations: [ListComponentComponentDI], | |
providers: [ | |
{provide: UserService, useClass: MockUserService } | |
] | |
}); | |
}); | |
beforeEach(async(() => { | |
TestBed.compileComponents(); | |
})); | |
it('should render list', async(() => { | |
const fixture = TestBed.createComponent(ListComponentComponentDI); | |
fixture.detectChanges(); | |
var compiled = fixture.debugElement.nativeElement; | |
expect(compiled.querySelectorAll('span').length).toBe(2); | |
})); | |
}); |
This file contains 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'; | |
public sayHello(): string { | |
return this.name; | |
} | |
} | |
// App tests | |
import { inject, TestBed } from '@angular/core/testing'; | |
describe('TestService', () => { | |
beforeEach(() => { | |
this.testService = new TestService(); | |
}); | |
it('should have name property set', () => { | |
expect(this.testService.name).toBe('Injected Service'); | |
}); | |
}); | |
describe('TestService Injected', () => { | |
beforeEach(() => { | |
TestBed.configureTestingModule({ | |
providers: [{provide: TestService, useClass: TestService}] | |
}); | |
}); | |
it('should have name property set', inject([TestService], (testService: TestService) => { | |
expect(testService.name).toBe('Injected Service'); | |
})); | |
}); | |
class MockTestService { | |
public name: string = 'Mocked Service'; | |
} | |
describe('TestService Mocked', () => { | |
beforeEach(() => { | |
TestBed.configureTestingModule({ | |
providers: [{ provide: TestService, useClass: MockTestService }] | |
}); | |
}); | |
it('should have name property set', inject([TestService], (testService: TestService) => { | |
expect(testService.name).toBe('Mocked Service'); | |
})); | |
}); | |
class MockTestServiceInherited extends TestService { | |
public name: string = 'Injected Mock Service'; | |
public sayHello(): string { | |
return this.name; | |
} | |
} | |
describe('TestService Mocked Inherited', () => { | |
beforeEach(() => { | |
TestBed.configureTestingModule({ | |
providers: [{ provide: TestService, useClass: MockTestServiceInherited }] | |
}); | |
}); | |
it('should say hello with name', inject([TestService], (testService: TestService) => { | |
expect(testService.sayHello()).toBe('Injected Mock Service'); | |
})); | |
}); |
This file contains 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 { Injectable } from '@angular/core'; | |
import { Http } from '@angular/http'; | |
@Injectable() | |
export class TestService { | |
constructor(private http: Http) {} | |
getUsers() { | |
return this.http.get('http://foo.bar'); | |
} | |
} | |
// App tests | |
import { inject, TestBed } from '@angular/core/testing'; | |
import { BaseRequestOptions, Response, ResponseOptions } from '@angular/http'; | |
import { MockBackend, MockConnection } from '@angular/http/testing'; | |
describe('Http', () => { | |
beforeEach(() => { | |
TestBed.configureTestingModule({ | |
providers: [ | |
{ | |
provide: Http, | |
useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => { | |
return new Http(backend, defaultOptions); | |
}, | |
deps: [MockBackend, BaseRequestOptions] | |
}, | |
{provide: TestService, useClass: TestService}, | |
{provide: MockBackend, useClass: MockBackend}, | |
{provide: BaseRequestOptions, useClass: BaseRequestOptions} | |
] | |
}); | |
}); | |
beforeEach(inject([MockBackend], (backend: MockBackend) => { | |
const baseResponse = new Response(new ResponseOptions({ body: 'got response' })); | |
backend.connections.subscribe((c: MockConnection) => c.mockRespond(baseResponse)); | |
})); | |
it('should return response when subscribed to getUsers', | |
inject([TestService], (testService: TestService) => { | |
testService.getUsers().subscribe((res: Response) => { | |
expect(res.text()).toBe('got response'); | |
}); | |
}) | |
); | |
}) |
This file contains 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
/* Note: There is no clear intent in writing this test */ | |
import { | |
beforeEachProviders, | |
describe, | |
expect, | |
inject, | |
it, | |
} from '@angular/core/testing'; | |
import { | |
ComponentFixture, | |
TestComponentBuilder, | |
} from '@angular/compiler/testing'; | |
import { ROUTER_FAKE_PROVIDERS } from '@angular/router/testing'; | |
import { App } from './app'; | |
import { setBaseTestProviders } from '@angular/core/testing'; | |
import { | |
TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS, | |
TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, | |
} from '@angular/platform-browser-dynamic/testing'; | |
setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS); | |
describe('App', () => { | |
beforeEachProviders(() => [ROUTER_FAKE_PROVIDERS]) | |
it('should be able to test', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { | |
return tcb.createAsync(App).then(componentFixture => { | |
componentFixture.detectChanges(); | |
expect(true).toBe(true); | |
}); | |
})); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Updated to run with angular@2.0.0-rc.7