Use PageObject for allocation detail tests

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');
 });

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'),
+  },
+});