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

一般要点是：

创建TestBed
创建组件实例
致电方法
评估结果

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

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

1 个答案: