Я'пробовала следующий формат НГ-директива-тестирование репо по директиве я'вэ написано. Директива в основном отображает оверлей, когда пользователь нажимает на элемент. Здесь'ы директивы (упрощенный):
mod.directive('uiCopyLinkDialog', function(){
return {
restrict: 'A',
link: function(scope, element, attrs) {
var $elm = angular.element(element);
element.bind('click', function(event) {
$elm.addClass('test');
});
}
};
});
Тест я'м пишу выглядит так:
describe('pre-compiled link', function () {
beforeEach(mocks.inject(function($compile, $rootScope) {
scope = $rootScope;
element = angular.element('<span class="foo" ui-copy-link-dialog="url"></span>');
$compile(element)(scope);
scope.$digest();
}));
it("should change the class when clicked", function () {
element.click(); // this returns "'undefined' is not a function"
element[0].click(); // so does this
$(elm).click(); // this uses jquery and doesn't *seem* to fail
waits(500); // hack to see if it was a race condition
expect(elm.className).toContain('test'); // always fails
});
});
Вы можете смотреть на тест, который я попробовал несколько способов, чтобы вызвать клик (событие) по ссылке, причем большинство из них дает undefined по ошибке.
Может кто-нибудь сказать мне, что я'м делаю неправильно здесь? Значение примеры это звучит, как он's не правильный синтаксис, но моих тестов (карма через грунт) не'т хотим, чтобы играть в мяч.
Вы можете использовать triggerHandler, часть JQLite.
Я использовал это, чтобы вызвать событие click на директиву...
element = angular.element("<div myDirective-on='click'></div>");
compiled = $compile(element)($rootScope);
compiled.triggerHandler('click');
Полный пример доступен на этом блоге: http://sravi-kiran.blogspot.co.nz/2013/12/TriggeringEventsInAngularJsDirectiveTests.html
Так это оказалось проблема с PhantomJS: некоторые события, которые действуют на элементы, Дон'т, кажется, чтобы огонь, когда стихии Ты'т на самом деле на документе в любом месте, но только в памяти (что's не моя теория, Во всяком случае). Чтобы обойти это, я должен был использовать эту функцию, чтобы вызвать "нажмите кнопку" события на элементы:
define(function () {
return {
click: function (el) {
var ev = document.createEvent("MouseEvent");
ev.initMouseEvent(
"click",
true /* bubble */, true /* cancelable */,
window, null,
0, 0, 0, 0, /* coordinates */
false, false, false, false, /* modifier keys */
0 /*left*/, null
);
el.dispatchEvent(ev);
}
};
});
Это сработало, хотя другие вещи были сложнее: я тоже хотела написать тест, который гарантирует, что данная форма ввода имеет фокус, но это значение было практически невозможно использовать помощи PhantomJS, поскольку я предполагаю, что браузер может'т сделать что-то сосредоточенным, если он не имеет представления на экране. Любой нуждающийся в этом могли бы взглянуть на CasperJS, который предлагает простой API для некоторых из этих требований.
Я'вэ были проблемы с этим также. Кажется, как будто нажать()
Не'т похоже на работу для меня с PhantomJS для любого элемента I компиляции. Она всегда возвращает undefined.
Хотя на самом деле не так хорошо, как реальная нажмите кнопку, вы могли получить доступ к директиве'функция S в НГ-нажмите кнопку, чтобы имитировать клик через это'с изолировать область:
var element = $compile('<a ng-click="myfunc()">Click me</a>')(scope);
var isolateScope = element.isolateScope();
isolateScope.myfunc();
scope.$digest();
/* check that things changed ... */
Так что мое решение это было на самом деле добавление элемента в организме. Поскольку корень проблемы заключается в том, что помощи PhantomJS не'т огонь событий для элементов в памяти, казалось, проще, чтобы добавить каждый элемент так, что события, работать по-настоящему.
afterEach(function(){
$('body').empty();
});
it('should do something when clicked', function(){
element = $compile('<div my-directive></div>')($scope);
$('body').append(element);
// fire all the watches, so the scope expressions will be evaluated
$rootScope.$digest();
$(element).find('.my-input').click();
});
Вы можете использовать угловые-тест-бегун библиотека и тест будет выглядеть так:
const testRunner = require('angular-test-runner');
describe('directive', () => {
let app;
const {expectElement, click} = testRunner.actions;
beforeEach(() => {
app = testRunner.app(['mod']);
});
it("should add class when clicked", function () {
const html = app.runHtml('<span class="foo" ui-copy-link-dialog="url"></span>');
html.perform(
click.in('.foo')
);
html.verify(
expectElement('.foo').toHaveClass('test')
);
});
});