bixi/packages/core/table/table.spec.ts

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

import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { Component, DebugElement } from '@angular/core';
import { BixiTableModule } from '@bixi/core/table/table.module';
import { NzTableComponent, NzTableModule } from 'ng-zorro-antd/table';
import { ICols } from '@bixi/core/table/table.type';
import { By } from '@angular/platform-browser';
import { NzPaginationComponent, NzPaginationItemComponent, NzPaginationModule } from 'ng-zorro-antd';
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
import { BixiTableService } from './table.service';

describe('bixi table', () => {
  let fixture: ComponentFixture<TestComponent>;
  let context: TestComponent;
  let debugEle: DebugElement;

  beforeEach(async () => {
    TestBed.configureTestingModule({
      imports: [BixiTableModule, NzTableModule, NzPaginationModule, BrowserAnimationsModule, NoopAnimationsModule],
      declarations: [TestComponent]
    });

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

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

  it('should be render pagination', () => {
    // given
    context.cols = [
      {
        name: '姓名',
        key: 'name'
      }
    ];

    // when
    fixture.detectChanges();

    // then
    const triggerEl = debugEle.query(By.directive(NzPaginationComponent));
    expect(triggerEl).toBeDefined();
  });

  it('should be search work', fakeAsync(() => {
    // given
    context.cols = [
      {
        name: '姓名',
        key: 'name'
      }
    ];

    // when
    fixture.detectChanges();
    const triggerEl = debugEle.query(By.directive(NzPaginationComponent)).queryAll(By.directive(NzPaginationItemComponent))[3].nativeElement.querySelector('a');

    // then
    expect(context.callback).toHaveBeenCalledTimes(0);

    // when
    triggerEl.click();
    tick(500);
    fixture.detectChanges();

    // then
    expect(context.callback).toHaveBeenCalledTimes(1);
  }));

  it('should be frontend pagination work', () => {
    // given
    context.cols = [
      {
        name: '姓名',
        key: 'name'
      }
    ];

    // when
    context.frontendPagination = true;
    fixture.detectChanges();

    // then
    const tableEl = debugEle.query(By.directive(NzTableComponent)).componentInstance as NzTableComponent;
    expect(tableEl.nzFrontPagination).toEqual(true);
  });

  it('should be render table scroll', () => {
    // given
    context.cols = [
      {
        name: '姓名',
        key: 'name'
      }
    ];
    context.scroll = { y: '200px' };

    // when
    fixture.detectChanges();

    // then
    const tableEl = debugEle.query(By.directive(NzTableComponent)).componentInstance as NzTableComponent;
    expect(tableEl.scrollY).toEqual('200px');
  });

  it('should be work when visible is a function', () => {
    // given
    context.cols = [
      {
        name: '姓名',
        key: 'name',
        visible: () => context.checked
      }
    ];

    // when
    fixture.detectChanges();

    // then
    expect(debugEle.nativeElement.querySelectorAll('thead tr th').length).toBe(0);

    // when
    context.checked = true;
    context.bixiTableService.updateView();
    fixture.detectChanges();

    // then
    expect(debugEle.nativeElement.querySelectorAll('thead tr th').length).toBe(1);
  });
});


const rows = ((new Array(100)).fill('') as any)
  .map((v: string, i: number) => {
    return {
      index: i,
      name: `数据_${i}${v}`
    };
  });

@Component({
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
      [frontPagination]="frontendPagination"
      [scroll]="scroll"
      [(pagination)]="pagination"
      (search)="callback()"
    ></bixi-table>`
})
class TestComponent {
  pagination = {
    page: 1,
    pageSize: 10,
    total: rows.length
  };
  checked = false;
  frontendPagination = false;
  rows = [...rows].slice((this.pagination.page - 1) * this.pagination.pageSize, (this.pagination.page - 1) * this.pagination.pageSize + this.pagination.pageSize);
  cols: ICols = [];
  callback = jasmine.createSpy('onSearch callback');
  scroll = {};

  constructor(public bixiTableService: BixiTableService) {

  }
}