import { ComponentFixture, TestBed, inject, fakeAsync, tick } from '@angular/core/testing';
import { RouterTestingModule } from "@angular/router/testing";
import { Component, DebugElement } from '@angular/core';
import { BixiLayoutModule } from '..';
import { TranslateModule } from '@ngx-translate/core';
import { BixiLayoutService } from '../layout.service';
import { TableOutline, UserOutline } from '@ant-design/icons-angular/icons';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { By } from '@angular/platform-browser';
import { NzIconModule } from 'ng-zorro-antd';

const icons = [TableOutline, UserOutline];

describe('bixi layout', () => {
  let fixture: ComponentFixture<BixiHeaderDemoComponent>;
  let debugEle: DebugElement;
  let srv: BixiLayoutService;
  let context: BixiHeaderDemoComponent;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [BixiLayoutModule, TranslateModule.forRoot(), NzIconModule.forRoot(icons), RouterTestingModule.withRoutes([]), BrowserAnimationsModule, NoopAnimationsModule],
      providers: [BixiLayoutService],
      declarations: [BixiHeaderDemoComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(BixiHeaderDemoComponent);
    debugEle = fixture.debugElement;
    context = fixture.componentInstance;
  });

  beforeEach(inject([BixiLayoutService], (layoutService: BixiLayoutService) => {
    srv = layoutService;
  }));

  afterEach(() => {
    fixture.destroy();
  });

  it('should be logo', fakeAsync(() => {
    fixture.detectChanges();
    let logo = debugEle.query(By.css('.bixi-layout-header-logo-full')).nativeElement;
    expect(logo.src).toContain('large');
    srv.toggleMenu();
    tick(200);
    fixture.detectChanges();
    logo = debugEle.query(By.css('.bixi-layout-header-logo-small')).nativeElement;
    expect(logo.src).toContain('small');
    context.logoSmall = 'great'
    fixture.detectChanges();
    expect(logo.src).toContain('great');
  }))

  it('should be breatcrumb', () => {
    fixture.detectChanges();
    let bread = debugEle.query(By.css('.bixi-layout-header-info')).nativeElement;
    expect(bread.textContent).toBe('hello');
    context.breadcrumbs = '';
    fixture.detectChanges();
    bread = debugEle.query(By.css('.bixi-layout-header-info')).nativeElement;
    expect(bread.textContent).toBe('');
  })

  it('should be tools', () => {
    fixture.detectChanges();
    let tools = debugEle.query(By.css('.bixi-layout-header-tools')).nativeElement;
    expect(tools.textContent).toBe('toolsDft');
    context.tools = '';
    fixture.detectChanges();
    tools = debugEle.query(By.css('.bixi-layout-header-tools')).nativeElement;
    expect(tools.textContent).toBe('');
  })
});


@Component({
  selector: 'app-demo',
  template: `
  <bixi-layout-header
    [logoSmall]="logoSmall"
    [logoLarge]="logoLarge"
    [breadcrumbs]="breadcrumbs"
    [tools]="tools"
  >

  </bixi-layout-header>
  `
})
export class BixiHeaderDemoComponent {
  logoSmall = 'small';
  logoLarge = 'large';
  breadcrumbs = 'hello';
  tools = 'toolsDft'
}