CODEWITHSUNDEEP
angularjsangular-mock
koolunix
koolunix

Reputation: 1995

access POST data from httpBackend in e2e test

In this example, I have an e2e test doing a button click, which executes a function that does a POST

I would like to be able to have access to the "data" object from testDev httpBackend callback, in my e2e scenerios code, for verification.

Is this possible in an e2e test? If so, could you point me in the right direction?

thanks

scenerio code

describe('test2 app', function() {
    beforeEach(function() {
        browser().navigateTo('/testbed/e2e/app/index2.html');
    });
    it('should run a POST',function() {
        element('#myButton2').click();
    });
});

test module

var test2Dev = angular.module('test2Dev', ['test2App', 'ngMockE2E'])
.run(function($httpBackend) {
    $httpBackend.whenPOST(/testpost/)
    .respond(function(method, url, data, headers){
        console.log(data);
        return [200, data, {}];
    });
});

markup

<html lang="en" ng-app="test2Dev" ng-controller="test2Ctrl">
<head>
    <meta charset="utf-8">
    <title>Test click </title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="lib/angular/angular.js"></script>
    <script src="lib/angular/angular-mocks.js"></script>
    <script src="/testbed/e2e/test/e2e/test2Dev.js"></script>
    <script src="js/controllers2.js"></script>
</head>
<body>
    <button id="myButton2" ng-click="runPost()">run post</button>
</body>
</html>

controller

var test2App = angular.module('test2App', []);
test2App.controller('test2Ctrl', function($scope,$http) {
    $scope.runPost = function() {
        $http.post('/testpost',{
            data1 : 'chevy',
            data2 : 'ford'
        });
    }
});

runner

<!doctype html>
<html lang="en">
  <head>
    <title>End2end Test Runner</title>
    <meta charset="utf-8">
    <base href="../..">
    <script src="app/lib/angular/angular-scenario.js" ng-autotest></script>
    <script src="app/lib/angular/angular-mocks.js" ng-autotest></script>
    <script src="/testbed/e2e/test/e2e/test2Dev.js"></script>
    <script src="/testbed/e2e/test/e2e/scenarios2.js"></script>
  </head>
  <body>
  </body>
</html>

Upvotes: 3

Views: 1195

Answers (1)

koolunix
koolunix

Reputation: 1995

Not very pretty but I removed my test module, and used a changed version of "mockApi" here-> https://github.com/blabno/ngMockE2E-sample (thank you Bernard Labno)

changed e2e.mocks.js to add the data object to it's config obj->

    function setup(method, url, config)
    {
        $httpBackend.when(method, url).respond(function (requestMethod, requestUrl, data, headers) {
            config.triggered = true;
            config.data      = data;
            var response = config.response || {};
            if (config.serverLogic) {
                response = config.serverLogic(requestMethod, requestUrl, data, headers);
            }
            return [response.code || 200, response.data];
        });
    }

    setup(POST, /testpost/, mocks.api.post_test);

.... and added this method to access it....

    chain.getData = function() {
        return this.addFuture("get data object for " + itemName, function(done) {
            done(null,JSON.parse(api[itemName].data));
        });
    };

... here is my scenerio now...

it('should run a POST',function() {
    element('#myButton2').click();
    expect(mockApi("post_test").getData()).toEqual({
        data1 : 'chevy',
        data2 : 'ford'
    });
});

Is there a better way to do this?

Upvotes: 2

Related Questions