Angular 2 test snippets. Codebase for https://developers.livechatinc.com/blog/category/programming/angular-2/

app-1.spec.ts

// 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');
  });

});

app-2-components.spec.ts

// 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);
  })); 
});

app-2-services.spec.ts

// 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');
  }));

});

app-3-http.spec.ts

// 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');
      });
    })
  );

})

app-3-router.spec.ts

/* 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);
    });
  }));

});

Updated to run with angular@2.0.0-rc.7