Use ember-test-selectors for integration tests

ui/app/templates/components/attributes-section.hbs

 {{#each-in attributes as |key value|}}
   {{#if (is-object value)}}
-    <tr>
-      <td class="is-subheading" colspan="2">
-        {{#if prefix}}<span class="is-faded">{{prefix}}.</span>{{/if}}{{key}}
+    <tr data-test-attributes-section>
+      <td data-test-heading class="is-subheading" colspan="2">
+        {{#if prefix}}<span class="is-faded" data-test-prefix>{{prefix}}.</span>{{/if}}{{key}}
       </td>
     </tr>
     {{attributes-section prefix=(if prefix (concat prefix '.' key) key) attributes=value}}
   {{else}}
-    <tr>
-      <td>
-        {{#if prefix}}<span class="is-faded">{{prefix}}.</span>{{/if}}
+    <tr data-test-attributes-section>
+      <td data-test-key>
+        {{#if prefix}}<span class="is-faded" data-test-prefix>{{prefix}}.</span>{{/if}}
         {{~key}}
       </td>
-      <td title="{{value}}">{{value}}</td>
+      <td data-test-value title="{{value}}">{{value}}</td>
     </tr>
   {{/if}}
 {{/each-in}}

ui/app/templates/components/job-diff-fields-and-objects.hbs

 <div class="diff-section-table">
   {{#each fields as |field|}}
-    <div class="diff-section-table-row {{concat
-      "diff-section-label is-"
-      (lowercase field.Type)
-    }}">
+    <div
+      data-test-diff-section-label="field"
+      data-test-diff-field="{{lowercase field.Type}}"
+      class="diff-section-table-row {{concat
+        "diff-section-label is-"
+        (lowercase field.Type)
+      }}">
       <span class="diff-section-table-cell">
         <span class="marker {{concat "is-" (lowercase field.Type)}}">
           {{#if (eq (lowercase field.Type) "added")}}
@@ -30,10 +33,13 @@
 </div>
 
 {{#each objects as |object|}}
-  <div class="{{concat
-    "diff-section-label is-"
-    (lowercase object.Type)
-  }}">
+  <div
+    data-test-diff-section-label="object"
+    data-test-diff-field="{{lowercase object.Type}}"
+    class="{{concat
+      "diff-section-label is-"
+      (lowercase object.Type)
+    }}">
     <span class="marker {{concat "is-" (lowercase object.Type)}}">
       {{#if (eq (lowercase object.Type) "added")}}
         +
@@ -44,7 +50,7 @@
       {{/if}}
     </span>
     {{object.Name}} {
-      <div class="diff-section-label">
+      <div data-test-diff-section-label="nested-object" class="diff-section-label">
         {{job-diff-fields-and-objects fields=object.Fields objects=object.Objects}}
       </div>
     }

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

 {{!-- Job heading --}}
-<div class="{{if diff.Type
-  (concat
-    "diff-section-label is-"
-    (lowercase diff.Type)
-  )
-}}">
+<div
+  data-test-diff-section-label="job"
+  data-test-diff-field="{{lowercase diff.Type}}"
+  class="{{if diff.Type
+    (concat
+      "diff-section-label is-"
+      (lowercase diff.Type)
+    )
+  }}">
   <span class="marker {{concat "is-" (lowercase diff.Type)}}">
     {{#if (eq (lowercase diff.Type) "added")}}
       +
@@ -19,14 +22,14 @@
 
 {{!-- Show job field and object diffs if the job is edited --}}
 {{#if (or verbose (eq (lowercase diff.Type) "edited"))}}
-  <div class="diff-section-label">
+  <div data-test-diff-section-label="job-diff" class="diff-section-label">
     {{job-diff-fields-and-objects fields=diff.Fields objects=diff.Objects}}
   </div>
 {{/if}}
 
 {{!-- Each task group --}}
 {{#each diff.TaskGroups as |group|}}
-  <div class="{{if group.Type
+  <div data-test-diff-section-label="task-group" class="{{if group.Type
     (concat
       "diff-section-label is-"
       (lowercase group.Type)
@@ -50,19 +53,22 @@
 
     {{!-- Show task group field and object diffs if the task group is edited --}}
     {{#if (or (eq (lowercase group.Type) "edited") verbose)}}
-      <div class="diff-section-label">
+      <div data-test-diff-section-label="task-group-diff" class="diff-section-label">
         {{job-diff-fields-and-objects fields=group.Fields objects=group.Objects}}
       </div>
     {{/if}}
 
     {{!-- Each task --}}
     {{#each group.Tasks as |task|}}
-      <div class="{{if task.Type
-        (concat
-          "diff-section-label is-"
-          (lowercase task.Type)
-        )
-      }}">
+      <div
+        data-test-diff-section-label="task"
+        data-test-diff-field="{{lowercase task.Type}}"
+        class="{{if task.Type
+          (concat
+            "diff-section-label is-"
+            (lowercase task.Type)
+          )
+        }}">
       <span class="marker {{concat "is-" (lowercase task.Type)}}">
         {{#if (eq (lowercase task.Type) "added")}}
           +

ui/app/templates/components/task-log.hbs

 <div class="boxed-section-head">
   <span>
-    <button class="button {{if (eq mode "stdout") "is-info"}} action-stdout" {{action "setMode" "stdout"}}>stdout</button>
-    <button class="button {{if (eq mode "stderr") "is-danger"}} action-stderr" {{action "setMode" "stderr"}}>stderr</button>
+    <button data-test-log-action="stdout" class="button {{if (eq mode "stdout") "is-info"}}" {{action "setMode" "stdout"}}>stdout</button>
+    <button data-test-log-action="stderr" class="button {{if (eq mode "stderr") "is-danger"}}" {{action "setMode" "stderr"}}>stderr</button>
   </span>
   <span class="pull-right">
-    <button class="button is-white action-head" onclick={{perform head}}>Head</button>
-    <button class="button is-white action-tail" onclick={{perform tail}}>Tail</button>
-    <button class="button is-white action-toggle-stream" onclick={{action "toggleStream"}}>
+    <button data-test-log-action="head" class="button is-white" onclick={{perform head}}>Head</button>
+    <button data-test-log-action="tail" class="button is-white" onclick={{perform tail}}>Tail</button>
+    <button data-test-log-action="toggle-stream" class="button is-white" onclick={{action "toggleStream"}}>
       {{x-icon (if logger.isStreaming "media-pause" "media-play") class="is-text"}}
     </button>
   </span>
 </div>
-<div class="boxed-section-body is-dark is-full-bleed">
-  <pre class="cli-window"><code>{{logger.output}}</code></pre>
+<div data-test-log-box class="boxed-section-body is-dark is-full-bleed">
+  <pre data-test-log-cli class="cli-window"><code>{{logger.output}}</code></pre>
 </div>

ui/tests/integration/attributes-table-test.js

-import { findAll } from 'ember-native-dom-helpers';
+import { find, findAll } from 'ember-native-dom-helpers';
 import { test, moduleForComponent } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import flat from 'npm:flat';
@@ -32,7 +32,7 @@ test('should render a row for each key/value pair in a deep object', function(as
 
   const rowsCount = Object.keys(flatten(commonAttributes)).length;
   assert.equal(
-    this.$('tbody tr').has('td:eq(1)').length,
+    this.$('[data-test-attributes-section]').has('[data-test-value]').length,
     rowsCount,
     `Table has ${rowsCount} rows with values`
   );
@@ -42,40 +42,21 @@ test('should render the full path of key/value pair from the root of the object'
   this.set('attributes', commonAttributes);
   this.render(hbs`{{attributes-table attributes=attributes}}`);
 
-  assert.equal(
-    this.$('tbody tr:eq(0) td')
-      .get(0)
-      .textContent.trim(),
-    'key',
-    'Simple row renders only the key'
-  );
-  assert.equal(
-    this.$('tbody tr:eq(0) td')
-      .get(1)
-      .textContent.trim(),
-    'value'
-  );
+  assert.equal(find('[data-test-key]').textContent.trim(), 'key', 'Row renders the key');
+  assert.equal(find('[data-test-value]').textContent.trim(), 'value', 'Row renders the value');
 
+  const deepRow = findAll('[data-test-attributes-section]')[8];
   assert.equal(
-    this.$('tbody tr:eq(8) td')
-      .get(0)
-      .textContent.trim(),
+    deepRow.querySelector('[data-test-key]').textContent.trim(),
     'so.are.deeply.nested',
     'Complex row renders the full path to the key'
   );
   assert.equal(
-    this.$('tbody tr:eq(8) td:eq(0) .is-faded')
-      .get(0)
-      .textContent.trim(),
+    deepRow.querySelector('[data-test-prefix]').textContent.trim(),
     'so.are.deeply.',
     'The prefix is faded to put emphasis on the attribute'
   );
-  assert.equal(
-    this.$('tbody tr:eq(8) td')
-      .get(1)
-      .textContent.trim(),
-    'properties'
-  );
+  assert.equal(deepRow.querySelector('[data-test-value]').textContent.trim(), 'properties');
 });
 
 test('should render a row for key/value pairs even when the value is another object', function(
@@ -86,7 +67,7 @@ test('should render a row for key/value pairs even when the value is another obj
 
   const countOfParentRows = countOfParentKeys(commonAttributes);
   assert.equal(
-    findAll('tbody tr td[colspan="2"]').length,
+    findAll('[data-test-heading]').length,
     countOfParentRows,
     'Each key for a nested object gets a row with no value'
   );

ui/tests/integration/job-diff-test.js

@@ -29,22 +29,28 @@ test('job field diffs', function(assert) {
   this.render(commonTemplate);
 
   assert.equal(
-    findAll('.diff-section-label').length,
+    findAll('[data-test-diff-section-label]').length,
     5,
     'A section label for each line, plus one for the group'
   );
   assert.equal(
-    cleanWhitespace(find('.diff-section-label .diff-section-label.is-added').textContent),
+    cleanWhitespace(
+      find('[data-test-diff-section-label="field"][data-test-diff-field="added"]').textContent
+    ),
     '+ Added Field: "Foobar"',
     'Added field is rendered correctly'
   );
   assert.equal(
-    cleanWhitespace(find('.diff-section-label .diff-section-label.is-edited').textContent),
+    cleanWhitespace(
+      find('[data-test-diff-section-label="field"][data-test-diff-field="edited"]').textContent
+    ),
     '+/- Edited Field: "256" => "512"',
     'Edited field is rendered correctly'
   );
   assert.equal(
-    cleanWhitespace(find('.diff-section-label .diff-section-label.is-deleted').textContent),
+    cleanWhitespace(
+      find('[data-test-diff-section-label="field"][data-test-diff-field="deleted"]').textContent
+    ),
     '- Removed Field: "12"',
     'Removed field is rendered correctly'
   );
@@ -98,51 +104,53 @@ test('job object diffs', function(assert) {
 
   assert.ok(
     cleanWhitespace(
-      find('.diff-section-label > .diff-section-label.is-added').textContent
+      find('[data-test-diff-section-label="object"][data-test-diff-field="added"]').textContent
     ).startsWith('+ DeepConfiguration {'),
     'Added object starts with a JSON block'
   );
   assert.ok(
     cleanWhitespace(
-      find('.diff-section-label > .diff-section-label.is-edited').textContent
+      find('[data-test-diff-section-label="object"][data-test-diff-field="edited"]').textContent
     ).startsWith('+/- ComplexProperty {'),
     'Edited object starts with a JSON block'
   );
   assert.ok(
     cleanWhitespace(
-      find('.diff-section-label > .diff-section-label.is-deleted').textContent
+      find('[data-test-diff-section-label="object"][data-test-diff-field="deleted"]').textContent
     ).startsWith('- DatedStuff {'),
     'Removed object starts with a JSON block'
   );
 
   assert.ok(
     cleanWhitespace(
-      find('.diff-section-label > .diff-section-label.is-added').textContent
+      find('[data-test-diff-section-label="object"][data-test-diff-field="added"]').textContent
     ).endsWith('}'),
     'Added object ends the JSON block'
   );
   assert.ok(
     cleanWhitespace(
-      find('.diff-section-label > .diff-section-label.is-edited').textContent
+      find('[data-test-diff-section-label="object"][data-test-diff-field="edited"]').textContent
     ).endsWith('}'),
     'Edited object starts with a JSON block'
   );
   assert.ok(
     cleanWhitespace(
-      find('.diff-section-label > .diff-section-label.is-deleted').textContent
+      find('[data-test-diff-section-label="object"][data-test-diff-field="deleted"]').textContent
     ).endsWith('}'),
     'Removed object ends the JSON block'
   );
 
   assert.equal(
-    findAll('.diff-section-label > .diff-section-label.is-added > .diff-section-label').length,
+    findAll(
+      '[data-test-diff-section-label="object"][data-test-diff-field="added"] > [data-test-diff-section-label]'
+    ).length,
     this.get('diff').Objects[1].Objects.length + this.get('diff').Objects[1].Fields.length,
     'Edited block contains each nested field and object'
   );
 
   assert.equal(
     findAll(
-      '.diff-section-label > .diff-section-label.is-added > .diff-section-label > .diff-section-label .diff-section-table-row'
+      '[data-test-diff-section-label="object"][data-test-diff-field="added"] [data-test-diff-section-label="object"] [data-test-diff-section-label="field"]'
     ).length,
     this.get('diff').Objects[1].Objects[0].Fields.length,
     'Objects within objects are rendered'

ui/tests/integration/task-log-test.js

@@ -62,13 +62,13 @@ test('Basic appearance', function(assert) {
   this.setProperties(commonProps);
   this.render(hbs`{{task-log allocation=allocation task=task}}`);
 
-  assert.ok(find('.action-stdout'), 'Stdout button');
-  assert.ok(find('.action-stderr'), 'Stderr button');
-  assert.ok(find('.action-head'), 'Head button');
-  assert.ok(find('.action-tail'), 'Tail button');
-  assert.ok(find('.action-toggle-stream'), 'Stream toggle button');
+  assert.ok(find('[data-test-log-action="stdout"]'), 'Stdout button');
+  assert.ok(find('[data-test-log-action="stderr"]'), 'Stderr button');
+  assert.ok(find('[data-test-log-action="head"]'), 'Head button');
+  assert.ok(find('[data-test-log-action="tail"]'), 'Tail button');
+  assert.ok(find('[data-test-log-action="toggle-stream"]'), 'Stream toggle button');
 
-  assert.ok(find('.boxed-section-body.is-full-bleed.is-dark'), 'Body is full-bleed and dark');
+  assert.ok(find('[data-test-log-box].is-full-bleed.is-dark'), 'Body is full-bleed and dark');
 
   assert.ok(find('pre.cli-window'), 'Cli is preformatted and using the cli-window component class');
 });
@@ -87,7 +87,7 @@ test('Streaming starts on creation', function(assert) {
 
   return wait().then(() => {
     assert.equal(
-      find('.cli-window').textContent,
+      find('[data-test-log-cli]').textContent,
       streamFrames[0],
       'First chunk of streaming log is shown'
     );
@@ -98,7 +98,7 @@ test('Clicking Head loads the log head', function(assert) {
   this.setProperties(commonProps);
   this.render(hbs`{{task-log allocation=allocation task=task}}`);
 
-  click('.action-head');
+  click('[data-test-log-action="head"]');
 
   return wait().then(() => {
     assert.ok(
@@ -107,7 +107,7 @@ test('Clicking Head loads the log head', function(assert) {
       ),
       'Log head request was made'
     );
-    assert.equal(find('.cli-window').textContent, logHead[0], 'Head of the log is shown');
+    assert.equal(find('[data-test-log-cli]').textContent, logHead[0], 'Head of the log is shown');
   });
 });
 
@@ -115,7 +115,7 @@ test('Clicking Tail loads the log tail', function(assert) {
   this.setProperties(commonProps);
   this.render(hbs`{{task-log allocation=allocation task=task}}`);
 
-  click('.action-tail');
+  click('[data-test-log-action="tail"]');
 
   return wait().then(() => {
     assert.ok(
@@ -124,7 +124,7 @@ test('Clicking Tail loads the log tail', function(assert) {
       ),
       'Log tail request was made'
     );
-    assert.equal(find('.cli-window').textContent, logTail[0], 'Tail of the log is shown');
+    assert.equal(find('[data-test-log-cli]').textContent, logTail[0], 'Tail of the log is shown');
   });
 });
 
@@ -134,21 +134,25 @@ test('Clicking toggleStream starts and stops the log stream', function(assert) {
   this.render(hbs`{{task-log allocation=allocation task=task interval=interval}}`);
 
   run.later(() => {
-    click('.action-toggle-stream');
+    click('[data-test-log-action="toggle-stream"]');
   }, interval);
 
   return wait().then(() => {
-    assert.equal(find('.cli-window').textContent, streamFrames[0], 'First frame loaded');
+    assert.equal(find('[data-test-log-cli]').textContent, streamFrames[0], 'First frame loaded');
 
     run.later(() => {
-      assert.equal(find('.cli-window').textContent, streamFrames[0], 'Still only first frame');
-      click('.action-toggle-stream');
+      assert.equal(
+        find('[data-test-log-cli]').textContent,
+        streamFrames[0],
+        'Still only first frame'
+      );
+      click('[data-test-log-action="toggle-stream"]');
       run.later(run, run.cancelTimers, interval * 2);
     }, interval * 2);
 
     return wait().then(() => {
       assert.equal(
-        find('.cli-window').textContent,
+        find('[data-test-log-cli]').textContent,
         streamFrames[0] + streamFrames[0] + streamFrames[1],
         'Now includes second frame'
       );
@@ -160,7 +164,7 @@ test('Clicking stderr switches the log to standard error', function(assert) {
   this.setProperties(commonProps);
   this.render(hbs`{{task-log allocation=allocation task=task}}`);
 
-  click('.action-stderr');
+  click('[data-test-log-action="stderr"]');
   run.later(run, run.cancelTimers, commonProps.interval);
 
   return wait().then(() => {