如何为从 html 模板以角度调用的功能编写茉莉花测试

Question

我的ts文件中定义了几个函数，这些函数是从html模板调用的，我不知道如何为那些在HTML模板中调用的函数编写Jasmine测试，以便在业力测试覆盖率中，这些方法将显示如下所述是这些函数：

 public onPageSizeChanged() {
    this.gridOptions.api.paginationSetPageSize(Number(this.dataPerPage));
    setTimeout(() => this.gridOptions.api.sizeColumnsToFit(), 0);
  }
   private onReady(params) {
    this.api = params.api;
    this.api.setColumnDefs(this.columnDefs);
    this.api.setRowData(this.rowData);
    this.api.paginationSetPageSize(this.dataPerPage);
  }
   describe('onPageSizeChanged()', () => {
    it('onPageSizedChanged() Called', () => {
        component.dataPerPage = 25;
        component.onPageSizeChanged();
        expect(component.onPageSizeChanged).toHaveBeenCalled();
        expect(component.onPageSizeChanged).toHaveBeenCalledWith(component.dataPerPage);
    });
    beforeEach(() => {
        component.gridToolTip({
            startDate: 'Start Date', endDate: 'End Date', Address: '123 ABC',
            city: 'City Name'
        });
        component.columnDefs = [
            {
                headerName: `<span class="headerName"> Start Date </span>`,
                width: 100,
                field: 'startDate',
                headerTooltip: 'Start Date',
                cellFilter: 'date:'MM/dd/yyyy'',
                cellRenderer: this.gridToolTip
            },
            {
                headerName: `<span class="headerName"> End Date </span>`,
                width: 100,
                field: 'endDate',
                headerTooltip: 'End Date',
                cellRenderer: this.gridToolTip
            },
            {
                headerName: `<span class="headerName"> Address </span>`,
                width: 100,
                field: 'address',
                headerTooltip: 'Address',
                cellRenderer: this.gridToolTip
            }
            {
                headerName: `<span class="headerName"> City Name </span>`,
                width: 100,
                field: 'city',
                headerTooltip: 'City Name',
                cellRenderer: this.gridToolTip
            },
        ];
        component.createColumnDefs();
        component.createRowData();
        component.gridOptions = <GridOptions>{
            columnDefs: this.createColumnDefs(),
            rowData: this.createRowData(),
            pagination: true,
            paginationPageSize: 25,
            enableColResize: true,
            rowHeight: 30,
            headerHeight: 30,
            paginationNumberFormatter: this.changePaginationNumberFormat
        };
    });
});

Answer 1

一般要点是：

1. 创建测试平台
2. 创建组件实例
3. 调用方法
4. 评估结果

因此，让我们回顾一下每个步骤。 首先创建一个测试平台。 您可以在 beforeEach 块中执行此操作：

beforeEach(() => {
    TestBed.configureTestingModule({
        imports : [FormsModule, otherImports],
        declarations: [ MyComponent, MyOtherComponents, etc... ],
        providers : []
    })
});

然后创建一个组件实例。 我也会在 beforeEach(( 中执行此操作

let fixture: ComponentFixture<MyComponent>;
let comp: MyComponent;
beforeEach(async(() => {
    TestBed.compileComponents().then(() => {
        fixture = TestBed.createComponent(MyComponent);
        comp = fixture.componentInstance;
    });
}));

现在调用该方法，并检查结果：

describe('onPageSizeChanged()', function() {
    it('onPageSizedChanged() Called', function () {
        // set up defaults
        // comp.property = value;
        comp.dataPerPage = 100;
        comp.onPageSizeChanged();
        expect(comp.onPageSizeChanged).toHaveBeenCalled();
        expect(comp.onPageSizeChanged).toHaveBeenCalledWith(comp.dataPerPage);
        expect(comp.gridOptions.api.paginationSetPageSize).toHaveBeenCalled();
    });
});

如果要测试 gridOptions.api.sizeColumnsToFit() 方法，它可能会稍微复杂一些，因为它是在超时中调用的。 我认为您必须利用fixture.detectChanges()来触发超时，并在更改完成后fixture.whenStable()运行测试。 一般是这样的：

        it('testTimerFunction', (done : DoneFn) => {
            comp.dataPerPage = 100;
            comp.onPageSizeChanged();
            fixture.detectChanges();
            fixture.whenStable().then(() => {
expect(fixture.componentInstance.gridOptions.api.sizeColumnsToFit).toHaveBeenCalled();
                    done();
            });
        });

onReady()方法是私有的，不能从单元测试或 HTML 模板代码调用，因此要进行测试，需要调用调用它的公共方法，然后可以测试 api 值的值更改。