Testing Ember Apps: how do you do it?

#1

I’d like to gather together how you are testing ember apps and turn it into “The Ember Testing Story”. I’m also going to add tests into ember-tools generators and want to do it in a blessed path. I seek righteousness in all things, brethren and sisters.

Here’s my current setup for my app:

For Unit tests:

  1. I build my app into a single file with ember-tools, which uses browserbuild (commonjs).

  2. I then use testacular + jasmine and load my full application.js into the test suite.

  3. I make sure to add require to window from browserbuild so I can require my objects normally for their tests

I only have one question so far (and I’ve only got about 30 tests, so not very deep into this yet):

(I’ve talked to tom about this already) I don’t know how to or if I should test my controller methods that use this.get('store') and this.get('target') and such. I’m 90% convinced to not care, but 10% of me is sad to not be able to fully test a controller in isolation.

For integration tests:

I haven’t done this yet but I have this dream of pulling the router out of my app and sending it routes to visit and then testing things along with sinon.js to stub out the backend.

Thanks!

Working on a testing guide (was: detailed Ember.js testing example)
Ember-testing without Rails 3.2
The @dgeb check list
#2

I use extensively sinon.js to mock objects and so I am able to test in isolation. In response to your question, target and store on the controller are good examples of what I mock. I have a few helpers in order to make mocking less verbose. I also added support for computed property mocking to sinon.js

This is my current setup : https://gist.github.com/tchak/4580715

Testing with sideloaded data
#3

Could you share your setup /teardown methods (jasmine) because I’ve had some issues with ember-data (setting up a few models and doing a “reset” in the afterEach) but then again I’m using the local storage adapter or FixtureAdapter to do more “integation like” tests (full-er stack I suppose)

Also are you running browsers with testacular or just v8 w/ node? Is selenium worth a look for full end-to-end happy /path tests?

#4

On this topic, I would strongly recommend that people make use of App.reset for integration tests. If there are bugs related to it, let’s get them fixed.

#5

I’m starting to use Konacha to test out my app. Right now I’m using it just for unit tests, but when I get to the view I’m expecting to use it for the integration tests also. I’m liking it a lot so far.

#6

On this topic, I would strongly recommend that people make use of App.reset for integration tests. If there are bugs related to it, let’s get them fixed.

@wycats I am digging into how I want to test my Ember apps. I see you use QUnit, is there a reason you picked QUnit? I’ve been contemplating QUnit + SpecIt or Pavlov, but I am still completely torn. Any thoughts? (I don’t mind completely opinionated statements either)

#7

Having seen the examples from @jo_liss with Konacha that looks really promissing. If anybody has/found a tutorial I would be interested.

#8

I got jasmine working on Discourse (for testing Ember) with a few hacks

https://github.com/discourse/discourse/blob/master/spec/javascripts/hacks.js

#9

I have been using Jasmine via Jasminerice gem for unit testing and Capybara and Selenium for testing the full stack but it’s very slow so have now moved to doing my integration testing with Konacha.

It took me ages to get this working and have had to upgrade everything to latest and greatest but it’s really fast and a great testing experience compared to Selenium.

I am using the FixtureAdapter for ember-data at the moment but i want to automtically pre generate the actual json returned from my rails api calls and load it into ember-data so my test json changes with my actual rails api.

#10

I’m trying to use testacular to create some tests which don’t require a server. I hit a wall with some simple copies of the ember-data tests and hopefully someone can help. I am using the latest builds from emberjs and ember-data github repos.

I built the ember and ember-data libs and when I run a simple test: https://gist.github.com/dmarr/5147630

I don’t think Ember is loading at all because I can’t inspect the Ember global.

#11

Last fall I spent a crazy amount of time looking at different tools/options for integration testing our ember app. I became a big fan of konacha, if you’re working on an ember-rails app it is definitely worth a look. One of the things I liked was how it runs each test in an iframe - each frame is still live post-test, meaning you can interact with the environment as an end-user or via js-console.

