mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-03 03:55:26 +03:00
cb59388c5b
no issue
- adds `eslint-plugin-sort-imports-es6-autofix` dependency
- implements ESLint's base `sort-imports` rule but has a distinction in that `import {foo} from 'bar';` is considered `multiple` rather than `single`
- fixes ESLint's autofix behaviour so `eslint --fix` will actually fix the sort order
- updates all unordered import rules by using `eslint --fix`
With the increased number of `import` statements since Ember+ecosystem started moving towards es6 modules I've found it frustrating at times trying to search through randomly ordered import statements. Recently I've been sorting imports manually when I've added new code or touched old code so I thought I'd add an ESLint rule to codify it.
445 lines
16 KiB
JavaScript
445 lines
16 KiB
JavaScript
/* jshint expr:true */
|
|
import $ from 'jquery';
|
|
import Pretender from 'pretender';
|
|
import Service from 'ember-service';
|
|
import hbs from 'htmlbars-inline-precompile';
|
|
import run from 'ember-runloop';
|
|
import sinon from 'sinon';
|
|
import wait from 'ember-test-helpers/wait';
|
|
import {UnsupportedMediaTypeError} from 'ghost-admin/services/ajax';
|
|
import {createFile, fileUpload} from '../../helpers/file-upload';
|
|
import {describe, it} from 'mocha';
|
|
import {expect} from 'chai';
|
|
import {setupComponentTest} from 'ember-mocha';
|
|
|
|
const notificationsStub = Service.extend({
|
|
showAPIError() {
|
|
// noop - to be stubbed
|
|
}
|
|
});
|
|
|
|
const stubSuccessfulUpload = function (server, delay = 0) {
|
|
server.post('/ghost/api/v0.1/uploads/', function () {
|
|
return [200, {'Content-Type': 'application/json'}, '"/content/images/test.png"'];
|
|
}, delay);
|
|
};
|
|
|
|
const stubFailedUpload = function (server, code, error, delay = 0) {
|
|
server.post('/ghost/api/v0.1/uploads/', function () {
|
|
return [code, {'Content-Type': 'application/json'}, JSON.stringify({
|
|
errors: [{
|
|
errorType: error,
|
|
message: `Error: ${error}`
|
|
}]
|
|
})];
|
|
}, delay);
|
|
};
|
|
|
|
describe('Integration: Component: gh-file-uploader', function() {
|
|
setupComponentTest('gh-file-uploader', {
|
|
integration: true
|
|
});
|
|
|
|
let server;
|
|
|
|
beforeEach(function () {
|
|
server = new Pretender();
|
|
this.set('uploadUrl', '/ghost/api/v0.1/uploads/');
|
|
|
|
this.register('service:notifications', notificationsStub);
|
|
this.inject.service('notifications', {as: 'notifications'});
|
|
});
|
|
|
|
afterEach(function () {
|
|
server.shutdown();
|
|
});
|
|
|
|
it('renders', function() {
|
|
this.render(hbs`{{gh-file-uploader}}`);
|
|
|
|
expect(this.$('label').text().trim(), 'default label')
|
|
.to.equal('Select or drag-and-drop a file');
|
|
});
|
|
|
|
it('allows file input "accept" attribute to be changed', function () {
|
|
this.render(hbs`{{gh-file-uploader}}`);
|
|
expect(
|
|
this.$('input[type="file"]').attr('accept'),
|
|
'default "accept" attribute'
|
|
).to.equal('text/csv');
|
|
|
|
this.render(hbs`{{gh-file-uploader accept="application/zip"}}`);
|
|
expect(
|
|
this.$('input[type="file"]').attr('accept'),
|
|
'specified "accept" attribute'
|
|
).to.equal('application/zip');
|
|
});
|
|
|
|
it('renders form with supplied label text', function () {
|
|
this.set('labelText', 'My label');
|
|
this.render(hbs`{{gh-file-uploader labelText=labelText}}`);
|
|
|
|
expect(this.$('label').text().trim(), 'label')
|
|
.to.equal('My label');
|
|
});
|
|
|
|
it('generates request to supplied endpoint', function (done) {
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(server.handledRequests.length).to.equal(1);
|
|
expect(server.handledRequests[0].url).to.equal('/ghost/api/v0.1/uploads/');
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('fires uploadSuccess action on successful upload', function (done) {
|
|
let uploadSuccess = sinon.spy();
|
|
this.set('uploadSuccess', uploadSuccess);
|
|
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl uploadSuccess=(action uploadSuccess)}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(uploadSuccess.calledOnce).to.be.true;
|
|
expect(uploadSuccess.firstCall.args[0]).to.equal('/content/images/test.png');
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('doesn\'t fire uploadSuccess action on failed upload', function (done) {
|
|
let uploadSuccess = sinon.spy();
|
|
this.set('uploadSuccess', uploadSuccess);
|
|
|
|
stubFailedUpload(server, 500);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl uploadSuccess=(action uploadSuccess)}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(uploadSuccess.calledOnce).to.be.false;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('fires fileSelected action on file selection', function (done) {
|
|
let fileSelected = sinon.spy();
|
|
this.set('fileSelected', fileSelected);
|
|
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl fileSelected=(action fileSelected)}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(fileSelected.calledOnce).to.be.true;
|
|
expect(fileSelected.args[0]).to.not.be.blank;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('fires uploadStarted action on upload start', function (done) {
|
|
let uploadStarted = sinon.spy();
|
|
this.set('uploadStarted', uploadStarted);
|
|
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl uploadStarted=(action uploadStarted)}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(uploadStarted.calledOnce).to.be.true;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('fires uploadFinished action on successful upload', function (done) {
|
|
let uploadFinished = sinon.spy();
|
|
this.set('uploadFinished', uploadFinished);
|
|
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl uploadFinished=(action uploadFinished)}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(uploadFinished.calledOnce).to.be.true;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('fires uploadFinished action on failed upload', function (done) {
|
|
let uploadFinished = sinon.spy();
|
|
this.set('uploadFinished', uploadFinished);
|
|
|
|
stubFailedUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl uploadFinished=(action uploadFinished)}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(uploadFinished.calledOnce).to.be.true;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('displays invalid file type error', function (done) {
|
|
stubFailedUpload(server, 415, 'UnsupportedMediaTypeError');
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(this.$('.failed').length, 'error message is displayed').to.equal(1);
|
|
expect(this.$('.failed').text()).to.match(/The file type you uploaded is not supported/);
|
|
expect(this.$('.gh-btn-green').length, 'reset button is displayed').to.equal(1);
|
|
expect(this.$('.gh-btn-green').text()).to.equal('Try Again');
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('displays file too large for server error', function (done) {
|
|
stubFailedUpload(server, 413, 'RequestEntityTooLargeError');
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(this.$('.failed').length, 'error message is displayed').to.equal(1);
|
|
expect(this.$('.failed').text()).to.match(/The file you uploaded was larger/);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('handles file too large error directly from the web server', function (done) {
|
|
server.post('/ghost/api/v0.1/uploads/', function () {
|
|
return [413, {}, ''];
|
|
});
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(this.$('.failed').length, 'error message is displayed').to.equal(1);
|
|
expect(this.$('.failed').text()).to.match(/The file you uploaded was larger/);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('displays other server-side error with message', function (done) {
|
|
stubFailedUpload(server, 400, 'UnknownError');
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(this.$('.failed').length, 'error message is displayed').to.equal(1);
|
|
expect(this.$('.failed').text()).to.match(/Error: UnknownError/);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('handles unknown failure', function (done) {
|
|
server.post('/ghost/api/v0.1/uploads/', function () {
|
|
return [500, {'Content-Type': 'application/json'}, ''];
|
|
});
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(this.$('.failed').length, 'error message is displayed').to.equal(1);
|
|
expect(this.$('.failed').text()).to.match(/Something went wrong/);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('triggers notifications.showAPIError for VersionMismatchError', function (done) {
|
|
let showAPIError = sinon.spy();
|
|
this.set('notifications.showAPIError', showAPIError);
|
|
|
|
stubFailedUpload(server, 400, 'VersionMismatchError');
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(showAPIError.calledOnce).to.be.true;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('doesn\'t trigger notifications.showAPIError for other errors', function (done) {
|
|
let showAPIError = sinon.spy();
|
|
this.set('notifications.showAPIError', showAPIError);
|
|
|
|
stubFailedUpload(server, 400, 'UnknownError');
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(showAPIError.called).to.be.false;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('can be reset after a failed upload', function (done) {
|
|
stubFailedUpload(server, 400, 'UnknownError');
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
run(() => {
|
|
this.$('.gh-btn-green').click();
|
|
});
|
|
});
|
|
|
|
wait().then(() => {
|
|
expect(this.$('input[type="file"]').length).to.equal(1);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('displays upload progress', function (done) {
|
|
this.set('done', done);
|
|
|
|
// pretender fires a progress event every 50ms
|
|
stubSuccessfulUpload(server, 150);
|
|
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl uploadFinished=(action done)}}`);
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
// after 75ms we should have had one progress event
|
|
run.later(this, function () {
|
|
expect(this.$('.progress .bar').length).to.equal(1);
|
|
let [, percentageWidth] = this.$('.progress .bar').attr('style').match(/width: (\d+)%?/);
|
|
expect(percentageWidth).to.be.above(0);
|
|
expect(percentageWidth).to.be.below(100);
|
|
}, 75);
|
|
});
|
|
|
|
it('handles drag over/leave', function () {
|
|
this.render(hbs`{{gh-file-uploader}}`);
|
|
|
|
run(() => {
|
|
// eslint-disable-next-line new-cap
|
|
let dragover = $.Event('dragover', {
|
|
dataTransfer: {
|
|
files: []
|
|
}
|
|
});
|
|
this.$('.gh-image-uploader').trigger(dragover);
|
|
});
|
|
|
|
expect(this.$('.gh-image-uploader').hasClass('-drag-over'), 'has drag-over class').to.be.true;
|
|
|
|
run(() => {
|
|
this.$('.gh-image-uploader').trigger('dragleave');
|
|
});
|
|
|
|
expect(this.$('.gh-image-uploader').hasClass('-drag-over'), 'has drag-over class').to.be.false;
|
|
});
|
|
|
|
it('triggers file upload on file drop', function (done) {
|
|
let uploadSuccess = sinon.spy();
|
|
// eslint-disable-next-line new-cap
|
|
let drop = $.Event('drop', {
|
|
dataTransfer: {
|
|
files: [createFile(['test'], {name: 'test.csv'})]
|
|
}
|
|
});
|
|
|
|
this.set('uploadSuccess', uploadSuccess);
|
|
|
|
stubSuccessfulUpload(server);
|
|
this.render(hbs`{{gh-file-uploader url=uploadUrl uploadSuccess=(action uploadSuccess)}}`);
|
|
|
|
run(() => {
|
|
this.$('.gh-image-uploader').trigger(drop);
|
|
});
|
|
|
|
wait().then(() => {
|
|
expect(uploadSuccess.calledOnce).to.be.true;
|
|
expect(uploadSuccess.firstCall.args[0]).to.equal('/content/images/test.png');
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('validates extension by default', function (done) {
|
|
let uploadSuccess = sinon.spy();
|
|
let uploadFailed = sinon.spy();
|
|
|
|
this.set('uploadSuccess', uploadSuccess);
|
|
this.set('uploadFailed', uploadFailed);
|
|
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader
|
|
url=uploadUrl
|
|
uploadSuccess=(action uploadSuccess)
|
|
uploadFailed=(action uploadFailed)}}`);
|
|
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.txt'});
|
|
|
|
wait().then(() => {
|
|
expect(uploadSuccess.called).to.be.false;
|
|
expect(uploadFailed.calledOnce).to.be.true;
|
|
expect(this.$('.failed').length, 'error message is displayed').to.equal(1);
|
|
expect(this.$('.failed').text()).to.match(/The file type you uploaded is not supported/);
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('uploads if validate action supplied and returns true', function (done) {
|
|
let validate = sinon.stub().returns(true);
|
|
let uploadSuccess = sinon.spy();
|
|
|
|
this.set('validate', validate);
|
|
this.set('uploadSuccess', uploadSuccess);
|
|
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader
|
|
url=uploadUrl
|
|
uploadSuccess=(action uploadSuccess)
|
|
validate=(action validate)}}`);
|
|
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(validate.calledOnce).to.be.true;
|
|
expect(uploadSuccess.calledOnce).to.be.true;
|
|
done();
|
|
});
|
|
});
|
|
|
|
it('skips upload and displays error if validate action supplied and doesn\'t return true', function (done) {
|
|
let validate = sinon.stub().returns(new UnsupportedMediaTypeError());
|
|
let uploadSuccess = sinon.spy();
|
|
let uploadFailed = sinon.spy();
|
|
|
|
this.set('validate', validate);
|
|
this.set('uploadSuccess', uploadSuccess);
|
|
this.set('uploadFailed', uploadFailed);
|
|
|
|
stubSuccessfulUpload(server);
|
|
|
|
this.render(hbs`{{gh-file-uploader
|
|
url=uploadUrl
|
|
uploadSuccess=(action uploadSuccess)
|
|
uploadFailed=(action uploadFailed)
|
|
validate=(action validate)}}`);
|
|
|
|
fileUpload(this.$('input[type="file"]'), ['test'], {name: 'test.csv'});
|
|
|
|
wait().then(() => {
|
|
expect(validate.calledOnce).to.be.true;
|
|
expect(uploadSuccess.called).to.be.false;
|
|
expect(uploadFailed.calledOnce).to.be.true;
|
|
expect(this.$('.failed').length, 'error message is displayed').to.equal(1);
|
|
expect(this.$('.failed').text()).to.match(/The file type you uploaded is not supported/);
|
|
done();
|
|
});
|
|
});
|
|
});
|