2016-08-11 09:58:38 +03:00
|
|
|
import hbs from 'htmlbars-inline-precompile';
|
2019-03-14 20:26:22 +03:00
|
|
|
import {click, find, render, settled, waitFor} from '@ember/test-helpers';
|
2019-03-05 21:13:47 +03:00
|
|
|
import {defineProperty} from '@ember/object';
|
2017-05-29 21:50:03 +03:00
|
|
|
import {describe, it} from 'mocha';
|
|
|
|
import {expect} from 'chai';
|
2017-08-22 10:53:26 +03:00
|
|
|
import {run} from '@ember/runloop';
|
2019-01-02 12:58:55 +03:00
|
|
|
import {setupRenderingTest} from 'ember-mocha';
|
2017-05-29 21:50:03 +03:00
|
|
|
import {task, timeout} from 'ember-concurrency';
|
2016-08-11 09:58:38 +03:00
|
|
|
|
2018-01-05 18:38:23 +03:00
|
|
|
describe('Integration: Component: gh-task-button', function () {
|
2019-01-02 12:58:55 +03:00
|
|
|
setupRenderingTest();
|
2016-08-11 09:58:38 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('renders', async function () {
|
2017-03-07 20:28:52 +03:00
|
|
|
// sets button text using positional param
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button "Test"}}`);
|
|
|
|
expect(find('button')).to.exist;
|
|
|
|
expect(find('button')).to.contain.text('Test');
|
|
|
|
expect(find('button').disabled).to.be.false;
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button class="testing"}}`);
|
|
|
|
expect(find('button')).to.have.class('testing');
|
2017-03-07 20:28:52 +03:00
|
|
|
// default button text is "Save"
|
2019-01-02 12:58:55 +03:00
|
|
|
expect(find('button')).to.contain.text('Save');
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2017-03-07 20:28:52 +03:00
|
|
|
// passes disabled attr
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button disabled=true buttonText="Test"}}`);
|
|
|
|
expect(find('button').disabled).to.be.true;
|
2017-03-07 20:28:52 +03:00
|
|
|
// allows button text to be set via hash param
|
2019-01-02 12:58:55 +03:00
|
|
|
expect(find('button')).to.contain.text('Test');
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2017-03-07 20:28:52 +03:00
|
|
|
// passes type attr
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button type="submit"}}`);
|
|
|
|
expect(find('button')).to.have.attr('type', 'submit');
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2017-03-07 20:28:52 +03:00
|
|
|
// passes tabindex attr
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button tabindex="-1"}}`);
|
|
|
|
expect(find('button')).to.have.attr('tabindex', '-1');
|
2017-01-19 14:20:33 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('shows spinner whilst running', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-01-19 14:20:33 +03:00
|
|
|
yield timeout(50);
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask}}`);
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
this.myTask.perform();
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
await waitFor('button svg', {timeout: 50});
|
2019-01-02 12:58:55 +03:00
|
|
|
await settled();
|
2017-01-19 14:20:33 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('shows running text when passed whilst running', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-07-20 13:46:31 +03:00
|
|
|
yield timeout(50);
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask runningText="Running"}}`);
|
2017-07-20 13:46:31 +03:00
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
this.myTask.perform();
|
2017-07-20 13:46:31 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
await waitFor('button svg', {timeout: 50});
|
|
|
|
expect(find('button')).to.contain.text('Running');
|
2017-07-20 13:46:31 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await settled();
|
2017-07-20 13:46:31 +03:00
|
|
|
});
|
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
it('appears disabled whilst running', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-01-19 14:20:33 +03:00
|
|
|
yield timeout(50);
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask}}`);
|
|
|
|
expect(find('button'), 'initial class').to.not.have.class('appear-disabled');
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
this.myTask.perform();
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-04-30 18:29:28 +03:00
|
|
|
await waitFor('button.appear-disabled', {timeout: 100});
|
2019-01-02 12:58:55 +03:00
|
|
|
await settled();
|
2019-03-14 20:26:22 +03:00
|
|
|
|
|
|
|
expect(find('button'), 'ended class').to.not.have.class('appear-disabled');
|
2017-01-19 14:20:33 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('shows success on success', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-03-07 20:28:52 +03:00
|
|
|
yield timeout(50);
|
|
|
|
return true;
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask}}`);
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
await this.myTask.perform();
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
expect(find('button')).to.have.class('gh-btn-green');
|
|
|
|
expect(find('button')).to.contain.text('Saved');
|
2017-03-07 20:28:52 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('assigns specified success class on success', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-03-10 00:48:54 +03:00
|
|
|
yield timeout(50);
|
|
|
|
return true;
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask successClass="im-a-success"}}`);
|
2017-03-10 00:48:54 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
await this.myTask.perform();
|
2017-03-10 00:48:54 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
expect(find('button')).to.not.have.class('gh-btn-green');
|
|
|
|
expect(find('button')).to.have.class('im-a-success');
|
|
|
|
expect(find('button')).to.contain.text('Saved');
|
2017-03-10 00:48:54 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('shows failure when task errors', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-03-07 20:28:52 +03:00
|
|
|
try {
|
|
|
|
yield timeout(50);
|
|
|
|
throw new ReferenceError('test error');
|
|
|
|
} catch (error) {
|
|
|
|
// noop, prevent mocha triggering unhandled error assert
|
|
|
|
}
|
|
|
|
}));
|
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask failureClass="is-failed"}}`);
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
this.myTask.perform();
|
2019-03-14 20:26:22 +03:00
|
|
|
await waitFor('button.is-failed');
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
expect(find('button')).to.contain.text('Retry');
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await settled();
|
2017-03-07 20:28:52 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('shows failure on falsy response', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-03-07 20:28:52 +03:00
|
|
|
yield timeout(50);
|
|
|
|
return false;
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask}}`);
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
this.myTask.perform();
|
2019-03-14 20:26:22 +03:00
|
|
|
await waitFor('button.gh-btn-red', {timeout: 50});
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
expect(find('button')).to.contain.text('Retry');
|
2017-03-07 20:28:52 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await settled();
|
2017-03-07 20:28:52 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('assigns specified failure class on failure', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-03-10 00:48:54 +03:00
|
|
|
yield timeout(50);
|
|
|
|
return false;
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask failureClass="im-a-failure"}}`);
|
2017-03-10 00:48:54 +03:00
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
this.myTask.perform();
|
2017-03-10 00:48:54 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
await waitFor('button.im-a-failure', {timeout: 50});
|
|
|
|
|
|
|
|
expect(find('button')).to.not.have.class('gh-btn-red');
|
|
|
|
expect(find('button')).to.contain.text('Retry');
|
2017-03-10 00:48:54 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await settled();
|
2017-03-10 00:48:54 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it('performs task on click', async function () {
|
2017-01-19 14:20:33 +03:00
|
|
|
let taskCount = 0;
|
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-01-19 14:20:33 +03:00
|
|
|
yield timeout(50);
|
|
|
|
taskCount = taskCount + 1;
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask}}`);
|
|
|
|
await click('button');
|
2019-03-14 20:26:22 +03:00
|
|
|
await settled();
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-03-14 20:26:22 +03:00
|
|
|
expect(taskCount, 'taskCount').to.equal(1);
|
2016-11-24 01:50:57 +03:00
|
|
|
});
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
it.skip('keeps button size when showing spinner', async function () {
|
2019-03-05 21:13:47 +03:00
|
|
|
defineProperty(this, 'myTask', task(function* () {
|
2017-01-19 14:20:33 +03:00
|
|
|
yield timeout(50);
|
|
|
|
}));
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await render(hbs`{{gh-task-button task=myTask}}`);
|
|
|
|
let width = find('button').clientWidth;
|
|
|
|
let height = find('button').clientHeight;
|
|
|
|
expect(find('button')).to.not.have.attr('style');
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-03-05 21:13:47 +03:00
|
|
|
this.myTask.perform();
|
2017-01-19 14:20:33 +03:00
|
|
|
|
|
|
|
run.later(this, function () {
|
|
|
|
// we can't test exact width/height because Chrome/Firefox use different rounding methods
|
2019-01-02 12:58:55 +03:00
|
|
|
// expect(find('button')).to.have.attr('style', `width: ${width}px; height: ${height}px;`);
|
2017-01-19 14:20:33 +03:00
|
|
|
|
|
|
|
let [widthInt] = width.toString().split('.');
|
|
|
|
let [heightInt] = height.toString().split('.');
|
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
expect(find('button')).to.have.attr('style', `width: ${widthInt}`);
|
|
|
|
expect(find('button')).to.have.attr('style', `height: ${heightInt}`);
|
2017-01-19 14:20:33 +03:00
|
|
|
}, 20);
|
|
|
|
|
|
|
|
run.later(this, function () {
|
2019-01-02 12:58:55 +03:00
|
|
|
expect(find('button').getAttribute('style')).to.be.empty;
|
2017-03-13 12:01:27 +03:00
|
|
|
}, 100);
|
2017-01-19 14:20:33 +03:00
|
|
|
|
2019-01-02 12:58:55 +03:00
|
|
|
await settled();
|
2017-01-19 14:20:33 +03:00
|
|
|
});
|
2016-11-24 01:50:57 +03:00
|
|
|
});
|