Using protractor to e2e test ui-grid 3.0 (ng-grid)

In my previous post I described upgrading to ui-grid 3.0, which is the not-yet-beta version of ng-grid.  Over time this will offer significant benefits, at the moment it feels like a faster ng-grid.  As part of implementing it on my core application I needed to rewrite the library routines for my end-to-end testing using protractor.  These were reasonably tricky to work out, so I thought I’d post them here for anyone else trying something similar.

Upgrading to ng-grid 3.0 (ui-grid)

In this tutorial segment I upgrade the league application to use the new ui-grid (ng-grid 3.0).  Note that ui-grid is at this time still early beta, but offers the likelihood of better performance, a cleaner interface, easier edit in place, and removes the previous dependency on jQuery.

This code is built on the rails4 tutorial that I have previously written, and in particular uses as a starting point step 10 of that tutorial, which is available at github: PaulL : tutorial_10.

10: Adding devise integration – logon and security

In this portion of the tutorial we add Devise integration to provide logon to the application, and provide custom pages for password reset and account unlock.  This content is based somewhat on the equivalent content from the rails 3 version of the tutorial.

This will break down into three main elements:

1. Provision of a registration page that matches the Devise expectations and calls the Devise register method and password change method
2. Provision of a logon page that matches the Devise expectations and that calls the Devise logon method and associated methods such as password resets etc
3. Provision of functionality such that AngularJS can detect that a user is not logged on and redirect the user to the logon page, rather than just having each server interaction fail

If you’ve dropped into the middle of the tutorial, you can find the code for the previous section at github: PaulL : tutorial_9.  You can go to the index page for this tutorial, or you can hit the tutorial menu above and see all the posts in the Rails 4 tutorial.

Rails4, AngularJS, CSRF and Devise

I’ve been working further on my application, and run into a few challenges and issues with CSRF, so I’m elaborating a bit on my earlier post.  At some point my tutorials will be updated to deal with this, but for now this is a place holder that describes what CSRF protection does, where the issues lie, and what resolutions I’ve found to the overall problem.

Firstly, it seems that there are two general developer classes with Rails – those who are developing a Rails web application and therefore use Rails to create the pages, and those who are building an API using Rails, and seem to turn off CSRF protection and use an API key to authenticate (in a sense I see an API key as a long-lived username and password, so I’m not a big fan for applications that require strong security).

I’m living in a middle space – the application front-end is all AngularJS, and it’s calling Rails asynchronously using JSON.  But I’m still aiming to use Devise as my authentication engine, and I want to use CSRF to protect against malicious scripts that manipulate the API without the user knowing it.  The default configurations don’t really appear to deal with this situation well.

In discussing the solution, I’ll start with a simplified discussion of what CSRF protection should and shouldn’t do, and then what pieces are needed to integrate (reasonably) cleanly.

9: Adding the teams entity, and links from clubs to team

In this portion of the tutorial we’re going to extend to the teams entity, and build the links between clubs and teams.  This means passing parameters to our list controller, and dealing with optionality.  We’ll let people create a team from within the context of a club – in which case we auto-populate the club, and we’ll let them create a team standalone and pick the club from a drop-down.

This tutorial mainly consolidates what we’ve already done, but it lays the groundwork for some more interesting functionality later, including user authentication and an editable grid.

If you’ve dropped into the middle of the tutorial, you can find the code for the previous section at github: PaulL : tutorial_8.  You can go to the index page for this tutorial, or you can hit the tutorial menu above and see all the posts in the Rails 4 tutorial.

8: Deletes and resource error handling

Part 8 of the tutorial focuses on adding a delete button to our ngGrid, and adding error handling in case our rails application rejects our updates.  You can find the tutoral index, or hit the tutorials menu at the top and select the Rails 4 tutorial.

If you haven’t completed the earlier tutorials, you can get the code at github:PaulL tutorial_7.

7: Adding unit testing using karma

Part 7, in which we create karma unit tests for the list and edit controllers, including mocking the http calls.

If you’ve jumped into the middle of this tutorial, you’ll need the code from github:PaulL:tutorial_6, or you might want to visit the index page or hit the tutorials link above and look in the rails 4 tutorial.

6: Adding ngGrid, and edit page, and CSRF/JSONP protection

In this, the sixth post in the rails 4 tutorial, we change our clubs list page to use ngGrid instead of our home-made table.  We also implement an edit page for our clubs.  A key difference from the rails 3 version of this tutorial is that we’re implementing our edit page as a page rather than a modal dialog.

If you have dropped into the middle of the tutorial you can find the code from the previous step in this tutorial at github:PaulL:tutorial_5, or you can find those tutorial pages either from the index page, or by hitting the tutorials menu in the menu bar above.

5: End to end testing

Part 5 of our tutorial, in this section we implement end-to-end testing using protractor and astrolabe to create modularised tests.

If you have dropped into the middle of the tutorial you can find the code from the previous step in this tutorial at github:PaulL:tutorial_4, or you can find those tutorial pages either from the index page, or by hitting the tutorials menu in the menu bar above.

4: Adding a basic list using $resource for a restful query from rails

In this post we start building out our AngularJS client, using ngResource to pull data from our rails 4 server.  At the end of section 4 we should have a basic clubs list function operational.

In this post, I’m going to talk a bit more about what angular is actually doing, and how it connects to rails.  Hopefully it will be semi-understandable, but I’ll note that it’s taken me a few weeks to bend my brain around what angular is doing – it’s quite different than rails.

If you’ve dropped into the middle of this tutorial, you can get the code for part 3 of the tutorial from gitHub:PaulL.  If you’re looking for the other parts of this tutorial you can find them by going to the index page or hitting the tutorials menu above.