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

【问题标题】：Angular 5 : How to write a Jasmine unit test for a data binding attributeAngular 5：如何为数据绑定属性编写 Jasmine 单元测试
【发布时间】：2019-01-28 11:21:03
【问题描述】：

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

这是代码：

<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 测试运行程序时失败。

任何帮助都将不胜感激。

【问题讨论】：

您是否尝试过获取这样的元素？ const element = fixture.debugElement.query(By.css('kendo-grid')); 您将获得的 DebugElement 将具有 properties 属性，其中应该包含您的 resizable 属性。
@DanielWSrimpel 是的，我也尝试过，但没有成功。
您正在运行的究竟是什么规格文件？它是 kendo-grid 组件的单元测试还是它的父组件？
好的，我明白了。您将 kendo-grid 组件作为 UI 库中的子组件。但是为什么你需要为孩子测试呢？我想你有一个变量而不是简单的true。你需要测试这个变量。

标签： angular unit-testing jasmine angular5 karma-jasmine

【解决方案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');
  });

【讨论】：

【解决方案2】：

到今天为止，有一个陷阱。我发现了一些讨论，人们在抱怨这个属性。 Pawel Kozlowski said:

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

我尝试了同样的方法，它不起作用，因为resizable 不仅仅是一个 html 属性。它是括在括号[] 中的角度数据绑定属性
那么在这种情况下，这甚至没有资格在 DOM 中进行测试。很抱歉没有指出这一点，因为我没有接触过剑道并将其理解为 HTML 元素的调整大小属性。