如何编写从角度的html模板调用的函数的jasmine测试

Question

我的ts文件中定义的函数很少，而且这些函数是从html模板中调用的，我没有得到如何为那些在html模板中调用的函数编写jasmine测试，这样在karma测试覆盖率中这些方法将显示为以下涵盖的是这些功能：

 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. 创建TestBed
2. 创建组件实例
3. 呼叫方法
4. 评估结果

所以，让我们回顾一下每一步。首先创建一个TestBed。您可以在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上的值变化值。