Angular에서 클릭 이벤트를 시뮬레이션하려면 어떻게 해야 합니까?JS 지시 테스트?

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