bixi/packages/core/layout/layout.spec.ts

企业级中后台前端解决方案

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from "@angular/router/testing";
import { Component, DebugElement } from '@angular/core';
import { IMenu, BixiLayoutModule } from '.';
import { TranslateModule } from '@ngx-translate/core';
import { BixiLayoutService } from './layout.service';
import { BixiLayoutComponent } from './layout.component';
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<BixiLayoutDemoComponent>;
  let debugEle: DebugElement;

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

    fixture = TestBed.createComponent(BixiLayoutDemoComponent);
    debugEle = fixture.debugElement;
  });

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

  // layout work
  it('should be work', () => {
    fixture.detectChanges();
    const layoutEl = debugEle.query(By.directive(BixiLayoutComponent));
    expect(layoutEl).not.toBeNull();
    const headerEle = debugEle.query(By.css('.bixi-layout-header'));
    const menuEle = debugEle.query(By.css('.bixi-layout>.bixi-layout-main>.bixi-layout-menu'));
    const contentEle = debugEle.query(By.css('.bixi-layout>.bixi-layout-main>.bixi-layout-menu'));
    expect(headerEle).not.toBeNull();
    expect(menuEle).not.toBeNull();
    expect(contentEle).not.toBeNull();
  })

  // ng-content work
  it('should be ng-content', () => {
    fixture.detectChanges();
    const uselessDiv = debugEle.queryAll(By.css('.useless-div'));
    expect(uselessDiv.length).toBe(0);
    const contentDiv = debugEle.query(By.css('.content-div'));
    expect(contentDiv).not.toBeNull();
    expect(contentDiv.nativeElement.textContent).toContain('useless element');
  })

  // 显示隐藏
  it('should be toggle work', () => {
    fixture.detectChanges();
    const triggerEl = debugEle.query(By.css('.bixi-menu-toggle'));
    triggerEl.triggerEventHandler('click', '');
    fixture.detectChanges();
    const collapsed = debugEle.queryAll(By.css('.bixi-layout-header-collapsed'));
    expect(collapsed.length).toBe(1);
  })

  // 切换布局
  it('should be layout change', () => {
    fixture.detectChanges();
    const normalLayout = debugEle.query(By.css('.bixi-headless-layout-main'))
    expect(normalLayout).toBeNull();
    const trigger = debugEle.query(By.css('.layout-toggle-btn'));
    expect(trigger).not.toBeNull();
    trigger.triggerEventHandler('click', '');
    fixture.detectChanges();
    const headerlessLayout = debugEle.query(By.css('.bixi-headless-layout-main'))
    expect(headerlessLayout).not.toBeNull();
  })
});


@Component({
  selector: 'app-demo',
  template: `
  <div class="main-wrap">
    <bixi-layout>
      <bixi-layout-header
        [logoSmall]="logoSmall"
        [logoLarge]="logoLarge" > 
      </bixi-layout-header>
      <bixi-layout-menu [menus]="menus"></bixi-layout-menu>
      <bixi-layout-content>
        <button class="layout-toggle-btn" (click)="onLayoutToggle()"></button>
        <div class="content-div">useless element</div>
      </bixi-layout-content>
      <div class="useless-div">useless element</div>
    </bixi-layout>
  </div>`
})
export class BixiLayoutDemoComponent {
  constructor(
    private layoutService: BixiLayoutService
  ) { }
  logoSmall = './assets/img/layout-logo-large.svg';
  logoLarge = './assets/img/layout-logo-small.svg';
  menus: IMenu[] = [
    {
      title: 'Group 1',
      icon: 'user',
      selected: true,
      link: './',
      matchRouterExact: true
    }
  ];

  onLayoutToggle() {
    this.layoutService.toggleHeader(false);
  }
}