Integration tests with Pretender

Testing
1

I’ve got a demo application where I’m trying to get embercli, integration tests and trek/pretender working together. I’m stuck on mocking out data using pretender.

Basically pretender gets setup to mock 2 urls, but when I attempt to load that data from within the cards route it doesn’t get this data and I’m completed confused as to why it doesn’t work. Any help would be appreciated. The full embercli project is here https://github.com/tmcgilchrist/vault

models/card.js

import DS from 'ember-data';

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

routes/cards.js

import Ember from 'ember';

export default Ember.Route.extend({

    model: function () {
        this.store.find('card');
    },
    setupController: function(controller, model) {
        console.log("Model is empty: " + (model === undefined) + " model: " + model);
        controller.set('model', model);
    }
});

controller/cards.js

import Ember from 'ember';

export default Ember.ArrayController.extend({
});

templates/cards.hbs

<h1> Cards </h1>

<ul class="cards-list">
{{controller}}
<br>

<ol>
  {{#each }}
    <li> {{name}} </li>
  {{/each}}
</ol>

swap-cards-test.js

import Ember from "ember";
import Pretender from 'pretender';
import { test } from 'ember-qunit';
import startApp from '../helpers/start-app';
var App;
var pretender;

var CARDS = {
    "1": {
        id: '1',
        name: 'Card 1'
    },
    "2": {
        id: '2',
        name: 'Card 2 '
    }
};

module('Integration - Swap cards', {
    setup: function() {
        pretender = new Pretender(function(){
            this.get('/cards', function(request){
                var all =  JSON.stringify({cards: Object.keys(CARDS).map(function(k){return CARDS[k];})});
                console.log(all);
                return [200, {"Content-Type": "application/json"}, all];
            });

            this.get('/cards/:id', function(request){
                var card = JSON.stringify({card: CARDS[request.params.id]});
                console.log(card);
                return [200, {"Content-Type": "application/json"}, card];
            });
        });
        App = startApp();
    },
    teardown: function() {
       //Ember.run(App, App.destroy);
        if (pretender) {
            pretender.shutdown();
        }
        pretender = null;
    }
});

test("Page contents", function() {
    expect(2);
    visit('/cards').then(function() {
        equal(find('.cards-list').length, 1, "Page contains list of models");
        equal(find('.cards-list .trading-card').length, 2, "List contains expected number of models");
    });
});
2

Does it work outside of testing? Are the endpoints you’ve defined actually getting called? I would expect that if you were trying to get data the endpoint would be more like

pretender = new Pretender(function(){
            this.get('api/cards', function(request){

Here’s a more detailed post on the topic http://reefpoints.dockyard.com/2014/05/09/building-an-ember-app-with-rails-part-3.html

What is the endpoint you have defined in your Adapter ?

Personally I was very into Pretender early on, but have switched to using ember generate http-mock {thing}. It’s only main frustration for me is having to restart the ember server if I make changes to the mocked endpoints, but I do that infrequently.

This happily allows me to have canned data in both development and test which is the same and gives me more confidence when debugging.