Navigate back to the homepage

Using Bluebird With Angular Protractor

Bulkan Evcimen
November 11th, 2014 · 1 min read

Photo by Saeed Lajami on Unsplash

Async control flow

There are few places where you would want to use a promise. Protractor supports Promises in the onPrepare function but the example uses Q.

That example onPrepare written using Bluebird looks like this;

1var Promise = require('bluebird');
2
3onPrepare: function(){
4 return Promise.delay(2000);
5 .then(function(){
6 browser.params.password = '12345';
7 });
8}

A better example is that the onPrepare function can be used to perform some async setup task like creating a fake User in your database to be able to login.

1var User = require('./models/User');
2
3onPrepare: function() {
4 // returns a Promise
5 return User.create({
6 username: 'bulkan',
7 password': 'igotdis'
8 });
9}

Test structure

Protractor uses Jasmine 1.3 and has updated it to automatically resolve Promises.

1describe('Home page', function(){
2 it('should have username input', function(){
3 var username = element(by.css('#username'));
4 expect(username.getText()).not.toBeNull();
5 });
6});

expect automatically resolves the Promise so there is no need to do the following

1username.getText().then(function(text){
2 expect(text).toEqual('bulkan');
3});

Here is another example test that will verify that the home page is rendering Post titles. This time we have to chain onto the .then of the Promises.

1var Promise = require('bluebird');
2var Posts = require('./models/Posts');
3
4describe('Home Page', function(){
5 it('should have a list of posts', function(done){
6 browser.get('/');
7
8 var posts = element(by.repeater('post in posts').column('post.title'));
9
10 Promise.cast(posts.map(function(elm){
11 return elm.getInnerHtml();
12 }))
13 .then(function(titles){
14 return titles.sort();
15 })
16 .then(function(titles){
17 return Posts.findAll({attributes: 'title', order: 'title'})
18 .tap(function(_titles){
19 expect(titles).toEqual(_titles);
20 })
21 })
22 .nodeify(done);
23 });
24});

We need to Promise.cast the posts.map as we call .nodeify which is a bluebird function. nodeify helps simplify tests by not needing to explicitly call done in the last then and in a catch

Jasmine supports asynchronous tests by passing in a callback function to an it, just like in Mocha. In the test above we find elements by the repeater. The template used might look like;

1<div ng-repeat="post in posts">
2 <h1> {{::post.title}} </h1>
3</div>

There might be an easier/simpler way to do this so please do let me know by commenting below.

More articles from Bulkan

Mocking a function that returns a (bluebird) Promise

Photo by Zdeněk Macháček on Unsplash With Sinon.JS mocking functions are quite easy. Here is how to stub a function that returns a Promise…

April 28th, 2014 · 1 min read

Using mockery to mock modules for Node.js testing

Photo by Artem Sapegin on Unsplash In a previous article I wrote about mocking methods on the request module . request also supports…

April 24th, 2014 · 1 min read
© 2007–2020 Bulkan
Link to $https://twitter.com/bulkanevcimenLink to $https://github.com/bulkanLink to $https://instagram.com/bulkan.evcimen