为茉莉花中的可重用垫 table 列制作测试用例

Question

这是我爸妈TS

import { Component, Input, OnInit } from '@angular/core';
import { Column } from '../../../../shared/molecules/table/column';
import {
  DataRecord,
  TransitReport,
} from '../../../organisms/transit-report-wrapper/transit-report.model';

@Component({
  selector: 'app-transit-report',
  templateUrl: './transit-report.component.html',
  styleUrls: ['./transit-report.component.scss'],
})
export class TransitReportComponent implements OnInit {
  @Input() dataSource!: TransitReport;
  @Input()
  columns: Column[] = [
    {
      columnDef: 'overdueReviews',
      header: 'Overdue Reviews',
      cell: (element: DataRecord): string =>
        `${element.overdueReviews} clients`,
    },
    {
      columnDef: 'outstandingCovenantBreaches',
      header: 'Outstanding Covenant Breaches',
      cell: (element: DataRecord): string =>
        `${element.outstandingCovenantBreaches} clients`,
    },
    {
      columnDef: 'outstandingMarginingBreaches',
      header: 'Outstanding Margining Breaches',
      cell: (element: DataRecord): string =>
        `${element.outstandingMarginingBreaches} clients`,
    },
    {
      columnDef: 'periodStartDate',
      header: 'Period Start Date',
      cell: (element: DataRecord): string => `${element.periodStartDate}`,
    },
    {
      columnDef: 'periodEndDate',
      header: 'Period End Date',
      cell: (element: DataRecord): string => `${element.periodEndDate}`,
    },
  ];
  convertedArray: Array<DataRecord> = [];

  ngOnInit(): void {
    // this.convertedArray.push(this.dataSource.data);
  }
}

这是HTML模板

 <section class="transitReport">
<app-table [dataSource]="convertedArray" [tableColumns]="columns" class="transitReportTable"></app-table>
</section>

在伊斯坦布尔，红色块应该被覆盖以覆盖测试用例。

这是spec.ts

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MockComponent } from 'ng2-mock-component';

import { TransitReportComponent } from './transit-report.component';

describe('TransitReportComponent', () => {
  let component: TransitReportComponent;
  let fixture: ComponentFixture<TransitReportComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      declarations: [
        TransitReportComponent,
        MockComponent({
          selector: 'app-table',
          inputs: ['dataSource', 'tableColumns'],
        }),
      ],
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(TransitReportComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

我不知道如何在父测试用例中覆盖“cell”函数和“element”模板语句。在显示这些统计数据之前： 44.44% 陈述 4/9 100% 分支机构 0/0 16.67% 功能 1/6 37.5% 第 3/8 行我想通过编写测试用例使它们全部成为100。

Answer 1

你可以像下面那样做，我用的是虚拟数据。我已经遍历了数组的所有项目，如果需要你可以使用循环。所以基本上我们正在测试 cell() 与模拟数据传递给 return 所需的字符串。

    it('should test all cells of column', () => {
    const element = {
      overdueReviews: 'overdueReviews',
      outstandingCovenantBreaches: 'outstandingCovenantBreaches',
      outstandingMarginingBreaches: 'outstandingMarginingBreaches',
      periodStartDate: 'periodStartDate',
      periodEndDate:'periodEndDate'
    };
    expect(component.columns[0].cell(element)).toBe('overdueReviews clients');
    expect(component.columns[1].cell(element)).toBe('outstandingCovenantBreaches clients');
    expect(component.columns[2].cell(element)).toBe('outstandingMarginingBreaches clients');
    expect(component.columns[3].cell(element)).toBe('periodStartDate');
    expect(component.columns[4].cell(element)).toBe('periodEndDate');

  });

为茉莉花中的可重用垫 table 列制作测试用例

Make test case for reusable mat table columns in jasmine

angular

angular-material

jasmine

angular-test