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

Question

我需要为HTML元素的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测试运行程序时出现了失败。

- Rohìt Jíndal

---

你有没有尝试过这样获取元素呢？const element = fixture.debugElement.query(By.css('kendo-grid')); 得到的 DebugElement 应该有一个 properties 属性，其中应该包含了你的 resizable 属性。 - Daniel W Strimpel

@DanielWStrimpel 是的，我也尝试了这个方法，但是没有成功。 - Rohìt Jíndal

你正在运行哪个规范文件？这是 kendo-grid 组件的单元测试还是它的父组件的测试？ - Yevhenii Herasymchuk

好的，我明白了。你有一个kendo-grid组件作为UI库的子组件。但是你为什么需要测试它是否为子组件呢？ 我猜你有一个变量而不是简单的“true”。你需要测试这个变量。 - Yevhenii Herasymchuk

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');
  });

- Okan Aslankan

Answer 2

截至今天，有一个陷阱。我发现了一些讨论，人们抱怨这些属性。 Pawel Kozlowski说：

我不认为任何人应该真正使用ng-reflect-...来进行任何“严肃”的事情，因为这些东西仅在调试模式下可用，并且在生产构建中不会出现。

据我所知，kendo-grid是第三方组件。在这种情况下，您不应该对其进行实际测试，而只需要进行集成测试以检查其是否正确实现。因此，您不应将kendo组件包含在TestBed配置中，并设置NO_ERRORS_SCHEMA。

- Majesty

Answer 3

我一直在做类似的事情，你可以试一下。

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

- KunalMZ

---

我尝试了相同的方法，但它并没有起作用，因为resizable不仅仅是一个HTML属性。它是一个由方括号[]包围的Angular数据绑定属性。 - Rohìt Jíndal

那么，在这种情况下，这甚至不符合在DOM中进行测试的资格。很抱歉我没有指出来，因为我对Kendo没有任何了解，并将其理解为HTML元素的resize属性。 - KunalMZ