2018-02-01 00:55:43 +00:00
|
|
|
import hbs from 'htmlbars-inline-precompile';
|
2019-07-23 19:40:32 +00:00
|
|
|
import { find, click, render } from '@ember/test-helpers';
|
2019-03-13 00:04:16 +00:00
|
|
|
import { module, test } from 'qunit';
|
|
|
|
import { setupRenderingTest } from 'ember-qunit';
|
2018-02-01 00:55:43 +00:00
|
|
|
import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage';
|
|
|
|
import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer';
|
2020-08-25 15:56:02 +00:00
|
|
|
import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit';
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-03-13 00:04:16 +00:00
|
|
|
module('Integration | Component | job-page/parts/summary', function(hooks) {
|
|
|
|
setupRenderingTest(hooks);
|
|
|
|
|
|
|
|
hooks.beforeEach(function() {
|
|
|
|
fragmentSerializerInitializer(this.owner);
|
2018-02-01 00:55:43 +00:00
|
|
|
window.localStorage.clear();
|
2019-03-13 00:04:16 +00:00
|
|
|
this.store = this.owner.lookup('service:store');
|
2018-02-01 00:55:43 +00:00
|
|
|
this.server = startMirage();
|
|
|
|
this.server.create('namespace');
|
2019-03-13 00:04:16 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
hooks.afterEach(function() {
|
2018-02-02 17:51:44 +00:00
|
|
|
this.server.shutdown();
|
|
|
|
window.localStorage.clear();
|
2018-02-01 00:55:43 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('jobs with children use the children diagram', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', 'periodic', {
|
|
|
|
createAllocations: false,
|
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
this.set('job', this.store.peekAll('job').get('firstObject'));
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
assert.ok(find('[data-test-children-status-bar]'), 'Children status bar found');
|
|
|
|
assert.notOk(find('[data-test-allocation-status-bar]'), 'Allocation status bar not found');
|
2020-08-25 15:56:02 +00:00
|
|
|
|
|
|
|
await componentA11yAudit(this.element, assert);
|
2018-02-01 00:55:43 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('jobs without children use the allocations diagram', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', {
|
|
|
|
createAllocations: false,
|
|
|
|
});
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
this.set('job', this.store.peekAll('job').get('firstObject'));
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
2018-02-01 00:55:43 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation status bar found');
|
|
|
|
assert.notOk(find('[data-test-children-status-bar]'), 'Children status bar not found');
|
2020-08-25 15:56:02 +00:00
|
|
|
|
|
|
|
await componentA11yAudit(this.element, assert);
|
2018-02-01 00:55:43 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('the allocations diagram lists all allocation status figures', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', {
|
|
|
|
createAllocations: false,
|
2018-02-01 00:55:43 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
|
|
|
|
|
|
|
this.set('job', this.store.peekAll('job').get('firstObject'));
|
|
|
|
|
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="queued"]').textContent,
|
|
|
|
this.get('job.queuedAllocs'),
|
|
|
|
`${this.get('job.queuedAllocs')} are queued`
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="starting"]').textContent,
|
|
|
|
this.get('job.startingAllocs'),
|
|
|
|
`${this.get('job.startingAllocs')} are starting`
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="running"]').textContent,
|
|
|
|
this.get('job.runningAllocs'),
|
|
|
|
`${this.get('job.runningAllocs')} are running`
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="complete"]').textContent,
|
|
|
|
this.get('job.completeAllocs'),
|
|
|
|
`${this.get('job.completeAllocs')} are complete`
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="failed"]').textContent,
|
|
|
|
this.get('job.failedAllocs'),
|
|
|
|
`${this.get('job.failedAllocs')} are failed`
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="lost"]').textContent,
|
|
|
|
this.get('job.lostAllocs'),
|
|
|
|
`${this.get('job.lostAllocs')} are lost`
|
|
|
|
);
|
2018-02-01 00:55:43 +00:00
|
|
|
});
|
2018-07-12 19:39:40 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('the children diagram lists all children status figures', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', 'periodic', {
|
|
|
|
createAllocations: false,
|
|
|
|
});
|
2018-07-12 19:39:40 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
|
|
|
|
|
|
|
this.set('job', this.store.peekAll('job').get('firstObject'));
|
|
|
|
|
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="queued"]').textContent,
|
|
|
|
this.get('job.pendingChildren'),
|
|
|
|
`${this.get('job.pendingChildren')} are pending`
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="running"]').textContent,
|
|
|
|
this.get('job.runningChildren'),
|
|
|
|
`${this.get('job.runningChildren')} are running`
|
|
|
|
);
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
find('[data-test-legend-value="complete"]').textContent,
|
|
|
|
this.get('job.deadChildren'),
|
|
|
|
`${this.get('job.deadChildren')} are dead`
|
|
|
|
);
|
2018-07-12 19:39:40 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('the summary block can be collapsed', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', {
|
|
|
|
createAllocations: false,
|
2018-07-12 19:39:40 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
|
|
|
|
|
|
|
this.set('job', this.store.peekAll('job').get('firstObject'));
|
|
|
|
|
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
|
|
|
|
|
|
|
await click('[data-test-accordion-toggle]');
|
|
|
|
|
|
|
|
assert.notOk(find('[data-test-accordion-body]'), 'No accordion body');
|
|
|
|
assert.notOk(find('[data-test-legend]'), 'No legend');
|
2018-07-12 19:39:40 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('when collapsed, the summary block includes an inline version of the chart', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', {
|
|
|
|
createAllocations: false,
|
2018-07-12 19:39:40 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
|
|
|
|
|
|
|
await this.set('job', this.store.peekAll('job').get('firstObject'));
|
|
|
|
|
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
|
|
|
|
|
|
|
await click('[data-test-accordion-toggle]');
|
|
|
|
|
|
|
|
assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed');
|
|
|
|
assert.ok(
|
|
|
|
find('.inline-chart [data-test-allocation-status-bar]'),
|
|
|
|
'Allocation bar is rendered in an inline-chart container'
|
|
|
|
);
|
2020-08-25 15:56:02 +00:00
|
|
|
|
|
|
|
await componentA11yAudit(this.element, assert);
|
2018-07-12 19:39:40 +00:00
|
|
|
});
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('the collapsed/expanded state is persisted to localStorage', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', {
|
|
|
|
createAllocations: false,
|
|
|
|
});
|
2018-07-12 19:39:40 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
|
|
|
|
|
|
|
this.set('job', this.store.peekAll('job').get('firstObject'));
|
|
|
|
|
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
|
|
|
|
|
|
|
assert.notOk(window.localStorage.nomadExpandJobSummary, 'No value in localStorage yet');
|
|
|
|
await click('[data-test-accordion-toggle]');
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
window.localStorage.nomadExpandJobSummary,
|
|
|
|
'false',
|
|
|
|
'Value is stored for the collapsed state'
|
|
|
|
);
|
2019-03-13 00:04:16 +00:00
|
|
|
});
|
2018-07-12 19:39:40 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
test('the collapsed/expanded state from localStorage is used for the initial state when available', async function(assert) {
|
2019-03-13 00:04:16 +00:00
|
|
|
this.server.create('job', {
|
|
|
|
createAllocations: false,
|
2018-07-12 19:39:40 +00:00
|
|
|
});
|
2019-03-13 00:04:16 +00:00
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
await this.store.findAll('job');
|
2019-03-13 00:04:16 +00:00
|
|
|
|
|
|
|
window.localStorage.nomadExpandJobSummary = 'false';
|
|
|
|
|
2019-07-23 19:40:32 +00:00
|
|
|
this.set('job', this.store.peekAll('job').get('firstObject'));
|
|
|
|
|
|
|
|
await render(hbs`
|
2020-07-09 17:30:11 +00:00
|
|
|
<JobPage::Parts::Summary @job={{job}} />
|
2019-07-23 19:40:32 +00:00
|
|
|
`);
|
|
|
|
|
|
|
|
assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed');
|
|
|
|
assert.ok(
|
|
|
|
find('.inline-chart [data-test-allocation-status-bar]'),
|
|
|
|
'Allocation bar is rendered in an inline-chart container'
|
|
|
|
);
|
|
|
|
|
|
|
|
await click('[data-test-accordion-toggle]');
|
|
|
|
|
|
|
|
assert.equal(
|
|
|
|
window.localStorage.nomadExpandJobSummary,
|
|
|
|
'true',
|
|
|
|
'localStorage value still toggles'
|
|
|
|
);
|
|
|
|
assert.ok(find('[data-test-accordion-body]'), 'Summary still expands');
|
2019-03-13 00:04:16 +00:00
|
|
|
});
|
2018-07-12 19:39:40 +00:00
|
|
|
});
|