Angular에서 클릭 이벤트를 시뮬레이션하려면 어떻게 해야 합니까?JS 지시 테스트?
제가 작성한 지시문에 대해 ng-directional-testing repo 형식을 따르려고 했습니다.지시문은 사용자가 요소를 클릭할 때 기본적으로 오버레이를 렌더링합니다.지시(간소화)는 다음과 같습니다.
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
});
});
이 테스트에서 볼 수 있듯이, 이 테스트에서는click()
링크상의 이벤트, 대부분의 이벤트와 함께undefined
에러입니다.
내가 여기서 뭘 잘못하고 있는지 누가 말해줄래?예를 들어 올바른 구문인 것처럼 들리지만 테스트 주자(Karma via Grunt)는 공놀이를 하고 싶어하지 않습니다.
JQLite의 일부인 triggerHandler를 사용할 수 있습니다.
명령에서 클릭 이벤트를 일으키기 위해 이걸 사용했는데...
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
그래서 이게 팬텀의 문제였구나JS: 요소에 작용하는 일부 이벤트는 요소가 실제로 문서 어디에도 없을 때 발생하는 것이 아니라 단지 기억 속에 있는 것처럼 보입니다(어쨌든 제 이론입니다).이 문제를 해결하려면 이 기능을 사용하여click
요소 이벤트:
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);
}
};
});
이것은 효과가 있었지만, 다른 것은 더 어려웠습니다.또한 나는 주어진 형태를 보장하는 시험을 쓰고 싶었다.input
초점을 맞추고 있지만 팬텀을 사용하여 이 값을 얻는 것은 거의 불가능했습니다.JS는 화면에 표시되지 않으면 브라우저가 포커스를 맞출 수 없는 것 같습니다.캐스퍼를 보고 싶으면JS는 이러한 요구 사항 중 일부를 위한 단순한 API를 제공합니다.
나도 이것 때문에 고생했어.인 것 같다click()
팬텀에서는 전혀 효과가 없는 것 같아컴파일하는 임의의 요소의 JS.항상 정의되지 않은 상태로 반환됩니다.
실제 클릭만큼 좋지는 않지만 ng-click으로 디렉티브의 기능에 액세스하여 격리된 범위에서 클릭을 시뮬레이션할 수 있습니다.
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();
});
angular-test-runner 라이브러리를 사용하면 다음과 같은 테스트를 수행할 수 있습니다.
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')
);
});
});
ㅇㅇㅇㅇㅇㅇㅇ도 같이 요?angular-scenario
후 를 사용합니다.browserTrigger(element, 'click')
무슨 일입니까?
언급URL : https://stackoverflow.com/questions/17211466/how-can-i-simulate-a-click-event-in-my-angularjs-directive-test
'programing' 카테고리의 다른 글
jQuery에서 "{ }"를 사용하는 이유는 무엇입니까? (0) | 2023.04.05 |
---|---|
응답에서 헤더 가져오기(재적합/OkHttp 클라이언트) (0) | 2023.04.05 |
테이블에서 모든 열과 ROWNUM 등의 추가 열을 선택하려면 어떻게 해야 합니까? (0) | 2023.04.05 |
Python에서 XML을 JSON으로 변환하는 방법은 무엇입니까? (0) | 2023.04.05 |
jq를 사용하여 기존 JSON 어레이에 새 요소 추가 (0) | 2023.04.05 |