DEV: Update tests (#323)
new imports, resolved deprecations, qunit-dom, strict assertions, fixed flakes, migrated the legacy component test, typos, gjs
This commit is contained in:
Jarek Radosz
@@ -0,0 +1,24 @@
|
||||
import { array } from "@ember/helper";
|
||||
import { render } from "@ember/test-helpers";
|
||||
import { module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import DataExplorerBarChart from "../../discourse/components/data-explorer-bar-chart";
|
||||
|
||||
module(
|
||||
"Data Explorer Plugin | Integration | Component | data-explorer-bar-chart",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("renders a chart", async function (assert) {
|
||||
await render(<template>
|
||||
<DataExplorerBarChart
|
||||
@labels={{array "label_1" "label_2"}}
|
||||
@values={{array 115 1000}}
|
||||
@datasetName="data"
|
||||
/>
|
||||
</template>);
|
||||
|
||||
assert.dom("canvas").exists("renders a canvas");
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -1,26 +0,0 @@
|
||||
import hbs from "htmlbars-inline-precompile";
|
||||
import componentTest, {
|
||||
setupRenderingTest,
|
||||
} from "discourse/tests/helpers/component-test";
|
||||
import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers";
|
||||
|
||||
discourseModule(
|
||||
"Data Explorer Plugin | Integration | Component | data-explorer-bar-chart",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
componentTest("it renders a chart", {
|
||||
template: hbs`{{data-explorer-bar-chart}}`,
|
||||
|
||||
beforeEach() {
|
||||
this.set("labels", ["label_1", "label_2"]);
|
||||
this.set("values", [115, 1000]);
|
||||
this.set("datasetName", "data");
|
||||
},
|
||||
|
||||
async test(assert) {
|
||||
assert.ok(exists("canvas"), "it renders a canvas");
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,268 @@
|
||||
import { click, render } from "@ember/test-helpers";
|
||||
import { module, test } from "qunit";
|
||||
import { setupRenderingTest } from "discourse/tests/helpers/component-test";
|
||||
import I18n from "discourse-i18n";
|
||||
import QueryResult from "../../discourse/components/query-result";
|
||||
|
||||
module(
|
||||
"Data Explorer Plugin | Integration | Component | query-result",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("renders query results", async function (assert) {
|
||||
const content = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count"],
|
||||
rows: [
|
||||
["user1", 10],
|
||||
["user2", 20],
|
||||
],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert
|
||||
.dom("div.result-info button:nth-child(1) span")
|
||||
.hasText(I18n.t("explorer.download_json"), "renders the JSON button");
|
||||
|
||||
assert
|
||||
.dom("div.result-info button:nth-child(2) span")
|
||||
.hasText(I18n.t("explorer.download_csv"), "renders the CSV button");
|
||||
|
||||
assert
|
||||
.dom("div.result-info button:nth-child(3) span")
|
||||
.hasText(I18n.t("explorer.show_graph"), "renders the chart button");
|
||||
|
||||
assert.dom("div.result-about").exists("renders a query summary");
|
||||
|
||||
assert.dom("table thead tr th:nth-child(1)").hasText("user_name");
|
||||
assert.dom("table thead tr th:nth-child(2)").hasText("like_count");
|
||||
assert
|
||||
.dom("table tbody tr:nth-child(1) td:nth-child(1)")
|
||||
.hasText("user1");
|
||||
assert.dom("table tbody tr:nth-child(1) td:nth-child(2)").hasText("10");
|
||||
assert
|
||||
.dom("table tbody tr:nth-child(2) td:nth-child(1)")
|
||||
.hasText("user2");
|
||||
assert.dom("table tbody tr:nth-child(2) td:nth-child(2)").hasText("20");
|
||||
});
|
||||
|
||||
test("renders badge names in query results", async function (assert) {
|
||||
const content = {
|
||||
colrender: { 0: "badge" },
|
||||
relations: {
|
||||
badge: [
|
||||
{
|
||||
description: "description",
|
||||
icon: "fa-user",
|
||||
id: 1,
|
||||
name: "badge name",
|
||||
display_name: "badge display name",
|
||||
},
|
||||
],
|
||||
},
|
||||
result_count: 1,
|
||||
columns: ["badge_id"],
|
||||
rows: [[1]],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert
|
||||
.dom("table tbody tr:nth-child(1) td:nth-child(1) span")
|
||||
.hasText("badge display name");
|
||||
});
|
||||
|
||||
test("renders a post in query results", async function (assert) {
|
||||
const content = {
|
||||
colrender: { 0: "post" },
|
||||
relations: {
|
||||
post: [
|
||||
{
|
||||
description: "description",
|
||||
id: 1,
|
||||
topic_id: 1,
|
||||
post_number: 1,
|
||||
excerpt: "foo",
|
||||
username: "user1",
|
||||
avatar_template: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
result_count: 1,
|
||||
columns: [""],
|
||||
rows: [[1]],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert
|
||||
.dom("table tbody tr:nth-child(1) td:nth-child(1) aside")
|
||||
.hasAttribute("data-post", "1");
|
||||
assert
|
||||
.dom("table tbody tr:nth-child(1) td:nth-child(1) aside")
|
||||
.hasAttribute("data-topic", "1");
|
||||
});
|
||||
|
||||
test("renders a category_id in query results", async function (assert) {
|
||||
const content = {
|
||||
colrender: { 0: "category" },
|
||||
relations: {
|
||||
category: [
|
||||
{
|
||||
id: 1,
|
||||
name: "foo",
|
||||
slug: "foo",
|
||||
topic_count: 0,
|
||||
position: 1,
|
||||
description: "a category",
|
||||
can_edit: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
result_count: 1,
|
||||
columns: [""],
|
||||
rows: [[1]],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert
|
||||
.dom(
|
||||
"table tbody tr:nth-child(1) td:nth-child(1) .badge-category__name"
|
||||
)
|
||||
.exists();
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
module(
|
||||
"Data Explorer Plugin | Integration | Component | query-result | chart",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
test("navigation between a table and a chart works", async function (assert) {
|
||||
const content = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count"],
|
||||
rows: [
|
||||
["user1", 10],
|
||||
["user2", 20],
|
||||
],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert
|
||||
.dom("div.result-info button:nth-child(3) span")
|
||||
.hasText(
|
||||
I18n.t("explorer.show_graph"),
|
||||
"the chart button was rendered"
|
||||
);
|
||||
assert.dom("table").exists("the table was rendered");
|
||||
|
||||
await click("div.result-info button:nth-child(3)");
|
||||
|
||||
assert
|
||||
.dom("div.result-info button:nth-child(3) span")
|
||||
.hasText(
|
||||
I18n.t("explorer.show_table"),
|
||||
"the chart button was changed to the table button"
|
||||
);
|
||||
assert.dom("canvas").exists("the chart was rendered");
|
||||
|
||||
await click("div.result-info button:nth-child(3)");
|
||||
assert
|
||||
.dom("div.result-info button:nth-child(3) span")
|
||||
.hasText(
|
||||
I18n.t("explorer.show_graph"),
|
||||
"the table button was changed to the chart button"
|
||||
);
|
||||
assert.dom("table").exists("the table was rendered");
|
||||
});
|
||||
|
||||
test("renders a chart button when data has two columns and numbers in the second column", async function (assert) {
|
||||
const content = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count"],
|
||||
rows: [
|
||||
["user1", 10],
|
||||
["user2", 20],
|
||||
],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert
|
||||
.dom("div.result-info button:nth-child(3) span")
|
||||
.hasText(I18n.t("explorer.show_graph"));
|
||||
});
|
||||
|
||||
test("doesn't render a chart button when data contains identifiers in the second column", async function (assert) {
|
||||
const content = {
|
||||
colrender: { 1: "user" },
|
||||
relations: {
|
||||
user: [
|
||||
{ id: 1, username: "user1" },
|
||||
{ id: 2, username: "user2" },
|
||||
],
|
||||
},
|
||||
result_count: 2,
|
||||
columns: ["topic_id", "user_id"],
|
||||
rows: [
|
||||
[1, 10],
|
||||
[2, 20],
|
||||
],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert.dom("div.result-info button:nth-child(3)").doesNotExist();
|
||||
});
|
||||
|
||||
test("doesn't render a chart button when data contains one column", async function (assert) {
|
||||
const content = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name"],
|
||||
rows: [["user1"], ["user2"]],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert.dom("div.result-info button:nth-child(3)").doesNotExist();
|
||||
});
|
||||
|
||||
test("doesn't render a chart button when data contains more than two columns", async function (assert) {
|
||||
const content = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count", "post_count"],
|
||||
rows: [
|
||||
["user1", 10, 1],
|
||||
["user2", 20, 2],
|
||||
],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert.dom("div.result-info button:nth-child(3)").doesNotExist();
|
||||
});
|
||||
|
||||
test("handles no results", async function (assert) {
|
||||
const content = {
|
||||
colrender: [],
|
||||
result_count: 0,
|
||||
columns: ["user_name", "like_count", "post_count"],
|
||||
rows: [],
|
||||
};
|
||||
|
||||
await render(<template><QueryResult @content={{content}} /></template>);
|
||||
|
||||
assert.dom("table tbody tr").doesNotExist("renders no results");
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -1,348 +0,0 @@
|
||||
import { click } from "@ember/test-helpers";
|
||||
import hbs from "htmlbars-inline-precompile";
|
||||
import componentTest, {
|
||||
setupRenderingTest,
|
||||
} from "discourse/tests/helpers/component-test";
|
||||
import {
|
||||
discourseModule,
|
||||
exists,
|
||||
query,
|
||||
} from "discourse/tests/helpers/qunit-helpers";
|
||||
import I18n from "I18n";
|
||||
|
||||
discourseModule(
|
||||
"Data Explorer Plugin | Integration | Component | query-result",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
componentTest("it renders query results", {
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count"],
|
||||
rows: [
|
||||
["user1", 10],
|
||||
["user2", 20],
|
||||
],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(
|
||||
query("div.result-info button:nth-child(1) span").innerText ===
|
||||
I18n.t("explorer.download_json"),
|
||||
"it renders the JSON button"
|
||||
);
|
||||
|
||||
assert.ok(
|
||||
query("div.result-info button:nth-child(2) span").innerText ===
|
||||
I18n.t("explorer.download_csv"),
|
||||
"it renders the CSV button"
|
||||
);
|
||||
|
||||
assert.ok(
|
||||
query("div.result-info button:nth-child(3) span").innerText ===
|
||||
I18n.t("explorer.show_graph"),
|
||||
"it renders the chart button"
|
||||
);
|
||||
|
||||
assert.ok(exists("div.result-about"), "it renders a query summary");
|
||||
|
||||
assert.ok(
|
||||
query("table thead tr th:nth-child(1)").innerText === "user_name" &&
|
||||
query("table thead tr th:nth-child(2)").innerText ===
|
||||
"like_count" &&
|
||||
query("table tbody tr:nth-child(1) td:nth-child(1)").innerText ===
|
||||
"user1" &&
|
||||
query("table tbody tr:nth-child(1) td:nth-child(2)").innerText ===
|
||||
"10" &&
|
||||
query("table tbody tr:nth-child(2) td:nth-child(1)").innerText ===
|
||||
"user2" &&
|
||||
query("table tbody tr:nth-child(2) td:nth-child(2)").innerText ===
|
||||
"20",
|
||||
"it renders a table with data"
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
componentTest("it renders badge names in query results", {
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: { 0: "badge" },
|
||||
relations: {
|
||||
badge: [
|
||||
{
|
||||
description: "description",
|
||||
icon: "fa-user",
|
||||
id: 1,
|
||||
name: "badge name",
|
||||
display_name: "badge display name",
|
||||
},
|
||||
],
|
||||
},
|
||||
result_count: 1,
|
||||
columns: ["badge_id"],
|
||||
rows: [[1]],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(
|
||||
query("table tbody tr:nth-child(1) td:nth-child(1) span")
|
||||
.innerText === "badge display name"
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
componentTest("it renders a post in query results", {
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: { 0: "post" },
|
||||
relations: {
|
||||
post: [
|
||||
{
|
||||
description: "description",
|
||||
id: 1,
|
||||
topic_id: 1,
|
||||
post_number: 1,
|
||||
excerpt: "foo",
|
||||
username: "user1",
|
||||
avatar_template: "",
|
||||
},
|
||||
],
|
||||
},
|
||||
result_count: 1,
|
||||
columns: [""],
|
||||
rows: [[1]],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(
|
||||
query("table tbody tr:nth-child(1) td:nth-child(1) aside").dataset
|
||||
.post === "1"
|
||||
);
|
||||
|
||||
assert.ok(
|
||||
query("table tbody tr:nth-child(1) td:nth-child(1) aside").dataset
|
||||
.topic === "1"
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
componentTest("it renders a category_id in query results", {
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: { 0: "category" },
|
||||
relations: {
|
||||
category: [
|
||||
{
|
||||
id: 1,
|
||||
name: "foo",
|
||||
slug: "foo",
|
||||
topic_count: 0,
|
||||
position: 1,
|
||||
description: "a category",
|
||||
can_edit: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
result_count: 1,
|
||||
columns: [""],
|
||||
rows: [[1]],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(
|
||||
exists(
|
||||
"table tbody tr:nth-child(1) td:nth-child(1) .badge-category__name"
|
||||
)
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
discourseModule(
|
||||
"Data Explorer Plugin | Integration | Component | query-result | chart",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
componentTest("navigation between a table and a chart works", {
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count"],
|
||||
rows: [
|
||||
["user1", 10],
|
||||
["user2", 20],
|
||||
],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
async test(assert) {
|
||||
assert.equal(
|
||||
query("div.result-info button:nth-child(3) span").innerText,
|
||||
I18n.t("explorer.show_graph"),
|
||||
"the chart button was rendered"
|
||||
);
|
||||
assert.ok(exists("table"), "the table was rendered");
|
||||
|
||||
await click("div.result-info button:nth-child(3)");
|
||||
|
||||
assert.equal(
|
||||
query("div.result-info button:nth-child(3) span").innerText,
|
||||
I18n.t("explorer.show_table"),
|
||||
"the chart button was changed to the table button"
|
||||
);
|
||||
assert.ok(exists("canvas"), "the chart was rendered");
|
||||
|
||||
await click("div.result-info button:nth-child(3)");
|
||||
assert.equal(
|
||||
query("div.result-info button:nth-child(3) span").innerText,
|
||||
I18n.t("explorer.show_graph"),
|
||||
"the table button was changed to the chart button"
|
||||
);
|
||||
assert.ok(exists("table"), "the table was rendered");
|
||||
},
|
||||
});
|
||||
|
||||
componentTest(
|
||||
"it renders a chart button when data has two columns and numbers in the second column",
|
||||
{
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count"],
|
||||
rows: [
|
||||
["user1", 10],
|
||||
["user2", 20],
|
||||
],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.equal(
|
||||
query("div.result-info button:nth-child(3) span").innerText,
|
||||
I18n.t("explorer.show_graph")
|
||||
);
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
componentTest(
|
||||
"it doesn't render a chart button when data contains identifiers in the second column",
|
||||
{
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: { 1: "user" },
|
||||
relations: {
|
||||
user: [
|
||||
{ id: 1, username: "user1" },
|
||||
{ id: 2, username: "user2" },
|
||||
],
|
||||
},
|
||||
result_count: 2,
|
||||
columns: ["topic_id", "user_id"],
|
||||
rows: [
|
||||
[1, 10],
|
||||
[2, 20],
|
||||
],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(!exists("div.result-info button:nth-child(3)"));
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
componentTest(
|
||||
"it doesn't render a chart button when data contains one column",
|
||||
{
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name"],
|
||||
rows: [["user1"], ["user2"]],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(!exists("div.result-info button:nth-child(3)"));
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
componentTest(
|
||||
"it doesn't render a chart button when data contains more than two columns",
|
||||
{
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: [],
|
||||
result_count: 2,
|
||||
columns: ["user_name", "like_count", "post_count"],
|
||||
rows: [
|
||||
["user1", 10, 1],
|
||||
["user2", 20, 2],
|
||||
],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(!exists("div.result-info button:nth-child(3)"));
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
componentTest("it handles no results", {
|
||||
template: hbs`<QueryResult @content={{content}} />`,
|
||||
|
||||
beforeEach() {
|
||||
const results = {
|
||||
colrender: [],
|
||||
result_count: 0,
|
||||
columns: ["user_name", "like_count", "post_count"],
|
||||
rows: [],
|
||||
};
|
||||
this.set("content", results);
|
||||
},
|
||||
|
||||
test(assert) {
|
||||
assert.ok(!exists("table tbody tr"), "renders no results");
|
||||
},
|
||||
});
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user