Angular 5 : How to write a Jasmine unit test for a data binding attribute

Question

I need to write a unit test for a data-binding attribute of HTML element.

Here's the code:

<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> 

I need to write a unit test for resizable attribute value.

What I tried so far:

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

It is failing while running the Karma test runner.

Answer 1

These attributes converting to ng-reflect-{attributeName} in browser, so jasmine need to look for that attribute. The test below should work.

 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

As of today, there is a pitfall. I found a couple discussion, where people are complaining about this attributes. Pawel Kozlowski said:

I don't think anyone should be really using ng-reflect-... for anything "serious" as those things are debug-mode only and won't be available in a production build.

As I understand, kendo-grid is a 3rd party component. In this case, you should not test it for real, you just need integration tests to check it was implemented correctly. Therefore, you should not include kendo component into your TestBed config, and set NO_ERRORS_SCHEMA.