chore: re-write tests to use modern Ember features

BREAKING CHANGE: Error about missing component is no longer swallowed in Production

.eslintrc.js

@@ -49,5 +49,13 @@ module.exports = {
       plugins: ["node"],
       extends: ["plugin:node/recommended"],
     },
+    // test files
+    {
+      files: ["tests/**"],
+      rules: {
+        "ember/closure-actions": "off",
+        "ember/no-jquery": "off",
+      },
+    },
   ],
 };

addon/components/ember-islands.js

@@ -1,11 +1,11 @@
-import Ember from "ember";
+import Component from "@ember/component";
 import Reconciler from "ember-islands/utils/reconciler";
 import queryIslandComponents from "ember-islands/utils/query-island-components";
 import getRenderComponent from "ember-islands/utils/get-render-component";
 
 let eiInstance;
 
-export default Ember.Component.extend({
+export default Component.extend({
   tagName: "",
 
   init() {

addon/utils/get-render-component.js

@@ -1,14 +1,14 @@
+import { getOwner } from "@ember/application";
+import Component from "@ember/component";
 import Ember from "ember";
-const { getOwner, Component, Logger } = Ember;
+const { Logger } = Ember;
 
 export default function getRenderComponent(emberObject) {
   let owner = getOwner(emberObject);
 
   return function renderComponent({ name, attrs, element }) {
     let { component, layout } = lookupComponent(owner, name);
-    Ember.assert(missingComponentMessage(name), component);
 
-    // This can only be true in production mode where assert is a no-op.
     if (!component) {
       ({ component, layout } = provideMissingComponentInProductionMode(
         owner,

addon/utils/reconciler.js

@@ -1,5 +1,4 @@
-import Ember from "ember";
-const { guidFor } = Ember;
+import { guidFor } from "@ember/object/internals";
 
 export default class Reconciler {
   /**

app/components/ember-islands/missing-component.js

@@ -1,3 +1,3 @@
-import Ember from "ember";
+import Component from "@ember/component";
 
-export default Ember.Component.extend();
+export default Component.extend();

tests/acceptance/inner-content-test.js

@@ -1,41 +1,32 @@
-import Ember from "ember";
 import { module, test } from "qunit";
-import startApp from "../helpers/start-app";
+import { setupApplicationTest } from "ember-qunit";
+import { getRootElement, findAll, visit } from "@ember/test-helpers";
 
-var application;
+module("Acceptance | Using Inner Content", function (hooks) {
+  setupApplicationTest(hooks);
 
-module("Acceptance: Using Inner Content", {
-  beforeEach: function () {
-    document.getElementById("ember-testing").innerHTML = `
+  hooks.beforeEach(function () {
+    getRootElement().innerHTML = `
       <div id='element-with-inner-content'
            data-component='inner-content-component'
            data-attrs='{"title": "Component Title"}'>
 
         <div id='inner-content'></div>
       </div>
     `;
+  });
 
-    application = startApp();
-  },
-
-  afterEach: function () {
-    Ember.run(application, "destroy");
-    document.getElementById("ember-testing").innerHTML = "";
-  },
-});
-
-test("extracting innerContent", function (assert) {
-  assert.expect(2);
-  visit("/");
+  test("extracting innerContent", async function (assert) {
+    assert.expect(2);
+    await visit("/");
 
-  andThen(function () {
     assert.equal(
-      find("#element-with-inner-content > #inner-content").length,
+      findAll("#element-with-inner-content > #inner-content").length,
       0,
       "The inner content of the server-rendered element is replaced"
     );
     assert.equal(
-      find(".inner-content-component > #inner-content").length,
+      findAll(".inner-content-component > #inner-content").length,
       1,
       "The innerContent is passed to components"
     );

tests/acceptance/missing-component-test.js

@@ -1,52 +1,46 @@
-import Ember from "ember";
 import { module, test } from "qunit";
-import startApp from "../helpers/start-app";
-
-let application, originalAssert, originalError, errors;
-
-module("Acceptance: Dealing with missing components in production", {
-  beforeEach: function () {
-    // Put some static content on the page before the Ember application loads.
-    // This mimics server-rendered content.
-    document.getElementById("ember-testing").innerHTML = `
-      <div data-component='oops-not-component' data-attrs='{"title": "Component Title"}'></div>
-      <div data-component='top-level-component'></div>
-    `;
+import { setupApplicationTest } from "ember-qunit";
+import { getRootElement, visit } from "@ember/test-helpers";
+import Ember from "ember";
 
-    // Replace Ember's `assert` function with a no-op. This mirrors Ember's
-    // behavior in production mode.
-    originalAssert = Ember.assert;
-    Ember.assert = () => {};
+let originalError, errors;
 
+module("Acceptance | Dealing with missing components in production", function (
+  hooks
+) {
+  hooks.beforeEach(function () {
     // Replace Ember's Logger.error with a fake that records the errors.
     originalError = Ember.Logger.error;
     errors = [];
     Ember.Logger.error = (message) => {
       errors.push(message);
     };
+  });
 
-    application = startApp();
-  },
+  setupApplicationTest(hooks);
 
-  afterEach: function () {
-    Ember.assert = originalAssert;
-    Ember.Logger.error = originalError;
+  hooks.beforeEach(function () {
+    // Put some static content on the page before the Ember application loads.
+    // This mimics server-rendered content.
+    getRootElement().innerHTML = `
+      <div data-component='oops-not-component' data-attrs='{"title": "Component Title"}'></div>
+      <div data-component='top-level-component'></div>
+    `;
+  });
 
-    Ember.run(application, "destroy");
-    document.getElementById("ember-testing").innerHTML = "";
-  },
-});
+  hooks.afterEach(function () {
+    Ember.Logger.error = originalError;
+  });
 
-test("rendering the found component", function (assert) {
-  assert.expect(2);
-  visit("/");
+  test("rendering the found component", async function (assert) {
+    await visit("/");
 
-  andThen(function () {
-    assert.equal(
-      find("p:contains(top level component)").length,
-      1,
-      "The top level component was rendered"
-    );
+    assert
+      .dom("p")
+      .includesText(
+        "top level component",
+        "The top level component was rendered"
+      );
     assert.deepEqual(
       errors,
       [

tests/acceptance/rendering-components-test.js

@@ -1,93 +1,49 @@
-import Ember from "ember";
 import { module, test } from "qunit";
-import startApp from "../helpers/start-app";
+import { setupApplicationTest } from "ember-qunit";
+import { click, getRootElement, visit } from "@ember/test-helpers";
 
-var application;
+module("Acceptance | Rendering Components", function (hooks) {
+  setupApplicationTest(hooks);
 
-module("Acceptance: Rendering Components", {
-  beforeEach: function () {
+  hooks.beforeEach(function () {
     // Put some static content on the page before the Ember application loads.
     // This mimics server-rendered content.
-    document.getElementById("ember-testing").innerHTML = `
+    getRootElement().innerHTML = `
       <p>server-rendered content top</p>
       <div data-component='top-level-component' data-attrs='{"title": "Component Title"}'></div>
       <p>server-rendered content bottom</p>
     `;
-
-    application = startApp();
-  },
-
-  afterEach: function () {
-    Ember.run(application, "destroy");
-    document.getElementById("ember-testing").innerHTML = "";
-  },
-});
-
-test("rendering a component with an attribute", function (assert) {
-  assert.expect(2);
-  visit("/");
-
-  andThen(function () {
-    assert.equal(
-      find("p:contains(top level component)").length,
-      1,
-      "The top level component was rendered"
-    );
-    assert.equal(
-      find("#component-title:contains(Component Title)").length,
-      1,
-      "Passed in attributes can be used"
-    );
   });
-});
 
-test("using component events", function (assert) {
-  assert.expect(2);
-  visit("/");
+  test("rendering a component with an attribute", async function (assert) {
+    await visit("/");
+
+    assert
+      .dom("[data-test-top-level-component-message]")
+      .exists("The top level component was rendered");
 
-  andThen(function () {
-    assert.equal(
-      find("#expanded-content").length,
-      0,
-      "Expanded content is hidden at first"
-    );
+    assert
+      .dom("#component-title")
+      .includesText("Component Title", "Passed in attributes can be used");
   });
 
-  click("#toggle-expanded");
+  test("using component events", async function (assert) {
+    await visit("/");
 
-  andThen(function () {
-    assert.equal(
-      find("#expanded-content").length,
-      1,
-      "The expanded content is showing"
-    );
-  });
-});
+    assert
+      .dom("#expanded-content")
+      .doesNotExist("Expanded content is hidden at first");
 
-test("using nested components", function (assert) {
-  assert.expect(3);
-  visit("/");
+    await click("#toggle-expanded");
 
-  andThen(function () {
-    assert.equal(
-      find("p:contains(A nested component)").length,
-      1,
-      "The nested component was rendered"
-    );
-    assert.equal(
-      find("#expanded-content").length,
-      0,
-      "Expanded content is hidden at first"
-    );
+    assert.dom("#expanded-content").exists("The expanded content is showing");
   });
 
-  click("#nested-component-toggle-expanded");
+  test("using nested components", async function (assert) {
+    await visit("/");
 
-  andThen(function () {
-    assert.equal(
-      find("#expanded-content").length,
-      1,
-      "The expanded content is showing"
-    );
+    assert
+      .dom("[data-test-nested-component-message]")
+      .exists("The nested component was rendered");
   });
 });

tests/dummy/app/components/dummy-application.js

@@ -1,6 +1,6 @@
-import Ember from "ember";
+import Component from "@ember/component";
 
-export default Ember.Component.extend({
+export default Component.extend({
   init() {
     this._super(...arguments);
     this.isShowingIslandComponents = true;

tests/dummy/app/components/inner-content-component.js

@@ -1,5 +1,5 @@
-import Ember from "ember";
+import Component from "@ember/component";
 
-export default Ember.Component.extend({
+export default Component.extend({
   classNameBindings: [":inner-content-component"],
 });

tests/dummy/app/components/js-only-component.js

@@ -1,6 +1,4 @@
-import Ember from "ember";
-
-const { Component } = Ember;
+import Component from "@ember/component";
 
 export default Component.extend({
   classNames: ["js-only-component"],

tests/dummy/app/components/nested-component.js

@@ -1,6 +1,6 @@
-import Ember from "ember";
+import Component from "@ember/component";
 
-export default Ember.Component.extend({
+export default Component.extend({
   isExpanded: false,
 
   actions: {

tests/dummy/app/components/stateful-component.js

@@ -1,6 +1,5 @@
-import Ember from "ember";
-
-const { Component, computed } = Ember;
+import Component from "@ember/component";
+import { computed } from "@ember/object";
 
 export default Component.extend({
   tagName: "button",

tests/dummy/app/components/top-level-component.js

@@ -1,6 +1,6 @@
-import Ember from "ember";
+import Component from "@ember/component";
 
-export default Ember.Component.extend({
+export default Component.extend({
   isExpanded: false,
   classNameBindings: [":top-level-component"],
 

tests/dummy/app/templates/components/nested-component.hbs

@@ -1,3 +1,3 @@
-<p>A nested component</p>
+<p data-test-nested-component-message>A nested component</p>
 
 <button id='nested-component-toggle-expanded' {{action 'nestedAction'}}>Nested component action</button>

tests/dummy/app/templates/components/top-level-component.hbs

@@ -1,6 +1,6 @@
 <h1 id="component-title">{{title}}</h1>
 
-<p>top level component</p>
+<p data-test-top-level-component-message>top level component</p>
 
 <button id="toggle-expanded" {{action 'toggleIsExpanded'}}>Expand something</button>