github.com/anth0d/nomad@v0.0.0-20221214183521-ae3a0a2cad06/ui/tests/integration/components/lifecycle-chart-test.js (about) 1 /* eslint-disable qunit/no-conditional-assertions */ 2 import { module, test } from 'qunit'; 3 import { setupRenderingTest } from 'ember-qunit'; 4 import { render, settled } from '@ember/test-helpers'; 5 import hbs from 'htmlbars-inline-precompile'; 6 import { set } from '@ember/object'; 7 import { componentA11yAudit } from 'nomad-ui/tests/helpers/a11y-audit'; 8 import { create } from 'ember-cli-page-object'; 9 import LifecycleChart from 'nomad-ui/tests/pages/components/lifecycle-chart'; 10 11 const Chart = create(LifecycleChart); 12 13 const tasks = [ 14 { 15 lifecycleName: 'main', 16 name: 'main two: 3', 17 }, 18 { 19 lifecycleName: 'main', 20 name: 'main one: 2', 21 }, 22 { 23 lifecycleName: 'prestart-ephemeral', 24 name: 'prestart ephemeral: 0', 25 }, 26 { 27 lifecycleName: 'prestart-sidecar', 28 name: 'prestart sidecar: 1', 29 }, 30 { 31 lifecycleName: 'poststart-ephemeral', 32 name: 'poststart ephemeral: 5', 33 }, 34 { 35 lifecycleName: 'poststart-sidecar', 36 name: 'poststart sidecar: 4', 37 }, 38 { 39 lifecycleName: 'poststop', 40 name: 'poststop: 6', 41 }, 42 ]; 43 44 module('Integration | Component | lifecycle-chart', function (hooks) { 45 setupRenderingTest(hooks); 46 47 test('it renders stateless phases and lifecycle- and name-sorted tasks', async function (assert) { 48 assert.expect(32); 49 50 this.set('tasks', tasks); 51 52 await render(hbs`<LifecycleChart @tasks={{tasks}} />`); 53 assert.ok(Chart.isPresent); 54 55 assert.equal(Chart.phases[0].name, 'Prestart'); 56 assert.equal(Chart.phases[1].name, 'Main'); 57 assert.equal(Chart.phases[2].name, 'Poststart'); 58 assert.equal(Chart.phases[3].name, 'Poststop'); 59 60 Chart.phases.forEach((phase) => assert.notOk(phase.isActive)); 61 62 assert.deepEqual(Chart.tasks.mapBy('name'), [ 63 'prestart ephemeral: 0', 64 'prestart sidecar: 1', 65 'main one: 2', 66 'main two: 3', 67 'poststart sidecar: 4', 68 'poststart ephemeral: 5', 69 'poststop: 6', 70 ]); 71 assert.deepEqual(Chart.tasks.mapBy('lifecycle'), [ 72 'Prestart Task', 73 'Sidecar Task', 74 'Main Task', 75 'Main Task', 76 'Sidecar Task', 77 'Poststart Task', 78 'Poststop Task', 79 ]); 80 81 assert.ok(Chart.tasks[0].isPrestartEphemeral); 82 assert.ok(Chart.tasks[1].isPrestartSidecar); 83 assert.ok(Chart.tasks[2].isMain); 84 assert.ok(Chart.tasks[4].isPoststartSidecar); 85 assert.ok(Chart.tasks[5].isPoststartEphemeral); 86 assert.ok(Chart.tasks[6].isPoststop); 87 88 Chart.tasks.forEach((task) => { 89 assert.notOk(task.isActive); 90 assert.notOk(task.isFinished); 91 }); 92 93 await componentA11yAudit(this.element, assert); 94 }); 95 96 test('it doesn’t render when there’s only one phase', async function (assert) { 97 this.set('tasks', [ 98 { 99 lifecycleName: 'main', 100 }, 101 ]); 102 103 await render(hbs`<LifecycleChart @tasks={{tasks}} />`); 104 assert.notOk(Chart.isPresent); 105 }); 106 107 test('it renders all phases when there are any non-main tasks', async function (assert) { 108 this.set('tasks', [tasks[0], tasks[6]]); 109 110 await render(hbs`<LifecycleChart @tasks={{tasks}} />`); 111 assert.equal(Chart.phases.length, 4); 112 }); 113 114 test('it reflects phase and task states when states are passed in', async function (assert) { 115 assert.expect(24); 116 117 this.set( 118 'taskStates', 119 tasks.map((task) => { 120 return { task }; 121 }) 122 ); 123 124 await render(hbs`<LifecycleChart @taskStates={{taskStates}} />`); 125 assert.ok(Chart.isPresent); 126 127 Chart.phases.forEach((phase) => assert.notOk(phase.isActive)); 128 129 Chart.tasks.forEach((task) => { 130 assert.notOk(task.isActive); 131 assert.notOk(task.isFinished); 132 }); 133 134 // Change poststart-ephemeral to be running 135 this.set('taskStates.4.state', 'running'); 136 await settled(); 137 138 await componentA11yAudit(this.element, assert); 139 140 assert.ok(Chart.tasks[5].isActive); 141 142 assert.ok(Chart.phases[1].isActive); 143 assert.notOk( 144 Chart.phases[2].isActive, 145 'the poststart phase is nested within main and should never have the active class' 146 ); 147 148 this.set('taskStates.4.finishedAt', new Date()); 149 this.set('taskStates.4.state', 'dead'); 150 await settled(); 151 152 assert.ok(Chart.tasks[5].isFinished); 153 }); 154 155 [ 156 { 157 testName: 'expected active phases', 158 runningTaskNames: ['prestart ephemeral', 'main one', 'poststop'], 159 activePhaseNames: ['Prestart', 'Main', 'Poststop'], 160 }, 161 { 162 testName: 'sidecar task states don’t affect phase active states', 163 runningTaskNames: ['prestart sidecar', 'poststart sidecar'], 164 activePhaseNames: [], 165 }, 166 { 167 testName: 168 'poststart ephemeral task states affect main phase active state', 169 runningTaskNames: ['poststart ephemeral'], 170 activePhaseNames: ['Main'], 171 }, 172 ].forEach(async ({ testName, runningTaskNames, activePhaseNames }) => { 173 test(testName, async function (assert) { 174 assert.expect(4); 175 176 this.set( 177 'taskStates', 178 tasks.map((task) => ({ task })) 179 ); 180 181 await render(hbs`<LifecycleChart @taskStates={{taskStates}} />`); 182 183 runningTaskNames.forEach((taskName) => { 184 const taskState = this.taskStates.find((taskState) => 185 taskState.task.name.includes(taskName) 186 ); 187 set(taskState, 'state', 'running'); 188 }); 189 190 await settled(); 191 192 Chart.phases.forEach((Phase) => { 193 if (activePhaseNames.includes(Phase.name)) { 194 assert.ok(Phase.isActive, `expected ${Phase.name} not to be active`); 195 } else { 196 assert.notOk( 197 Phase.isActive, 198 `expected ${Phase.name} phase not to be active` 199 ); 200 } 201 }); 202 }); 203 }); 204 });