Angular 5：如何为数据绑定属性编写Jasmine单元测试

Question

要求：我需要为data-binding的HTML element属性编写单元测试。

这是代码：

<kendo-grid
            [kendoGridBinding]="gridData"
            [resizable]="true"
            style="height: 300px">
            <kendo-grid-column
                field="UnitPrice"
                title="Unit Price"
                [width]="180"
                filter="numeric"
                format="{0:c}">
            </kendo-grid-column>
</kendo-grid> 

我需要为resizable属性值编写一个单元测试。

到目前为止我尝试了什么：

  it('kendo-grid element should contain resizable attribute with "true" value', () => {
    const element = fixture.debugElement.nativeElement.querySelector('kendo-grid');
    expect(element.resizable).toBeTruthy();
  });

在运行Karma测试运行器时失败了。

任何帮助都会非常值得一提。

Answer 1

这些属性在浏览器中转换为ng-reflect- {attributeName}，因此jasmine需要查找该属性。下面的测试应该有效。

 it('kendo-grid element should contain resizable attribute with "true" value', () => {
    const element = fixture.debugElement.query(By.css('kendo-grid'));
    expect(element.nativeElement.getAttribute('ng-reflect-resizable')).toBe('true');
  });

Answer 2

我一直在做这样的事情。你能尝试一次吗？

const element = fixture.debugElement.query(By.css('kendo-grid'));
expect(element.nativeElement.resizable).toBeTruthy();

Answer 3

你必须在你的NO_ERRORS_SCHEMA模式中添加TestBed：

import { NO_ERRORS_SCHEMA } from '@angular/core';
...
describe('HelloComponent', () => {
  ...
  TestBed.configureTestingModule({
    schemas: [NO_ERRORS_SCHEMA],
    declarations: [ ... ]
  });
  ...
});

这允许在单元测试组件时忽略所有子组件。所以你的单元测试不会失败。

您可以在stackblitz demo中查看此示例。