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

});