CODEWITHSUNDEEP
javascriptjqueryangularjsd3.jskarma-jasmine
techer
techer

Reputation: 181

Simulating Enter Key Press on Input in Karma/Jasmine Tests

I am trying to test user search functionality inside an angular custom component. The input (and only input) in the directive template that I am trying add text to and trigger the search is:

 <input type="text" ng-model="searchInput" class="form-control search"/>

I would like to add a text value of "User" into that input above. Test to make sure it has that value, and then simulate an enter key press to then select the first matching node.

  1. Get the input element
  2. Add text to the input
  3. Test to make sure the input value is correct
  4. Press enter on the input
  5. Text to make sure the first matching item in the search is correct

Have tried:

   it ("should search for the specified node", function () {
              var value = "User is not registered"

               var input = diagramDirective.find("input");

               $(input).val(value).trigger("input");
               scope.$apply();

               //why can't I trigger a click event here by doing something like
               var e = jQuery.Event("keypress");
               e.keyCode = 13;

               $(input).trigger(e);


    }

Thanks

Upvotes: 2

Views: 7590

Answers (2)

bschmitty
bschmitty

Reputation: 1218

You need to match your JQuery.Event to whatever is triggering the final search in your controller, so if your controller is listening for a keypress, then you need to make sure your jQuery.Event is a "keypress" event, but if your controller is listening for a "keyup" you need to set your jQuery event to "keyup". You also need to look for the matching item in the callback of the actual event

  it("should search for the specified nodes", function () {
            var value = "User is not registered";
            var e = jQuery.Event("keypress");
            e.keyCode = 13;

            // find the input
            var directiveElementInput = diagramDirective.find("input");

            // Set some text!
            $(directiveElementInput).val(value).trigger("input");

            // make sure the input has the value
            expect(directiveElementInput).toHaveValue(value);

            // execute the event on the input and check for the selected item
            $(directiveElementInput).keypress(function () {
                // do your check here for the matching item here
            }).trigger(e);
        });

Upvotes: 2

Ted
Ted

Reputation: 756

I would recommend taking a look at the event listeners on the input box, because an input box isn't necessarily always triggered by the "enter" keypress. Some other possible events that it may be listening to are, "blur", "keyup", "change". Depending on if its an event listener or an on-whatever event, you'll have to trigger it accordingly.

Sorry this is kind of vague, but it's hard to say without knowing the event listeners attached to the input box.

Hope this helped!

Upvotes: -1

Related Questions