Serve static json file for translations

Question

I'm using ember-i18n for translations and I'm trying to fetch translations live as described in ember-i18n wiki Instead of loading translations from backend, I would load them from a static file. I've placed files lang.json in /public/i18n/ folder and I retrieve them using a service:

export default Ember.Service.extend({
  ajax: inject.service(),  // ember-ajax service
  i18n: inject.service(),

  fetch(lang) {
    if (isEmpty(lang) || !ENV.APP.languages.contains(lang)) {
      lang = "en";
    }
    let url = "http://" + window.location.host + "/i18n/" + lang + ".json";
    return new Ember.RSVP.Promise((resolve, reject) => {
      this.get("ajax").request(url, {
        type: "GET"
      }).then((json) => {
        this.get('i18n').addTranslations(lang, json);
        resolve(lang);
      }, (params) => {
        Ember.Logger.debug(params);
        reject();
      });
    });
  }
});

lang.json file contains just the json:

{
  "key.foo": "Foo",
  "key.bar": "Bar"
}

In dev it works like a charm, but I've some problems running tests. The json retrieved contains the content of the lang.json file but it's not loaded into the i18n service (for example if I run test with -s I see missing translation xxx everywhere.

Furthermore, test execution get slower and slower and after 10-15 tests it throws timeout errors.

Am I doing something that shouldn't be done or there something I'm missing? Thanks

I'm using:
ember-cli: 2.6.2
ember: ~2.6.0
ember-i18n: ~4.2.1

Answer 1

Just for concept ( for your repo ) 1) I open tests/index.html and modify it next way

<script src="assets/vendor.js"></script>
<!-- Next was added -->
<script>
  var translations;
  $.getJSON('/i18n/en.json').then(function(data){ translations = data; });
</script>

2) inside app/mirage/config.js

export default function() {
  this.get("/i18n/:lang", function() {
    return window.translations;
  });
}

Git diff for my changes here http://pastebin.com/eGwAXM77