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,10 +1,14 @@
-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 = {
+    component.setProperties({
+      content: {
         colrender: [],
         result_count: 2,
         columns: ["user", "like_count"],
@@ -12,28 +16,31 @@ test("it transforms data for a chart", function (assert) {
           ["user1", 10],
           ["user2", 20],
         ],
-  };
-  this.subject().setProperties({
-    content: results,
+      },
     });
 
     assert.deepEqual(
-    this.subject().chartLabels,
+      component.chartLabels,
       ["user1", "user2"],
       "labels are correct"
     );
 
-  assert.deepEqual(this.subject().chartValues, [10, 20], "values are correct");
+    assert.deepEqual(component.chartValues, [10, 20], "values are correct");
 
     assert.deepEqual(
-    this.subject().chartDatasetName,
+      component.chartDatasetName,
       "like_count",
       "the dataset name is correct"
     );
-});
+  });
 
-test("it uses descriptive chart labels instead of identifiers", function (assert) {
-  const results = {
+  test("it uses descriptive chart labels instead of identifiers", function (assert) {
+    const component = this.container
+      .factoryFor("component:query-result")
+      .create({ renderer: {} });
+
+    component.setProperties({
+      content: {
         colrender: { 0: "user" },
         relations: {
           user: [
@@ -47,16 +54,19 @@ test("it uses descriptive chart labels instead of identifiers", function (assert
           [1, 10],
           [2, 20],
         ],
-  };
-  this.subject().setProperties({
-    content: results,
+      },
     });
 
-  assert.deepEqual(this.subject().chartLabels, ["user1", "user2"]);
-});
+    assert.deepEqual(component.chartLabels, ["user1", "user2"]);
+  });
 
-test("it uses an identifier as a chart label if labelSelector doesn't exist", function (assert) {
-  const results = {
+  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: {} });
+
+    component.setProperties({
+      content: {
         colrender: { 0: "unknown_entity" },
         relations: {
           unknown_entity: [
@@ -70,16 +80,19 @@ test("it uses an identifier as a chart label if labelSelector doesn't exist", fu
           [1, 10],
           [2, 20],
         ],
-  };
-  this.subject().setProperties({
-    content: results,
+      },
     });
 
-  assert.deepEqual(this.subject().chartLabels, ["1", "2"]);
-});
+    assert.deepEqual(component.chartLabels, ["1", "2"]);
+  });
 
-test("it cuts too long chart labels", function (assert) {
-  const results = {
+  test("it cuts too long chart labels", function (assert) {
+    const component = this.container
+      .factoryFor("component:query-result")
+      .create({ renderer: {} });
+
+    component.setProperties({
+      content: {
         colrender: [],
         result_count: 2,
         columns: ["user", "like_count"],
@@ -87,13 +100,12 @@ test("it cuts too long chart labels", function (assert) {
           ["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,
+      },
     });
 
-  assert.deepEqual(this.subject().chartLabels, [
+    assert.deepEqual(component.chartLabels, [
       "This string is too long t...",
       "This string is too long t...",
     ]);
+  });
 });