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