AngularJS e2e test with ENTER key

Question

I'm trying to write unit tests for the AngularJS TODO MVC application, and I'm a bit stuck learning the e2e testing syntax.

So far, here's what I have:

describe('todomvc', function () {

    beforeEach(function () {
        browser().navigateTo('../app/index.html');
    });

    afterEach(function() {
        localStorage.clear();
    });

    describe('localstorage behavior', function() {
        it('should load with zero items in localstorage', function() {
            expect(repeater('#todo-list li').count()).toEqual(0);
            input('newTodo').enter('Foo Bar');
            expect(repeater('#todo-list li').count()).toEqual(1);
        });
    });

});

And my config:

basePath = '../';

files = [
  ANGULAR_SCENARIO,
  ANGULAR_SCENARIO_ADAPTER,
  'test/e2e/**/*.js'
];

autoWatch = false;

browsers = ['Chrome'];

//singleRun = true;

proxies = {
  '/': 'http://localhost:8000/'
};

junitReporter = {
  outputFile: 'test_out/e2e.xml',
  suite: 'e2e'
};

In short, I need a way to simulate the "enter" key because that's how this TODO MVC app adds items to the list. How can I do this?

Answer 1

You could add a class attribute to your form like

<form class="myForm">

and add this step to your test file

element(':form.myForm').submit();

I think this might work.

Answer 2

You could use a bit of jQuery to trigger the "enter" key. Do remember to link a jQuery library in your config file for this to work.

describe('localstorage behavior', function() {
    it('should load with zero items in localstorage', function() {
        var e = jQuery.Event("keydown", {
            keyCode: 13
        });

        expect(repeater('#todo-list li').count()).toEqual(0);
        input('newTodo').enter('Foo Bar');

        element = angular.element('<input name="mytext" type="text" ng-model="mytext">');
        element = compile(element)(scope);

        element.trigger(e);
        scope.$digest();

        expect(repeater('#todo-list li').count()).toEqual(1);
    });
});