Improve gh-profile-image tests for #6640

refs #6640
- add `NotFoundError` to ajax service and test against that when catching errors in `gh-profile-image`
- don't use `passthrough` in Mirage for gravatar requests to avoid network calls during testing
- add additional tests for `gh-profile-image` and put the debounced gravatar test back in place

ghost/admin/app/components/gh-profile-image.js

@@ -1,12 +1,15 @@
 import Ember from 'ember';
 import AjaxService from 'ember-ajax/services/ajax';
+import {NotFoundError} from 'ghost/services/ajax';
 
 const {
     Component,
     computed,
     inject: {service},
+    isBlank,
     run
 } = Ember;
+
 const {notEmpty} = computed;
 
 /**
@@ -66,19 +69,20 @@ export default Component.extend({
         let size = this.get('size');
         let style = '';
 
-        if (email) {
+        if (!isBlank(email)) {
             let gravatarUrl = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=404`;
 
             this.get('ajax').request(gravatarUrl)
-                .catch((data) => {
+                .catch((error) => {
                     let defaultImageUrl = `url("${this.get('ghostPaths.subdir')}/ghost/img/user-image.png")`;
 
-                    if (data.errors !== undefined && Number(data.errors[0].status) === 404) {
+                    if (error instanceof NotFoundError) {
                         this.$('.placeholder-img')[0].style.backgroundImage = Ember.String.htmlSafe(defaultImageUrl);
                     } else {
                         this.$('.placeholder-img')[0].style.backgroundImage = 'url()';
                     }
                 });
+
             style = `background-image: url(${gravatarUrl})`;
         }
         return Ember.String.htmlSafe(style);

ghost/admin/app/mirage/config.js

@@ -358,5 +358,9 @@ export function testConfig() {
         };
     });
 
-    this.passthrough('http://www.gravatar.com/avatar/**');
+    /* External sites ------------------------------------------------------- */
+
+    this.get('http://www.gravatar.com/avatar/:md5', function () {
+        return '';
+    }, 200);
 }

ghost/admin/app/services/ajax.js

@@ -12,6 +12,13 @@ export function UnsupportedMediaTypeError(errors) {
     AjaxError.call(this, errors, 'Request was rejected because it contains an unknown or unsupported file type.');
 }
 
+// TODO: remove once upgraded to ember-ajax 2.0
+export function NotFoundError(errors) {
+    AjaxError.call(this, errors, 'Resource was not found.');
+}
+
+NotFoundError.prototype = Object.create(AjaxError.prototype);
+
 export default AjaxService.extend({
     session: inject.service(),
 
@@ -36,6 +43,8 @@ export default AjaxService.extend({
             return new RequestEntityTooLargeError(payload.errors);
         } else if (this.isUnsupportedMediaType(status, headers, payload)) {
             return new UnsupportedMediaTypeError(payload.errors);
+        } else if (this.isNotFoundError(status, headers, payload)) {
+            return new NotFoundError(payload.errors);
         }
 
         return this._super(...arguments);
@@ -55,5 +64,9 @@ export default AjaxService.extend({
 
     isUnsupportedMediaType(status/*, headers, payload */) {
         return status === 415;
+    },
+
+    isNotFoundError(status) {
+        return status === 404;
     }
 });

ghost/admin/tests/integration/components/gh-profile-image-test.js

@@ -7,6 +7,8 @@ import {
 } from 'ember-mocha';
 import hbs from 'htmlbars-inline-precompile';
 import Ember from 'ember';
+import Pretender from 'pretender';
+import wait from 'ember-test-helpers/wait';
 
 const {run} = Ember;
 
@@ -21,6 +23,18 @@ let pathsStub = Ember.Service.extend({
     }
 });
 
+const stubKnownGravatar = function (server) {
+    server.get('http://www.gravatar.com/avatar/:md5', function () {
+        return [200, {'Content-Type': 'image/png'}, ''];
+    });
+};
+
+const stubUnknownGravatar = function (server) {
+    server.get('http://www.gravatar.com/avatar/:md5', function () {
+        return [404, {}, ''];
+    });
+};
+
 describeComponent(
     'gh-profile-image',
     'Integration: Component: gh-profile-image',
@@ -28,9 +42,18 @@ describeComponent(
         integration: true
     },
     function () {
+        let server;
+
         beforeEach(function () {
             this.register('service:ghost-paths', pathsStub);
             this.inject.service('ghost-paths', {as: 'ghost-paths'});
+
+            server = new Pretender();
+            stubKnownGravatar(server);
+        });
+
+        afterEach(function () {
+            server.shutdown();
         });
 
         it('renders', function () {
@@ -54,18 +77,76 @@ describeComponent(
             expect(this.$('input')).to.have.length(0);
         }),
 
-        it('immediately renders the gravatar if valid email supplied', function () {
+        it('renders default image if no email supplied', function () {
+            this.set('email', null);
+
+            this.render(hbs`
+                {{gh-profile-image email=email size=100 debounce=50}}
+            `);
+
+            expect(this.$('.gravatar-img').attr('style'), 'gravatar image style')
+                .to.be.blank;
+        });
+
+        it('renders the gravatar if valid email supplied', function (done) {
             let email = 'test@example.com';
             let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`;
 
             this.set('email', email);
 
+            this.render(hbs`
+                {{gh-profile-image email=email size=100 debounce=50}}
+            `);
+
+            // wait for the ajax request to complete
+            wait().then(() => {
+                expect(this.$('.gravatar-img').attr('style'), 'gravatar image style')
+                    .to.equal(`background-image: url(${expectedUrl})`);
+                done();
+            });
+        });
+
+        it('doesn\'t add background url if gravatar image doesn\'t exist', function (done) {
+            stubUnknownGravatar(server);
+
+            this.render(hbs`
+                {{gh-profile-image email="test@example.com" size=100 debounce=50}}
+            `);
+
+            wait().then(() => {
+                expect(this.$('.gravatar-img').attr('style'), 'gravatar image style')
+                    .to.be.blank;
+                done();
+            });
+        });
+
+        it('throttles gravatar loading as email is changed', function (done) {
+            let email = 'test@example.com';
+            let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`;
+
+            this.set('email', 'test');
+
             this.render(hbs`
                 {{gh-profile-image email=email size=100 debounce=300}}
             `);
 
-            expect(this.$('.gravatar-img').attr('style'), 'gravatar image style')
-                .to.equal(`background-image: url(${expectedUrl})`);
+            run(() => {
+                this.set('email', email);
+            });
+
+            expect(this.$('.gravatar-img').attr('style'), '.gravatar-img background not immediately changed on email change')
+                .to.be.blank;
+
+            run.later(this, function () {
+                expect(this.$('.gravatar-img').attr('style'), '.gravatar-img background still not changed before debounce timeout')
+                    .to.be.blank;
+            }, 250);
+
+            run.later(this, function () {
+                expect(this.$('.gravatar-img').attr('style'), '.gravatar-img background changed after debounce timeout')
+                    .to.equal(`background-image: url(${expectedUrl})`);
+                done();
+            }, 400);
         });
     }
 );