TDDing a SPA application

So my question is how do you go about testing and SPA application in rails. Currently I have a angular/rails app, that needs testing. So far Rspec/capybara is not very friendly for testing an angular app.

So my thoughts are testing the javascript with javascript testing frameworks and using rspec to just test the controller and models. Following an outside in approach.

I was wondering if anyone has a better approach or a suggestion on tools/methods to use for getting this done in a clean way?

Hey @Jared_Smith, personally I’ve had success with testing Rails + Angular apps through Capybara, although I’ll admit it wasn’t painless. One library that helped out was the capybara-angular gem which adds some smarts to Capybara regarding Angular lifecycle and can prevent false positives.

Alternatively I’d recommend checking out protractor which is the angular recommended way to do e2e testing.

In conjunction with the integration tests, I’ve had success using karma for running unit tests against angular objects (directives, filters, and controllers primarily). I’ve seen collegues use teaspoon to good effect as well. The key is understanding how to set up and execute an angular unit spec which is unfortunately under documented, but luckily we have a blog post on that very topic.

Best of luck!

1 Like

Thanks Chris, at least I know it possible now. I get weird module not found angular errors. I’ve tried quite a few ways. Including trying a bunch of drivers and trying to get it to work. Right now the most telling one is :poltergeist giving me back and angular module not found error. Even though the code works just fine on production and local. So its very odd.

I guess I will keep chipping away at it.

I used capybara on my last angular-rails project and it went well. One gotcha is to avoid using PATCH in your angular services because of an issue with capybara. We did have to switch over to selenium with chrome at one point because

I use protractor for testing mobile apps built on ionic and I really don’t like it. It’s nice that you can use ng-model bindings to find elements, but I find protractor error messages to be incredibly unhelpful. It also doesn’t play too nicely with headless browsers so it’s a bit slow firing up a browser every time. I did do a toy project a while back with the angular app completely decoupled from rails and used protractor there. Ended up using a gulp task to manage rails during protractor tests.

I also use karma + jasmine to angular unit testing, I made some notes on it a while back.

I hate testing directives and am still trying to find a way to make them manageable, cheers for the link @christoomey. I’m still trying to get a good TDD workflow for angular.

1 Like

Apparently it was not capybara, rspec or angular and instead happened to be something utterly heinous our other developers did with the stylesheets which caused a cascading effect. The good news is I was able to solve the issue by looking at the wonderful code in the upcase repo!

Thank you for your help Chris!