Karma 中对象内箭头函数的代码覆盖率

Question

我正在为我的一个通过规范的应用程序编写单元测试。但是看到代码覆盖后，有些地方好像没有覆盖如下图：

this.columnDefs = [
      {
        translateKey: 'DEVICES.LIST.SNO',
        width: 100,
        resizable: false,
        sortable: false,
        suppressSizeToFit: true,
        floatingFilter: false,
        valueGetter: (args) => this.getId(args),
        checkboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
        headerCheckboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
      },
      ...gridColumns,
    ];

其中valueGetter、CheckboxSelection没有被覆盖

组件文件：

export class ListComponent implements OnInit, OnDestroy {
  columnDefs: DeviceColumns[];
  defaultColumnDefs: any;
  gridApi: any;
  columnApi: any;

  constructor() {}

  ngOnInit() {
    this.initializeColumns();
  }

  initializeColumns() {
    this.columnDefs = [
      {
        translateKey: 'DEVICES.LIST.SNO',
        width: 100,
        resizable: false,
        sortable: false,
        suppressSizeToFit: true,
        floatingFilter: false,
        valueGetter: (args) => this.getId(args),
        checkboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
        headerCheckboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
      },
    ];
    this.columnDefs.forEach((columnDef) => {
      columnDef.floatingFilter = this.hasFloatingFilter;
    });
    this.columnDefs = map(this.columnDefs, (columnDef) => {
      return extend({}, columnDef, { headerValueGetter: this.localizeHeader.bind(this) });
    });
  }

  getId(args: any): any {
    return (
      this.pagination.per_page * this.pagination.prev_page + parseInt(args.node.rowIndex, 10) + 1
    );
  }

  OnGridReady(params) {
    this.gridApi = params.api;
    this.columnApi = params.columnApi;
  }

  ngOnDestroy() {
    this.subscriptions.unsubscribe();
  }
}

我需要帮助来执行这些箭头函数的代码覆盖。

Answer 1

您可以从组件的columnDefs 属性中获取valueGetter、checkboxSelection和headerCheckboxSelection。然后，像往常一样测试它们。

例如使用 angular v11+

list.component.ts:

import { OnInit, Component } from '@angular/core';

type DeviceColumns = any;

@Component({
  selector: 'app-list',
  template: 'list component',
})
export class ListComponent implements OnInit {
  columnDefs: DeviceColumns[];
  pagination = {
    per_page: 10,
    prev_page: 1,
  };
  defaultColumnDefs: any;
  gridApi: any;
  columnApi: any;

  constructor() {}

  ngOnInit() {
    this.initializeColumns();
  }

  initializeColumns() {
    this.columnDefs = [
      {
        translateKey: 'DEVICES.LIST.SNO',
        width: 100,
        resizable: false,
        sortable: false,
        suppressSizeToFit: true,
        floatingFilter: false,
        valueGetter: (args) => this.getId(args),
        checkboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
        headerCheckboxSelection: (params) => {
          return params.columnApi.getRowGroupColumns().length === 0;
        },
      },
    ];
  }
  getId(args: any): any {
    console.log(this, args);
    return (
      this.pagination.per_page * this.pagination.prev_page +
      parseInt(args.node.rowIndex, 10) +
      1
    );
  }
}

list.component.spec.ts:

import { ListComponent } from './list.component';
import { TestBed, waitForAsync, ComponentFixture } from '@angular/core/testing';

fdescribe('65438592', () => {
  let fixture: ComponentFixture<ListComponent>;
  let component: ListComponent;
  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ListComponent],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(ListComponent);
          component = fixture.componentInstance;
        });
    })
  );

  it('should checkbox selection', () => {
    fixture.detectChanges();
    const { checkboxSelection } = component.columnDefs[0];
    const columnApiSpy = jasmine.createSpyObj('columnApi', [
      'getRowGroupColumns',
    ]);
    columnApiSpy.getRowGroupColumns.and.returnValue([]);
    const actual = checkboxSelection({ columnApi: columnApiSpy });
    expect(actual).toBeTruthy();
  });

  it('should handle checkbox selection', () => {
    fixture.detectChanges();
    const { headerCheckboxSelection } = component.columnDefs[0];
    const columnApiSpy = jasmine.createSpyObj('columnApi', [
      'getRowGroupColumns',
    ]);
    columnApiSpy.getRowGroupColumns.and.returnValue([]);
    const actual = headerCheckboxSelection({ columnApi: columnApiSpy });
    expect(actual).toBeTruthy();
  });

  it('should get value', () => {
    fixture.detectChanges();
    const { valueGetter } = component.columnDefs[0];
    const getIdSpy = spyOn(component, 'getId').and.returnValue(10);
    const actual = valueGetter({ node: { rowIndex: '0' } });
    expect(actual).toEqual(10);
    expect(getIdSpy).toHaveBeenCalled();
  });
});

单元测试结果：

Karma 中对象内箭头函数的代码覆盖率

Code coverage for arrow functions inside an object in Karma

unit-testing

jasmine

typescript

karma-jasmine

angular