CODEWITHSUNDEEP
angularunit-testingjasmineangular5karma-jasmine
Rohìt Jíndal
Rohìt Jíndal

Reputation: 27192

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

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.

enter image description here

Upvotes: 15

Views: 11357

Answers (3)

Majesty
Majesty

Reputation: 1909

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.

Upvotes: 1

Okan Aslankan
Okan Aslankan

Reputation: 3116

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

Upvotes: 14

KunalMZ
KunalMZ

Reputation: 331

I've been doing something like this. Can you try once.

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

Upvotes: 0

Related Questions