Series: Automated Testing

Testing Part 1-Installing ember-cli-mirage

Published on Oct 19, 2016

 

Testing is super useful- especially for production apps and large teams.

We start off our testing series by installing one of the tools that will be really useful to us when testing- ember-cli-mirage.


Links

Code

$ ember install ember-cli-mirage
//installed ember-cli-mirage 0.2.2
//mirage/config.js
export default function() {
  this.namespace = '/v2'

  this.get('/monsters', ()=>{
    return {
      monsters: [
        {id: 2}
      ]
    }
  })
})

Transcript

Welcome to the first of our series on testing and ember-cli-mirage. We’re going to start this series by taking this simple app and putting tests around it. And then we’re going to build on that. We’re going to either quickly or off-screen add more functionality and then put tests around those. Maybe we’ll do the tests first and do it TDD-style, but the point is most of this will be focused on the tests, not on the new functionality. So let’s get started.

Our task for this first video isn’t even going to be doing any tests. It’ll be putting up ember-cli-mirage. So it’s a client-side server that’ll help us immensely when we’re testing our apps. But it’s not just useful for testing. It can also be used in development, for if you don’t want to throw up a server immediately, then you can start with this. And what we’ll be doing in this video is replacing our server with ember-cli-mirage.

So we’ll install the ember-cli-mirage addon. This will install the npm package and then create several files in the mirage folder. When we run our ember server again, then we’ll notice that we’re getting error messages. So it says Your Ember app tried to GET '/v2/monsters'. That’s the old server route that we were trying to get the monsters’ data from, but there’s no route defined to handle this request. So we need to go to mirage/config.js and add in a route. config is where we define the routes for our mirage server. We’re going to start off with this.get('/v2/monsters'. And we will have to start that with a slash, and then for the second argument... so that first argument is the route, and the second argument is the hash that we’ll be returning, that would have returned from the server but we’re returning from the ember-cli-mirage server now. So it’ll be a monsters hash, actually it’ll be an array, and we’ll just have it return one little thing. We’ll be adding more data real soon.

So let’s go ahead and look, and it is giving us a new error. So it’s no longer giving us the ‘you don’t have that route’ error. It’s now saying we need an id. So we do need to put a little bit of something in there to make it work at all. There we go. So it’s displaying a monster. Of course we don’t have any data there, so it’s not displaying it how we would want, but it shows that we are connected to the ember-cli-mirage server.

Before we go on, a quick note about namespaces. So we can go ahead and set the namespace to '/v2', and what that’ll do is make it so we don’t have to put '/v2' in front of everything. So this works just the same as before, it’s just that the '/v2' is here in the namespace and it gets added on to the beginning of every route that comes after the namespace. That’ll save you some extra code, some extra typing, and allow you to change it in one place all at once. And if you need to do something that’s not in the namespace, you can do it above the namespace. Anyways, to fill out this monsters array, we could go and add data for every single one of these and painstakingly put them in all ten or nine or however many we had. But there’s a better way. So in the next episode we’ll start showing you one of those better ways to organize your ember-cli-mirage data. I’ll see you then.