github.com/Ilhicas/nomad@v1.0.4-0.20210304152020-e86851182bc3/ui/tests/integration/components/job-page/parts/summary-test.js (about) 1 import hbs from 'htmlbars-inline-precompile'; 2 import { find, click, render } from '@ember/test-helpers'; 3 import { module, test } from 'qunit'; 4 import { setupRenderingTest } from 'ember-qunit'; 5 import { startMirage } from 'nomad-ui/initializers/ember-cli-mirage'; 6 import { initialize as fragmentSerializerInitializer } from 'nomad-ui/initializers/fragment-serializer'; 7 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 8 9 module('Integration | Component | job-page/parts/summary', function(hooks) { 10 setupRenderingTest(hooks); 11 12 hooks.beforeEach(function() { 13 fragmentSerializerInitializer(this.owner); 14 window.localStorage.clear(); 15 this.store = this.owner.lookup('service:store'); 16 this.server = startMirage(); 17 this.server.create('namespace'); 18 }); 19 20 hooks.afterEach(function() { 21 this.server.shutdown(); 22 window.localStorage.clear(); 23 }); 24 25 test('jobs with children use the children diagram', async function(assert) { 26 this.server.create('job', 'periodic', { 27 createAllocations: false, 28 }); 29 30 await this.store.findAll('job'); 31 32 this.set('job', this.store.peekAll('job').get('firstObject')); 33 34 await render(hbs` 35 <JobPage::Parts::Summary @job={{job}} /> 36 `); 37 38 assert.ok(find('[data-test-children-status-bar]'), 'Children status bar found'); 39 assert.notOk(find('[data-test-allocation-status-bar]'), 'Allocation status bar not found'); 40 41 await componentA11yAudit(this.element, assert); 42 }); 43 44 test('jobs without children use the allocations diagram', async function(assert) { 45 this.server.create('job', { 46 createAllocations: false, 47 }); 48 49 await this.store.findAll('job'); 50 51 this.set('job', this.store.peekAll('job').get('firstObject')); 52 53 await render(hbs` 54 <JobPage::Parts::Summary @job={{job}} /> 55 `); 56 57 assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation status bar found'); 58 assert.notOk(find('[data-test-children-status-bar]'), 'Children status bar not found'); 59 60 await componentA11yAudit(this.element, assert); 61 }); 62 63 test('the allocations diagram lists all allocation status figures', async function(assert) { 64 this.server.create('job', { 65 createAllocations: false, 66 }); 67 68 await this.store.findAll('job'); 69 70 this.set('job', this.store.peekAll('job').get('firstObject')); 71 72 await render(hbs` 73 <JobPage::Parts::Summary @job={{job}} /> 74 `); 75 76 assert.equal( 77 find('[data-test-legend-value="queued"]').textContent, 78 this.get('job.queuedAllocs'), 79 `${this.get('job.queuedAllocs')} are queued` 80 ); 81 82 assert.equal( 83 find('[data-test-legend-value="starting"]').textContent, 84 this.get('job.startingAllocs'), 85 `${this.get('job.startingAllocs')} are starting` 86 ); 87 88 assert.equal( 89 find('[data-test-legend-value="running"]').textContent, 90 this.get('job.runningAllocs'), 91 `${this.get('job.runningAllocs')} are running` 92 ); 93 94 assert.equal( 95 find('[data-test-legend-value="complete"]').textContent, 96 this.get('job.completeAllocs'), 97 `${this.get('job.completeAllocs')} are complete` 98 ); 99 100 assert.equal( 101 find('[data-test-legend-value="failed"]').textContent, 102 this.get('job.failedAllocs'), 103 `${this.get('job.failedAllocs')} are failed` 104 ); 105 106 assert.equal( 107 find('[data-test-legend-value="lost"]').textContent, 108 this.get('job.lostAllocs'), 109 `${this.get('job.lostAllocs')} are lost` 110 ); 111 }); 112 113 test('the children diagram lists all children status figures', async function(assert) { 114 this.server.create('job', 'periodic', { 115 createAllocations: false, 116 }); 117 118 await this.store.findAll('job'); 119 120 this.set('job', this.store.peekAll('job').get('firstObject')); 121 122 await render(hbs` 123 <JobPage::Parts::Summary @job={{job}} /> 124 `); 125 126 assert.equal( 127 find('[data-test-legend-value="queued"]').textContent, 128 this.get('job.pendingChildren'), 129 `${this.get('job.pendingChildren')} are pending` 130 ); 131 132 assert.equal( 133 find('[data-test-legend-value="running"]').textContent, 134 this.get('job.runningChildren'), 135 `${this.get('job.runningChildren')} are running` 136 ); 137 138 assert.equal( 139 find('[data-test-legend-value="complete"]').textContent, 140 this.get('job.deadChildren'), 141 `${this.get('job.deadChildren')} are dead` 142 ); 143 }); 144 145 test('the summary block can be collapsed', async function(assert) { 146 this.server.create('job', { 147 createAllocations: false, 148 }); 149 150 await this.store.findAll('job'); 151 152 this.set('job', this.store.peekAll('job').get('firstObject')); 153 154 await render(hbs` 155 <JobPage::Parts::Summary @job={{job}} /> 156 `); 157 158 await click('[data-test-accordion-toggle]'); 159 160 assert.notOk(find('[data-test-accordion-body]'), 'No accordion body'); 161 assert.notOk(find('[data-test-legend]'), 'No legend'); 162 }); 163 164 test('when collapsed, the summary block includes an inline version of the chart', async function(assert) { 165 this.server.create('job', { 166 createAllocations: false, 167 }); 168 169 await this.store.findAll('job'); 170 171 await this.set('job', this.store.peekAll('job').get('firstObject')); 172 173 await render(hbs` 174 <JobPage::Parts::Summary @job={{job}} /> 175 `); 176 177 await click('[data-test-accordion-toggle]'); 178 179 assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed'); 180 assert.ok( 181 find('.inline-chart [data-test-allocation-status-bar]'), 182 'Allocation bar is rendered in an inline-chart container' 183 ); 184 185 await componentA11yAudit(this.element, assert); 186 }); 187 188 test('the collapsed/expanded state is persisted to localStorage', async function(assert) { 189 this.server.create('job', { 190 createAllocations: false, 191 }); 192 193 await this.store.findAll('job'); 194 195 this.set('job', this.store.peekAll('job').get('firstObject')); 196 197 await render(hbs` 198 <JobPage::Parts::Summary @job={{job}} /> 199 `); 200 201 assert.notOk(window.localStorage.nomadExpandJobSummary, 'No value in localStorage yet'); 202 await click('[data-test-accordion-toggle]'); 203 204 assert.equal( 205 window.localStorage.nomadExpandJobSummary, 206 'false', 207 'Value is stored for the collapsed state' 208 ); 209 }); 210 211 test('the collapsed/expanded state from localStorage is used for the initial state when available', async function(assert) { 212 this.server.create('job', { 213 createAllocations: false, 214 }); 215 216 await this.store.findAll('job'); 217 218 window.localStorage.nomadExpandJobSummary = 'false'; 219 220 this.set('job', this.store.peekAll('job').get('firstObject')); 221 222 await render(hbs` 223 <JobPage::Parts::Summary @job={{job}} /> 224 `); 225 226 assert.ok(find('[data-test-allocation-status-bar]'), 'Allocation bar still existed'); 227 assert.ok( 228 find('.inline-chart [data-test-allocation-status-bar]'), 229 'Allocation bar is rendered in an inline-chart container' 230 ); 231 232 await click('[data-test-accordion-toggle]'); 233 234 assert.equal( 235 window.localStorage.nomadExpandJobSummary, 236 'true', 237 'localStorage value still toggles' 238 ); 239 assert.ok(find('[data-test-accordion-body]'), 'Summary still expands'); 240 }); 241 });