Help getting ember-cli-mirage working

@mikeburg wrote:

Hi folks,

This is my first time working with ember-cli-mirage and I need some help trying to figure out how to get it working. None of the ajax calls, either made by ember-ajax or ember-fetch, are being intercepted and are being passed to the network.

I created a simple ember application with one route, and one test to try and isolate the problem. From what I can tell, mirage/config.js is being loaded but not called.

The test application (code listed below) has one route ‘/login’. The model setup makes a ajax get request to ‘/status’. A success result sets model.status to loaded, and a failure the status to failed. The catch function is always hit with an error the ajax call was aborted. Under the browser developer console, it shows an ajax attempt for ‘GET /status’.

Setting ENV[‘ember-cli-mirage’] = { enabled: true; } in the test section has no effect.

There is one suspicious message that appears when I run ‘ember g ember-cli-mirage’ -

destroy-app.js helper is not present. Please read this
https://gist.github.com/blimmer/35d3efbb64563029505a
to see how to fix the problem.

(The gist says this is not a problem for Ember versions greater than 1.13.9… I’m running with 3.0.2)

Does anyone have a clue on what I am doing wrong?

Here’s my setup and code -

ember-cli: 3.0.2 node: 8.8.1 os: darwin x64 ember-ajax: 3.1.0 ember-cli-mirage: 0.4.3

The app was created with the following commands:

ember new mirage-test cd mirage-test ember install ember-ajax ember install ember-cli-mirage ember g ember-cli-mirage ember g route login $ ember g acceptance-test login

app/model/login.js -

import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';

export default Route.extend({
  ajax: service(),

  model() {
    console.log('Loading route');
    return this.get('ajax').request('/status', { type: 'GET' }).then(() => {
      return { status: 'loaded' };
    }).catch((reason) => {
      console.error('Request failed', reason); // This is always hit
      return { status: 'failed' };
    })
  },

  setupControler(controller, model) {
    controller.set('status', model.status);
  }
});

app/templates/login.hbs

<div id="result">{{status}}</div>

mirage/config.js

export default function() {
  this.get('/status', function() {
    console.log("/status hit"); // never see this message
    return { success: true};
  });
}

app/tests/acceptance/login-test.js

import { module, test } from 'qunit';
import { visit } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';

module('Acceptance | login', function(hooks) {
  setupApplicationTest(hooks);

  test('visiting /login', async function(assert) {
    await visit('/login');
    assert.equal(this.element.querySelector('#result').textContent, 'loaded');
  });
});

Thanks in advance,

– Michael

Posts: 6

Participants: 2

Read full topic