Experimenting with ngModel in a Jasmine test suite

Question

Experimenting with ngModel in a Jasmine test suite

I've created a directive that generates input fields and connects them to the scope using ngModel. When a user uses this directive in the HTML file like so:

<div tk-quick-form="formStructure" form-data="formData" id="main_form" ></div>

and adds the following in the controller:

$scope.formStructure = [
    {
        fieldName: 'name',
        type: 'string'
    }
];

Then an input field is created with ngModel linking to formData.name.

The directive functions correctly, but I'm unsure how to test it using Jasmine.

Here's what I have tried so far:

Within the it function:

$rootScope.formStructure = [
    {
        fieldName: 'name',
        type: 'string'
    }
];

var element = $compile('<div tk-quick-form="formStructure" form-data="formData" id="main_form" ></div>"')($rootScope);

$(element).find("input#name").val("set")
dump($(element).find("input#name").val()) // outputs "set"

expect($rootScope.formData.name).toBe("set"); //outputs Expected undefined to have value 'set' 
//(though in manual testing $scope.formData.name is actually set because the input field contains ng-model="formData.name")

$rootScope.$digest();

How should I go about writing this test case?

javascript angularjs jasmine

Answer 1

Answer №1

From my perspective, your approach was mostly correct, but with a few exceptions. It would have been ideal to include $rootScope.$digest() before the expect statement. Additionally, triggering 'input' with .triggerHandler('input') is necessary to update the model.

describe('tkQuickForm', function () {
    beforeEach(module('tkQuickForm'));

    beforeEach(inject(function ($rootScope, $compile) {
        this.$rootScope = $rootScope;
        this.scope = $rootScope.$new();
        this.$compile = $compile;
    }));

    it('should pass a basic test', function () {
        expect(true).toBe(true);
    });

    it('should connect ng-model to formData', function() {
        this.scope.formStructure = [
            {
                fieldName: 'name',
                type: 'string'
            }
        ];

        var element = this.$compile(`
            <div tk-quick-form="formStructure" form-data="formData" id="main_form"></div>"
        `)(this.scope);

        this.scope.$digest(); // remember to call digest first

        var input = element.find("input")[0];
        angular.element(input).val('set').triggerHandler('input');

        expect(this.scope.formData.name).toBe("set");
    });
});

Tested with "angular": "~1.5.0". All specifications passed successfully.

https://i.sstatic.net/2ydHC.png

Check out the related pull-request

Answer 2

From my perspective, your approach was mostly correct, but with a few exceptions. It would have been ideal to include $rootScope.$digest() before the expect statement. Additionally, triggering 'input' with .triggerHandler('input') is necessary to update the model.

describe('tkQuickForm', function () {
    beforeEach(module('tkQuickForm'));

    beforeEach(inject(function ($rootScope, $compile) {
        this.$rootScope = $rootScope;
        this.scope = $rootScope.$new();
        this.$compile = $compile;
    }));

    it('should pass a basic test', function () {
        expect(true).toBe(true);
    });

    it('should connect ng-model to formData', function() {
        this.scope.formStructure = [
            {
                fieldName: 'name',
                type: 'string'
            }
        ];

        var element = this.$compile(`
            <div tk-quick-form="formStructure" form-data="formData" id="main_form"></div>"
        `)(this.scope);

        this.scope.$digest(); // remember to call digest first

        var input = element.find("input")[0];
        angular.element(input).val('set').triggerHandler('input');

        expect(this.scope.formData.name).toBe("set");
    });
});

Tested with "angular": "~1.5.0". All specifications passed successfully.

https://i.sstatic.net/2ydHC.png

Check out the related pull-request

Experimenting with ngModel in a Jasmine test suite

Answer №1

Similar questions

Creating customized Angular-ui Bootstrap tabs using on-the-fly uib-tabset and uib-tab components

How to handle a Vue element click event through programming

Tips for mocking the router.navigate function in Jest

When attempting to run JavaScript within PHP, an Uncaught SyntaxError is encountered

What is the best way to locate the position of a different element within ReactJS?

"Steps to retrieve the button's ID when using the onClick event in Reactjs

At what point are routed components initialized?

AngularJS - Embedding input fields within an HTML table within a form

Utilizing JavaScript AJAX to upload a dynamically generated PDF file to a specific directory on the server

Exploring the inner workings of self-referencing mechanics in functions

What is the best way to change the inner text of an HTML element without causing it to resize or impacting its overflow?

Retrieve data quickly and navigate directly to specified div element on page

Issues with AngularJS ng-bind-html failing to display list items

Updating a MongoDB subarray with $set now includes adding a new entry rather than just updating existing ones

When using a file uploader to set an image on v-model in Vue JS, it sometimes results in

Is there an alternative to the jQuery :contains selector?

Transferring information using pure JavaScript AJAX and retrieving it through a Node API

Instructions for implementing the iPhone Contacts header scroll effect on an HTML webpage

When using Node.js with Nginx, requests are timing out at the Nginx level before the processing is completed in Node.js

saving the hash key in a separate array