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

angular integration testing
testing components in angular using jasmine
angular testing
angular 6 unit test input value
angular mock service
fixture detectchanges
testing angular components with @input()
angular unit testing ppt

Requirement : 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.

Any help will be highly appreciable.

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

Testing, Dive back into Angular 2 and learn how to test components in a new to unit test — testing our applications becomes component-based, FormGroup will just be used to test the type of a variable. Input is a decorator that lets Angular know that an attribute of our class is a data-bound input property. 2. Unit testing is performed at unit level where individual test cases are written as module wise. Unit testing is performed on pipes and service level.Generally component unit testing does not performed directly they are performed using angular testing utilities like TestBed because most of cases components are attached together.

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.

Testing Components in Angular 2 with Jasmine, Angular official testing guide does a good job explaining how to get started with Last week I had to write test case for a component that uses data binding so I end up Chrome 59.0.3071 (Mac OS X 10.12.5): Executed 3 of 3 SUCCESS Can't bind to 'ngModel' since it isn't a known property of 'input'. Jasmine provides “describe”, “it”, “expect” and several matcher methods like “toEqual”, “toBeNull” etc. to write unit test cases. You can read the Jasmine documentation to

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();

Unit testing ngModel in Angular 4 – Shekhar Gulati, CORE ·. May. 21, 18 · DevOps Zone · Tutorial. Like (5). Comment (0). Save Before writing the unit test specs we need to write down an angular component first. So we develop an selector: 'student-template-data', At the same time, we can also use the @HostBinding to use the style attribute of the input elements. In this article first, we are going to shortly mention the benefits of unit testing and then we are going to create a full example of angular unit testing using jasmine and karma explaining each

Unit Testing in Angular 4 Using Jasmine and Karma - Part 2, We can test inputs by just setting values on a component's input properties. In this video I'm using an online editor called Plunker to write and run Angular code. 2, The button is sometimes disabled depending on the enabled input property value 5, In the login function we emit a new user model on the loggedIn event. It's the practice of writing code to test our code, and then run those tests. There are 3 types of tests: unit tests, integration tests, and end-to-end (e2e) tests. Unit test A unit test or UT is the procedure to check the proper functioning of a specific part of a software or a portion of a program. Karma Karma is a test runner.

Testing Components • Angular, To test directives we use dummy test components which we can create using the Angular Test Angular · Unit Testing; Testing Directives In this video I'm using an online editor called Plunker to write and run Angular code. on its host element and it also uses @HostBinding to set the style property of its host element. dynamic-form.component.spec.ts file is going to contain all the tests needed to unit test the component’s code, which will live in dynamic-form.component.ts. You may be wondering what “spec” means. In short, specs are test files which, as we’ll see when we write our tests, read in a more natural way.

Testing Directives • Angular, Cover image for Angular unit testing 101 (with examples) Jasmine provides a lot of useful functions to write tests. With this fixture, we can access the raw component by calling its property componentInstance and its title we just set (​because binding happens when Angular performs change detection). Create a Feature Component. Add In-app Navigation. Get Data from a Server. This guide offers tips and techniques for unit and integration testing Angular applications. The guide presents tests of a sample application created with the Angular CLI. This sample application is much like the one created in the Tour of Heroes tutorial .

Comments
  • Have you tried to get the element like this instead? const element = fixture.debugElement.query(By.css('kendo-grid')); The DebugElement that you'll get will have a properties attribute that should have your resizable attribute in it.
  • @DanielWStrimpel Yes i tried this as well but did not get success.
  • What exactly spec file you are running? Is it a unit test of kendo-grid component or it's parent?
  • Okay, I got it. You have kendo-grid component as a child from UI library. But why do you need to test it for child? I suppose you have a variable instead of simple true. You need to test this variable instead.
  • It is working like a champ. Thanks
  • I tried the same it is not working as resizable is not just an html attribute. It is a angular data-binding attribute enclosed in brackets []
  • Well in that case, this doesn't even qualify to be tested in DOM. Sorry for not pointing this out coz I've no exposure in Kendo and understood this as resize property of HTML element.