🎨 Added post title to document title for easier location with multiple editor tabs (#1072)

closes https://github.com/tryghost/ghost/issues/10088
* added `updateDocumentTitle` action to base route and replace usage of `.send('collectTitleTokens, [])`
* added `.titleToken()` method to editor route to add post title to document title
* called `.send('updateDocumentTitle')` after saving post title in editor controller to keep document title in sync
* updated editor controller test for latest ember-mocha and ember-test-helpers
This commit is contained in:
Moritz Schramm 2019-01-21 12:44:30 +01:00 committed by Kevin Ansfield
parent 39c850f4fe
commit 8fcd75de32
5 changed files with 89 additions and 127 deletions

View File

@ -474,6 +474,8 @@ export default Controller.extend({
if (this.get('post.isDraft')) { if (this.get('post.isDraft')) {
yield this.get('autosave').perform(); yield this.get('autosave').perform();
} }
this.send('updateDocumentTitle');
}), }),
generateSlug: task(function* () { generateSlug: task(function* () {

View File

@ -274,7 +274,7 @@ export default Controller.extend({
// this forces the document title to recompute after // this forces the document title to recompute after
// a blog title change // a blog title change
this.send('collectTitleTokens', []); this.send('updateDocumentTitle');
return settings; return settings;
} catch (error) { } catch (error) {

View File

@ -17,7 +17,6 @@ export default AuthenticatedRoute.extend(ShortcutsRoute, {
classNames: ['editor'], classNames: ['editor'],
shortcuts: generalShortcuts, shortcuts: generalShortcuts,
titleToken: 'Editor',
activate() { activate() {
this._super(...arguments); this._super(...arguments);
@ -82,6 +81,10 @@ export default AuthenticatedRoute.extend(ShortcutsRoute, {
} }
}, },
titleToken() {
return this.get('controller.post.title') || 'Editor';
},
_blurAndScheduleAction(func) { _blurAndScheduleAction(func) {
let selectedElement = $(document.activeElement); let selectedElement = $(document.activeElement);

View File

@ -18,6 +18,10 @@ export default function () {
title: null, title: null,
actions: { actions: {
updateDocumentTitle() {
this.send('collectTitleTokens', []);
},
collectTitleTokens(tokens) { collectTitleTokens(tokens) {
let {titleToken} = this; let {titleToken} = this;
let finalTitle; let finalTitle;
@ -49,7 +53,7 @@ export default function () {
Router.reopen({ Router.reopen({
updateTitle: on('didTransition', function () { updateTitle: on('didTransition', function () {
this.send('collectTitleTokens', []); this.send('updateDocumentTitle');
}) })
}); });
} }

View File

@ -1,190 +1,143 @@
import EmberObject from '@ember/object'; import EmberObject from '@ember/object';
import RSVP from 'rsvp'; import RSVP from 'rsvp';
import wait from 'ember-test-helpers/wait';
import {describe, it} from 'mocha'; import {describe, it} from 'mocha';
import {expect} from 'chai'; import {expect} from 'chai';
import {run} from '@ember/runloop'; import {settled} from '@ember/test-helpers';
import {setupTest} from 'ember-mocha'; import {setupTest} from 'ember-mocha';
import {task} from 'ember-concurrency'; import {task} from 'ember-concurrency';
describe('Unit: Controller: editor', function () { describe('Unit: Controller: editor', function () {
setupTest('controller:editor', { setupTest();
needs: [
'controller:application',
'service:feature',
'service:notifications',
// 'service:router',
'service:slugGenerator',
'service:session',
'service:ui'
]
});
describe('generateSlug', function () { describe('generateSlug', function () {
it('should generate a slug and set it on the post', function (done) { it('should generate a slug and set it on the post', async function () {
run(() => { let controller = this.owner.lookup('controller:editor');
let controller = this.subject();
controller.set('slugGenerator', EmberObject.create({ controller.set('slugGenerator', EmberObject.create({
generateSlug(slugType, str) { generateSlug(slugType, str) {
return RSVP.resolve(`${str}-slug`); return RSVP.resolve(`${str}-slug`);
} }
})); }));
controller.set('post', EmberObject.create({slug: ''})); controller.set('post', EmberObject.create({slug: ''}));
controller.set('post.titleScratch', 'title'); controller.set('post.titleScratch', 'title');
await settled();
expect(controller.get('post.slug')).to.equal(''); expect(controller.get('post.slug')).to.equal('');
run(() => { await controller.get('generateSlug').perform();
controller.get('generateSlug').perform();
});
wait().then(() => { expect(controller.get('post.slug')).to.equal('title-slug');
expect(controller.get('post.slug')).to.equal('title-slug');
done();
});
});
}); });
it('should not set the destination if the title is "(Untitled)" and the post already has a slug', function (done) { it('should not set the destination if the title is "(Untitled)" and the post already has a slug', async function () {
let controller = this.subject(); let controller = this.owner.lookup('controller:editor');
run(() => { controller.set('slugGenerator', EmberObject.create({
controller.set('slugGenerator', EmberObject.create({ generateSlug(slugType, str) {
generateSlug(slugType, str) { return RSVP.resolve(`${str}-slug`);
return RSVP.resolve(`${str}-slug`); }
} }));
})); controller.set('post', EmberObject.create({slug: 'whatever'}));
controller.set('post', EmberObject.create({slug: 'whatever'}));
});
expect(controller.get('post.slug')).to.equal('whatever'); expect(controller.get('post.slug')).to.equal('whatever');
controller.set('post.titleScratch', '(Untitled)'); controller.set('post.titleScratch', '(Untitled)');
await controller.get('generateSlug').perform();
run(() => { expect(controller.get('post.slug')).to.equal('whatever');
controller.get('generateSlug').perform();
});
wait().then(() => {
expect(controller.get('post.slug')).to.equal('whatever');
done();
});
}); });
}); });
describe('saveTitle', function () { describe('saveTitle', function () {
it('should invoke generateSlug if the post is new and a title has not been set', function (done) { beforeEach(function () {
let controller = this.subject(); this.controller = this.owner.lookup('controller:editor');
this.controller.set('target', {send() {}});
});
run(() => { it('should invoke generateSlug if the post is new and a title has not been set', async function () {
controller.set('generateSlug', task(function * () { let {controller} = this;
this.set('post.slug', 'test-slug');
yield RSVP.resolve(); controller.set('target', {send() {}});
})); controller.set('generateSlug', task(function * () {
controller.set('post', EmberObject.create({isNew: true})); this.set('post.slug', 'test-slug');
}); yield RSVP.resolve();
}));
controller.set('post', EmberObject.create({isNew: true}));
expect(controller.get('post.isNew')).to.be.true; expect(controller.get('post.isNew')).to.be.true;
expect(controller.get('post.titleScratch')).to.not.be.ok; expect(controller.get('post.titleScratch')).to.not.be.ok;
controller.set('post.titleScratch', 'test'); controller.set('post.titleScratch', 'test');
await controller.get('saveTitle').perform();
run(() => { expect(controller.get('post.titleScratch')).to.equal('test');
controller.get('saveTitle').perform(); expect(controller.get('post.slug')).to.equal('test-slug');
});
wait().then(() => {
expect(controller.get('post.titleScratch')).to.equal('test');
expect(controller.get('post.slug')).to.equal('test-slug');
done();
});
}); });
it('should invoke generateSlug if the post is not new and it\'s title is "(Untitled)"', function (done) { it('should invoke generateSlug if the post is not new and it\'s title is "(Untitled)"', async function () {
let controller = this.subject(); let {controller} = this;
run(() => { controller.set('target', {send() {}});
controller.set('generateSlug', task(function * () { controller.set('generateSlug', task(function * () {
this.set('post.slug', 'test-slug'); this.set('post.slug', 'test-slug');
yield RSVP.resolve(); yield RSVP.resolve();
})); }));
controller.set('post', EmberObject.create({isNew: false, title: '(Untitled)'})); controller.set('post', EmberObject.create({isNew: false, title: '(Untitled)'}));
});
expect(controller.get('post.isNew')).to.be.false; expect(controller.get('post.isNew')).to.be.false;
expect(controller.get('post.titleScratch')).to.not.be.ok; expect(controller.get('post.titleScratch')).to.not.be.ok;
controller.set('post.titleScratch', 'New Title'); controller.set('post.titleScratch', 'New Title');
run(() => { await controller.get('saveTitle').perform();
controller.get('saveTitle').perform();
});
wait().then(() => { expect(controller.get('post.titleScratch')).to.equal('New Title');
expect(controller.get('post.titleScratch')).to.equal('New Title'); expect(controller.get('post.slug')).to.equal('test-slug');
expect(controller.get('post.slug')).to.equal('test-slug');
done();
});
}); });
it('should not invoke generateSlug if the post is new but has a title', function (done) { it('should not invoke generateSlug if the post is new but has a title', async function () {
let controller = this.subject(); let {controller} = this;
run(() => { controller.set('target', {send() {}});
controller.set('generateSlug', task(function * () { controller.set('generateSlug', task(function * () {
expect(false, 'generateSlug should not be called').to.equal(true); expect(false, 'generateSlug should not be called').to.equal(true);
yield RSVP.resolve(); yield RSVP.resolve();
})); }));
controller.set('post', EmberObject.create({ controller.set('post', EmberObject.create({
isNew: true, isNew: true,
title: 'a title' title: 'a title'
})); }));
});
expect(controller.get('post.isNew')).to.be.true; expect(controller.get('post.isNew')).to.be.true;
expect(controller.get('post.title')).to.equal('a title'); expect(controller.get('post.title')).to.equal('a title');
expect(controller.get('post.titleScratch')).to.not.be.ok; expect(controller.get('post.titleScratch')).to.not.be.ok;
controller.set('post.titleScratch', 'test'); controller.set('post.titleScratch', 'test');
await controller.get('saveTitle').perform();
run(() => { expect(controller.get('post.titleScratch')).to.equal('test');
controller.get('saveTitle').perform(); expect(controller.get('post.slug')).to.not.be.ok;
});
wait().then(() => {
expect(controller.get('post.titleScratch')).to.equal('test');
expect(controller.get('post.slug')).to.not.be.ok;
done();
});
}); });
it('should not invoke generateSlug if the post is not new and the title is not "(Untitled)"', function (done) { it('should not invoke generateSlug if the post is not new and the title is not "(Untitled)"', async function () {
let controller = this.subject(); let {controller} = this;
run(() => { controller.set('target', {send() {}});
controller.set('generateSlug', task(function * () { controller.set('generateSlug', task(function * () {
expect(false, 'generateSlug should not be called').to.equal(true); expect(false, 'generateSlug should not be called').to.equal(true);
yield RSVP.resolve(); yield RSVP.resolve();
})); }));
controller.set('post', EmberObject.create({isNew: false})); controller.set('post', EmberObject.create({isNew: false}));
});
expect(controller.get('post.isNew')).to.be.false; expect(controller.get('post.isNew')).to.be.false;
expect(controller.get('post.title')).to.not.be.ok; expect(controller.get('post.title')).to.not.be.ok;
controller.set('post.titleScratch', 'title'); controller.set('post.titleScratch', 'title');
await controller.get('saveTitle').perform();
run(() => { expect(controller.get('post.titleScratch')).to.equal('title');
controller.get('saveTitle').perform(); expect(controller.get('post.slug')).to.not.be.ok;
});
wait().then(() => {
expect(controller.get('post.titleScratch')).to.equal('title');
expect(controller.get('post.slug')).to.not.be.ok;
done();
});
}); });
}); });
}); });