mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-28 14:03:48 +03:00
Moved publication identity to Design settings
This commit is contained in:
Peter Zimon
Daniel Lockyer
parent
679dc3c0d6
commit
0b4d789bbe
@ -3,10 +3,16 @@ import $ from 'jquery';
|
||||
import Controller from '@ember/controller';
|
||||
import NavigationItem from 'ghost-admin/models/navigation-item';
|
||||
import RSVP from 'rsvp';
|
||||
import {
|
||||
IMAGE_EXTENSIONS,
|
||||
IMAGE_MIME_TYPES
|
||||
} from 'ghost-admin/components/gh-image-uploader';
|
||||
import {computed} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task} from 'ember-concurrency';
|
||||
|
||||
const ICON_EXTENSIONS = ['ico', 'png'];
|
||||
|
||||
export default Controller.extend({
|
||||
config: service(),
|
||||
ghostPaths: service(),
|
||||
@ -14,6 +20,11 @@ export default Controller.extend({
|
||||
session: service(),
|
||||
settings: service(),
|
||||
|
||||
imageExtensions: IMAGE_EXTENSIONS,
|
||||
imageMimeTypes: IMAGE_MIME_TYPES,
|
||||
iconExtensions: null,
|
||||
iconMimeTypes: 'image/png,image/x-icon',
|
||||
|
||||
dirtyAttributes: false,
|
||||
newNavItem: null,
|
||||
newSecondaryNavItem: null,
|
||||
@ -22,6 +33,7 @@ export default Controller.extend({
|
||||
this._super(...arguments);
|
||||
this.set('newNavItem', NavigationItem.create({isNew: true}));
|
||||
this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
|
||||
this.iconExtensions = ICON_EXTENSIONS;
|
||||
},
|
||||
|
||||
blogUrl: computed('config.blogUrl', function () {
|
||||
@ -124,6 +136,38 @@ export default Controller.extend({
|
||||
reset() {
|
||||
this.set('newNavItem', NavigationItem.create({isNew: true}));
|
||||
this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
|
||||
},
|
||||
|
||||
removeImage(image) {
|
||||
// setting `null` here will error as the server treats it as "null"
|
||||
this.settings.set(image, '');
|
||||
},
|
||||
|
||||
/**
|
||||
* Opens a file selection dialog - Triggered by "Upload Image" buttons,
|
||||
* searches for the hidden file input within the .gh-setting element
|
||||
* containing the clicked button then simulates a click
|
||||
* @param {MouseEvent} event - MouseEvent fired by the button click
|
||||
*/
|
||||
triggerFileDialog(event) {
|
||||
// simulate click to open file dialog
|
||||
// using jQuery because IE11 doesn't support MouseEvent
|
||||
$(event.target)
|
||||
.closest('.gh-setting-action')
|
||||
.find('input[type="file"]')
|
||||
.click();
|
||||
},
|
||||
|
||||
/**
|
||||
* Fired after an image upload completes
|
||||
* @param {string} property - Property name to be set on `this.settings`
|
||||
* @param {UploadResult[]} results - Array of UploadResult objects
|
||||
* @return {string} The URL that was set on `this.settings.property`
|
||||
*/
|
||||
imageUploaded(property, results) {
|
||||
if (results[0]) {
|
||||
return this.settings.set(property, results[0].url);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -11,8 +11,6 @@ import {computed} from '@ember/object';
|
||||
import {inject as service} from '@ember/service';
|
||||
import {task} from 'ember-concurrency';
|
||||
|
||||
const ICON_EXTENSIONS = ['ico', 'png'];
|
||||
|
||||
function randomPassword() {
|
||||
let word = generatePassword(6);
|
||||
let randomN = Math.floor(Math.random() * 1000);
|
||||
@ -29,8 +27,6 @@ export default Controller.extend({
|
||||
ui: service(),
|
||||
|
||||
availableTimezones: null,
|
||||
iconExtensions: null,
|
||||
iconMimeTypes: 'image/png,image/x-icon',
|
||||
imageExtensions: IMAGE_EXTENSIONS,
|
||||
imageMimeTypes: IMAGE_MIME_TYPES,
|
||||
_scratchFacebook: null,
|
||||
@ -38,7 +34,6 @@ export default Controller.extend({
|
||||
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
this.iconExtensions = ICON_EXTENSIONS;
|
||||
},
|
||||
|
||||
privateRSSUrl: computed('config.blogUrl', 'settings.publicHash', function () {
|
||||
|
||||
@ -18,7 +18,108 @@
|
||||
{{/if}}
|
||||
|
||||
<section class="view-container">
|
||||
<div class="gh-setting-header gh-first-header">Navigation</div>
|
||||
<div class="gh-setting-header gh-first-header">Publication identity</div>
|
||||
<div class="flex flex-column br3 shadow-1 bg-grouped-table pa5">
|
||||
<div class="gh-setting-first" data-test-setting="icon">
|
||||
<GhUploader
|
||||
@extensions={{this.iconExtensions}}
|
||||
@paramsHash={{hash purpose="icon"}}
|
||||
@onComplete={{action "imageUploaded" "icon"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Publication icon</div>
|
||||
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-smallimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.icon}}
|
||||
<img class="blog-icon" src="{{this.settings.icon}}" onclick={{action "triggerFileDialog"}} alt="icon" data-test-icon-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "icon"}} data-test-delete-image="icon">
|
||||
<span>delete</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.iconMimeTypes}} data-test-file-input="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
<div class="gh-setting" data-test-setting="logo">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "logo"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Publication logo</div>
|
||||
<div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-smallimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.logo}}
|
||||
<img class="blog-logo" src="{{this.settings.logo}}" onclick={{action "triggerFileDialog"}} alt="logo" data-test-logo-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "logo"}} data-test-delete-image="logo">
|
||||
<span>delete</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="logo">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
<div class="gh-setting-last" data-test-setting="coverImage">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "coverImage"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Publication cover</div>
|
||||
<div class="gh-setting-desc">An optional large background image for your site</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-largeimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.coverImage}}
|
||||
<img class="blog-cover" src="{{this.settings.coverImage}}" onclick={{action "triggerFileDialog"}} alt="cover photo" data-test-cover-img>
|
||||
<button type="button" class="gh-setting-action-largeimg-delete" {{action "removeImage" "coverImage"}} data-test-delete-image="coverImage">
|
||||
<span>delete</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="coverImage">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="coverImage" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Navigation</div>
|
||||
<div class="gh-blognav-container pa5 pt6 bg-grouped-table shadow-1 br3">
|
||||
<form id="settings-navigation" class="gh-blognav" novalidate="novalidate">
|
||||
<SortableObjects @sortableObjectList={{this.settings.navigation}} @useSwap={{false}}>
|
||||
|
||||
@ -99,107 +99,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Publication identity</div>
|
||||
<div class="flex flex-column br3 shadow-1 bg-grouped-table pa5">
|
||||
<div class="gh-setting-first" data-test-setting="icon">
|
||||
<GhUploader
|
||||
@extensions={{this.iconExtensions}}
|
||||
@paramsHash={{hash purpose="icon"}}
|
||||
@onComplete={{action "imageUploaded" "icon"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Publication icon</div>
|
||||
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-smallimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.icon}}
|
||||
<img class="blog-icon" src="{{this.settings.icon}}" onclick={{action "triggerFileDialog"}} alt="icon" data-test-icon-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "icon"}} data-test-delete-image="icon">
|
||||
<span>delete</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="icon">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.iconMimeTypes}} data-test-file-input="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
<div class="gh-setting" data-test-setting="logo">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "logo"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Publication logo</div>
|
||||
<div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-smallimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.logo}}
|
||||
<img class="blog-logo" src="{{this.settings.logo}}" onclick={{action "triggerFileDialog"}} alt="logo" data-test-logo-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "logo"}} data-test-delete-image="logo">
|
||||
<span>delete</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="logo">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
<div class="gh-setting-last" data-test-setting="coverImage">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "coverImage"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Publication cover</div>
|
||||
<div class="gh-setting-desc">An optional large background image for your site</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-largeimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.coverImage}}
|
||||
<img class="blog-cover" src="{{this.settings.coverImage}}" onclick={{action "triggerFileDialog"}} alt="cover photo" data-test-cover-img>
|
||||
<button type="button" class="gh-setting-action-largeimg-delete" {{action "removeImage" "coverImage"}} data-test-delete-image="coverImage">
|
||||
<span>delete</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" onclick={{action "triggerFileDialog"}} data-test-image-upload-btn="coverImage">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="coverImage" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-header">Site meta settings</div>
|
||||
<div class="flex flex-column br3 shadow-1 bg-grouped-table pa5">
|
||||
<div class="gh-setting-first flex-column">
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
|
||||
import mockUploads from '../../../mirage/config/uploads';
|
||||
import wait from 'ember-test-helpers/wait';
|
||||
import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
|
||||
import {beforeEach, describe, it} from 'mocha';
|
||||
import {blur, click, currentRouteName, currentURL, fillIn, find, findAll, triggerEvent, typeIn} from '@ember/test-helpers';
|
||||
import {expect} from 'chai';
|
||||
import {fileUpload} from '../../helpers/file-upload';
|
||||
import {run} from '@ember/runloop';
|
||||
import {setupApplicationTest} from 'ember-mocha';
|
||||
import {setupMirage} from 'ember-cli-mirage/test-support';
|
||||
import {visit} from '../../helpers/visit';
|
||||
@ -65,6 +69,217 @@ describe('Acceptance: Settings - Design', function () {
|
||||
).to.equal(4);
|
||||
});
|
||||
|
||||
it('it renders, handles image uploads', async function () {
|
||||
await visit('/settings/design');
|
||||
|
||||
// blog icon upload
|
||||
// -------------------------------------------------------------- //
|
||||
|
||||
// has fixture icon
|
||||
expect(
|
||||
find('[data-test-icon-img]').getAttribute('src'),
|
||||
'initial icon src'
|
||||
).to.equal('/content/images/2014/Feb/favicon.ico');
|
||||
|
||||
// delete removes icon + shows button
|
||||
await click('[data-test-delete-image="icon"]');
|
||||
expect(
|
||||
find('[data-test-icon-img]'),
|
||||
'icon img after removal'
|
||||
).to.not.exist;
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="icon"]'),
|
||||
'icon upload button after removal'
|
||||
).to.exist;
|
||||
|
||||
// select file
|
||||
fileUpload(
|
||||
'[data-test-file-input="icon"] input',
|
||||
['test'],
|
||||
{name: 'pub-icon.ico', type: 'image/x-icon'}
|
||||
);
|
||||
|
||||
// check progress bar exists during upload
|
||||
run.later(() => {
|
||||
expect(
|
||||
find('[data-test-setting="icon"] [data-test-progress-bar]'),
|
||||
'icon upload progress bar'
|
||||
).to.exist;
|
||||
}, 50);
|
||||
|
||||
// wait for upload to finish and check image is shown
|
||||
await wait();
|
||||
expect(
|
||||
find('[data-test-icon-img]').getAttribute('src'),
|
||||
'icon img after upload'
|
||||
).to.match(/pub-icon\.ico$/);
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="icon"]'),
|
||||
'icon upload button after upload'
|
||||
).to.not.exist;
|
||||
|
||||
// failed upload shows error
|
||||
this.server.post('/images/upload/', function () {
|
||||
return {
|
||||
errors: [{
|
||||
type: 'ValidationError',
|
||||
message: 'Wrong icon size'
|
||||
}]
|
||||
};
|
||||
}, 422);
|
||||
await click('[data-test-delete-image="icon"]');
|
||||
await fileUpload(
|
||||
'[data-test-file-input="icon"] input',
|
||||
['test'],
|
||||
{name: 'pub-icon.ico', type: 'image/x-icon'}
|
||||
);
|
||||
expect(
|
||||
find('[data-test-error="icon"]').textContent.trim(),
|
||||
'failed icon upload message'
|
||||
).to.equal('Wrong icon size');
|
||||
|
||||
// reset upload endpoints
|
||||
mockUploads(this.server);
|
||||
|
||||
// blog logo upload
|
||||
// -------------------------------------------------------------- //
|
||||
|
||||
// has fixture icon
|
||||
expect(
|
||||
find('[data-test-logo-img]').getAttribute('src'),
|
||||
'initial logo src'
|
||||
).to.equal('/content/images/2013/Nov/logo.png');
|
||||
|
||||
// delete removes logo + shows button
|
||||
await click('[data-test-delete-image="logo"]');
|
||||
expect(
|
||||
find('[data-test-logo-img]'),
|
||||
'logo img after removal'
|
||||
).to.not.exist;
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="logo"]'),
|
||||
'logo upload button after removal'
|
||||
).to.exist;
|
||||
|
||||
// select file
|
||||
fileUpload(
|
||||
'[data-test-file-input="logo"] input',
|
||||
['test'],
|
||||
{name: 'pub-logo.png', type: 'image/png'}
|
||||
);
|
||||
|
||||
// check progress bar exists during upload
|
||||
run.later(() => {
|
||||
expect(
|
||||
find('[data-test-setting="logo"] [data-test-progress-bar]'),
|
||||
'logo upload progress bar'
|
||||
).to.exist;
|
||||
}, 50);
|
||||
|
||||
// wait for upload to finish and check image is shown
|
||||
await wait();
|
||||
expect(
|
||||
find('[data-test-logo-img]').getAttribute('src'),
|
||||
'logo img after upload'
|
||||
).to.match(/pub-logo\.png$/);
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="logo"]'),
|
||||
'logo upload button after upload'
|
||||
).to.not.exist;
|
||||
|
||||
// failed upload shows error
|
||||
this.server.post('/images/upload/', function () {
|
||||
return {
|
||||
errors: [{
|
||||
type: 'ValidationError',
|
||||
message: 'Wrong logo size'
|
||||
}]
|
||||
};
|
||||
}, 422);
|
||||
await click('[data-test-delete-image="logo"]');
|
||||
await fileUpload(
|
||||
'[data-test-file-input="logo"] input',
|
||||
['test'],
|
||||
{name: 'pub-logo.png', type: 'image/png'}
|
||||
);
|
||||
expect(
|
||||
find('[data-test-error="logo"]').textContent.trim(),
|
||||
'failed logo upload message'
|
||||
).to.equal('Wrong logo size');
|
||||
|
||||
// reset upload endpoints
|
||||
mockUploads(this.server);
|
||||
|
||||
// blog cover upload
|
||||
// -------------------------------------------------------------- //
|
||||
|
||||
// has fixture icon
|
||||
expect(
|
||||
find('[data-test-cover-img]').getAttribute('src'),
|
||||
'initial coverImage src'
|
||||
).to.equal('/content/images/2014/Feb/cover.jpg');
|
||||
|
||||
// delete removes coverImage + shows button
|
||||
await click('[data-test-delete-image="coverImage"]');
|
||||
expect(
|
||||
find('[data-test-coverImage-img]'),
|
||||
'coverImage img after removal'
|
||||
).to.not.exist;
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="coverImage"]'),
|
||||
'coverImage upload button after removal'
|
||||
).to.exist;
|
||||
|
||||
// select file
|
||||
fileUpload(
|
||||
'[data-test-file-input="coverImage"] input',
|
||||
['test'],
|
||||
{name: 'pub-coverImage.png', type: 'image/png'}
|
||||
);
|
||||
|
||||
// check progress bar exists during upload
|
||||
run.later(() => {
|
||||
expect(
|
||||
find('[data-test-setting="coverImage"] [data-test-progress-bar]'),
|
||||
'coverImage upload progress bar'
|
||||
).to.exist;
|
||||
}, 50);
|
||||
|
||||
// wait for upload to finish and check image is shown
|
||||
await wait();
|
||||
expect(
|
||||
find('[data-test-cover-img]').getAttribute('src'),
|
||||
'coverImage img after upload'
|
||||
).to.match(/pub-coverImage\.png$/);
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="coverImage"]'),
|
||||
'coverImage upload button after upload'
|
||||
).to.not.exist;
|
||||
|
||||
// failed upload shows error
|
||||
this.server.post('/images/upload/', function () {
|
||||
return {
|
||||
errors: [{
|
||||
type: 'ValidationError',
|
||||
message: 'Wrong coverImage size'
|
||||
}]
|
||||
};
|
||||
}, 422);
|
||||
await click('[data-test-delete-image="coverImage"]');
|
||||
await fileUpload(
|
||||
'[data-test-file-input="coverImage"] input',
|
||||
['test'],
|
||||
{name: 'pub-coverImage.png', type: 'image/png'}
|
||||
);
|
||||
expect(
|
||||
find('[data-test-error="coverImage"]').textContent.trim(),
|
||||
'failed coverImage upload message'
|
||||
).to.equal('Wrong coverImage size');
|
||||
|
||||
// reset upload endpoints
|
||||
mockUploads(this.server);
|
||||
});
|
||||
|
||||
it('saves navigation settings', async function () {
|
||||
await visit('/settings/design');
|
||||
await fillIn('#settings-navigation [data-test-navitem="0"] [data-test-input="label"]', 'Test');
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
|
||||
import mockUploads from '../../../mirage/config/uploads';
|
||||
import wait from 'ember-test-helpers/wait';
|
||||
import {authenticateSession, invalidateSession} from 'ember-simple-auth/test-support';
|
||||
import {beforeEach, describe, it} from 'mocha';
|
||||
import {blur, click, currentURL, fillIn, find, findAll, focus, triggerEvent} from '@ember/test-helpers';
|
||||
import {expect} from 'chai';
|
||||
import {fileUpload} from '../../helpers/file-upload';
|
||||
import {run} from '@ember/runloop';
|
||||
import {setupApplicationTest} from 'ember-mocha';
|
||||
import {setupMirage} from 'ember-cli-mirage/test-support';
|
||||
import {visit} from '../../helpers/visit';
|
||||
@ -83,213 +79,6 @@ describe('Acceptance: Settings - General', function () {
|
||||
await click('[data-test-save-button]');
|
||||
expect(document.title, 'page title').to.equal('Settings - General - New Blog Title');
|
||||
|
||||
// blog icon upload
|
||||
// -------------------------------------------------------------- //
|
||||
|
||||
// has fixture icon
|
||||
expect(
|
||||
find('[data-test-icon-img]').getAttribute('src'),
|
||||
'initial icon src'
|
||||
).to.equal('/content/images/2014/Feb/favicon.ico');
|
||||
|
||||
// delete removes icon + shows button
|
||||
await click('[data-test-delete-image="icon"]');
|
||||
expect(
|
||||
find('[data-test-icon-img]'),
|
||||
'icon img after removal'
|
||||
).to.not.exist;
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="icon"]'),
|
||||
'icon upload button after removal'
|
||||
).to.exist;
|
||||
|
||||
// select file
|
||||
fileUpload(
|
||||
'[data-test-file-input="icon"] input',
|
||||
['test'],
|
||||
{name: 'pub-icon.ico', type: 'image/x-icon'}
|
||||
);
|
||||
|
||||
// check progress bar exists during upload
|
||||
run.later(() => {
|
||||
expect(
|
||||
find('[data-test-setting="icon"] [data-test-progress-bar]'),
|
||||
'icon upload progress bar'
|
||||
).to.exist;
|
||||
}, 50);
|
||||
|
||||
// wait for upload to finish and check image is shown
|
||||
await wait();
|
||||
expect(
|
||||
find('[data-test-icon-img]').getAttribute('src'),
|
||||
'icon img after upload'
|
||||
).to.match(/pub-icon\.ico$/);
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="icon"]'),
|
||||
'icon upload button after upload'
|
||||
).to.not.exist;
|
||||
|
||||
// failed upload shows error
|
||||
this.server.post('/images/upload/', function () {
|
||||
return {
|
||||
errors: [{
|
||||
type: 'ValidationError',
|
||||
message: 'Wrong icon size'
|
||||
}]
|
||||
};
|
||||
}, 422);
|
||||
await click('[data-test-delete-image="icon"]');
|
||||
await fileUpload(
|
||||
'[data-test-file-input="icon"] input',
|
||||
['test'],
|
||||
{name: 'pub-icon.ico', type: 'image/x-icon'}
|
||||
);
|
||||
expect(
|
||||
find('[data-test-error="icon"]').textContent.trim(),
|
||||
'failed icon upload message'
|
||||
).to.equal('Wrong icon size');
|
||||
|
||||
// reset upload endpoints
|
||||
mockUploads(this.server);
|
||||
|
||||
// blog logo upload
|
||||
// -------------------------------------------------------------- //
|
||||
|
||||
// has fixture icon
|
||||
expect(
|
||||
find('[data-test-logo-img]').getAttribute('src'),
|
||||
'initial logo src'
|
||||
).to.equal('/content/images/2013/Nov/logo.png');
|
||||
|
||||
// delete removes logo + shows button
|
||||
await click('[data-test-delete-image="logo"]');
|
||||
expect(
|
||||
find('[data-test-logo-img]'),
|
||||
'logo img after removal'
|
||||
).to.not.exist;
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="logo"]'),
|
||||
'logo upload button after removal'
|
||||
).to.exist;
|
||||
|
||||
// select file
|
||||
fileUpload(
|
||||
'[data-test-file-input="logo"] input',
|
||||
['test'],
|
||||
{name: 'pub-logo.png', type: 'image/png'}
|
||||
);
|
||||
|
||||
// check progress bar exists during upload
|
||||
run.later(() => {
|
||||
expect(
|
||||
find('[data-test-setting="logo"] [data-test-progress-bar]'),
|
||||
'logo upload progress bar'
|
||||
).to.exist;
|
||||
}, 50);
|
||||
|
||||
// wait for upload to finish and check image is shown
|
||||
await wait();
|
||||
expect(
|
||||
find('[data-test-logo-img]').getAttribute('src'),
|
||||
'logo img after upload'
|
||||
).to.match(/pub-logo\.png$/);
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="logo"]'),
|
||||
'logo upload button after upload'
|
||||
).to.not.exist;
|
||||
|
||||
// failed upload shows error
|
||||
this.server.post('/images/upload/', function () {
|
||||
return {
|
||||
errors: [{
|
||||
type: 'ValidationError',
|
||||
message: 'Wrong logo size'
|
||||
}]
|
||||
};
|
||||
}, 422);
|
||||
await click('[data-test-delete-image="logo"]');
|
||||
await fileUpload(
|
||||
'[data-test-file-input="logo"] input',
|
||||
['test'],
|
||||
{name: 'pub-logo.png', type: 'image/png'}
|
||||
);
|
||||
expect(
|
||||
find('[data-test-error="logo"]').textContent.trim(),
|
||||
'failed logo upload message'
|
||||
).to.equal('Wrong logo size');
|
||||
|
||||
// reset upload endpoints
|
||||
mockUploads(this.server);
|
||||
|
||||
// blog cover upload
|
||||
// -------------------------------------------------------------- //
|
||||
|
||||
// has fixture icon
|
||||
expect(
|
||||
find('[data-test-cover-img]').getAttribute('src'),
|
||||
'initial coverImage src'
|
||||
).to.equal('/content/images/2014/Feb/cover.jpg');
|
||||
|
||||
// delete removes coverImage + shows button
|
||||
await click('[data-test-delete-image="coverImage"]');
|
||||
expect(
|
||||
find('[data-test-coverImage-img]'),
|
||||
'coverImage img after removal'
|
||||
).to.not.exist;
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="coverImage"]'),
|
||||
'coverImage upload button after removal'
|
||||
).to.exist;
|
||||
|
||||
// select file
|
||||
fileUpload(
|
||||
'[data-test-file-input="coverImage"] input',
|
||||
['test'],
|
||||
{name: 'pub-coverImage.png', type: 'image/png'}
|
||||
);
|
||||
|
||||
// check progress bar exists during upload
|
||||
run.later(() => {
|
||||
expect(
|
||||
find('[data-test-setting="coverImage"] [data-test-progress-bar]'),
|
||||
'coverImage upload progress bar'
|
||||
).to.exist;
|
||||
}, 50);
|
||||
|
||||
// wait for upload to finish and check image is shown
|
||||
await wait();
|
||||
expect(
|
||||
find('[data-test-cover-img]').getAttribute('src'),
|
||||
'coverImage img after upload'
|
||||
).to.match(/pub-coverImage\.png$/);
|
||||
expect(
|
||||
find('[data-test-image-upload-btn="coverImage"]'),
|
||||
'coverImage upload button after upload'
|
||||
).to.not.exist;
|
||||
|
||||
// failed upload shows error
|
||||
this.server.post('/images/upload/', function () {
|
||||
return {
|
||||
errors: [{
|
||||
type: 'ValidationError',
|
||||
message: 'Wrong coverImage size'
|
||||
}]
|
||||
};
|
||||
}, 422);
|
||||
await click('[data-test-delete-image="coverImage"]');
|
||||
await fileUpload(
|
||||
'[data-test-file-input="coverImage"] input',
|
||||
['test'],
|
||||
{name: 'pub-coverImage.png', type: 'image/png'}
|
||||
);
|
||||
expect(
|
||||
find('[data-test-error="coverImage"]').textContent.trim(),
|
||||
'failed coverImage upload message'
|
||||
).to.equal('Wrong coverImage size');
|
||||
|
||||
// reset upload endpoints
|
||||
mockUploads(this.server);
|
||||
|
||||
// CMD-S shortcut works
|
||||
// -------------------------------------------------------------- //
|
||||
await fillIn('[data-test-title-input]', 'CMD-S Test');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user