DEV: Make frontend tests work with ember-cli (#144)

test/javascripts/acceptance/list-queries-test.js.es6

@@ -6,6 +6,7 @@ import {
 } from "discourse/tests/helpers/qunit-helpers";
 import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";
 import I18n from "I18n";
+import { test } from "qunit";
 
 acceptance("Data Explorer Plugin | List Queries", function (needs) {
   needs.user();

test/javascripts/acceptance/run-query-test.js.es6

@@ -7,6 +7,7 @@ import {
 import { click, fillIn, visit } from "@ember/test-helpers";
 import { clearPopupMenuOptionsCallback } from "discourse/controllers/composer";
 import I18n from "I18n";
+import { test } from "qunit";
 
 acceptance("Data Explorer Plugin | Run Query", function (needs) {
   needs.user();

test/javascripts/unit/components/query-result-test.js.es6

@@ -1,99 +1,111 @@
-import { moduleFor } from "ember-qunit";
+import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
 
-moduleFor("component:query-result");
+discourseModule("Unit | Component | query-result", function () {
+  test("it transforms data for a chart", function (assert) {
+    const component = this.container
+      .factoryFor("component:query-result")
+      .create({ renderer: {} });
 
-test("it transforms data for a chart", function (assert) {
-  const results = {
-    colrender: [],
-    result_count: 2,
-    columns: ["user", "like_count"],
-    rows: [
-      ["user1", 10],
-      ["user2", 20],
-    ],
-  };
-  this.subject().setProperties({
-    content: results,
+    component.setProperties({
+      content: {
+        colrender: [],
+        result_count: 2,
+        columns: ["user", "like_count"],
+        rows: [
+          ["user1", 10],
+          ["user2", 20],
+        ],
+      },
+    });
+
+    assert.deepEqual(
+      component.chartLabels,
+      ["user1", "user2"],
+      "labels are correct"
+    );
+
+    assert.deepEqual(component.chartValues, [10, 20], "values are correct");
+
+    assert.deepEqual(
+      component.chartDatasetName,
+      "like_count",
+      "the dataset name is correct"
+    );
   });
 
-  assert.deepEqual(
-    this.subject().chartLabels,
-    ["user1", "user2"],
-    "labels are correct"
-  );
+  test("it uses descriptive chart labels instead of identifiers", function (assert) {
+    const component = this.container
+      .factoryFor("component:query-result")
+      .create({ renderer: {} });
 
-  assert.deepEqual(this.subject().chartValues, [10, 20], "values are correct");
+    component.setProperties({
+      content: {
+        colrender: { 0: "user" },
+        relations: {
+          user: [
+            { id: 1, username: "user1" },
+            { id: 2, username: "user2" },
+          ],
+        },
+        result_count: 2,
+        columns: ["user", "like_count"],
+        rows: [
+          [1, 10],
+          [2, 20],
+        ],
+      },
+    });
 
-  assert.deepEqual(
-    this.subject().chartDatasetName,
-    "like_count",
-    "the dataset name is correct"
-  );
-});
-
-test("it uses descriptive chart labels instead of identifiers", function (assert) {
-  const results = {
-    colrender: { 0: "user" },
-    relations: {
-      user: [
-        { id: 1, username: "user1" },
-        { id: 2, username: "user2" },
-      ],
-    },
-    result_count: 2,
-    columns: ["user", "like_count"],
-    rows: [
-      [1, 10],
-      [2, 20],
-    ],
-  };
-  this.subject().setProperties({
-    content: results,
+    assert.deepEqual(component.chartLabels, ["user1", "user2"]);
   });
 
-  assert.deepEqual(this.subject().chartLabels, ["user1", "user2"]);
-});
+  test("it uses an identifier as a chart label if labelSelector doesn't exist", function (assert) {
+    const component = this.container
+      .factoryFor("component:query-result")
+      .create({ renderer: {} });
 
-test("it uses an identifier as a chart label if labelSelector doesn't exist", function (assert) {
-  const results = {
-    colrender: { 0: "unknown_entity" },
-    relations: {
-      unknown_entity: [
-        { id: 1, username: "user1" },
-        { id: 2, username: "user2" },
-      ],
-    },
-    result_count: 2,
-    columns: ["user", "like_count"],
-    rows: [
-      [1, 10],
-      [2, 20],
-    ],
-  };
-  this.subject().setProperties({
-    content: results,
+    component.setProperties({
+      content: {
+        colrender: { 0: "unknown_entity" },
+        relations: {
+          unknown_entity: [
+            { id: 1, username: "user1" },
+            { id: 2, username: "user2" },
+          ],
+        },
+        result_count: 2,
+        columns: ["user", "like_count"],
+        rows: [
+          [1, 10],
+          [2, 20],
+        ],
+      },
+    });
+
+    assert.deepEqual(component.chartLabels, ["1", "2"]);
   });
 
-  assert.deepEqual(this.subject().chartLabels, ["1", "2"]);
-});
+  test("it cuts too long chart labels", function (assert) {
+    const component = this.container
+      .factoryFor("component:query-result")
+      .create({ renderer: {} });
 
-test("it cuts too long chart labels", function (assert) {
-  const results = {
-    colrender: [],
-    result_count: 2,
-    columns: ["user", "like_count"],
-    rows: [
-      ["This string is too long to be used as a label on a chart", 10],
-      ["This string is too long to be used as a label on a chart", 20],
-    ],
-  };
-  this.subject().setProperties({
-    content: results,
+    component.setProperties({
+      content: {
+        colrender: [],
+        result_count: 2,
+        columns: ["user", "like_count"],
+        rows: [
+          ["This string is too long to be used as a label on a chart", 10],
+          ["This string is too long to be used as a label on a chart", 20],
+        ],
+      },
+    });
+
+    assert.deepEqual(component.chartLabels, [
+      "This string is too long t...",
+      "This string is too long t...",
+    ]);
   });
-
-  assert.deepEqual(this.subject().chartLabels, [
-    "This string is too long t...",
-    "This string is too long t...",
-  ]);
 });