diff --git a/ui/tests/acceptance/allocation-detail-test.js b/ui/tests/acceptance/allocation-detail-test.js index 11c2f61d6..ddd17e91b 100644 --- a/ui/tests/acceptance/allocation-detail-test.js +++ b/ui/tests/acceptance/allocation-detail-test.js @@ -1,8 +1,8 @@ -import $ from 'jquery'; import { assign } from '@ember/polyfills'; -import { click, findAll, currentURL, find, visit } from 'ember-native-dom-helpers'; +import { currentURL } from 'ember-native-dom-helpers'; import { test } from 'qunit'; import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance'; +import Allocation from 'nomad-ui/tests/pages/allocations/detail'; import moment from 'moment'; let job; @@ -32,38 +32,31 @@ moduleForAcceptance('Acceptance | allocation detail', { driver: 'docker', }); - visit(`/allocations/${allocation.id}`); + Allocation.visit({ id: allocation.id }); }, }); test('/allocation/:id should name the allocation and link to the corresponding job and node', function(assert) { - assert.ok( - find('[data-test-title]').textContent.includes(allocation.name), - 'Allocation name is in the heading' - ); + assert.ok(Allocation.title.includes(allocation.name), 'Allocation name is in the heading'); + assert.equal(Allocation.details.job, job.name, 'Job name is in the subheading'); assert.equal( - find('[data-test-allocation-details] [data-test-job-link]').textContent.trim(), - job.name, - 'Job name is in the subheading' - ); - assert.equal( - find('[data-test-allocation-details] [data-test-client-link]').textContent.trim(), + Allocation.details.client, node.id.split('-')[0], 'Node short id is in the subheading' ); andThen(() => { - click('[data-test-allocation-details] [data-test-job-link]'); + Allocation.details.visitJob(); }); andThen(() => { assert.equal(currentURL(), `/jobs/${job.id}`, 'Job link navigates to the job'); }); - visit(`/allocations/${allocation.id}`); + Allocation.visit({ id: allocation.id }); andThen(() => { - click('[data-test-allocation-details] [data-test-client-link]'); + Allocation.details.visitClient(); }); andThen(() => { @@ -73,7 +66,7 @@ test('/allocation/:id should name the allocation and link to the corresponding j test('/allocation/:id should list all tasks for the allocation', function(assert) { assert.equal( - findAll('[data-test-task-row]').length, + Allocation.tasks.length, server.db.taskStates.where({ allocationId: allocation.id }).length, 'Table lists all tasks' ); @@ -86,39 +79,15 @@ test('each task row should list high-level information for the task', function(a .sortBy('name')[0]; const reservedPorts = taskResources.resources.Networks[0].ReservedPorts; const dynamicPorts = taskResources.resources.Networks[0].DynamicPorts; - const taskRow = $(findAll('[data-test-task-row]')[0]); + const taskRow = Allocation.tasks.objectAt(0); const events = server.db.taskEvents.where({ taskStateId: task.id }); const event = events[events.length - 1]; + assert.equal(taskRow.name, task.name, 'Name'); + assert.equal(taskRow.state, task.state, 'State'); + assert.equal(taskRow.message, event.displayMessage, 'Event Message'); assert.equal( - taskRow - .find('[data-test-name]') - .text() - .trim(), - task.name, - 'Name' - ); - assert.equal( - taskRow - .find('[data-test-state]') - .text() - .trim(), - task.state, - 'State' - ); - assert.equal( - taskRow - .find('[data-test-message]') - .text() - .trim(), - event.displayMessage, - 'Event Message' - ); - assert.equal( - taskRow - .find('[data-test-time]') - .text() - .trim(), + taskRow.time, moment(event.time / 1000000).format('MM/DD/YY HH:mm:ss'), 'Event Time' ); @@ -126,7 +95,7 @@ test('each task row should list high-level information for the task', function(a assert.ok(reservedPorts.length, 'The task has reserved ports'); assert.ok(dynamicPorts.length, 'The task has dynamic ports'); - const addressesText = taskRow.find('[data-test-ports]').text(); + const addressesText = taskRow.ports; reservedPorts.forEach(port => { assert.ok(addressesText.includes(port.Label), `Found label ${port.Label}`); assert.ok(addressesText.includes(port.Value), `Found value ${port.Value}`); @@ -140,7 +109,7 @@ test('each task row should list high-level information for the task', function(a test('each task row should link to the task detail page', function(assert) { const task = server.db.taskStates.where({ allocationId: allocation.id }).sortBy('name')[0]; - click('[data-test-task-row] [data-test-name] a'); + Allocation.tasks.objectAt(0).clickLink(); andThen(() => { assert.equal( @@ -151,11 +120,11 @@ test('each task row should link to the task detail page', function(assert) { }); andThen(() => { - visit(`/allocations/${allocation.id}`); + Allocation.visit({ id: allocation.id }); }); andThen(() => { - click('[data-test-task-row]'); + Allocation.tasks.objectAt(0).clickRow(); }); andThen(() => { @@ -168,15 +137,15 @@ test('each task row should link to the task detail page', function(assert) { }); test('tasks with an unhealthy driver have a warning icon', function(assert) { - assert.ok(find('[data-test-task-row] [data-test-icon="unhealthy-driver"]'), 'Warning is shown'); + assert.ok(Allocation.firstUnhealthyTask().hasUnhealthyDriver, 'Warning is shown'); }); test('when the allocation has not been rescheduled, the reschedule events section is not rendered', function(assert) { - assert.notOk(find('[data-test-reschedule-events]'), 'Reschedule Events section exists'); + assert.notOk(Allocation.hasRescheduleEvents, 'Reschedule Events section exists'); }); test('when the allocation is not found, an error message is shown, but the URL persists', function(assert) { - visit('/allocations/not-a-real-allocation'); + Allocation.visit({ id: 'not-a-real-allocation' }); andThen(() => { assert.equal( @@ -185,12 +154,8 @@ test('when the allocation is not found, an error message is shown, but the URL p 'A request to the nonexistent allocation is made' ); assert.equal(currentURL(), '/allocations/not-a-real-allocation', 'The URL persists'); - assert.ok(find('[data-test-error]'), 'Error message is shown'); - assert.equal( - find('[data-test-error-title]').textContent, - 'Not Found', - 'Error message is for 404' - ); + assert.ok(Allocation.error.isShown, 'Error message is shown'); + assert.equal(Allocation.error.title, 'Not Found', 'Error message is for 404'); }); }); @@ -202,10 +167,10 @@ moduleForAcceptance('Acceptance | allocation detail (rescheduled)', { job = server.create('job', { createAllocations: false }); allocation = server.create('allocation', 'rescheduled'); - visit(`/allocations/${allocation.id}`); + Allocation.visit({ id: allocation.id }); }, }); test('when the allocation has been rescheduled, the reschedule events section is rendered', function(assert) { - assert.ok(find('[data-test-reschedule-events]'), 'Reschedule Events section exists'); + assert.ok(Allocation.hasRescheduleEvents, 'Reschedule Events section exists'); }); diff --git a/ui/tests/pages/allocations/detail.js b/ui/tests/pages/allocations/detail.js new file mode 100644 index 000000000..26ec8fe73 --- /dev/null +++ b/ui/tests/pages/allocations/detail.js @@ -0,0 +1,43 @@ +import { clickable, create, collection, isPresent, text, visitable } from 'ember-cli-page-object'; + +export default create({ + visit: visitable('/allocations/:id'), + + title: text('[data-test-title]'), + + details: { + scope: '[data-test-allocation-details]', + + job: text('[data-test-job-link]'), + visitJob: clickable('[data-test-job-link]'), + + client: text('[data-test-client-link]'), + visitClient: clickable('[data-test-client-link]'), + }, + + tasks: collection('[data-test-task-row]', { + name: text('[data-test-name]'), + state: text('[data-test-state]'), + message: text('[data-test-message]'), + time: text('[data-test-time]'), + ports: text('[data-test-ports]'), + + hasUnhealthyDriver: isPresent('[data-test-icon="unhealthy-driver"]'), + + clickLink: clickable('[data-test-name] a'), + clickRow: clickable('[data-test-name]'), + }), + + firstUnhealthyTask() { + return this.tasks.toArray().findBy('hasUnhealthyDriver'); + }, + + hasRescheduleEvents: isPresent('[data-test-reschedule-events]'), + + error: { + isShown: isPresent('[data-test-error]'), + title: text('[data-test-error-title]'), + message: text('[data-test-error-message]'), + seekHelp: clickable('[data-test-error-message] a'), + }, +});