TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-25 19:48:50 +03:00
Code Issues Projects Releases Wiki Activity

Fixed random failures in uploader component tests

Browse Source 
refs https://github.com/TryGhost/Ghost/issues/10308
- removed reliance on `run.later` (`setTimeout`) in tests, instead favouring explicit ember-test-helper methods which wait for DOM changes
This commit is contained in:
Kevin Ansfield 2019-03-18 19:14:24 +00:00
parent 63b8127cfa
commit 68c09fce2d
3 changed files with 32 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
ghost/admin/app/templates/components/gh-progress-bar.hbs
View File

@ -1,5 +1,10 @@
<div class="gh-progress-container">
<div class="gh-progress-container-progress">
<div class="gh-progress-bar {{if isError "-error"}}" style={{progressStyle}} data-test-progress-bar></div>
<div
class="gh-progress-bar {{if isError "-error"}}"
style={{progressStyle}}
data-test-progress-bar
data-test-progress-width={{percentage}}
></div>
</div>
</div>

17
ghost/admin/tests/integration/components/gh-image-uploader-test.js
View File

@ -4,7 +4,7 @@ import Service from '@ember/service';
import hbs from 'htmlbars-inline-precompile';
import sinon from 'sinon';
import {UnsupportedMediaTypeError} from 'ghost-admin/services/ajax';
import {click, find, findAll, render, settled, triggerEvent} from '@ember/test-helpers';
import {click, find, findAll, render, settled, triggerEvent, waitFor, waitUntil} from '@ember/test-helpers';
import {createFile, fileUpload} from '../../helpers/file-upload';
import {describe, it} from 'mocha';
import {expect} from 'chai';
@ -254,14 +254,15 @@ describe('Integration: Component: gh-image-uploader', function () {
await render(hbs`{{gh-image-uploader image=image update=(action update)}}`);
fileUpload('input[type="file"]', ['test'], {name: 'test.png'});
// after 75ms we should have had one progress event
run.later(this, function () {
expect(findAll('.progress .bar').length).to.equal(1);
let [, percentageWidth] = find('.progress .bar').getAttribute('style').match(/width: (\d+)%?/);
await waitFor('.progress .bar');
let progressBar = find('.progress .bar');
await waitUntil(function () {
let [, percentageWidth] = progressBar.getAttribute('style').match(/width: (\d+)%?/);
percentageWidth = Number.parseInt(percentageWidth);
expect(percentageWidth).to.be.above(0);
expect(percentageWidth).to.be.below(100);
}, 75);
return percentageWidth > 0;
}, {timeout: 150});
await settled();
});

45
ghost/admin/tests/integration/components/gh-uploader-test.js
View File

@ -1,7 +1,7 @@
import Pretender from 'pretender';
import hbs from 'htmlbars-inline-precompile';
import sinon from 'sinon';
import {click, find, findAll, render, settled} from '@ember/test-helpers';
import {click, find, findAll, render, settled, waitFor} from '@ember/test-helpers';
import {createFile} from '../../helpers/file-upload';
import {describe, it} from 'mocha';
import {expect} from 'chai';
@ -165,14 +165,12 @@ describe('Integration: Component: gh-uploader', function () {
this.set('files', [createFile()]);
// logs error because upload is in progress
run.later(() => {
this.set('files', [createFile()]);
}, 50);
this.set('files', [createFile()]);
await settled();
// runs ok because original upload has finished
run.later(() => {
this.set('files', [createFile()]);
}, 200);
this.set('files', [createFile()]);
await settled();
@ -182,7 +180,7 @@ describe('Integration: Component: gh-uploader', function () {
});
it('yields isUploading whilst upload is in progress', async function () {
stubSuccessfulUpload(server, 200);
stubSuccessfulUpload(server, 100);
await render(hbs`
{{#gh-uploader files=files as |uploader|}}
@ -193,17 +191,14 @@ describe('Integration: Component: gh-uploader', function () {
this.set('files', [createFile(), createFile()]);
run.later(() => {
expect(find('.is-uploading-test')).to.exist;
}, 100);
await waitFor('.is-uploading-test', {timeout: 100});
await settled();
expect(find('.is-uploading-test')).to.not.exist;
});
it('yields progressBar component with total upload progress', async function () {
stubSuccessfulUpload(server, 200);
stubSuccessfulUpload(server, 100);
await render(hbs`
{{#gh-uploader files=files as |uploader|}}
@ -212,17 +207,12 @@ describe('Integration: Component: gh-uploader', function () {
this.set('files', [createFile(), createFile()]);
run.later(() => {
expect(find('[data-test-progress-bar]')).to.exist;
let progressWidth = parseInt(find('[data-test-progress-bar]').style.width);
expect(progressWidth).to.be.above(0);
expect(progressWidth).to.be.below(100);
}, 100);
await waitFor('[data-test-progress-bar]', {timeout: 100});
await waitFor('[data-test-progress-width^="5"]', {timeout: 100});
await settled();
let progressWidth = parseInt(find('[data-test-progress-bar]').style.width);
expect(progressWidth).to.equal(100);
let finalProgressWidth = parseInt(find('[data-test-progress-bar]').style.width);
expect(finalProgressWidth, 'final progress width').to.equal(100);
});
it('yields files property', async function () {
@ -249,16 +239,15 @@ describe('Integration: Component: gh-uploader', function () {
await render(hbs`
{{#gh-uploader files=files onCancel=(action cancelled) as |uploader|}}
<button class="cancel-button" {{action uploader.cancel}}>Cancel</button>
{{#if uploader.isUploading}}
<button class="cancel-button" {{action uploader.cancel}}>Cancel</button>
{{/if}}
{{/gh-uploader}}`);
this.set('files', [createFile()]);
run.later(() => {
click('.cancel-button');
}, 50);
await settled();
await waitFor('.cancel-button');
await click('.cancel-button');
expect(this.get('cancelled').calledOnce, 'onCancel triggered').to.be.true;
expect(this.get('complete').notCalled, 'onComplete triggered').to.be.true;