Can I get the textarea caret position in unit test with Jasmine?

Question

I am trying to implement '@ Users Feature' with angularjs, I almost finish the feature except writing an unit test. I have a Caret module which can help me get the caret position in textarea.

I think the most important thing is to get the caret position but I dont know how to do it in jasmine.

Mydirective

.directive('atUser', function (Caret) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.bind('focus click keydown', function () {
                scope.caretPos = Caret.getPos(element);
            });

            scope.$watch(function () {
                return scope.caretPos;
            }, function (nowCaretPos) {
                /* do something here */
            })
        }
    }
})

Html

<textarea ng-model="message" at-user></textarea>

Jasmine

describe('test at user', function () {
    /* some init code */
    it('should get caret postion', function () {
        textarea = element.find('textarea');
        textarea.triggerHandler('focus');
        except(textarea.scope().caretPos).toEqual(0);

        /*
         * then i want to simulate keydown event and type something
         * and get the caret postion
         * but i dont know how to do it
         * /
    })
})

One more thing is I dont want to use jquery.

Can anyone help me?

thanks a lot!

Related ? http://stackoverflow.com/questions/596481/simulate-javascript-key-events — HoLyVieR, Aug 21 '13 at 17:17
@HoLyVieR Hmm, I think I should edit my title of my question. Now I can simulate keypress event, and type something in the textarea in jasmine. But whatever i type in, the caretPos in textarea still to be 0... — user2331095, Aug 22 '13 at 09:43
I suspect a possible solution could have something to do with the `.selectionStart` property of the textarea (see https://developer.mozilla.org/en/docs/Web/API/HTMLTextAreaElement). I am trying something similar but ran into a strange limitation when it comes to using it for testing, I asked a question about it here http://stackoverflow.com/questions/22567727/using-selectionstart-on-programmatically-created-inputs — Michael Bromley, Mar 21 '14 at 19:34

score 1 · Answer 1 · edited May 23 '17 at 11:51

I just asked a similar question where I needed to set the caret position of a textarea in a Jasmine test, and I got an answer that worked (using selectionStart on programmatically-created inputs), so here is a potential solution that you can implement with Jasmine:

describe('test at user', function () {
    /* some init code */
    it('should get caret postion', function () {
        textarea = element.find('textarea');
        textarea.triggerHandler('focus');
        expect(textarea.scope().caretPos).toEqual(0);

        /*
         * then i want to simulate keydown event and type something
         * and get the caret postion
         * but i dont know how to do it
         */

        document.body.appendChild(textarea[0]); // I discovered this to be the key to using the .selectionStart property successfully
        textarea.val('some text');
        textarea[0].selectionStart = 9; // you need to move the caret manually when doing things programmatically

        textarea.triggerHandler('focus');
        expect(textarea.scope().caretPos).toEqual(9);
    })
})

Having a problem with PhantomJS - `selectionStart` is always the end of the string, despite I've done `input.focus();`. Do you know any workaround for that? — k102, Aug 30 '16 at 10:37

Can I get the textarea caret position in unit test with Jasmine?

1 Answers1