TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-14 09:52:09 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #6703 from kevinansfield/6640-tests

Browse Source 
Improve `gh-profile-image` tests for #6640
This commit is contained in:
Hannah Wolfe 2016-05-11 13:00:19 +02:00
commit f21e564591
5 changed files with 106 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
core/client/app/components/gh-profile-image.js
View File

@ -1,11 +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;
/**
@ -30,6 +34,8 @@ export default Component.extend({
validEmail: '',
hasUploadedImage: false,
fileStorage: true,
ajax: AjaxService.create(),
config: service(),
ghostPaths: service(),
displayGravatar: notEmpty('validEmail'),
@ -61,11 +67,23 @@ export default Component.extend({
imageBackground: computed('validEmail', 'size', function () {
let email = this.get('validEmail');
let size = this.get('size');
let style = '';
if (email) {
let url = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=blank`;
style = `background-image: url(${url})`;
if (!isBlank(email)) {
let gravatarUrl = `//www.gravatar.com/avatar/${window.md5(email)}?s=${size}&d=404`;
this.get('ajax').request(gravatarUrl)
.catch((error) => {
let defaultImageUrl = `url("${this.get('ghostPaths.subdir')}/ghost/img/user-image.png")`;
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);
}),

6
core/client/app/mirage/config.js
View File

@ -357,4 +357,10 @@ export function testConfig() {
user: record
};
});
/* External sites ------------------------------------------------------- */
this.get('http://www.gravatar.com/avatar/:md5', function () {
return '';
}, 200);
}

13
core/client/app/services/ajax.js
View File

@ -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;
}
});

3
core/client/app/templates/components/gh-profile-image.hbs
View File

@ -1,12 +1,9 @@
<figure class="account-image js-file-upload">
{{#unless hasUploadedImage}}
<div class="placeholder-img" style={{defaultImage}}></div>
{{#if displayGravatar}}
<div id="account-image" class="gravatar-img" style={{imageBackground}}>
<span class="sr-only">User image</span>
</div>
{{/if}}
{{/unless}}
<div class="js-img-preview"></div>

81
core/client/tests/integration/components/gh-profile-image-test.js
View File

@ -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,23 +77,52 @@ 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=blank`;
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=300}}
{{gh-profile-image email=email size=100 debounce=50}}
`);
expect(this.$('.gravatar-img').attr('style'), 'gravatar image style')
.to.equal(`background-image: url(${expectedUrl})`);
// 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=blank`;
let expectedUrl = `//www.gravatar.com/avatar/${md5(email)}?s=100&d=404`;
this.set('email', 'test');
@ -78,23 +130,20 @@ describeComponent(
{{gh-profile-image email=email size=100 debounce=300}}
`);
expect(this.$('.gravatar-img').length, '.gravatar-img not shown for invalid email')
.to.equal(0);
run(() => {
this.set('email', email);
});
expect(this.$('.gravatar-img').length, '.gravatar-img not immediately changed on email change')
.to.equal(0);
expect(this.$('.gravatar-img').attr('style'), '.gravatar-img background not immediately changed on email change')
.to.be.blank;
Ember.run.later(this, function () {
expect(this.$('.gravatar-img').length, '.gravatar-img still not shown before throttle timeout')
.to.equal(0);
run.later(this, function () {
expect(this.$('.gravatar-img').attr('style'), '.gravatar-img background still not changed before debounce timeout')
.to.be.blank;
}, 250);
Ember.run.later(this, function () {
expect(this.$('.gravatar-img').attr('style'), '.gravatar-img style after timeout')
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);