Update test helpers for Ember 4.0 (#929)

.github/workflows/ci.yml

@@ -53,7 +53,7 @@ jobs:
             ember-lts-3.24,
             ember-lts-3.28,
             # ember-release,
-            ember-production,
+            # ember-production,
             ember-default-docs
           ]
 

addon-test-support/helpers/mouse.js

@@ -1,4 +1,4 @@
-import { triggerEvent } from 'ember-native-dom-helpers';
+import { triggerEvent } from '@ember/test-helpers';
 
 export async function mouseDown(target, x, y) {
   await triggerEvent(target, 'pointerdown', {

addon-test-support/pages/-private/ember-table-body.js

@@ -7,7 +7,7 @@ import PageObject, {
 } from 'ember-classy-page-object';
 import { findElement } from 'ember-classy-page-object/extend';
 
-import { click } from 'ember-native-dom-helpers';
+import { click } from '@ember/test-helpers';
 
 /**
  * Page object for single table `td` cell; also used by the footer page object

addon-test-support/pages/-private/ember-table-header.js

@@ -1,6 +1,6 @@
 import PageObject, { alias, collection, hasClass, triggerable } from 'ember-classy-page-object';
 import { findElement } from 'ember-classy-page-object/extend';
-import { click } from 'ember-native-dom-helpers';
+import { click } from '@ember/test-helpers';
 
 import { mouseDown, mouseMove, mouseUp } from '../../helpers/mouse';
 import { getScale } from '../../helpers/element';

config/ember-try.js

@@ -14,8 +14,12 @@ module.exports = function() {
           name: 'ember-lts-2.18',
           npm: {
             devDependencies: {
+              '@ember/jquery': '^1.1.0',
+              '@ember/test-helpers': '^1.7.0',
               'ember-angle-bracket-invocation-polyfill': '^3.0.1',
+              'ember-qunit': '^4.0.0',
               'ember-source': '~2.18.0',
+              qunit: null,
             },
           },
         },

package.json

@@ -52,12 +52,13 @@
     "@addepar/sass-lint-config": "^2.0.1",
     "@addepar/style-toolbox": "~0.8.1",
     "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.4.0",
     "@types/ember": "^2.8.22",
     "babel-eslint": "^10.0.1",
     "broccoli-asset-rev": "^3.0.0",
     "ember-a11y-testing": "^0.5.0",
     "ember-auto-import": "^2.0.0",
-    "ember-cli": "~3.1.4",
+    "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deploy": "^1.0.2",
     "ember-cli-deploy-build": "^1.1.1",
@@ -73,8 +74,7 @@
     "ember-faker": "^1.5.0",
     "ember-load-initializers": "^2.0.0",
     "ember-math-helpers": "~2.11.3",
-    "ember-native-dom-helpers": "^0.7.0",
-    "ember-qunit": "^4.5.1",
+    "ember-qunit": "^5.0.0",
     "ember-radio-button": "^1.2.3",
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.28.0",
@@ -87,6 +87,7 @@
     "husky": "^1.3.1",
     "loader.js": "^4.2.3",
     "npm-run-all": "^4.1.5",
+    "qunit": "^2.0.0",
     "release-it": "^12.3.4",
     "sass": "^1.26.10",
     "webpack": "^5.0.0"

tests/helpers/generate-table.js

@@ -1,5 +1,5 @@
 import hbs from 'htmlbars-inline-precompile';
-import wait from 'ember-test-helpers/wait';
+import { settled } from '@ember/test-helpers';
 import {
   configureTableGeneration,
   generateColumns,
@@ -160,5 +160,5 @@ export async function generateTable(testContext, ...args) {
 
   testContext.render(fullTable);
 
-  await wait();
+  await settled();
 }

tests/helpers/module.js

@@ -1,4 +1,5 @@
-import { module, moduleForComponent } from 'ember-qunit';
+import { module } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
 
 export function scenarioModule(scenarios, callback) {
   for (let scenario in scenarios) {
@@ -9,26 +10,28 @@ export function scenarioModule(scenarios, callback) {
 }
 
 export function componentModule(moduleName, callback) {
-  moduleForComponent('ember-table', moduleName, { integration: true });
+  module(moduleName, function(hooks) {
+    setupRenderingTest(hooks);
 
-  callback();
+    callback();
+  });
 }
 
 export function parameterizedComponentModule(moduleName, parameters, callback) {
   Object.keys(parameters).forEach(key => {
     let { values, hooks } = parameters[key];
 
     for (let value of values) {
-      moduleForComponent('ember-table', `${moduleName} > params {${key}: ${value}}`, {
-        integration: true,
-        beforeEach() {
+      module(`${moduleName} > params {${key}: ${value}}`, function(qunitHooks) {
+        setupRenderingTest(qunitHooks);
+        qunitHooks.beforeEach(function() {
           hooks.beforeEach && hooks.beforeEach(value);
-        },
-        afterEach() {
+        });
+        qunitHooks.afterEach(function() {
           hooks.afterEach && hooks.afterEach(value);
-        },
+        });
+        callback(qunitHooks);
       });
-      callback();
     }
   });
 }

tests/helpers/scroll-to.js

@@ -0,0 +1,51 @@
+import { settled, triggerEvent } from '@ember/test-helpers';
+import { Promise } from 'rsvp';
+
+/**
+
+  Ported from https://github.com/emberjs/ember-test-helpers/blob/ea591697a98975737647b4c0043477cc6796569b/addon-test-support/%40ember/test-helpers/dom/scroll-to.ts
+
+  This can be dropped in favor of the test-helpers provided scrollTo after
+  Ember 2.18 support is dropped and test-helpers is upgraded.
+
+*/
+
+/**
+  Scrolls DOM element or selector to the given coordinates.
+  @public
+  @param {string|HTMLElement} target the element or selector to trigger scroll on
+  @param {Number} x x-coordinate
+  @param {Number} y y-coordinate
+  @return {Promise<void>} resolves when settled
+
+  @example
+  <caption>
+    Scroll DOM element to specific coordinates
+  </caption>
+
+  scrollTo('#my-long-div', 0, 0); // scroll to top
+  scrollTo('#my-long-div', 0, 100); // scroll down
+*/
+export default function scrollTo(target, x, y) {
+  return Promise.resolve().then(() => {
+    if (!target) {
+      throw new Error('Must pass an element or selector to `scrollTo`.');
+    }
+
+    if (x === undefined || y === undefined) {
+      throw new Error('Must pass both x and y coordinates to `scrollTo`.');
+    }
+
+    let element = target instanceof Node ? target : document.querySelector(target);
+    if (!element) {
+      throw new Error(`Element not found when calling \`scrollTo('${target}')\`.`);
+    }
+
+    element.scrollTop = y;
+    element.scrollLeft = x;
+
+    triggerEvent(element, 'scroll');
+
+    return settled();
+  });
+}

tests/index.html

@@ -1,33 +1,39 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Dummy Tests</title>
-    <meta name="description" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    {{content-for "head"}}
-    {{content-for "test-head"}}
+    {{content-for "head"}} {{content-for "test-head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/dummy.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
+    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css" />
+    <link rel="stylesheet" href="{{rootURL}}assets/dummy.css" />
+    <link rel="stylesheet" href="{{rootURL}}assets/test-support.css" />
 
-    {{content-for "head-footer"}}
-    {{content-for "test-head-footer"}}
+    {{content-for "head-footer"}} {{content-for "test-head-footer"}}
   </head>
   <body>
-    {{content-for "body"}}
-    {{content-for "test-body"}}
+    {{content-for "body"}} {{content-for "test-body"}}
+
+    <!--
+      Normally for modern Ember you find the qunit
+      boilerplate here. To maintain compatibility with
+      a broad range of Ember versions, instead the
+      boilerplate is added dynamically in test-heler.js
+
+      After 2.18 support is dropped, the boilerplate can
+      be moved back here.
+    -->
 
     <script src="/testem.js" integrity=""></script>
     <script src="{{rootURL}}assets/vendor.js"></script>
     <script src="{{rootURL}}assets/test-support.js"></script>
     <script src="{{rootURL}}assets/dummy.js"></script>
     <script src="{{rootURL}}assets/tests.js"></script>
 
-    {{content-for "body-footer"}}
-    {{content-for "test-body-footer"}}
+    {{content-for "body-footer"}} {{content-for "test-body-footer"}}
   </body>
 </html>

tests/integration/components/basic-test.js

@@ -1,15 +1,15 @@
-import { module, test } from 'ember-qunit';
+import { module, test } from 'qunit';
 import hbs from 'htmlbars-inline-precompile';
 import a11yAudit from 'ember-a11y-testing/test-support/audit';
 
 import { generateTable, generateColumns, generateRows } from '../../helpers/generate-table';
 import { componentModule } from '../../helpers/module';
 
-import { find, findAll, scrollTo } from 'ember-native-dom-helpers';
+import scrollTo from '../../helpers/scroll-to';
 
 import TablePage from 'ember-table/test-support/pages/ember-table';
 import { collection, hasClass } from 'ember-classy-page-object';
-import wait from 'ember-test-helpers/wait';
+import { find, findAll, settled } from '@ember/test-helpers';
 
 let table = new TablePage({
   body: {
@@ -206,7 +206,7 @@ module('Integration | basic', function() {
         </div>
       `);
 
-      await wait();
+      await settled();
       assert.equal(table.rows.length, itemsCount, 'renders the correct number of rows');
     });
 
@@ -226,7 +226,7 @@ module('Integration | basic', function() {
         </div>
       `);
 
-      await wait();
+      await settled();
       assert.ok(
         find('[data-test-inverse-yield]'),
         'expected the inverse yield content to be displayed'
@@ -300,7 +300,7 @@ module('Integration | basic', function() {
         {{/if}}
       `);
 
-      find('#container').style.height = '600px';
+      document.querySelector('#ember-testing-container').style.height = '600px';
       this.set('showComponent', false);
     });
   });

tests/integration/components/cell-test.js

@@ -1,12 +1,11 @@
-import { module, test } from 'ember-qunit';
+import { module, test } from 'qunit';
 import hbs from 'htmlbars-inline-precompile';
 
 import { generateTable, generateColumns } from '../../helpers/generate-table';
 import { componentModule } from '../../helpers/module';
 import { set, get } from '@ember/object';
 
-import { fillIn } from 'ember-native-dom-helpers';
-import wait from 'ember-test-helpers/wait';
+import { fillIn, settled } from '@ember/test-helpers';
 
 import TablePage from 'ember-table/test-support/pages/ember-table';
 import { run } from '@ember/runloop';
@@ -78,7 +77,7 @@ module('Integration | cell', function() {
         set(rows[0], 'B', 'Z');
       });
 
-      await wait();
+      await settled();
 
       assert.equal(table.getCell(0, 0).text, 'Y', 'renders correct updated value');
       assert.equal(table.getCell(0, 1).text, 'Z', 'renders correct updated value');
@@ -98,9 +97,9 @@ module('Integration | cell', function() {
       this.render(hbs`
         <div id="container" style="height: 500px;">
           {{#ember-table as |t|}}
-            {{ember-thead api=t columns=columns}}
+            {{ember-thead api=t columns=this.columns}}
 
-            {{#ember-tbody api=t rows=rows as |b|}}
+            {{#ember-tbody api=t rows=this.rows as |b|}}
               {{#ember-tr api=b as |r|}}
                 {{#ember-td api=r as |cellValue|}}
                   {{input value=cellValue}}
@@ -111,9 +110,9 @@ module('Integration | cell', function() {
         </div>
       `);
 
-      await wait();
+      await settled();
 
-      fillIn('input', 'Z');
+      await fillIn('input', 'Z');
 
       assert.equal(get(rows[0], 'A'), 'Z', 'value updated successfully');
     });
@@ -135,12 +134,12 @@ module('Integration | cell', function() {
 
       this.render(hbs`
         {{#ember-table as |t|}}
-          {{ember-thead api=t columns=columns}}
-          {{ember-tbody api=t rows=rows}}
+          {{ember-thead api=t columns=this.columns}}
+          {{ember-tbody api=t rows=this.rows}}
         {{/ember-table}}
       `);
 
-      await wait();
+      await settled();
 
       let row = table.rows.objectAt(0);
       let cells = row.cells.toArray();
@@ -171,15 +170,15 @@ module('Integration | cell', function() {
         {{#ember-table as |t|}}
           {{ember-thead
             api=t
-            columns=columns
+            columns=this.columns
             widthConstraint="eq-container-slack"
             initialFillMode="equal-column"}}
 
-          {{ember-tbody api=t rows=rows}}
+          {{ember-tbody api=t rows=this.rows}}
         {{/ember-table}}
       `);
 
-      await wait();
+      await settled();
 
       let header = table.headers.objectAt(0);
       let row = table.rows.objectAt(0);

tests/integration/components/footer-test.js

@@ -1,4 +1,4 @@
-import { module, test } from 'ember-qunit';
+import { module, test } from 'qunit';
 
 import { generateTable } from '../../helpers/generate-table';
 import { componentModule } from '../../helpers/module';

tests/integration/components/headers/cell-test.js

@@ -1,4 +1,4 @@
-import { module, test } from 'ember-qunit';
+import { module, test } from 'qunit';
 import { componentModule } from '../../../helpers/module';
 
 import { generateTable } from '../../../helpers/generate-table';