bixi/packages/core/table/cols/col-status.spec.ts

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

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { BIXI_TABLE_CONFIG, BixiTableModule, EColType, IBixiTableConfig, ICols } from '@bixi/core/table';
import { Component, DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import { BixiTableColTextComponent } from '@bixi/core/table/cols/col-text.component';
import { BixiTableColStatusComponent } from '@bixi/core/table/cols/col-status.component';
import { TableOutline } from '@ant-design/icons-angular/icons';
import { NzIconModule } from 'ng-zorro-antd';

const icons = [TableOutline];

describe('col status default', () => {
  let fixture: ComponentFixture<TestComponent>;
  let context: TestComponent;
  let debugEle: DebugElement;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BixiTableModule, NzIconModule.forRoot(icons)],
      declarations: [TestComponent]
    });

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

    it('should render default status', () => {
      // given
      context.cols = [
        {
          name: '状态',
          key: 'status'
        },
        {
          name: '显示状态',
          key: 'status',
          type: EColType.status
        }
      ];

      // when
      fixture.detectChanges();

      // then
      const matchRet = [
        {
          beforeConvertText: 'success',
          afterConvertClassName: 'bixi-col-success-status',
          afterConvertClassText: '已完成'
        }, {
          beforeConvertText: 'processing',
          afterConvertClassName: 'bixi-col-processing-status',
          afterConvertClassText: '正在执行'
        }, {
          beforeConvertText: 'error',
          afterConvertClassName: 'bixi-col-error-status',
          afterConvertClassText: '异常'
        }, {
          beforeConvertText: 'default',
          afterConvertClassName: 'bixi-col-default-status',
          afterConvertClassText: '等待执行'
        }, {
          beforeConvertText: 'stop',
          afterConvertClassName: 'bixi-col-stop-status',
          afterConvertClassText: '已终止'
        }
      ];
      rows.forEach((_, index) => {
        const beforeConvertText = (debugEle.queryAll(By.directive(BixiTableColTextComponent))[index].nativeElement.querySelector('div') as HTMLDivElement)!.textContent;
        const afterConvertClassName = (debugEle.queryAll(By.directive(BixiTableColStatusComponent))[index].nativeElement.querySelector('div') as HTMLDivElement)!.className;
        const afterConvertClassText = (debugEle.queryAll(By.directive(BixiTableColStatusComponent))[index].nativeElement.querySelector('div span') as HTMLDivElement)!.textContent;

        expect(matchRet[index].beforeConvertText).toContain(beforeConvertText!);
        expect(matchRet[index].afterConvertClassName).toContain(afterConvertClassName);
        expect(matchRet[index].afterConvertClassText).toContain(afterConvertClassText!);
      });
    });
  });
});

describe('col status mapping', () => {
  let fixture: ComponentFixture<TestComponent>;
  let context: TestComponent;
  let debugEle: DebugElement;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BixiTableModule],
      declarations: [TestComponent]
    });

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

  it('should render mapping status', () => {
    // given
    context.rows = mappingRows;
    context.cols = [
      {
        name: '映射后显示状态',
        key: 'status',
        type: EColType.status,
        options: [
          { value: 0, text: '训练成功', type: 'success' },
          { value: 1, text: '训练中', type: 'processing' },
          { value: 2, text: '训练失败', type: 'error' },
          { value: 3, text: '等待训练', type: 'default' },
          { value: 4, text: '暂停训练', type: 'stop' }
        ]
      }
    ];

    // when
    fixture.detectChanges();

    // then
    const ret = [
      'bixi-col-success-status',
      'bixi-col-processing-status',
      'bixi-col-error-status',
      'bixi-col-default-status',
      'bixi-col-stop-status'
    ];
    ret.forEach((e, index) => {
      expect((debugEle.queryAll(By.directive(BixiTableColStatusComponent))[index].nativeElement.querySelector('div') as HTMLDivElement)!.className).toContain(e);
    });
  });
});

describe('col status custom token', () => {
  let fixture: ComponentFixture<TestComponent>;
  let context: TestComponent;

  const bixiTableConfig: IBixiTableConfig = {
    status: {
      typeA: {
        text: 'typeA_TEXT',  // 可以自定义文本
        style: {  // 可以自定义 style
          backgroundColor: 'pink',
          color: 'white'
        }
      },
      typeB: {
        text: 'typeB_TEXT',
        className: 'token-classname-test'  // 可以自定义 class
      }
    }
  };

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [BixiTableModule],
      declarations: [TestComponent],
      providers: [
        {
          provide: BIXI_TABLE_CONFIG,
          useValue: bixiTableConfig
        }
      ]
    });
    fixture = TestBed.createComponent(TestComponent);
    context = fixture.componentInstance;
  });

  it('should render status with custom config', () => {
    context.rows = customRows;
    context.cols = [{
      name: '显示状态',
      key: 'status',
      type: EColType.status
    }];
    fixture.detectChanges();

  });
});

const rows = [
  {
    status: 'success'
  }, {
    status: 'processing'
  }, {
    status: 'error'
  }, {
    status: 'default'
  }, {
    status: 'stop'
  }
];

const mappingRows = [{
  status: 0
}, {
  status: 1
}, {
  status: 2
}, {
  status: 3
}, {
  status: 4
}];

const customRows = [{
  status: 'typeA'
}, {
  status: 'typeB'
}];

@Component({
  template: `
    <bixi-table
      [rows]="rows"
      [cols]="cols"
    ></bixi-table>`
})
class TestComponent {
  rows: { status: string | number }[];
  cols: ICols = [];
}