Question

我开始使用Karma和Jasmine，我遇到了问题。

HTML：

<input id="dateTimePicker" ng-change="vm.enableConfirm = vm.matchDate == null" ng-click="vm.openCalendar($event, prop)" type="text" datetime-picker="dd MM yyyy HH:mm" ng-model="vm.matchDate" is-open="vm.isOpen" />

我想测试执行ng-click时是否打开日历。

控制器代码：

vm.openCalendar = function (e) {
  e.preventDefault();
  e.stopPropagation();
  vm.isOpen = true;
};

Spec.js：

...
it('Check if openCalendar opens the calendar', function () {
      angular.element(document.querySelectorAll('#dateTimePicker')).triggerHandler('click');
      controller.openCalendar();
      //nothing yet
    });
...

我收到openCalendar没有获取事件参数的错误。如何正确测试此控制器功能？

Answer 1

对于任何需要模拟参数的函数都是一样的，而不仅仅是事件处理程序。

在一个规范controller.openCalendar中进行了测试：

var e = {
  preventDefault: jasmine.createSpy(),
  stopPropagation: jasmine.createSpy()
};

controller.openCalendar(e);

expect(e.preventDefault).toHaveBeenCalled();
expect(e.stopPropagation).toHaveBeenCalled();
expect(controller.isOpen).toBe(true);

在另一个规范中，视图使用存根controller.openCalendar进行测试：

spyOn(controller, 'openCalendar');
element.click();
expect(controller.openCalendar).toHaveBeenCalledWith(jasmine.any(Object), ...);

element是使用input编译的$compile元素。在测试中，DOM元素是分离的，document.querySelectorAll无法访问。

如何使用Karma和Jasmine测试Angular中的视图元素？

1 个答案: