UI: Update Ember to 3.12 LTS (#6419)

This is mostly deprecation fixes and blueprint changes. There
are some dependency updates too; the changes to Ember
Basic Dropdown necessitated changing it to angle bracket
component invocation. The conversion of the rest of the
templates will happen separately.

ui/.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  root: true,
   globals: {
     server: true,
   },
@@ -38,12 +39,19 @@ module.exports = {
       ],
       parserOptions: {
         sourceType: 'script',
-        ecmaVersion: 2015,
       },
       env: {
         browser: false,
         node: true,
       },
+      plugins: ['node'],
+      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
+        // add your custom rules and overrides for node files here
+
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off'
+      }),
     },
   ],
 };

ui/app/adapters/watchable.js

@@ -3,7 +3,7 @@ import { assign } from '@ember/polyfills';
 import { inject as service } from '@ember/service';
 import queryString from 'query-string';
 import ApplicationAdapter from './application';
-import { AbortError } from 'ember-data/adapters/errors';
+import { AbortError } from '@ember-data/adapter/error';
 
 export default ApplicationAdapter.extend({
   watchList: service(),

ui/app/components/allocation-row.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { alias } from '@ember/object/computed';
 import { run } from '@ember/runloop';
 import { task, timeout } from 'ember-concurrency';
@@ -24,7 +25,7 @@ export default Component.extend({
   // Internal state
   statsError: false,
 
-  enablePolling: computed(() => !Ember.testing),
+  enablePolling: overridable(() => !Ember.testing),
 
   stats: computed('allocation', 'allocation.isRunning', function() {
     if (!this.get('allocation.isRunning')) return;

ui/app/components/freestyle/sg-distribution-bar.js

@@ -1,17 +1,18 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { on } from '@ember/object/evented';
 
 export default Component.extend({
   timerTicks: 0,
 
-  startTimer: function() {
+  startTimer: on('init', function() {
     this.set(
       'timer',
       setInterval(() => {
         this.incrementProperty('timerTicks');
       }, 500)
     );
-  }.on('init'),
+  }),
 
   willDestroy() {
     clearInterval(this.timer);

ui/app/components/freestyle/sg-line-chart.js

@@ -1,11 +1,12 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { on } from '@ember/object/evented';
 import d3TimeFormat from 'd3-time-format';
 
 export default Component.extend({
   timerTicks: 0,
 
-  startTimer: function() {
+  startTimer: on('init', function() {
     this.set(
       'timer',
       setInterval(() => {
@@ -18,7 +19,7 @@ export default Component.extend({
         }
       }, 500)
     );
-  }.on('init'),
+  }),
 
   willDestroy() {
     clearInterval(this.timer);

ui/app/components/freestyle/sg-progress-bar.js

@@ -1,17 +1,18 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { on } from '@ember/object/evented';
 
 export default Component.extend({
   timerTicks: 0,
 
-  startTimer: function() {
+  startTimer: on('init', function() {
     this.set(
       'timer',
       setInterval(() => {
         this.incrementProperty('timerTicks');
       }, 1000)
     );
-  }.on('init'),
+  }),
 
   willDestroy() {
     clearInterval(this.timer);

ui/app/components/job-deployments-stream.js

@@ -1,12 +1,13 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import moment from 'moment';
 
 export default Component.extend({
   tagName: 'ol',
   classNames: ['timeline'],
 
-  deployments: computed(() => []),
+  deployments: overridable(() => []),
 
   sortedDeployments: computed('deployments.@each.versionSubmitTime', function() {
     return this.deployments

ui/app/components/job-versions-stream.js

@@ -1,12 +1,13 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import moment from 'moment';
 
 export default Component.extend({
   tagName: 'ol',
   classNames: ['timeline'],
 
-  versions: computed(() => []),
+  versions: overridable(() => []),
 
   // Passes through to the job-diff component
   verbose: true,

ui/app/components/line-chart.js

@@ -1,5 +1,6 @@
 import Component from '@ember/component';
 import { computed, observer } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { guidFor } from '@ember/object/internals';
 import { run } from '@ember/runloop';
 import d3 from 'd3-selection';
@@ -184,7 +185,7 @@ export default Component.extend(WindowResizable, {
     return axis && axis.getBBox().width;
   }),
 
-  xAxisOffset: computed('height', 'xAxisHeight', function() {
+  xAxisOffset: overridable('height', 'xAxisHeight', function() {
     return this.height - this.xAxisHeight;
   }),
 

ui/app/components/list-accordion.js

@@ -1,11 +1,12 @@
 import Component from '@ember/component';
 import { computed, get } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 
 export default Component.extend({
   classNames: ['accordion'],
 
   key: 'id',
-  source: computed(() => []),
+  source: overridable(() => []),
 
   onToggle(/* item, isOpen */) {},
   startExpanded: false,
@@ -30,5 +31,5 @@ export default Component.extend({
 
   // When source updates come in, the state cache is used to preserve
   // open/close state.
-  stateCache: computed(() => []),
+  stateCache: overridable(() => []),
 });

ui/app/components/list-pagination.js

@@ -1,8 +1,9 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 
 export default Component.extend({
-  source: computed(() => []),
+  source: overridable(() => []),
   size: 25,
   page: 1,
   spread: 2,

ui/app/components/list-table.js

@@ -1,11 +1,12 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 
 export default Component.extend({
   tagName: 'table',
   classNames: ['table'],
 
-  source: computed(() => []),
+  source: overridable(() => []),
 
   // Plan for a future with metadata (e.g., isSelected)
   decoratedSource: computed('source.[]', function() {

ui/app/components/multi-select-dropdown.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { run } from '@ember/runloop';
 
 const TAB = 9;
@@ -11,8 +11,8 @@ const ARROW_DOWN = 40;
 export default Component.extend({
   classNames: ['dropdown'],
 
-  options: computed(() => []),
-  selection: computed(() => []),
+  options: overridable(() => []),
+  selection: overridable(() => []),
 
   onSelect() {},
 

ui/app/components/reschedule-event-row.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { inject as service } from '@ember/service';
 
 export default Component.extend({
@@ -10,7 +10,7 @@ export default Component.extend({
   allocationId: null,
 
   // An allocation can also be provided directly
-  allocation: computed('allocationId', function() {
+  allocation: overridable('allocationId', function() {
     return this.store.findRecord('allocation', this.allocationId);
   }),
 

ui/app/controllers/allocations/allocation/index.js

@@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
 import { computed, observer } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { alias } from '@ember/object/computed';
 import { task } from 'ember-concurrency';
 import Sortable from 'nomad-ui/mixins/sortable';
@@ -24,7 +25,7 @@ export default Controller.extend(Sortable, {
   // Set in the route
   preempter: null,
 
-  error: computed(() => {
+  error: overridable(() => {
     // { title, description }
     return null;
   }),

ui/app/controllers/allocations/allocation/task/index.js

@@ -1,5 +1,6 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { alias } from '@ember/object/computed';
 import { task } from 'ember-concurrency';
 
@@ -22,7 +23,7 @@ export default Controller.extend({
       .sortBy('name');
   }),
 
-  error: computed(() => {
+  error: overridable(() => {
     // { title, description }
     return null;
   }),

ui/app/mixins/window-resizable.js

@@ -1,6 +1,7 @@
 import Mixin from '@ember/object/mixin';
 import { run } from '@ember/runloop';
 import { assert } from '@ember/debug';
+import { on } from '@ember/object/evented';
 import $ from 'jquery';
 
 export default Mixin.create({
@@ -8,14 +9,14 @@ export default Mixin.create({
     assert('windowResizeHandler needs to be overridden in the Component', false);
   },
 
-  setupWindowResize: function() {
+  setupWindowResize: on('didInsertElement', function() {
     run.scheduleOnce('afterRender', this, () => {
       this.set('_windowResizeHandler', this.windowResizeHandler.bind(this));
       $(window).on('resize', this._windowResizeHandler);
     });
-  }.on('didInsertElement'),
+  }),
 
-  removeWindowResize: function() {
+  removeWindowResize: on('willDestroyElement', function() {
     $(window).off('resize', this._windowResizeHandler);
-  }.on('willDestroyElement'),
+  }),
 });

ui/app/mixins/with-component-visibility-detection.js

@@ -1,22 +1,23 @@
 import Ember from 'ember';
 import Mixin from '@ember/object/mixin';
 import { assert } from '@ember/debug';
+import { on } from '@ember/object/evented';
 
 export default Mixin.create({
   visibilityHandler() {
     assert('visibilityHandler needs to be overridden in the Component', false);
   },
 
-  setupDocumentVisibility: function() {
+  setupDocumentVisibility: on('init', function() {
     if (!Ember.testing) {
       this.set('_visibilityHandler', this.visibilityHandler.bind(this));
       document.addEventListener('visibilitychange', this._visibilityHandler);
     }
-  }.on('init'),
+  }),
 
-  removeDocumentVisibility: function() {
+  removeDocumentVisibility: on('init', function() {
     if (!Ember.testing) {
       document.removeEventListener('visibilitychange', this._visibilityHandler);
     }
-  }.on('willDestroy'),
+  }),
 });

ui/app/mixins/with-route-visibility-detection.js

@@ -1,22 +1,23 @@
 import Ember from 'ember';
 import Mixin from '@ember/object/mixin';
 import { assert } from '@ember/debug';
+import { on } from '@ember/object/evented';
 
 export default Mixin.create({
   visibilityHandler() {
     assert('visibilityHandler needs to be overridden in the Route', false);
   },
 
-  setupDocumentVisibility: function() {
+  setupDocumentVisibility: on('activate', function() {
     if (!Ember.testing) {
       this.set('_visibilityHandler', this.visibilityHandler.bind(this));
       document.addEventListener('visibilitychange', this._visibilityHandler);
     }
-  }.on('activate'),
+  }),
 
-  removeDocumentVisibility: function() {
+  removeDocumentVisibility: on('deactivate', function() {
     if (!Ember.testing) {
       document.removeEventListener('visibilitychange', this._visibilityHandler);
     }
-  }.on('deactivate'),
+  }),
 });

ui/app/routes/application.js

@@ -1,7 +1,7 @@
 import { inject as service } from '@ember/service';
 import { next } from '@ember/runloop';
 import Route from '@ember/routing/route';
-import { AbortError } from 'ember-data/adapters/errors';
+import { AbortError } from '@ember-data/adapter/error';
 import RSVP from 'rsvp';
 
 export default Route.extend({

ui/app/serializers/agent.js

@@ -1,5 +1,5 @@
 import ApplicationSerializer from './application';
-import { AdapterError } from 'ember-data/adapters/errors';
+import AdapterError from '@ember-data/adapter/error';
 
 export default ApplicationSerializer.extend({
   attrs: {

ui/app/services/stats-trackers-registry.js

@@ -18,6 +18,8 @@ export default Service.extend({
   token: service(),
 
   init() {
+    this._super(...arguments);
+
     // The LRUMap limits the number of trackers tracked by making room for
     // new entries beyond the limit by removing the least recently used entry.
     registry = new LRUMap(MAX_STAT_TRACKERS);

ui/app/services/watch-list.js

@@ -10,6 +10,7 @@ export default Service.extend({
   }),
 
   init() {
+    this._super(...arguments);
     list = {};
   },
 

ui/app/templates/components/freestyle/sg-dropdown.hbs

@@ -4,7 +4,7 @@
     selected=selectedOption
     searchField="name"
     searchEnabled=(gt options.length 10)
-    onchange=(action (mut selectedOption))
+    onChange=(action (mut selectedOption))
     as |option|}}
     {{option.name}}
   {{/power-select}}
@@ -22,7 +22,7 @@
         selected=selectedOption2
         searchField="name"
         searchEnabled=(gt options.length 10)
-        onchange=(action (mut selectedOption2))
+        onChange=(action (mut selectedOption2))
         as |option|}}
         {{option.name}}
       {{/power-select}}
@@ -42,7 +42,7 @@
         selected=selectedOption3
         searchField="name"
         searchEnabled=(gt manyOptions.length 10)
-        onchange=(action (mut selectedOption3))
+        onChange=(action (mut selectedOption3))
         as |option|}}
         {{option.name}}
       {{/power-select}}

ui/app/templates/components/freestyle/sg-gutter-menu.hbs

@@ -37,7 +37,7 @@
                 {{#power-select
                   selected=(or selection "One")
                   options=(array "One" "Two" "Three")
-                  onchange=(action (mut selection))
+                  onChange=(action (mut selection))
                   as |option|}}
                   {{option}}
                 {{/power-select}}

ui/app/templates/components/gutter-menu.hbs

@@ -36,7 +36,7 @@
                 selected=system.activeNamespace
                 searchField="name"
                 searchEnabled=(gt sortedNamespaces.length 10)
-                onchange=(action gotoJobsForNamespace)
+                onChange=(action gotoJobsForNamespace)
                 tagName="div"
                 class="namespace-switcher"
                 as |namespace|}}

ui/app/templates/components/multi-select-dropdown.hbs

@@ -1,36 +1,43 @@
-{{#basic-dropdown
-  horizontalPosition="left"
-  onOpen=(action (queue
-    (action (mut isOpen) true)
-    (action capture)
-  ))
-  onClose=(action (mut isOpen) false)
-  as |dd|}}
-  {{#dd.trigger data-test-dropdown-trigger class="dropdown-trigger" onKeyDown=(action "openOnArrowDown")}}
-    <span class="dropdown-trigger-label">
+<BasicDropdown
+  @horizontalPosition="left"
+  @onOpen={{action (queue (action (mut isOpen) true) (action capture))}}
+  @onClose={{action (mut isOpen) false}} as |dd|
+>
+  <dd.Trigger data-test-dropdown-trigger class="dropdown-trigger" {{on "keydown" (action "openOnArrowDown" dd)}}>
+    <div class="dropdown-trigger-label">
       {{label}}
       {{#if selection.length}}
-        <span data-test-dropdown-count class="tag is-light">{{selection.length}}</span>
+        <span data-test-dropdown-count class="tag is-light">
+          {{selection.length}}
+        </span>
       {{/if}}
-    </span>
+    </div>
     <span class="dropdown-trigger-icon ember-power-select-status-icon"></span>
-  {{/dd.trigger}}
-  {{#dd.content class="dropdown-options"}}
+  </dd.Trigger>
+  <dd.Content class="dropdown-options">
     <ul role="listbox" data-test-dropdown-options>
       {{#each options key="key" as |option|}}
-        <li data-test-dropdown-option={{option.key}} class="dropdown-option" tabindex="1" onkeydown={{action "traverseList" option}}>
+        <li
+          data-test-dropdown-option={{option.key}}
+          class="dropdown-option"
+          tabindex="1"
+          onkeydown={{action "traverseList" option}}
+        >
           <label>
             <input
               type="checkbox"
               tabindex="-1"
               checked={{contains option.key selection}}
-              onchange={{action "toggle" option}} />
+              onchange={{action "toggle" option}}
+            />
             {{option.label}}
           </label>
         </li>
       {{else}}
-        <em data-test-dropdown-empty class="dropdown-empty">No options</em>
+        <em data-test-dropdown-empty class="dropdown-empty">
+          No options
+        </em>
       {{/each}}
     </ul>
-  {{/dd.content}}
-{{/basic-dropdown}}
+  </dd.Content>
+</BasicDropdown>

ui/app/templates/components/region-switcher.hbs

@@ -6,7 +6,7 @@
     options=sortedRegions
     selected=system.activeRegion
     searchEnabled=false
-    onchange=(action gotoRegion) as |region|}}
+    onChange=(action gotoRegion) as |region|}}
     <span class="ember-power-select-prefix">Region: </span>{{region}}
   {{/power-select}}
 {{/if}}

ui/app/utils/classes/abstract-logger.js

@@ -1,6 +1,7 @@
 import { assert } from '@ember/debug';
 import Mixin from '@ember/object/mixin';
 import { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { assign } from '@ember/polyfills';
 import queryString from 'query-string';
 
@@ -8,7 +9,7 @@ const MAX_OUTPUT_LENGTH = 50000;
 
 export default Mixin.create({
   url: '',
-  params: computed(() => ({})),
+  params: overridable(() => ({})),
   logFetch() {
     assert('Loggers need a logFetch method, which should have an interface like window.fetch');
   },
@@ -22,7 +23,7 @@ export default Mixin.create({
       : { origin: 'end', offset: MAX_OUTPUT_LENGTH };
   }),
 
-  additionalParams: computed(() => ({})),
+  additionalParams: overridable(() => ({})),
 
   fullUrl: computed('url', 'params', 'offsetParams', 'additionalParams', function() {
     const queryParams = queryString.stringify(

ui/app/utils/classes/log.js

@@ -3,6 +3,7 @@ import { assert } from '@ember/debug';
 import { htmlSafe } from '@ember/template';
 import Evented from '@ember/object/evented';
 import EmberObject, { computed } from '@ember/object';
+import { computed as overridable } from 'ember-overridable-computed';
 import { assign } from '@ember/polyfills';
 import queryString from 'query-string';
 import { task } from 'ember-concurrency';
@@ -20,7 +21,7 @@ const Log = EmberObject.extend(Evented, {
   // Parameters
 
   url: '',
-  params: computed(() => ({})),
+  params: overridable(() => ({})),
   plainText: false,
   logFetch() {
     assert('Log objects need a logFetch method, which should have an interface like window.fetch');

ui/app/utils/no-leader-error.js

@@ -1,4 +1,4 @@
-import { AdapterError } from 'ember-data/adapters/errors';
+import AdapterError from '@ember-data/adapter/error';
 
 export const NO_LEADER = 'No cluster leader';
 

ui/config/deprecation-workflow.js

@@ -8,5 +8,6 @@ self.deprecationWorkflow.config = {
     // Only used in ivy-codemirror.
     // PR open: https://github.com/IvyApp/ivy-codemirror/pull/40/files
     { handler: 'log', matchId: 'ember-component.send-action' },
+    { handler: 'log', matchId: 'ember-test-helpers.rendering-context.jquery-element' },
   ],
 };

ui/config/environment.js

@@ -15,8 +15,7 @@ module.exports = function(environment) {
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
-        // e.g. 'with-controller': true
-        'ember-routing-router-service': true,
+        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
       },
       EXTEND_PROTOTYPES: {
         // Prevent Ember Data from overriding Date.parse.

ui/lib/bulma/package.json

@@ -2,5 +2,9 @@
   "name": "bulma",
   "keywords": [
     "ember-addon"
-  ]
+  ],
+  "devDependencies": {
+    "broccoli-funnel": "^2.0.1",
+    "bulma": "0.6.1"
+  }
 }

ui/package.json

@@ -21,15 +21,21 @@
     }
   },
   "lint-staged": {
-    "{app,tests,config,lib,mirage}/**/*.js": ["prettier --write", "git add"],
-    "app/styles/**/*.*": ["prettier --write", "git add"]
+    "{app,tests,config,lib,mirage}/**/*.js": [
+      "prettier --write",
+      "git add"
+    ],
+    "app/styles/**/*.*": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "devDependencies": {
-    "anser": "^1.4.8",
     "@babel/plugin-proposal-object-rest-spread": "^7.4.3",
     "@ember/jquery": "^0.6.0",
     "@ember/optional-features": "^0.7.0",
     "@hashicorp/structure-icons": "^1.3.0",
+    "anser": "^1.4.8",
     "broccoli-asset-rev": "^3.0.0",
     "bulma": "0.6.1",
     "core-js": "^2.4.1",
@@ -43,15 +49,15 @@
     "d3-transition": "^1.1.0",
     "ember-ajax": "^5.0.0",
     "ember-auto-import": "^1.2.21",
-    "ember-cli": "~3.8.3",
-    "ember-cli-babel": "^7.1.2",
+    "ember-cli": "~3.12.0",
+    "ember-cli-babel": "^7.7.3",
     "ember-cli-clipboard": "^0.13.0",
     "ember-cli-dependency-checker": "^3.1.0",
     "ember-cli-deprecation-workflow": "^1.0.1",
     "ember-cli-eslint": "^5.1.0",
     "ember-cli-funnel": "^0.6.1",
-    "ember-cli-htmlbars": "^3.0.0",
-    "ember-cli-htmlbars-inline-precompile": "^1.0.3",
+    "ember-cli-htmlbars": "^3.0.1",
+    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-mirage": "^1.1.2",
     "ember-cli-moment-shim": "^3.5.0",
@@ -64,27 +70,29 @@
     "ember-composable-helpers": "^2.0.3",
     "ember-concurrency": "^1.0.0",
     "ember-copy": "^1.0.0",
-    "ember-data": "~3.8.0",
+    "ember-data": "~3.12.0",
     "ember-data-model-fragments": "4.0.0",
     "ember-export-application-global": "^2.0.0",
     "ember-fetch": "^6.5.0",
     "ember-freestyle": "~0.10.0",
     "ember-inflector": "^3.0.0",
     "ember-inline-svg": "^0.3.0",
-    "ember-load-initializers": "^1.1.0",
+    "ember-load-initializers": "^2.0.0",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-moment": "^7.8.1",
+    "ember-overridable-computed": "^1.0.0",
     "ember-page-title": "^5.0.2",
-    "ember-power-select": "^2.2.3",
-    "ember-qunit": "^3.4.1",
+    "ember-power-select": "^3.0.4",
+    "ember-qunit": "^4.4.1",
     "ember-qunit-nice-errors": "^1.2.0",
     "ember-resolver": "^5.0.1",
     "ember-responsive": "^3.0.4",
     "ember-sinon": "^4.0.0",
-    "ember-source": "~3.8.0",
+    "ember-source": "~3.12.0",
     "ember-test-selectors": "^2.1.0",
     "ember-truth-helpers": "^2.0.0",
     "eslint": "^5.16.0",
+    "eslint-plugin-node": "^9.0.1",
     "faker": "^4.1.0",
     "flat": "^4.0.0",
     "fuse.js": "^3.4.4",
@@ -101,11 +109,13 @@
     "sass": "^1.17.3"
   },
   "engines": {
-    "node": "6.* || 8.* || >= 10.*"
+    "node": "8.* || >= 10.*"
   },
   "private": true,
   "ember-addon": {
-    "paths": ["lib/bulma"]
+    "paths": [
+      "lib/bulma"
+    ]
   },
   "dependencies": {
     "lru_map": "^0.3.3"

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

@@ -32,7 +32,7 @@ module('Integration | Component | attributes table', function(hooks) {
 
     const rowsCount = Object.keys(flatten(commonAttributes)).length;
     assert.equal(
-      this.$('[data-test-attributes-section]').has('[data-test-value]').length,
+      this.element.querySelectorAll('[data-test-attributes-section] [data-test-value]').length,
       rowsCount,
       `Table has ${rowsCount} rows with values`
     );

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

@@ -59,31 +59,10 @@ module('Integration | Component | list table', function(hooks) {
     // list-table is not responsible for sorting, only dispatching sort events. The table is still
     // rendered in index-order.
     this.get('source').forEach((item, index) => {
-      const $item = this.$(`.item:eq(${index})`);
-      assert.equal(
-        $item
-          .find('td:eq(0)')
-          .text()
-          .trim(),
-        item.firstName,
-        'First name'
-      );
-      assert.equal(
-        $item
-          .find('td:eq(1)')
-          .text()
-          .trim(),
-        item.lastName,
-        'Last name'
-      );
-      assert.equal(
-        $item
-          .find('td:eq(2)')
-          .text()
-          .trim(),
-        item.age,
-        'Age'
-      );
+      const $item = this.element.querySelectorAll('.item')[index];
+      assert.equal($item.querySelectorAll('td')[0].innerHTML.trim(), item.firstName, 'First name');
+      assert.equal($item.querySelectorAll('td')[1].innerHTML.trim(), item.lastName, 'Last name');
+      assert.equal($item.querySelectorAll('td')[2].innerHTML.trim(), item.age, 'Age');
     });
   });
 

ui/tests/unit/adapters/job-test.js

@@ -57,6 +57,7 @@ module('Unit | Adapter | Job', function(hooks) {
 
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
 
+    await settled();
     assert.deepEqual(
       pretender.handledRequests.mapBy('url'),
       [`/v1/job/${jobName}`],
@@ -75,6 +76,7 @@ module('Unit | Adapter | Job', function(hooks) {
     const jobId = JSON.stringify([jobName, jobNamespace]);
 
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
+    await settled();
 
     assert.deepEqual(
       pretender.handledRequests.mapBy('url'),
@@ -94,6 +96,7 @@ module('Unit | Adapter | Job', function(hooks) {
     const jobId = JSON.stringify([jobName, jobNamespace]);
 
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
+    await settled();
 
     assert.deepEqual(
       pretender.handledRequests.mapBy('url'),
@@ -111,6 +114,7 @@ module('Unit | Adapter | Job', function(hooks) {
     const jobId = JSON.stringify([jobName, jobNamespace]);
 
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
+    await settled();
 
     assert.deepEqual(
       pretender.handledRequests.mapBy('url'),
@@ -126,6 +130,7 @@ module('Unit | Adapter | Job', function(hooks) {
     const jobId = JSON.stringify(['job-1', 'default']);
 
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
+    await settled();
 
     assert.notOk(
       pretender.handledRequests.mapBy('requestHeaders').some(headers => headers['X-Nomad-Token']),
@@ -142,6 +147,7 @@ module('Unit | Adapter | Job', function(hooks) {
 
     this.subject().set('token.secret', secret);
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
+    await settled();
 
     assert.ok(
       pretender.handledRequests
@@ -242,6 +248,8 @@ module('Unit | Adapter | Job', function(hooks) {
 
     await settled();
     this.subject().reloadRelationship(mockModel, 'summary', { watch: true });
+    await settled();
+
     assert.equal(
       pretender.handledRequests[1].url,
       '/v1/job/job-1/summary?index=2',
@@ -377,6 +385,7 @@ module('Unit | Adapter | Job', function(hooks) {
     await settled();
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
     this.subject().findAll(null, { modelName: 'job' }, null);
+    await settled();
 
     assert.deepEqual(
       pretender.handledRequests.mapBy('url'),
@@ -399,6 +408,7 @@ module('Unit | Adapter | Job', function(hooks) {
     await settled();
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
     this.subject().findAll(null, { modelName: 'job' }, null);
+    await settled();
 
     assert.deepEqual(
       pretender.handledRequests.mapBy('url'),
@@ -420,6 +430,7 @@ module('Unit | Adapter | Job', function(hooks) {
     await settled();
     this.subject().findRecord(null, { modelName: 'job' }, jobId);
     this.subject().findAll(null, { modelName: 'job' }, null);
+    await settled();
 
     assert.deepEqual(
       pretender.handledRequests.mapBy('url'),