javascript - 在 Karma/Jasmine 测试中模拟 Enter 键按下输入

Question

我正在尝试在 Angular 自定义组件中测试用户搜索功能。我尝试向其中添加文本并触发搜索的指令模板中的输入(且仅是输入)是:

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

我想在上面的输入中添加一个文本值“User”。测试以确保它具有该值，然后模拟按下回车键以选择第一个匹配的节点。

1. 获取输入元素
2. 向输入添加文本
3. 测试以确保输入值正确
4. 在输入上按回车键
5. 用于确保搜索中第一个匹配项目正确的文本

尝试过:

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


    }

谢谢

Answer 1

您需要将您的 JQuery.Event 与触发 Controller 中最终搜索的任何内容相匹配，因此如果您的 Controller 正在监听按键，那么您需要确保您的 jQuery.Event 是一个“按键”事件，但是如果您的 Controller 正在监听“keyup”，您需要将 jQuery 事件设置为“keyup”。还需要在实际事件的回调中寻找匹配项

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