Skip to content

Instantly share code, notes, and snippets.

@mikamboo

mikamboo/app-1.spec.ts

Forked from wkwiatek/app-1.spec.ts
Last active March 5, 2017 01:24
Download ZIP

Revisions

  1. mikamboo revised this gist Mar 5, 2017. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions app-2-services.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -9,11 +9,12 @@ import { inject, TestBed } from '@angular/core/testing';

    import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());


    describe('TestService', () => {


    beforeAll(() => {
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
    });

    beforeEach(() => {
    this.testService = new TestService();
    });
  2. @wkwiatek wkwiatek revised this gist Sep 19, 2016. 4 changed files with 106 additions and 123 deletions.
    106 changes: 41 additions & 65 deletions app-2-components.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,47 +1,38 @@
    // App
    import { Component, Input } from '@angular/core';
    import { NgFor } from '@angular/common';

    @Component({
    selector: 'list',
    template: '<span *ngFor="let user of users">{{ user }}</span>',
    directives: [NgFor],
    })
    export class ListComponent {
    @Input() public users: Array<string> = [];
    }


    // App tests
    import {
    addProviders,
    async,
    inject,
    } from '@angular/core/testing';
    import { async, inject, TestBed } from '@angular/core/testing';

    import {
    ComponentFixture,
    TestComponentBuilder,
    } from '@angular/compiler/testing'
    import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

    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);
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());


    describe('ListComponent', () => {

    it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ListComponent).then(componentFixture => {
    const element = componentFixture.nativeElement;
    componentFixture.componentInstance.users = ['John'];
    componentFixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(1);
    beforeEach(() => {
    TestBed.configureTestingModule({
    declarations: [ListComponent]
    });

    this.fixture = TestBed.createComponent(ListComponent);
    });

    it('should render list', async(() => {
    const element = this.fixture.nativeElement;
    this.fixture.componentInstance.users = ['John'];
    this.fixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(1);
    }));

    });
    @@ -56,7 +47,6 @@ class UserService {
    @Component({
    selector: 'list',
    template: '<span *ngFor="let user of users">{{ user }}</span>',
    directives: [NgFor],
    })
    class ListComponentBootstrapDI {
    private users: Array<string> = [];
    @@ -74,15 +64,18 @@ class MockUserService {
    describe('ListComponent DI', () => {

    beforeEach(() => {
    addProviders([{ provide: UserService, useClass: MockUserService }]);
    TestBed.configureTestingModule({
    declarations: [ListComponentBootstrapDI],
    providers: [{ provide: UserService, useClass: MockUserService }],
    });

    this.fixture = TestBed.createComponent(ListComponentBootstrapDI);
    });

    it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ListComponentBootstrapDI).then(componentFixture => {
    const element = componentFixture.nativeElement;
    componentFixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    });
    it('should render list', async(() => {
    const element = this.fixture.nativeElement;
    this.fixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    }));

    });
    @@ -92,7 +85,6 @@ describe('ListComponent DI', () => {
    @Component({
    selector: 'list',
    template: '<span *ngFor="let user of users">{{ user }}</span>',
    directives: [NgFor],
    providers: [UserService],
    })
    class ListComponentComponentDI {
    @@ -105,41 +97,25 @@ class ListComponentComponentDI {

    // 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 => {
    const element = componentFixture.nativeElement;
    componentFixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    });
    }));
    });


    beforeEach(() => {
    TestBed.configureTestingModule({
    declarations: [ListComponentBootstrapDI],
    });

    // App final test
    describe('ListComponent Final', () => {

    beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    tcb
    .overrideProviders(
    ListComponentComponentDI,
    [{ provide: UserService, useClass: MockUserService }]
    )
    .createAsync(ListComponentComponentDI)
    .then(componentFixture => {
    this.listComponentFixture = componentFixture;
    });
    })));
    this.fixture = TestBed
    .overrideComponent(ListComponentBootstrapDI, {
    set: {
    providers: [{ provide: UserService, useClass: MockUserService }],
    },
    })
    .createComponent(ListComponentBootstrapDI);
    });

    it('should render list', () => {
    const element = this.listComponentFixture.nativeElement;
    this.listComponentFixture.detectChanges();
    it('should render list', async(() => {
    const element = this.fixture.nativeElement;
    this.fixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    });
    }));

    });
    22 changes: 12 additions & 10 deletions app-2-services.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -5,15 +5,11 @@ class TestService {


    // App tests
    import { addProviders, inject } from '@angular/core/testing';
    import { inject, TestBed } from '@angular/core/testing';

    import { setBaseTestProviders } from '@angular/core/testing';
    import {
    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,
    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
    } from '@angular/platform-browser-dynamic/testing';
    import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());


    describe('TestService', () => {
    @@ -32,7 +28,9 @@ describe('TestService', () => {
    describe('TestService Injected', () => {

    beforeEach(() => {
    addProviders([TestService])
    TestBed.configureTestingModule({
    providers: [TestService],
    });
    });

    it('should have name property set', inject([TestService], (testService: TestService) => {
    @@ -49,7 +47,9 @@ class MockTestService {
    describe('TestService Mocked', () => {

    beforeEach(() => {
    addProviders([{ provide: TestService, useClass: MockTestService }])
    TestBed.configureTestingModule({
    providers: [{ provide: TestService, useClass: MockTestService }],
    });
    });

    it('should have name property set', inject([TestService], (testService: TestService) => {
    @@ -68,7 +68,9 @@ class MockTestServiceInherited extends TestService {
    describe('TestService Mocked Inherited', () => {

    beforeEach(() => {
    addProviders([{ provide: TestService, useClass: MockTestServiceInherited }])
    TestBed.configureTestingModule({
    providers: [{ provide: TestService, useClass: MockTestServiceInherited }],
    });
    });

    it('should say hello with name', inject([TestService], (testService: TestService) => {
    42 changes: 23 additions & 19 deletions app-3-http.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -13,39 +13,43 @@ export class TestService {


    // App tests
    import { addProviders, inject } from '@angular/core/testing';
    import { inject, TestBed } from '@angular/core/testing';

    import { BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
    import { MockBackend, MockConnection } from '@angular/http/testing';

    import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

    describe('Http', () => {

    beforeEach(() => {
    addProviders([
    TestService,
    BaseRequestOptions,
    MockBackend,
    {
    provide: Http,
    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
    return new Http(backend, defaultOptions);
    TestBed.configureTestingModule({
    providers: [
    TestService,
    BaseRequestOptions,
    MockBackend,
    {
    provide: Http,
    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
    return new Http(backend, defaultOptions);
    },
    deps: [MockBackend, BaseRequestOptions],
    },
    deps: [MockBackend, 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');
    });
    })
    );
    it('should return response when subscribed to getUsers', inject([TestService], (testService: TestService) => {
    testService.getUsers().subscribe((res: Response) => {
    expect(res.text()).toBe('got response');
    });
    }));

    })
    59 changes: 30 additions & 29 deletions app-3-router.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,32 +1,33 @@
    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();
    // App
    import { Component } from '@angular/core';
    import { Routes } from '@angular/router';

    @Component({
    selector: 'app',
    template: `<router-outlet></router-outlet>`
    })
    class AppComponent {}

    // App tests
    import { async, TestBed } from '@angular/core/testing';
    import { RouterTestingModule } from '@angular/router/testing';

    import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';

    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());

    describe('AppComponent', () => {

    beforeEach(() => {
    TestBed.configureTestingModule({
    declarations: [AppComponent],
    imports: [RouterTestingModule]
    });
    });

    it('should be able to test', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.whenStable().then(() => {
    expect(true).toBe(true);
    });
    }));
  3. @wkwiatek wkwiatek revised this gist Jul 15, 2016. 3 changed files with 32 additions and 49 deletions.
    19 changes: 6 additions & 13 deletions app-2-components.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -14,13 +14,9 @@ export class ListComponent {

    // App tests
    import {
    addProviders,
    async,
    it,
    describe,
    expect,
    inject,
    beforeEach,
    beforeEachProviders,
    } from '@angular/core/testing';

    import {
    @@ -71,18 +67,15 @@ class ListComponentBootstrapDI {
    }


    // App DI tests
    import { provide } from '@angular/core';

    class MockUserService {
    public users: Array<string> = ['John', 'Steve'];
    }

    describe('ListComponent DI', () => {

    beforeEachProviders(() => [
    provide(UserService, { useClass: MockUserService })
    ]);
    beforeEach(() => {
    addProviders([{ provide: UserService, useClass: MockUserService }]);
    });

    it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ListComponentBootstrapDI).then(componentFixture => {
    @@ -116,7 +109,7 @@ describe('ListComponent DI Component', () => {
    tcb
    .overrideProviders(
    ListComponentComponentDI,
    [provide(UserService, { useClass: MockUserService })]
    [{ provide: UserService, useClass: MockUserService }]
    )
    .createAsync(ListComponentComponentDI).then(componentFixture => {
    const element = componentFixture.nativeElement;
    @@ -135,7 +128,7 @@ describe('ListComponent Final', () => {
    tcb
    .overrideProviders(
    ListComponentComponentDI,
    [provide(UserService, { useClass: MockUserService })]
    [{ provide: UserService, useClass: MockUserService }]
    )
    .createAsync(ListComponentComponentDI)
    .then(componentFixture => {
    27 changes: 11 additions & 16 deletions app-2-services.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -5,15 +5,8 @@ class TestService {


    // App tests
    import {
    it,
    describe,
    expect,
    inject,
    beforeEachProviders,
    } from '@angular/core/testing';

    import { provide } from '@angular/core';
    import { addProviders, inject } from '@angular/core/testing';

    import { setBaseTestProviders } from '@angular/core/testing';
    import {
    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,
    @@ -38,7 +31,9 @@ describe('TestService', () => {

    describe('TestService Injected', () => {

    beforeEachProviders(() => [TestService]);
    beforeEach(() => {
    addProviders([TestService])
    });

    it('should have name property set', inject([TestService], (testService: TestService) => {
    expect(testService.name).toBe('Injected Service');
    @@ -53,9 +48,9 @@ class MockTestService {

    describe('TestService Mocked', () => {

    beforeEachProviders(() => [
    provide(TestService, {useClass: MockTestService})
    ]);
    beforeEach(() => {
    addProviders([{ provide: TestService, useClass: MockTestService }])
    });

    it('should have name property set', inject([TestService], (testService: TestService) => {
    expect(testService.mockName).toBe('Mocked Service');
    @@ -72,9 +67,9 @@ class MockTestServiceInherited extends TestService {

    describe('TestService Mocked Inherited', () => {

    beforeEachProviders(() => [
    provide(TestService, { useClass: MockTestServiceInherited })
    ]);
    beforeEach(() => {
    addProviders([{ provide: TestService, useClass: MockTestServiceInherited }])
    });

    it('should say hello with name', inject([TestService], (testService: TestService) => {
    expect(testService.sayHello()).toBe('Injected Service');
    35 changes: 15 additions & 20 deletions app-3-http.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -13,32 +13,27 @@ export class TestService {


    // App tests
    import {
    beforeEach,
    beforeEachProviders,
    describe,
    expect,
    inject,
    it,
    } from '@angular/core/testing';

    import { provide } from '@angular/core';
    import { addProviders, inject } from '@angular/core/testing';

    import { BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
    import { MockBackend, MockConnection } from '@angular/http/testing';

    describe('Http', () => {

    beforeEachProviders(() => [
    TestService,
    BaseRequestOptions,
    MockBackend,
    provide(Http, {
    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
    return new Http(backend, defaultOptions);
    beforeEach(() => {
    addProviders([
    TestService,
    BaseRequestOptions,
    MockBackend,
    {
    provide: Http,
    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
    return new Http(backend, defaultOptions);
    },
    deps: [MockBackend, BaseRequestOptions]
    },
    deps: [MockBackend, BaseRequestOptions]
    })
    ]);
    ])
    });

    beforeEach(inject([MockBackend], (backend: MockBackend) => {
    const baseResponse = new Response(new ResponseOptions({ body: 'got response' }));
  4. @wkwiatek wkwiatek revised this gist Jun 15, 2016. 1 changed file with 1 addition and 6 deletions.
    7 changes: 1 addition & 6 deletions app-1.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@ import { Component } from '@angular/core';

    @Component({
    selector: 'app',
    template: '<span>{{ sayHello() }}</span>'
    template: '<span>{{ sayHello() }}</span>',
    })
    export class App {
    public name: string = 'John';
    @@ -15,11 +15,6 @@ export class App {


    // App tests
    import {
    describe,
    expect,
    it,
    } from '@angular/core/testing';

    describe('App', () => {

  5. @wkwiatek wkwiatek revised this gist May 16, 2016. 2 changed files with 5 additions and 6 deletions.
    8 changes: 4 additions & 4 deletions app-2-components.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -40,7 +40,7 @@ setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAM
    describe('ListComponent', () => {

    it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ListComponent).then((componentFixture: ComponentFixture) => {
    return tcb.createAsync(ListComponent).then(componentFixture => {
    const element = componentFixture.nativeElement;
    componentFixture.componentInstance.users = ['John'];
    componentFixture.detectChanges();
    @@ -85,7 +85,7 @@ describe('ListComponent DI', () => {
    ]);

    it('should render list', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(ListComponentBootstrapDI).then((componentFixture: ComponentFixture) => {
    return tcb.createAsync(ListComponentBootstrapDI).then(componentFixture => {
    const element = componentFixture.nativeElement;
    componentFixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    @@ -118,7 +118,7 @@ describe('ListComponent DI Component', () => {
    ListComponentComponentDI,
    [provide(UserService, { useClass: MockUserService })]
    )
    .createAsync(ListComponentComponentDI).then((componentFixture: ComponentFixture) => {
    .createAsync(ListComponentComponentDI).then(componentFixture => {
    const element = componentFixture.nativeElement;
    componentFixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    @@ -138,7 +138,7 @@ describe('ListComponent Final', () => {
    [provide(UserService, { useClass: MockUserService })]
    )
    .createAsync(ListComponentComponentDI)
    .then((componentFixture: ComponentFixture) => {
    .then(componentFixture => {
    this.listComponentFixture = componentFixture;
    });
    })));
    3 changes: 1 addition & 2 deletions app-3-router.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -22,11 +22,10 @@ setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAM

    describe('App', () => {

    // unit tests which uses Router: https://github.com/mgechev/angular2-seed/blob/master/app/components/app/app_spec.ts#L30
    beforeEachProviders(() => [ROUTER_FAKE_PROVIDERS])

    it('should be able to test', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(App).then((componentFixture: ComponentFixture) => {
    return tcb.createAsync(App).then(componentFixture => {
    componentFixture.detectChanges();
    expect(true).toBe(true);
    });
  6. @wkwiatek wkwiatek revised this gist May 3, 2016. 5 changed files with 55 additions and 83 deletions.
    12 changes: 6 additions & 6 deletions app-1.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // App
    import { Component } from 'angular2/core';
    import { Component } from '@angular/core';

    @Component({
    selector: 'app',
    @@ -16,22 +16,22 @@ export class App {

    // App tests
    import {
    it,
    describe,
    expect,
    } from 'angular2/testing';
    it,
    } from '@angular/core/testing';

    describe('App', () => {

    beforeEach(function() {
    beforeEach(() => {
    this.app = new App();
    });

    it('should have name property', function() {
    it('should have name property', () => {
    expect(this.app.name).toBe('John');
    });

    it('should say hello with name property', function() {
    it('should say hello with name property', () => {
    expect(this.app.sayHello()).toBe('Hello John');
    });

    35 changes: 19 additions & 16 deletions app-2-components.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    // App
    import { Component, Input } from 'angular2/core';
    import { NgFor } from 'angular2/common';
    import { Component, Input } from '@angular/core';
    import { NgFor } from '@angular/common';

    @Component({
    selector: 'list',
    template: '<span *ngFor="#user of users">{{user}}</span>',
    template: '<span *ngFor="let user of users">{{ user }}</span>',
    directives: [NgFor],
    })
    export class ListComponent {
    @@ -21,17 +21,20 @@ import {
    inject,
    beforeEach,
    beforeEachProviders,
    } from '@angular/core/testing';

    import {
    ComponentFixture,
    TestComponentBuilder,
    } from 'angular2/testing';
    } from '@angular/compiler/testing'

    import { setBaseTestProviders } from 'angular2/testing';
    import { setBaseTestProviders } from '@angular/core/testing';
    import {
    TEST_BROWSER_PLATFORM_PROVIDERS,
    TEST_BROWSER_APPLICATION_PROVIDERS,
    } from 'angular2/platform/testing/browser';
    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,
    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
    } from '@angular/platform-browser-dynamic/testing';

    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);


    describe('ListComponent', () => {
    @@ -56,7 +59,7 @@ class UserService {

    @Component({
    selector: 'list',
    template: '<span *ngFor="#user of users">{{ user }}</span>',
    template: '<span *ngFor="let user of users">{{ user }}</span>',
    directives: [NgFor],
    })
    class ListComponentBootstrapDI {
    @@ -69,7 +72,7 @@ class ListComponentBootstrapDI {


    // App DI tests
    import { provide } from 'angular2/core';
    import { provide } from '@angular/core';

    class MockUserService {
    public users: Array<string> = ['John', 'Steve'];
    @@ -95,7 +98,7 @@ describe('ListComponent DI', () => {
    // App DI for Component
    @Component({
    selector: 'list',
    template: '<span *ngFor="#user of users">{{ user }}</span>',
    template: '<span *ngFor="let user of users">{{ user }}</span>',
    directives: [NgFor],
    providers: [UserService],
    })
    @@ -116,10 +119,10 @@ describe('ListComponent DI Component', () => {
    [provide(UserService, { useClass: MockUserService })]
    )
    .createAsync(ListComponentComponentDI).then((componentFixture: ComponentFixture) => {
    const element = componentFixture.nativeElement;
    componentFixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    });
    const element = componentFixture.nativeElement;
    componentFixture.detectChanges();
    expect(element.querySelectorAll('span').length).toBe(2);
    });
    }));
    });

    18 changes: 9 additions & 9 deletions app-2-services.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -11,25 +11,25 @@ import {
    expect,
    inject,
    beforeEachProviders,
    } from 'angular2/testing';
    } from '@angular/core/testing';

    import { provide } from 'angular2/core';
    import { setBaseTestProviders } from 'angular2/testing';
    import { provide } from '@angular/core';
    import { setBaseTestProviders } from '@angular/core/testing';
    import {
    TEST_BROWSER_PLATFORM_PROVIDERS,
    TEST_BROWSER_APPLICATION_PROVIDERS,
    } from 'angular2/platform/testing/browser';
    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,
    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
    } from '@angular/platform-browser-dynamic/testing';

    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);


    describe('TestService', () => {

    beforeEach(function() {
    beforeEach(() => {
    this.testService = new TestService();
    });

    it('should have name property set', function() {
    it('should have name property set', () => {
    expect(this.testService.name).toBe('Injected Service');
    });

    14 changes: 7 additions & 7 deletions app-3-http.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    // App
    import { Injectable } from 'angular2/core';
    import { Http } from 'angular2/http';
    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';

    @Injectable()
    export class TestService {
    @@ -20,11 +20,11 @@ import {
    expect,
    inject,
    it,
    } from 'angular2/testing';
    } from '@angular/core/testing';

    import { provide } from 'angular2/core';
    import { BaseRequestOptions, Response, ResponseOptions } from 'angular2/http';
    import { MockBackend, MockConnection } from 'angular2/http/testing';
    import { provide } from '@angular/core';
    import { BaseRequestOptions, Response, ResponseOptions } from '@angular/http';
    import { MockBackend, MockConnection } from '@angular/http/testing';

    describe('Http', () => {

    @@ -41,7 +41,7 @@ describe('Http', () => {
    ]);

    beforeEach(inject([MockBackend], (backend: MockBackend) => {
    const baseResponse = new Response(new ResponseOptions({body: 'got response'}));
    const baseResponse = new Response(new ResponseOptions({ body: 'got response' }));
    backend.connections.subscribe((c: MockConnection) => c.mockRespond(baseResponse));
    }));

    59 changes: 14 additions & 45 deletions app-3-router.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,63 +1,32 @@
    // App
    import { Component } from 'angular2/core';
    import { RouteConfig, RouterOutlet } from 'angular2/router';

    @Component({
    selector: 'test',
    template: 'test'
    })
    class TestComponent {}

    @Component({
    selector: 'app',
    template: '<router-outlet></router-outlet>',
    directives: [RouterOutlet],
    })
    @RouteConfig([
    { path: '/', component: TestComponent },
    ])
    class App {}


    // App tests
    import {
    beforeEachProviders,
    describe,
    expect,
    inject,
    it,
    setBaseTestProviders,
    } from '@angular/core/testing';
    import {
    ComponentFixture,
    TestComponentBuilder,
    } from 'angular2/testing';

    import { provide } from 'angular2/core';
    import { RootRouter } from 'angular2/src/router/router';
    import {
    Router,
    RouteRegistry,
    ROUTER_PRIMARY_COMPONENT,
    } from 'angular2/router';
    import { Location } from 'angular2/platform/common';
    import { SpyLocation } from 'angular2/src/mock/location_mock';
    } 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_PLATFORM_PROVIDERS,
    TEST_BROWSER_APPLICATION_PROVIDERS,
    } from 'angular2/platform/testing/browser';
    TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS,
    TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS,
    } from '@angular/platform-browser-dynamic/testing';

    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);
    setBaseTestProviders(TEST_BROWSER_DYNAMIC_PLATFORM_PROVIDERS, TEST_BROWSER_DYNAMIC_APPLICATION_PROVIDERS);

    describe('App', () => {

    beforeEachProviders(() => [
    RouteRegistry,
    provide(Location, { useClass: SpyLocation }),
    provide(ROUTER_PRIMARY_COMPONENT, { useValue: App }),
    provide(Router, { useClass: RootRouter })
    ]);
    // unit tests which uses Router: https://github.com/mgechev/angular2-seed/blob/master/app/components/app/app_spec.ts#L30
    beforeEachProviders(() => [ROUTER_FAKE_PROVIDERS])

    it('should be able to test', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(App).then((componentFixture) => {
    return tcb.createAsync(App).then((componentFixture: ComponentFixture) => {
    componentFixture.detectChanges();
    expect(true).toBe(true);
    });
  7. @wkwiatek wkwiatek revised this gist Apr 28, 2016. No changes.
  8. @wkwiatek wkwiatek revised this gist Apr 28, 2016. No changes.
  9. @wkwiatek wkwiatek revised this gist Apr 28, 2016. 1 changed file with 56 additions and 0 deletions.
    56 changes: 56 additions & 0 deletions app-3-http.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,56 @@
    // App
    import { Injectable } from 'angular2/core';
    import { Http } from 'angular2/http';

    @Injectable()
    export class TestService {
    constructor(private http: Http) {}

    getUsers() {
    return this.http.get('http://foo.bar');
    }
    }


    // App tests
    import {
    beforeEach,
    beforeEachProviders,
    describe,
    expect,
    inject,
    it,
    } from 'angular2/testing';

    import { provide } from 'angular2/core';
    import { BaseRequestOptions, Response, ResponseOptions } from 'angular2/http';
    import { MockBackend, MockConnection } from 'angular2/http/testing';

    describe('Http', () => {

    beforeEachProviders(() => [
    TestService,
    BaseRequestOptions,
    MockBackend,
    provide(Http, {
    useFactory: (backend: MockBackend, defaultOptions: BaseRequestOptions) => {
    return new Http(backend, defaultOptions);
    },
    deps: [MockBackend, 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');
    });
    })
    );

    })
  10. @wkwiatek wkwiatek revised this gist Apr 28, 2016. 1 changed file with 66 additions and 0 deletions.
    66 changes: 66 additions & 0 deletions app-3-router.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    // App
    import { Component } from 'angular2/core';
    import { RouteConfig, RouterOutlet } from 'angular2/router';

    @Component({
    selector: 'test',
    template: 'test'
    })
    class TestComponent {}

    @Component({
    selector: 'app',
    template: '<router-outlet></router-outlet>',
    directives: [RouterOutlet],
    })
    @RouteConfig([
    { path: '/', component: TestComponent },
    ])
    class App {}


    // App tests
    import {
    beforeEachProviders,
    describe,
    expect,
    inject,
    it,
    setBaseTestProviders,
    TestComponentBuilder,
    } from 'angular2/testing';

    import { provide } from 'angular2/core';
    import { RootRouter } from 'angular2/src/router/router';
    import {
    Router,
    RouteRegistry,
    ROUTER_PRIMARY_COMPONENT,
    } from 'angular2/router';
    import { Location } from 'angular2/platform/common';
    import { SpyLocation } from 'angular2/src/mock/location_mock';

    import {
    TEST_BROWSER_PLATFORM_PROVIDERS,
    TEST_BROWSER_APPLICATION_PROVIDERS,
    } from 'angular2/platform/testing/browser';

    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS);

    describe('App', () => {

    beforeEachProviders(() => [
    RouteRegistry,
    provide(Location, { useClass: SpyLocation }),
    provide(ROUTER_PRIMARY_COMPONENT, { useValue: App }),
    provide(Router, { useClass: RootRouter })
    ]);

    it('should be able to test', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb.createAsync(App).then((componentFixture) => {
    componentFixture.detectChanges();
    expect(true).toBe(true);
    });
    }));

    });
  11. @wkwiatek wkwiatek revised this gist Apr 28, 2016. 1 changed file with 2 additions and 1 deletion.
    3 changes: 2 additions & 1 deletion app-2-components.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -14,14 +14,15 @@ export class ListComponent {

    // App tests
    import {
    async,
    it,
    describe,
    expect,
    inject,
    beforeEach,
    beforeEachProviders,
    ComponentFixture,
    TestComponentBuilder, injectAsync, async,
    TestComponentBuilder,
    } from 'angular2/testing';

    import { setBaseTestProviders } from 'angular2/testing';
  12. @wkwiatek wkwiatek revised this gist Apr 28, 2016. 1 changed file with 148 additions and 0 deletions.
    148 changes: 148 additions & 0 deletions app-2-components.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,148 @@
    // 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 {
    it,
    describe,
    expect,
    inject,
    beforeEach,
    beforeEachProviders,
    ComponentFixture,
    TestComponentBuilder, injectAsync, async,
    } 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);
    });

    });
  13. @wkwiatek wkwiatek revised this gist Apr 28, 2016. 1 changed file with 83 additions and 0 deletions.
    83 changes: 83 additions & 0 deletions app-2-services.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,83 @@
    // 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');
    }));

    });
  14. @wkwiatek wkwiatek created this gist Apr 28, 2016.
    38 changes: 38 additions & 0 deletions app-1.spec.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,38 @@
    // 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');
    });

    });