/angularjs/

ProtractorTest simple example with backend mocking.

2016-07-10 15:58:34

First things first - backend mocking is a very bad idea, if you mock your beckend your tests are not true E2E tests. GIT

What you need:

1) nodejs version 6.2.2 from -> https://nodejs.org/en/

2) next install protractortest

npm install -g protractor

3)

webdriver-manager update

4) if everything is ok, start the server

webdriver-manager start

Example fronted app

index.html

<!DOCTYPE html>

<html lang='"en"' ng-app='"myApp"'>
<head>
<meta charset="utf-8"/>
<title></title>
<script src='"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"'></script>
<script src='"https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-mocks.js"'></script>
<script src='"app.js"'></script>
</head>
<body>
<section ng-controller='"testCtrl"'>
<h1 id='"pageTitle"'>Static Page Title</h1>
<h2>{{dynamicPageTitle}}</h2>
<div id='"content"'>
            {{data1.name}}
        </div>
<div id='"list"'>
<li in="" listdata&quot;="" ng-repeat='"item'>
                {{item.id}} - {{item.name}}
            </li>
</div>
</section>
</body>
</html>

app.js

var myApp = angular.module('myApp', []);

myApp.controller('testCtrl', function ($scope, $http) {

    $scope.dynamicPageTitle = 'Dynamic Page Title';

    $http.get('data1.json').success(function (response) {
        $scope.data1 = response;
    });

    $http.get('data2.json').success(function (response) {
        $scope.listData = response;
    });

});

data1.json

{"name": "Data from Json file"}

data2.json

[
  {"id":1, "name":"Lorem 1"},
  {"id":2, "name":"Lorem 2"},
  {"id":3, "name":"Lorem 3"},
  {"id":4, "name":"Lorem 4"},
  {"id":5, "name":"Lorem 5"},
  {"id":6, "name":"Lorem 6"}
]

Test

conf.js

exports.config = {

    framework: 'jasmine2',
    seleniumAddress: 'http://localhost:4444/wd/hub',

    rootElement: '[ng-app]',

    specs: [
        'app.spec.js'
    ],

    multiCapabilities: [
        //{browserName: 'firefox'},
        {browserName: 'chrome'}
    ],

    onPrepare: function () {
        browser.get('http://localhost:63342/protractor/simple_mock/app/index.html');

        // mock
        browser.addMockModule('httpMocker', function() {
            angular.module('httpMocker', ['ngMockE2E'])
                .run(function($httpBackend) {
                    $httpBackend.whenGET('data1.json').respond({"name": "Data from MOCK Json file"});
                    $httpBackend.whenGET('data2.json').passThrough();
                })
        });
    }
};

engine.js - helper functions

module.exports = {

    waitFor: function (_by) {
        var el = element(_by);
        browser.wait(
            protractor.ExpectedConditions.visibilityOf(el),
            20000
        );
    }
}

app.spec.js - our tests

var engine = require("./engine.js");

describe('simple test', function () {

    it('static text', function () {
        engine.waitFor(by.id('pageTitle'));
        expect(element(by.id('pageTitle')).getText()).toEqual('Static Page Title');
    });

    it('dynamic text', function () {
        engine.waitFor(by.binding('dynamicPageTitle'));
        expect(element(by.binding('dynamicPageTitle')).getText()).toEqual('Dynamic Page Title');
    });

    it('json one object', function () {
        engine.waitFor(by.binding('data1'));
        expect(element(by.binding('data1')).getText()).toEqual('Data from MOCK Json file');
    });

    it('json list of objects', function () {
        expect(element.all(by.repeater('item in listData')).get(0).toString())
            .toEqual(({"id":1, "name":"Lorem p"}).toString());
    });
});