Merge pull request #4497 from hashicorp/f-ui-page-objects

UI: Update acceptance tests to use PageObjects

ui/app/components/server-agent-row.js

@@ -24,11 +24,12 @@ export default Component.extend({
 
     const router = this.get('router');
     const targetURL = router.generate('servers.server', this.get('agent'));
-    const currentURL = `${router.get('rootURL').slice(0, -1)}${router
-      .get('currentURL')
-      .split('?')[0]}`;
+    const currentURL = `${router.get('rootURL').slice(0, -1)}${
+      router.get('currentURL').split('?')[0]
+    }`;
 
-    return currentURL === targetURL;
+    // Account for potential URI encoding
+    return currentURL.replace(/%40/g, '@') === targetURL.replace(/%40/g, '@');
   }),
 
   click() {

ui/app/controllers/jobs/job/definition.js

@@ -1,4 +1,7 @@
 import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
+import { alias } from '@ember/object/computed';
 
-export default Controller.extend(WithNamespaceResetting);
+export default Controller.extend(WithNamespaceResetting, {
+  job: alias('model.job'),
+});

ui/app/controllers/jobs/job/deployments.js

@@ -1,4 +1,7 @@
 import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
+import { alias } from '@ember/object/computed';
 
-export default Controller.extend(WithNamespaceResetting);
+export default Controller.extend(WithNamespaceResetting, {
+  job: alias('model'),
+});

ui/app/controllers/jobs/job/evaluations.js

@@ -1,11 +1,9 @@
 import { alias } from '@ember/object/computed';
-import Controller, { inject as controller } from '@ember/controller';
+import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 import Sortable from 'nomad-ui/mixins/sortable';
 
 export default Controller.extend(WithNamespaceResetting, Sortable, {
-  jobController: controller('jobs.job'),
-
   queryParams: {
     sortProperty: 'sort',
     sortDescending: 'desc',
@@ -17,8 +15,6 @@ export default Controller.extend(WithNamespaceResetting, Sortable, {
   job: alias('model'),
   evaluations: alias('model.evaluations'),
 
-  breadcrumbs: alias('jobController.breadcrumbs'),
-
   listToSort: alias('evaluations'),
   sortedEvaluations: alias('listSorted'),
 });

ui/app/controllers/jobs/job/index.js

@@ -1,4 +1,5 @@
 import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
 import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
 
@@ -13,6 +14,8 @@ export default Controller.extend(WithNamespaceResetting, {
 
   currentPage: 1,
 
+  job: alias('model'),
+
   sortProperty: 'name',
   sortDescending: false,
 

ui/app/controllers/jobs/job/versions.js

@@ -1,4 +1,7 @@
 import Controller from '@ember/controller';
 import WithNamespaceResetting from 'nomad-ui/mixins/with-namespace-resetting';
+import { alias } from '@ember/object/computed';
 
-export default Controller.extend(WithNamespaceResetting);
+export default Controller.extend(WithNamespaceResetting, {
+  job: alias('model'),
+});

ui/app/templates/components/job-deployment/task-groups.hbs

@@ -4,7 +4,6 @@
   </div>
   <div class="boxed-section-body is-full-bleed">
     {{#list-table
-      data-test-deployment-task-groups
       source=deployment.taskGroupSummaries
       class="task-groups" as |t|}}
       {{#t.head}}

ui/app/templates/components/job-version.hbs

@@ -6,7 +6,7 @@
   </span>
   <span class="pair is-faded">
     <span class="term">Submitted</span>
-    <span data-test-version-submit-date class="submit-date">{{moment-format version.submitTime "MM/DD/YY HH:mm:ss"}}</span>
+    <span data-test-version-submit-time class="submit-date">{{moment-format version.submitTime "MM/DD/YY HH:mm:ss"}}</span>
   </span>
   {{#if version.diff}}
     <button class="button is-light is-compact pull-right" {{action "toggleDiff"}}>{{changeCount}} {{pluralize "Change" changeCount}}</button>

ui/app/templates/jobs/job/evaluations.hbs

@@ -1,10 +1,3 @@
-{{#global-header class="page-header"}}
-  {{#each breadcrumbs as |breadcrumb index|}}
-    <li class="{{if (eq (inc index) breadcrumbs.length) "is-active"}}">
-      {{#link-to params=breadcrumb.args}}{{breadcrumb.label}}{{/link-to}}
-    </li>
-  {{/each}}
-{{/global-header}}
 {{#gutter-menu class="page-body" onNamespaceChange=(action "gotoJobs")}}
   {{partial "jobs/job/subnav"}}
   <section class="section">

ui/package.json

@@ -42,6 +42,7 @@
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-mirage": "^0.4.3",
     "ember-cli-moment-shim": "^3.5.0",
+    "ember-cli-page-object": "^1.14.1",
     "ember-cli-qunit": "^4.2.1",
     "ember-cli-sass": "^7.1.2",
     "ember-cli-shims": "^1.2.0",

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.equal(
-    find('[data-test-allocation-details] [data-test-job-link]').textContent.trim(),
-    job.name,
-    'Job name is in the subheading'
-  );
+  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-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,47 +79,23 @@ 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'
   );
 
   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/acceptance/application-errors-test.js

@@ -1,6 +1,8 @@
-import { find, visit } from 'ember-native-dom-helpers';
 import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
 import { test } from 'qunit';
+import ClientsList from 'nomad-ui/tests/pages/clients/list';
+import JobsList from 'nomad-ui/tests/pages/jobs/list';
+import Job from 'nomad-ui/tests/pages/jobs/detail';
 
 moduleForAcceptance('Acceptance | application errors ', {
   beforeEach() {
@@ -13,16 +15,16 @@ moduleForAcceptance('Acceptance | application errors ', {
 test('transitioning away from an error page resets the global error', function(assert) {
   server.pretender.get('/v1/nodes', () => [500, {}, null]);
 
-  visit('/clients');
+  ClientsList.visit();
 
   andThen(() => {
-    assert.ok(find('[data-test-error]'), 'Application has errored');
+    assert.ok(ClientsList.error.isPresent, 'Application has errored');
   });
 
-  visit('/jobs');
+  JobsList.visit();
 
   andThen(() => {
-    assert.notOk(find('[data-test-error]'), 'Application is no longer in an error state');
+    assert.notOk(JobsList.error.isPresent, 'Application is no longer in an error state');
   });
 });
 
@@ -31,19 +33,15 @@ test('the 403 error page links to the ACL tokens page', function(assert) {
 
   server.pretender.get(`/v1/job/${job.id}`, () => [403, {}, null]);
 
-  visit(`/jobs/${job.id}`);
+  Job.visit({ id: job.id });
 
   andThen(() => {
-    assert.ok(find('[data-test-error]'), 'Error message is shown');
-    assert.equal(
-      find('[data-test-error] .title').textContent,
-      'Not Authorized',
-      'Error message is for 403'
-    );
+    assert.ok(Job.error.isPresent, 'Error message is shown');
+    assert.equal(Job.error.title, 'Not Authorized', 'Error message is for 403');
   });
 
   andThen(() => {
-    click('[data-test-error-acl-link]');
+    Job.error.seekHelp();
   });
 
   andThen(() => {