From 4f2f610811be25380657f23d4c40a29acca6f950 Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 12 Apr 2016 12:34:40 +0100 Subject: [PATCH] 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 --- .../client/app/components/gh-profile-image.js | 10 ++- core/client/app/mirage/config.js | 6 +- core/client/app/services/ajax.js | 13 +++ .../components/gh-profile-image-test.js | 87 ++++++++++++++++++- 4 files changed, 109 insertions(+), 7 deletions(-) diff --git a/core/client/app/components/gh-profile-image.js b/core/client/app/components/gh-profile-image.js index 1556b9a413..00f038e8bb 100644 --- a/core/client/app/components/gh-profile-image.js +++ b/core/client/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); diff --git a/core/client/app/mirage/config.js b/core/client/app/mirage/config.js index b8ad82f9cc..f6bb53c525 100644 --- a/core/client/app/mirage/config.js +++ b/core/client/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); } diff --git a/core/client/app/services/ajax.js b/core/client/app/services/ajax.js index c52935243b..c8558bf14f 100644 --- a/core/client/app/services/ajax.js +++ b/core/client/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; } }); diff --git a/core/client/tests/integration/components/gh-profile-image-test.js b/core/client/tests/integration/components/gh-profile-image-test.js index e5aadce495..0f919b774b 100644 --- a/core/client/tests/integration/components/gh-profile-image-test.js +++ b/core/client/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); }); } );