import { DebugElement } from '@angular/core';
import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { Router } from '@angular/router';

import { NgZorroAntdModule } from 'ng-zorro-antd';
import { of } from 'rxjs/observable/of';
import { RouterLinkStubDirective, ActivatedRoute, RouterOutletStubComponent, ActivatedRouteStub } from '../../../testing/router-stubs';
import { PlatformComponent } from './platform.component';
import { PlatformService } from './shared/platform.service';

let component: PlatformComponent;
let fixture: ComponentFixture<PlatformComponent>;
let activatedRoute: ActivatedRouteStub;
let routerLinks: RouterLinkStubDirective[];
let linkDes: DebugElement[];

describe('PlatformComponent', () => {
  const expectSystem = { id: 1, cnName: 'testSystemName' };

  const testSystemList = {
    code: 200,
    data: [expectSystem],
    message: 'hahahah'
  };

  const testTableList = {
    code: 200,
    data: [{ id: 12, cnName: 'testTableName' }],
    message: 'hahahah'
  };

  beforeEach(() => {
    activatedRoute = new ActivatedRouteStub();
  });

  beforeEach(async(() => {
    const routerSpy = jasmine.createSpyObj('Router', ['navigate']);

    class PlatformServiceSpy {
      getSystemList() {
        return of(testSystemList);
      }
    }

    TestBed.configureTestingModule({
      imports: [
        FormsModule,
        ReactiveFormsModule,
        NgZorroAntdModule,
      ],
      declarations: [
        PlatformComponent,
        RouterOutletStubComponent,
        RouterLinkStubDirective
      ],
      providers: [
        { provide: PlatformService, useClass: PlatformServiceSpy },
        { provide: Router, useValue: routerSpy },
        { provide: ActivatedRoute, useValue: activatedRoute }
      ]
    })
    .compileComponents().then(_ => {
      fixture = TestBed.createComponent(PlatformComponent);
      component = fixture.componentInstance;
    });
  }));

  beforeEach(() => {
    // 路由赋值
    activatedRoute.testParamMap = { systemId: expectSystem.id };
    fixture.detectChanges(); // trigger initial data binding
    linkDes = fixture.debugElement.queryAll(By.directive(RouterLinkStubDirective));
    routerLinks = linkDes.map(de => de.injector.get(RouterLinkStubDirective));
  });

  it('can get RouterLinks', () => {
    expect(routerLinks.length).toBe(2, 'should have 2 routerLinks');
    expect(routerLinks[0].linkParams[0]).toBe('./home');
    expect(routerLinks[1].linkParams[0]).toBe('./analysis');
  });

  it('can click platform menu link', () => {
    const analysisLinkDe = linkDes[1];   // analysis link DebugElement
    const analysisLink = routerLinks[1]; // analysis link directive

    expect(analysisLink.navigatedTo).toBeNull('should not have navigated yet');
    // 点击菜单
    analysisLinkDe.triggerEventHandler('click', null);
    fixture.detectChanges();

    expect(analysisLink.navigatedTo[0]).toBe('./analysis');
  });

  // 同步
  it('should show quote after getQuote sync', () => {
      console.log('sync');
      expect(component.currentSystem.id).toBe(expectSystem.id);
  });

  // 异步方法1
  it('should show quote after getQuote promise (async)', async(() => {
    fixture.whenStable().then(() => { // wait for async getQuote
      fixture.detectChanges();       // update view with quote
      expect(component.currentSystem.id).toBe(expectSystem.id);
    });
  }));

  // 异步方法2
  it('should show quote after getQuote2 promise (async)', fakeAsync(() => {
    fixture.detectChanges();
    tick();
    expect(component.currentSystem.id).toBe(expectSystem.id);
  }));

});

function createComponent() {
  fixture = TestBed.createComponent(PlatformComponent);
  component = fixture.componentInstance;
  // page = new Page(fixture);
  // 1st change detection triggers ngOnInit which gets a hero
  fixture.detectChanges();
  return fixture.whenStable().then(() => {
    // 2nd change detection displays the async-fetched hero
    fixture.detectChanges();
  });
}