That said we started moving away from konacha and are mostly writing full-stack acceptance tests using capybara and phantomjs. Typically would unit test with jasmine but trying qunit for pure-js testing for now so that we can leverage tests from ember-source as a starting point for our own.

@rudi I put together a deck for ember-nyc meetup a few months back, maybe that will help you get started: https://speakerdeck.com/mikegrassotti/an-add-approach-to-testing-ember-dot-js

#12

Thanks Mike, I’ll have to dive into Konacha I guess. Emberplay.com is sweet by the way, I completely missed that one.

#13

Even though this thread is old, I’ll share my setup because I’m still pretty early into it, but had to do a TON of digging to make it all work.

We’re building a rich client that communicates directly with APIs, therefore we aren’t using Rails, but we are using Middleman with Sprockets. We are using QUnit for testing; we have to support developers on Windows and a Windows integration server. QUnit seemed to have the least dependencies to keep that simple.

As for testing, in each test’s setup hook we’re getting a handle to the app’s router and transitioning to a route. We’re currently using sinon.js to stub responses, but that may eventually move to Rack endpoints served by Middleman for testing & development. Tests verify data at the controller level and output using jQuery.

Here is an example of this setup. Is anyone doing anything similar? Any thoughts on this?

#14

Do you happen to have public code anywhere for this? I’ve been trying to integrate my EmberJS app with jasminerice, but I’m struggling to get things to fit well together. Here’s the source if you have any tips.

#15

sorry its not public code but i will try to have a look at your code later. What exactly is the problem ? Cheers

#16

We are using Casper.js for our integration testing, and it works well. Instead of Page Objects, we implemented Zone Objects that represent the services offered by a particular zone (or outlet) and that encapsulate CSS selectors. Consequently, a refactoring impacting HTML markup and CSS selectors only necessitates to modify one Zone Object instead of many tests.

We mock AJAX requests using Mockjax, to which we provide the same JSON fixtures used by the server-side functional tests. And that’s really cool :wink:

I will try to provide some samples next week.

#17

look forward to seeing the examples thanks

#18

I guess that my main difficulty is that traditionally when I write Javascript tests I look at components in isolation. For example, if wanted to test an Ember model I’d like to be able to instantiate that without loading up the rest of the Ember application… but now that I’m thinking about it more pragmatically, I’m not sure there’s a really compelling reason to do that.

I was going to ask about how easy it is to substitute a fixture adapter when you typically have a REST adapter, but I’m guessing that’s just as simple as redefining the reference on the store.

#19

i started off and still have lots of unit tests for models, views and controllers that are run with jasminerice but wanted something to test the whole client side app. I dont use Jasminerice for integration testing i am using Konacha via mocha and chai. Its very similer to Jasmine.

Since i have been testing this way i am also not sure that i need to do unit testing now either unless some complex method.

Regarding the fixture adapter, i had a right ball ache trying to figure it out as not much info about on using it.

But basically i just do this

App.Adapter = DS.FixtureAdapter.extend

  bulkCommit: false
  namespace: "admin"
  simulateRemoteResponse: false

App.store = DS.Store.create(

revision: 12
adapter: App.Adapter.create()   )

and then you can load populate your models with data via

App.Model.FIXTURES = [{…}]

or

store = DS.get(‘defaultStore’)

App.store.adapter.load App.store, App.Product, id: "p1234" name: “Product 1234”

store.loadMany(App.Model, [{…}, {…}]

Let me know if you need any help setting it up

#20

I started writing a simple ember-factories library. It would be nice with some assistance on this and also have it work with mocking, fx using Sinon or similar setup. So far I’m using Konacha and have built a nice little set of test stub generators, including one to bootstrap a full konacha test environment: See ember-konacha-rails. PS: Still needs more work and ideas…

Recommended Testing Solution?