Using fixtures

Fixtures are another way of mocking data. It's static data that can be used in our model to display to the user when testing our application. In this recipe, we'll see some basics on how to set it up with Ember CLI Mirage.

Getting ready

As with many of our other examples, we'll be using Ember CLI Mirage. Instead of using a factory, we'll set up fixture data.

  1. Begin by creating a new application. Then add the Ember CLI Mirage add-on and generate the model and routes for the application:
    $ ember install ember-cli-mirage
$ ember g model student name:string age:number
$ ember g route index
$ ember g adapter application
$ ember g fixture students

    These commands will generate the basic structure of our app. In this application, fixture data will be used to display student information. For the sake of simplicity, we'll only be displaying this information and not manipulating it.

  2. In the mirage fixtures folder, update the students.js file and add the fixture data:
    // app/mirage/fixtures/students.js
export default [
    {id: 1, name: 'John', age: 17},
    {id: 2, name: 'Jack', age: 18},
    {id: 3, name: 'Suze', age: 17},
    {id: 4, name: 'Jane', age: 18}
];

    The fixture data has four records. Each record has a different student's name and age. To use fixture data with Ember CLI Mirage, you must enter it as an array of objects.

  3. Update the config.js file in the mirage folder. This file is used to set the students route:
    // app/mirage/config.js
export default function() {

    this.get('/students');

}

    This will set up a mock server endpoint for Ember Data to reach. By convention, Ember Data will look for the URL path of the pluralized model name. In this example, our model will be student; therefore, when Ember Data looks for data, it will do a GET request to /students on the server.

  4. Add a new scenario to the default.js file for the fixture data:
    // app/mirage/scenarios/default.js
export default function(server ) {
    server.loadFixtures();

}

    The loadFixtures() command will load the fixtures in memory so that they are available to the students route.

How to do it...

  1. Earlier, we created the model file. Let's take a look at it first to make sure that everything is set up correctly:
    // app/models/student.js
import DS from 'ember-data';

export default DS.Model.extend({
    name: DS.attr('string'),
    age: DS.attr('number')
});

    The student model has two properties called name and age.

  2. Update the route index.js file to return the students model:
    // app/routes/index.js
import Ember from 'ember';

export default Ember.Route.extend({
    model(){
      return this.store.findAll('student');
    }
});

    The route file will return all student records using the findAll method. This will trigger an HTTP GET request to the server at /students. The model hook is triggered when you visit the route. By convention, Ember will then cache these results.

  3. Open the application adapter. Set it to the REST adapter:
    // app/adapters/application.js
import DS from 'ember-data';

export default DS.RESTAdapter.extend({
});

    RESTAdapter will be used for all routes. It's a type of adapter that assumes that JSON data will be sent via XHR.

  4. Edit the index.hbs file. This will display the model information:
    // app/templates/index.hbs
{{#each model as |student|}}
    Name: {{student.name}}<br>
    age: {{student.age}}<br>
{{/each}}<br>

    In this example, we use the each helper to iterate through all the records.

  5. Run ember server and the following results should be displayed:
    How to do it...

    After the page loads, a list of the students' names and ages will be displayed. This data is retrieved from the fixture data that we set up earlier using our mock server.

How it works...

Fixtures are used when testing an application. It is well-known data and can be used for repeated tests. Ember CLI Mirage can be set up to use fixture data.

We'll be going over using fixture data with testing in the testing chapter in more detail.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset