# Ember Mirage custom route

**URL:** <https://discuss.emberjs.com/t/ember-mirage-custom-route/16367>\
**Category:** Testing\
**Created:** [March 27, 2019, 9:03am UTC](https://discuss.emberjs.com/t/ember-mirage-custom-route/16367 "2019-03-27T09:03:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [March 27, 2019, 9:03am UTC](https://discuss.emberjs.com/t/ember-mirage-custom-route/16367/1 "2019-03-27T09:03:01Z")

</div>

I can’t figure out why **Mirage** fails to mock a request and I’m getting the error when running an acceptance test:

```auto
#tests/acceptance/dashboard-test.js

import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { authenticateSession } from 'ember-simple-auth/test-support';
import setupMirageTest from 'ember-cli-mirage/test-support/setup-mirage';
import { setupWindowMock } from 'ember-window-mock';

module('Acceptance | Dashboard', function(hooks) {
  setupWindowMock(hooks);
  setupApplicationTest(hooks);
  setupMirageTest(hooks);

  test('Authenticated users can visit /dashboard', async function(assert) {
    let shop = this.server.create('shop');
    this.server.create('user', { shop });

    await authenticateSession({
      access_token: 'abcdDEF',
      token_type: 'Bearer'
    });

    await visit('/dashboard');

    assert.equal(currentURL(), '/dashboard', 'user is on dashboard page');
  });
});

```

The error happens when calling the following function in the `application` route:

```auto
#routes/application.js

_loadCurrentUser() {
    return this.get('currentUser').loadCurrentUser().catch(() => this.get('session').invalidate());
  },

```

Here is how `loadCurrentUser` function is defined in `current-user` service:

```auto
#services/current-user.js

export default Service.extend({
  session: service(),
  store: service(),
  flashMessages: service(),
  intl: service(),
  currentShop: service(),
  shopService: service(),

  async loadCurrentUser() {
    this.get('flashMessages').clearMessages();
    if (this.get('session.isAuthenticated')) {
      let user = await this.get('store').queryRecord('user', { me: true });
      
      if (user) {
        this.get('flashMessages').success(this.get('intl').t('flash.signed_in'));
        this.get('currentShop').setShop(user.get('shop'));
        this.set('user', user);
        this.get('shopService').loadShops();
        return user;
      } else {
        this._respondWithError();
      }

    } else {
      this.get('flashMessages').info(this.get('intl').t('flash.signed_off'));
      return RSVP.resolve();
    }
  },

  _respondWithError() {
    this.get('flashMessages').danger(this.get('intl').t('flash.authentication.error'));
    return RSVP.reject();
  }
});

```

If I’m not mistaken, the error happens on the line:

```auto
let user = await this.get('store').queryRecord('user', { me: true });

```

and then catched in `application` route `catch` block.

Here is how I defined the routes in Mirage `config.js` file:

```auto
#../mirage/config.js

export default function() {

  this.get('/users/me', (schema) => {
    return schema.users.first();
  });
  
  this.get('/shops');
}

```

The factories are also created for `User` and `Shop`:

```auto
#mirage/factories/user.js

import { Factory, faker, association } from 'ember-cli-mirage';

export default Factory.extend({
  firstName: faker.name.firstName(),
  lastName: faker.name.lastName(),
  username: faker.internet.userName(),
  shop: association()
});

#mirage/factories/shop.js

import { Factory, faker } from 'ember-cli-mirage';

export default Factory.extend({
  identifier: faker.random.number(),
  category: faker.commerce.department(),
  name: faker.company.companyName()
});

```

If I modify the `catch` block to display the caught error as follows:

```auto
# routes/application.js

_loadCurrentUser() {
    return this.get('currentUser').loadCurrentUser().catch((e) => console.log('+++++++++ catched: ' + e));
    //return this.get('currentUser').loadCurrentUser().catch(() => this.get('session').invalidate());
  },

```

it displays:

```auto
'\'+++++++++ catched: SyntaxError: Unexpected end of JSON input\'\n'

```

I also defined the serializers for Mirage environment using the same settings as in `serializers/application.js`:

```auto
#mirage/serializers/application.js

import { JSONAPISerializer } from 'ember-cli-mirage';
import { underscore } from '@ember/string';

export default JSONAPISerializer.extend({
  keyForAttribute: function(attr) {
    return underscore(attr);
  },

  keyForRelationship: function(rawKey) {
    return underscore(rawKey);
  }
});

#mirage/serializers/user.js

import ApplicationSerializer from './application';

export default ApplicationSerializer.extend({
  include: ['shop']
});

```

What am I missing? Thank you

Mirage CLI version: `0.4.15` ember: `3.8.2`` Thank you

---

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [March 27, 2019, 4:12pm UTC](https://discuss.emberjs.com/t/ember-mirage-custom-route/16367/2 "2019-03-27T16:12:18Z")

</div>

I’m getting closer, - the problem is now in decoding a token passed from the Ember test to the backend controller.  
So, from Ember `dashboard-test` I’m calling the backend `user/me` end-point to identify a user. And here is where the problem is: the backend needs to **decode** the token passed in the request header as:

```auto
Bearer abcdDEF....

```

It looks a little bit weird, - why even if I mock the end-point `users/me` with Mirage, the backend proceeds as usual? It’s supposed to be totally ignored, no?

The error I’m getting from the response:

```auto
Assertion Failed: normalizeResponse must return a valid JSON API document:\\n\\t* One or more of the following keys must be present: "data", "errors", "meta".\'\n

```

Any idea ? Is it possible to debug in some way this kind of tests ?

---

<div class="post-metadata">

**Author:** ![James-Byrne](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/james-byrne/32/17391_2.png) [@James-Byrne](https://discuss.emberjs.com/u/James-Byrne)\
**Post date:** [March 29, 2019, 10:33am UTC](https://discuss.emberjs.com/t/ember-mirage-custom-route/16367/3 "2019-03-29T10:33:32Z")

</div>

Are you sure the mirage route is being called? Looking at what’s there the `queryRecord()` call should hit an endpoint like `this.get('/users');`. The `me` part of `queryRecord('...', {me: true})` would just be a queryParam right?

---

<div class="post-metadata">

**Author:** ![belgoros](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/belgoros/32/16101_2.png) [@belgoros](https://discuss.emberjs.com/u/belgoros)\
**Post date:** [March 29, 2019, 10:50am UTC](https://discuss.emberjs.com/t/ember-mirage-custom-route/16367/4 "2019-03-29T10:50:15Z")

</div>

I got help on Discord channel, (special thanks to @jelhan) for pointing out to the missing `return` statement and providing the link to the [opened issue](https://github.com/samselikoff/ember-cli-mirage/issues/1567).

Actually, what worked:

```auto
# mirage/config.js

export default function() {

  this.get('/users/me', (schema) => {
    return schema.users.first();
  });

  this.get('/shops');
}

# tests/acceptance/dashboard-tests.js

import { module, test } from 'qunit';
import { visit, currentURL } from '@ember/test-helpers';
import { setupApplicationTest } from 'ember-qunit';
import { authenticateSession } from 'ember-simple-auth/test-support';
import setupMirageTest from 'ember-cli-mirage/test-support/setup-mirage';
import { setupWindowMock } from 'ember-window-mock';

module('Acceptance | Dashboard', function(hooks) {
  setupWindowMock(hooks);
  setupApplicationTest(hooks);
  setupMirageTest(hooks);

  test('Authenticated users can visit /dashboard', async function(assert) {
    let shop = server.create('shop');
    server.create('user', { shop });

    await authenticateSession({
      access_token: 'azerty',
      token_type: 'Bearer'
    });

    await visit('/dashboard');
    assert.equal(currentURL(), '/dashboard', 'user is on dashboard page');
  });
});

```

I also created `application` and `user` serializers in `mirage` folder as described above.