It doesn’t work. Read along, or watch the video for details on getting sinon and ember-cli to play together.
Bring in sinon via bower
Turns out if you check the github repo for sinon, you’ll notice that the built
files are not included. Looking at this comment, reveals that the author of sinon would rather not have the built files included in the repo. So fabiosantoscode forked the repo and provides a bower package (
sinonjs-built) that provides the built files. This works. I don’t really care to have all of the repo in this case. I just want to use the sinon built file, the way I would outside of bower… So instead I add sinon to my ember-cli app like so:
This will bring in sinon and place the file at
vendor/sinon/index.js within my ember-cli app.
Include sinon in the broccoli build
brocolli to build out your ember app. To use sinon we need to make broccoli aware of, and process the sinon files. To do so, we’ll need two brocolli plugins. You can install them via
npm like so.
broccoli-static-compiler allows you to pick files out of a tree, and optionally move them. We’ll use it to move the
vendor/sinon/index.js file during the build.
broccoli-merge-trees allows you to merge broccoli trees together. We’ll use it to merge the ember app tree and the new sinon tree (of one lonely sinon file).
Now we need to include and use these modules within the
Brocfile.js that ember-cli builds for you. So add in a require statement for both of them:
1 2 3 4
Next lets build a tree for, and move the
sinon file during the build. Within the
Brocfile.js still, add:
1 2 3 4 5 6 7
This tells broccoli to create a tree from
vendor/sinon and copy the
vendor/sinon/index.js file to
assets/sinon/index.js during your build process. Lastly, we need to merge the tree that represents the ember app, and the new tree that we just created for sinon. At the bottom of the
Brocfile.js replace the existing
module.exports ... with:
1 2 3
Using sinon in your tests
So we now have sinon included in our app, and build process. Let’s use it in a test. The first step is to include it in the
tests/index.html file. Add a script tag like so:
Now fire up the ember server (
ember serve) and prove to yourself that sinon is available for your tests by visiting
http://localhost:4200/tests, open the console and type
Last step. In order to use sinon within your tests, open
tests/.jshintrc and add sinon to the list of predefined globals. ember-cli executes a JSHint test against each of your files. Trying to use a global (like
sinon) without including it here will cause a failing test.
You should be good to go. Mock, stub and spy away within your ember-cli tests.