|
| 1 | +import { click, render } from "@ember/test-helpers"; |
| 2 | +import { module, test } from "qunit"; |
| 3 | +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; |
| 4 | +import I18n from "discourse-i18n"; |
| 5 | +import QueryResult from "../../discourse/components/query-result"; |
| 6 | + |
| 7 | +module( |
| 8 | + "Data Explorer Plugin | Integration | Component | query-result", |
| 9 | + function (hooks) { |
| 10 | + setupRenderingTest(hooks); |
| 11 | + |
| 12 | + test("renders query results", async function (assert) { |
| 13 | + const content = { |
| 14 | + colrender: [], |
| 15 | + result_count: 2, |
| 16 | + columns: ["user_name", "like_count"], |
| 17 | + rows: [ |
| 18 | + ["user1", 10], |
| 19 | + ["user2", 20], |
| 20 | + ], |
| 21 | + }; |
| 22 | + |
| 23 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 24 | + |
| 25 | + assert |
| 26 | + .dom("div.result-info button:nth-child(1) span") |
| 27 | + .hasText(I18n.t("explorer.download_json"), "renders the JSON button"); |
| 28 | + |
| 29 | + assert |
| 30 | + .dom("div.result-info button:nth-child(2) span") |
| 31 | + .hasText(I18n.t("explorer.download_csv"), "renders the CSV button"); |
| 32 | + |
| 33 | + assert |
| 34 | + .dom("div.result-info button:nth-child(3) span") |
| 35 | + .hasText(I18n.t("explorer.show_graph"), "renders the chart button"); |
| 36 | + |
| 37 | + assert.dom("div.result-about").exists("renders a query summary"); |
| 38 | + |
| 39 | + assert.dom("table thead tr th:nth-child(1)").hasText("user_name"); |
| 40 | + assert.dom("table thead tr th:nth-child(2)").hasText("like_count"); |
| 41 | + assert |
| 42 | + .dom("table tbody tr:nth-child(1) td:nth-child(1)") |
| 43 | + .hasText("user1"); |
| 44 | + assert.dom("table tbody tr:nth-child(1) td:nth-child(2)").hasText("10"); |
| 45 | + assert |
| 46 | + .dom("table tbody tr:nth-child(2) td:nth-child(1)") |
| 47 | + .hasText("user2"); |
| 48 | + assert.dom("table tbody tr:nth-child(2) td:nth-child(2)").hasText("20"); |
| 49 | + }); |
| 50 | + |
| 51 | + test("renders badge names in query results", async function (assert) { |
| 52 | + const content = { |
| 53 | + colrender: { 0: "badge" }, |
| 54 | + relations: { |
| 55 | + badge: [ |
| 56 | + { |
| 57 | + description: "description", |
| 58 | + icon: "fa-user", |
| 59 | + id: 1, |
| 60 | + name: "badge name", |
| 61 | + display_name: "badge display name", |
| 62 | + }, |
| 63 | + ], |
| 64 | + }, |
| 65 | + result_count: 1, |
| 66 | + columns: ["badge_id"], |
| 67 | + rows: [[1]], |
| 68 | + }; |
| 69 | + |
| 70 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 71 | + |
| 72 | + assert |
| 73 | + .dom("table tbody tr:nth-child(1) td:nth-child(1) span") |
| 74 | + .hasText("badge display name"); |
| 75 | + }); |
| 76 | + |
| 77 | + test("renders a post in query results", async function (assert) { |
| 78 | + const content = { |
| 79 | + colrender: { 0: "post" }, |
| 80 | + relations: { |
| 81 | + post: [ |
| 82 | + { |
| 83 | + description: "description", |
| 84 | + id: 1, |
| 85 | + topic_id: 1, |
| 86 | + post_number: 1, |
| 87 | + excerpt: "foo", |
| 88 | + username: "user1", |
| 89 | + avatar_template: "", |
| 90 | + }, |
| 91 | + ], |
| 92 | + }, |
| 93 | + result_count: 1, |
| 94 | + columns: [""], |
| 95 | + rows: [[1]], |
| 96 | + }; |
| 97 | + |
| 98 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 99 | + |
| 100 | + assert |
| 101 | + .dom("table tbody tr:nth-child(1) td:nth-child(1) aside") |
| 102 | + .hasAttribute("data-post", "1"); |
| 103 | + assert |
| 104 | + .dom("table tbody tr:nth-child(1) td:nth-child(1) aside") |
| 105 | + .hasAttribute("data-topic", "1"); |
| 106 | + }); |
| 107 | + |
| 108 | + test("renders a category_id in query results", async function (assert) { |
| 109 | + const content = { |
| 110 | + colrender: { 0: "category" }, |
| 111 | + relations: { |
| 112 | + category: [ |
| 113 | + { |
| 114 | + id: 1, |
| 115 | + name: "foo", |
| 116 | + slug: "foo", |
| 117 | + topic_count: 0, |
| 118 | + position: 1, |
| 119 | + description: "a category", |
| 120 | + can_edit: true, |
| 121 | + }, |
| 122 | + ], |
| 123 | + }, |
| 124 | + result_count: 1, |
| 125 | + columns: [""], |
| 126 | + rows: [[1]], |
| 127 | + }; |
| 128 | + |
| 129 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 130 | + |
| 131 | + assert |
| 132 | + .dom( |
| 133 | + "table tbody tr:nth-child(1) td:nth-child(1) .badge-category__name" |
| 134 | + ) |
| 135 | + .exists(); |
| 136 | + }); |
| 137 | + } |
| 138 | +); |
| 139 | + |
| 140 | +module( |
| 141 | + "Data Explorer Plugin | Integration | Component | query-result | chart", |
| 142 | + function (hooks) { |
| 143 | + setupRenderingTest(hooks); |
| 144 | + |
| 145 | + test("navigation between a table and a chart works", async function (assert) { |
| 146 | + const content = { |
| 147 | + colrender: [], |
| 148 | + result_count: 2, |
| 149 | + columns: ["user_name", "like_count"], |
| 150 | + rows: [ |
| 151 | + ["user1", 10], |
| 152 | + ["user2", 20], |
| 153 | + ], |
| 154 | + }; |
| 155 | + |
| 156 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 157 | + |
| 158 | + assert |
| 159 | + .dom("div.result-info button:nth-child(3) span") |
| 160 | + .hasText( |
| 161 | + I18n.t("explorer.show_graph"), |
| 162 | + "the chart button was rendered" |
| 163 | + ); |
| 164 | + assert.dom("table").exists("the table was rendered"); |
| 165 | + |
| 166 | + await click("div.result-info button:nth-child(3)"); |
| 167 | + |
| 168 | + assert |
| 169 | + .dom("div.result-info button:nth-child(3) span") |
| 170 | + .hasText( |
| 171 | + I18n.t("explorer.show_table"), |
| 172 | + "the chart button was changed to the table button" |
| 173 | + ); |
| 174 | + assert.dom("canvas").exists("the chart was rendered"); |
| 175 | + |
| 176 | + await click("div.result-info button:nth-child(3)"); |
| 177 | + assert |
| 178 | + .dom("div.result-info button:nth-child(3) span") |
| 179 | + .hasText( |
| 180 | + I18n.t("explorer.show_graph"), |
| 181 | + "the table button was changed to the chart button" |
| 182 | + ); |
| 183 | + assert.dom("table").exists("the table was rendered"); |
| 184 | + }); |
| 185 | + |
| 186 | + test("renders a chart button when data has two columns and numbers in the second column", async function (assert) { |
| 187 | + const content = { |
| 188 | + colrender: [], |
| 189 | + result_count: 2, |
| 190 | + columns: ["user_name", "like_count"], |
| 191 | + rows: [ |
| 192 | + ["user1", 10], |
| 193 | + ["user2", 20], |
| 194 | + ], |
| 195 | + }; |
| 196 | + |
| 197 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 198 | + |
| 199 | + assert |
| 200 | + .dom("div.result-info button:nth-child(3) span") |
| 201 | + .hasText(I18n.t("explorer.show_graph")); |
| 202 | + }); |
| 203 | + |
| 204 | + test("doesn't render a chart button when data contains identifiers in the second column", async function (assert) { |
| 205 | + const content = { |
| 206 | + colrender: { 1: "user" }, |
| 207 | + relations: { |
| 208 | + user: [ |
| 209 | + { id: 1, username: "user1" }, |
| 210 | + { id: 2, username: "user2" }, |
| 211 | + ], |
| 212 | + }, |
| 213 | + result_count: 2, |
| 214 | + columns: ["topic_id", "user_id"], |
| 215 | + rows: [ |
| 216 | + [1, 10], |
| 217 | + [2, 20], |
| 218 | + ], |
| 219 | + }; |
| 220 | + |
| 221 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 222 | + |
| 223 | + assert.dom("div.result-info button:nth-child(3)").doesNotExist(); |
| 224 | + }); |
| 225 | + |
| 226 | + test("doesn't render a chart button when data contains one column", async function (assert) { |
| 227 | + const content = { |
| 228 | + colrender: [], |
| 229 | + result_count: 2, |
| 230 | + columns: ["user_name"], |
| 231 | + rows: [["user1"], ["user2"]], |
| 232 | + }; |
| 233 | + |
| 234 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 235 | + |
| 236 | + assert.dom("div.result-info button:nth-child(3)").doesNotExist(); |
| 237 | + }); |
| 238 | + |
| 239 | + test("doesn't render a chart button when data contains more than two columns", async function (assert) { |
| 240 | + const content = { |
| 241 | + colrender: [], |
| 242 | + result_count: 2, |
| 243 | + columns: ["user_name", "like_count", "post_count"], |
| 244 | + rows: [ |
| 245 | + ["user1", 10, 1], |
| 246 | + ["user2", 20, 2], |
| 247 | + ], |
| 248 | + }; |
| 249 | + |
| 250 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 251 | + |
| 252 | + assert.dom("div.result-info button:nth-child(3)").doesNotExist(); |
| 253 | + }); |
| 254 | + |
| 255 | + test("handles no results", async function (assert) { |
| 256 | + const content = { |
| 257 | + colrender: [], |
| 258 | + result_count: 0, |
| 259 | + columns: ["user_name", "like_count", "post_count"], |
| 260 | + rows: [], |
| 261 | + }; |
| 262 | + |
| 263 | + await render(<template><QueryResult @content={{content}} /></template>); |
| 264 | + |
| 265 | + assert.dom("table tbody tr").doesNotExist("renders no results"); |
| 266 | + }); |
| 267 | + } |
| 268 | +); |
0 commit comments