Skip to content

Instantly share code, notes, and snippets.

@jelhan
Last active September 26, 2018 18:59
Show Gist options
  • Save jelhan/0ab2c1fc5727cde9a302ff0caf601ddf to your computer and use it in GitHub Desktop.
Save jelhan/0ab2c1fc5727cde9a302ff0caf601ddf to your computer and use it in GitHub Desktop.
Mocking binary responses with Ember Cli Mirage
export default function() {
this.get('https://cors-anywhere.herokuapp.com/**', () => {
return new Response(
200,
{ 'Content-Type': 'image/png' },
new Blob(['some data'])
);
});
}
import Ember from 'ember';
import { inject as service } from '@ember/service';
import { assert } from '@ember/debug';
export default Ember.Route.extend({
ajax: service(),
model() {
let url = 'https://cors-anywhere.herokuapp.com/https://www.emberjs.com/images/tomsters/emberconf-2018-85708f7b.png';
return this.get('ajax').request(url, {
dataType: 'binary',
xhr() {
let myXhr = jQuery.ajaxSettings.xhr();
myXhr.responseType = 'blob';
return myXhr;
}
}).then((response) => {
if (response === undefined) {
console.error('response should not be undefined');
}
return new Promise((resolve, reject) => {
let reader = new FileReader();
reader.addEventListener('load', () => {
resolve(reader.result);
}, false);
reader.addEventListener('error', () => {
reject(reader.error);
}, false);
reader.readAsDataURL(response);
});
});
}
});
<h1>How to mock a binary response expecting a <i>responseType</i> of <i>"blob"</i> with Mirage?</h1>
<p>Application route's model hook is fetching an image using <i>jQuery.ajax()</i>. It's working fine without Mirage. Tried to mock that request with Mirage by returning a <i>Blob</i> as response data. But in that case ajax request resolves with <i>undefined</i>. Please activate mirage in <i>twiddle.json</i> by setting <i>ENV['ember-cli-mirage'].enabled</i> to <i>true</i>. It's the fifth line of that file.</p>
<img src={{model}} />
{
"version": "0.15.0",
"ENV": {
"ember-cli-mirage": {
"enabled": false
}
},
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.2.2",
"ember-template-compiler": "3.2.2",
"ember-testing": "3.2.2"
},
"addons": {
"ember-ajax": "3.1.1",
"ember-cli-mirage": "0.4.9"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment