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

Question

要求：我需要为data-binding的{​​{1}}属性编写单元测试。

这是代码：

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

运行Karma测试运行程序时失败。

任何帮助都是非常重要的。

Answer 1

这些属性在浏览器中转换为ng-reflect- {attributeName}，因此茉莉花需要寻找该属性。下面的测试应该可以工作。

 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

截止到今天，有一个陷阱。我发现了一些讨论，人们对此抱怨不已。 Pawel Kozlowski said：

  

我认为没有人应该真正使用ng-reflect -...作为   任何“严重”的东西，因为这些东西仅是调试模式，不会   在生产版本中可用。

据我了解，kendo-grid是第三方的组成部分。在这种情况下，您不应该对其进行真实的测试，只需要进行集成测试来检查它是否正确实现。因此，您不应将kendo组件包含到TestBed配置中，而应设置NO_ERRORS_SCHEMA。

Answer 3

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

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

Answer 4

您必须在NO_ERRORS_SCHEMA模式中添加TestBed：

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

这允许在对组件进行单元测试时忽略所有子组件。因此您的单元测试不会失败。

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