CODEWITHSUNDEEP
javascriptangularjsphantomjs
vt97john
vt97john

Reputation: 579

How does one program PhantomJS to wait for AngularJS $resource to resolve before attempting test on returned data?

I have an AngularJS controller test script using PhantomJS. The test looks to see if the controller has loaded "users" data from a database via a RESTFul web service using AngularJS' $resource service. The problem is that the test fails because the $resource (which returns a promise I believe) isn't resolved yet when the test executes. What's the proper way to deal with this delay so that the test will pass? Here is my code:

CONTROLLER:

.controller('MainCtrl', function ($scope, Users) {
    $scope.users = Users.query();
    $scope.sortField = 'lastName';
    $scope.reverseSort = true;
})

SERVICE:

angular.module('clearsoftDemoApp').factory('Users', function ($resource) {
    return $resource('http://localhost:8080/ClearsoftDemoBackend/webresources/clearsoft.demo.users', {}, {
        query: {method: 'GET', isArray: true}
    });
});

TEST:

describe('Controller: MainCtrl', function () {

// load the controller's module
beforeEach(module('clearsoftDemoApp'));

var MainCtrl, scope;

// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
        $scope: scope
    });
}));

it('should retrieve a list of users and assign to scope.users', function () {
    expect(scope.users.length).toBeGreaterThan(0);
});
});

Upvotes: 1

Views: 583

Answers (1)

Fordio
Fordio

Reputation: 3820

You need to mock the factory call and pass the mock to the controller:

beforeEach(inject(function ($controller, $rootScope) {
    var users = { query: function() { return [{}]; } };
    scope = $rootScope.$new();
    MainCtrl = $controller('MainCtrl', {
        $scope: scope,
        Users: users
    });
}))

Upvotes: 1

Related Questions