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

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

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Component, DebugElement } from '@angular/core';
import { BixiTableModule, EColType, EProgressStatus, ICols } from '@bixi/core/table';
import { NzProgressComponent, NzProgressModule } from 'ng-zorro-antd';
import { By } from '@angular/platform-browser';

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

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

  it('should render progress bar', () => {
    // given
    context.cols = [{
      name: '显示进度',
      key: 'progress',
      width: '200px',
      type: EColType.progress,
      status: (val) => {
        if (val === 0.7) {
          return EProgressStatus.starting;
        }
        if (val === 0.3) {
          return EProgressStatus.stop;
        }
        if (val === 1) {
          return EProgressStatus.success;
        }
        if (val === 0.6) {
          return EProgressStatus.failed;
        }
        return EProgressStatus.processing;
      }
    }];

    // when
    fixture.detectChanges();

    // then
    const matchRet = [
      { color: 'rgb(224, 230, 237)', strokeWidth: '6' },
      { color: 'rgb(192, 204, 218)', strokeWidth: '6' },
      { color: 'rgb(238, 81, 68)', strokeWidth: '6' },
      { color: 'rgb(33, 188, 41)', strokeWidth: '6' },
      { color: 'rgb(16, 124, 238)', strokeWidth: '6' }
    ];
    matchRet.forEach((e, index) => {
      const progressEl = debugEle.queryAll(By.directive(NzProgressComponent))[index];
      const path = progressEl.nativeElement.querySelector('.ant-progress-circle-path') as SVGPathElement;
      const trail = progressEl.nativeElement.querySelector('.ant-progress-circle-trail') as SVGPathElement;
      expect(trail.attributes.getNamedItem('stroke-width')!.value).toBe(e.strokeWidth);
      expect(path.style.stroke).toBe(e.color);
    });
  });
});

const rows = [
  { progress: 0.7 },
  { progress: 0.3 },
  { progress: 0.6 },
  { progress: 1 },
  { progress: 0.5 }
];

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