ember.jsember-cli-mirage

Ember mirage introduce delay in specific cases only


To test some Timeout cases in my front-end, I want to introduce an artificial delay in mirage while responding to some specific requests only and respond right away for all other cases.

i am writing Mirage scenario like this

export default function () {
    this.post('/ebm-anp/api/v1/json/sessions', (schema, request) => {
  const req = JSON.parse(request.requestBody);
    if ((req.card.value === '12345678' || req.card.value === '12345678-encrypted-value') && req.password === 'abc') {
            return new Response(200, {'X-Auth-Token': '2704412f-7820-4431-86c1-1234567800'}, successResponse);
    }else if (..){

    }
  }
}  

In this post, Introduce momentary delays in ember-cli-mirage Sam suggested to use {timing: 400}; with the call , which when used in my example looks like following.

export default function () {
    this.post('/ebm-anp/api/v1/json/sessions', (schema, request) => {
  const req = JSON.parse(request.requestBody);
    if ((req.card.value === '12345678' || req.card.value === '12345678-encrypted-value') && req.password === 'abc') {
            return new Response(200, {'X-Auth-Token': '2704412f-7820-4431-86c1-1234567800'}, successResponse);
    }else if (..){

    }
  },{timing: 400};
} 

This basically introduces the delay in the calls for all testcases that hit this endpoint - which does not serve my purpose.

Is there someway i could refactor my Mirage setup so that i can setup the timing(delay) configuration only for some cases and leave it normal for all others.


Solution

  • If you're looking to introduce the delay in a single test only, you can always overwrite the route handler within your test, including passing in the timing option:

    test('I see a loading spinner when the sessions endpoint is slow', function(assert) {
      server.post('/ebm-anp/api/v1/json/sessions', (schema, request) => {
        const req = JSON.parse(request.requestBody);
        if ((req.card.value === '12345678' || req.card.value === '12345678-encrypted-value') && req.password === 'abc') {
          return new Response(200, {'X-Auth-Token': '2704412f-7820-4431-86c1-1234567800'}, successResponse);
        } else if (..) {
          //
        }
      }, { timing: 400 });
    
      visit('/');
      // do more things
    } 
    

    Basically, you're overriding this particular route for just this test. Routes in config will be reloaded each time a new test runs, so the timing for this route would be reset.

    If you want to share the route handler so you don't have to redefine the whole thing in both places, just stick it in a file somewhere reasonable

    // mirage/route-handlers/sessions.js
    export default (schema, request) => {
      const req = JSON.parse(request.requestBody);
      if ((req.card.value === '12345678' || req.card.value === '12345678-encrypted-value') && req.password === 'abc') {
        return new Response(200, {'X-Auth-Token': '2704412f-7820-4431-86c1-1234567800'}, successResponse);
      } else if (..) {
        //
      }
    });
    

    then import it like

    import sessionsRouteHandler from 'my-app/mirage/route-handlers/sessions';
    

    and use it like

    // mirage/config.js
    this.post('/ebm-anp/api/v1/json/session', sessionsRouteHandler);
    
    // your-test.js
    test('I see a loading spinner when the sessions endpoint is slow', function(assert) {
      session
      server.post('/ebm-anp/api/v1/json/sessions', sessionsRouteHandler, { timing: 400 });
    
      visit('/');
      // do more things
    }