github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-24 02:25:33 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

DEV: Remove most jQ from select-kit test helpers (#17305)

Browse Source
This commit is contained in:
Jarek Radosz 2022-07-04 11:37:11 +02:00 committed by GitHub
parent aa7792cf93
commit 999865401c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 100 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/discourse/tests/acceptance/search-full-test.js
View File

@ -299,6 +299,7 @@ acceptance("Search - Full Page", function (needs) {
await visit("/search"); await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none"); await fillIn(".search-query", "none");
await inSelector.expand(); await inSelector.expand();
await inSelector.selectRowByValue("bookmarks"); await inSelector.selectRowByValue("bookmarks");
@ -322,6 +323,7 @@ acceptance("Search - Full Page", function (needs) {
await visit("/search"); await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none"); await fillIn(".search-query", "none");
await statusSelector.expand(); await statusSelector.expand();
await statusSelector.selectRowByValue("closed"); await statusSelector.selectRowByValue("closed");
@ -345,6 +347,7 @@ acceptance("Search - Full Page", function (needs) {
await visit("/search"); await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "status:none"); await fillIn(".search-query", "status:none");
assert.strictEqual( assert.strictEqual(
@ -359,6 +362,7 @@ acceptance("Search - Full Page", function (needs) {
await visit("/search"); await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "in:none"); await fillIn(".search-query", "in:none");
assert.strictEqual( assert.strictEqual(
@ -378,6 +382,7 @@ acceptance("Search - Full Page", function (needs) {
); );
await visit("/search"); await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none"); await fillIn(".search-query", "none");
await selectDate(".date-picker#search-post-date", "2016-10-05"); await selectDate(".date-picker#search-post-date", "2016-10-05");
@ -403,6 +408,7 @@ acceptance("Search - Full Page", function (needs) {
test("update min post count through advanced search ui", async function (assert) { test("update min post count through advanced search ui", async function (assert) {
await visit("/search"); await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none"); await fillIn(".search-query", "none");
await fillIn("#search-min-post-count", "5"); await fillIn("#search-min-post-count", "5");
@ -422,6 +428,7 @@ acceptance("Search - Full Page", function (needs) {
test("update max post count through advanced search ui", async function (assert) { test("update max post count through advanced search ui", async function (assert) {
await visit("/search"); await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none"); await fillIn(".search-query", "none");
await fillIn("#search-max-post-count", "5"); await fillIn("#search-max-post-count", "5");
@ -484,6 +491,7 @@ acceptance("Search - Full Page", function (needs) {
await fillIn(".search-query", "admin"); await fillIn(".search-query", "admin");
assert.ok(!exists(".fps-user-item"), "has no user results"); assert.ok(!exists(".fps-user-item"), "has no user results");
await click(".advanced-filters > summary");
await typeSelector.expand(); await typeSelector.expand();
await typeSelector.selectRowByValue(SEARCH_TYPE_USERS); await typeSelector.selectRowByValue(SEARCH_TYPE_USERS);
@ -511,6 +519,7 @@ acceptance("Search - Full Page", function (needs) {
assert.ok(!exists(".fps-tag-item"), "has no category/tag results"); assert.ok(!exists(".fps-tag-item"), "has no category/tag results");
await click(".advanced-filters > summary");
await typeSelector.expand(); await typeSelector.expand();
await typeSelector.selectRowByValue(SEARCH_TYPE_CATS_TAGS); await typeSelector.selectRowByValue(SEARCH_TYPE_CATS_TAGS);
await click(".search-cta"); await click(".search-cta");

95
app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
View File

@ -1,17 +1,17 @@
import { click, fillIn, triggerEvent } from "@ember/test-helpers"; import { click, fillIn, triggerEvent } from "@ember/test-helpers";
import { exists, queryAll } from "discourse/tests/helpers/qunit-helpers"; import { exists, query, queryAll } from "discourse/tests/helpers/qunit-helpers";
import { isEmpty } from "@ember/utils"; import { isEmpty } from "@ember/utils";
import { moduleForComponent } from "ember-qunit"; import { moduleForComponent } from "ember-qunit";
function checkSelectKitIsNotExpanded(selector) { function checkSelectKitIsNotExpanded(selector) {
if (queryAll(selector).hasClass("is-expanded")) { if (query(selector).classList.contains("is-expanded")) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.warn("You expected select-kit to be collapsed but it is expanded."); console.warn("You expected select-kit to be collapsed but it is expanded.");
} }
} }
function checkSelectKitIsNotCollapsed(selector) { function checkSelectKitIsNotCollapsed(selector) {
if (!queryAll(selector).hasClass("is-expanded")) { if (!query(selector).classList.contains("is-expanded")) {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.warn("You expected select-kit to be expanded but it is collapsed."); console.warn("You expected select-kit to be expanded but it is collapsed.");
} }
@ -31,7 +31,7 @@ async function selectKitFillInFilter(filter, selector) {
checkSelectKitIsNotCollapsed(selector); checkSelectKitIsNotCollapsed(selector);
await fillIn( await fillIn(
`${selector} .filter-input`, `${selector} .filter-input`,
queryAll(`${selector} .filter-input`).val() + filter query(`${selector} .filter-input`).value + filter
); );
} }
@ -61,7 +61,7 @@ async function selectKitSelectRowByIndex(index, selector) {
} }
async function keyboardHelper(value, target, selector) { async function keyboardHelper(value, target, selector) {
target = queryAll(selector).find(target || ".filter-input"); target = query(selector).querySelector(target || ".filter-input");
if (value === "selectAll") { if (value === "selectAll") {
// special casing the only one not working with triggerEvent // special casing the only one not working with triggerEvent
@ -70,7 +70,7 @@ async function keyboardHelper(value, target, selector) {
event.key = "A"; event.key = "A";
event.keyCode = 65; event.keyCode = 65;
event.metaKey = true; event.metaKey = true;
target.trigger(event); $(target).trigger(event);
} else { } else {
const mapping = { const mapping = {
enter: { key: "Enter", keyCode: 13 }, enter: { key: "Enter", keyCode: 13 },
@ -82,7 +82,7 @@ async function keyboardHelper(value, target, selector) {
}; };
await triggerEvent( await triggerEvent(
target[0], target,
"keydown", "keydown",
mapping[value.toLowerCase()] || { mapping[value.toLowerCase()] || {
key: value, key: value,
@ -95,19 +95,19 @@ async function keyboardHelper(value, target, selector) {
function rowHelper(row) { function rowHelper(row) {
return { return {
name() { name() {
return row.attr("data-name"); return row.getAttribute("data-name");
}, },
icon() { icon() {
return row.find(".d-icon"); return row.querySelector(".d-icon");
}, },
title() { title() {
return row.attr("title"); return row.getAttribute("title");
}, },
label() { label() {
return row.find(".name").text().trim(); return row.querySelector(".name").innerText.trim();
}, },
value() { value() {
const value = row.attr("data-value"); const value = row?.getAttribute("data-value");
return isEmpty(value) ? null : value; return isEmpty(value) ? null : value;
}, },
exists() { exists() {
@ -122,23 +122,22 @@ function rowHelper(row) {
function headerHelper(header) { function headerHelper(header) {
return { return {
value() { value() {
const value = header.attr("data-value"); const value = header.getAttribute("data-value");
return isEmpty(value) ? null : value; return isEmpty(value) ? null : value;
}, },
name() { name() {
return header.attr("data-name"); return header.getAttribute("data-name");
}, },
label() { label() {
return header return header.innerText
.text()
.trim() .trim()
.replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, ""); .replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, "");
}, },
icon() { icon() {
return header.find(".d-icon"); return header.querySelector(".d-icon");
}, },
title() { title() {
return header.find(".selected-name").attr("title"); return header.querySelector(".selected-name").getAttribute("title");
}, },
el() { el() {
return header; return header;
@ -149,13 +148,13 @@ function headerHelper(header) {
function filterHelper(filter) { function filterHelper(filter) {
return { return {
icon() { icon() {
return filter.find(".d-icon"); return filter.querySelector(".d-icon");
}, },
exists() { exists() {
return exists(filter); return exists(filter);
}, },
value() { value() {
return filter.find("input").val(); return filter.querySelector("input").value;
}, },
el() { el() {
return filter; return filter;
@ -208,89 +207,89 @@ export default function selectKit(selector) {
}, },
isExpanded() { isExpanded() {
return queryAll(selector).hasClass("is-expanded"); return query(selector).classList.contains("is-expanded");
}, },
isFocused() { isFocused() {
return queryAll(selector).hasClass("is-focused"); return query(selector).classList.contains("is-focused");
}, },
isHidden() { isHidden() {
return queryAll(selector).hasClass("is-hidden"); return query(selector).classList.contains("is-hidden");
}, },
isDisabled() { isDisabled() {
return queryAll(selector).hasClass("is-disabled"); return query(selector).classList.contains("is-disabled");
}, },
header() { header() {
return headerHelper(queryAll(selector).find(".select-kit-header")); return headerHelper(query(selector).querySelector(".select-kit-header"));
}, },
filter() { filter() {
return filterHelper(queryAll(selector).find(".select-kit-filter")); return filterHelper(query(selector).querySelector(".select-kit-filter"));
}, },
rows() { rows() {
return queryAll(selector).find(".select-kit-row"); return query(selector).querySelectorAll(".select-kit-row");
}, },
displayedContent() { displayedContent() {
return this.rows() return [...this.rows()].map((row) => ({
.map((_, row) => { name: row.getAttribute("data-name"),
return { id: row.getAttribute("data-value"),
name: row.getAttribute("data-name"), }));
id: row.getAttribute("data-value"),
};
})
.toArray();
}, },
rowByValue(value) { rowByValue(value) {
return rowHelper( return rowHelper(
queryAll(selector).find('.select-kit-row[data-value="' + value + '"]') query(selector).querySelector(`.select-kit-row[data-value="${value}"]`)
); );
}, },
rowByName(name) { rowByName(name) {
return rowHelper( return rowHelper(
queryAll(selector).find('.select-kit-row[data-name="' + name + '"]') query(selector).querySelector(`.select-kit-row[data-name="${name}"]`)
); );
}, },
rowByIndex(index) { rowByIndex(index) {
return rowHelper( return rowHelper(
queryAll(selector).find( query(selector).querySelector(
".select-kit-row:nth-of-type(" + (index + 1) + ")" `.select-kit-row:nth-of-type(${index + 1})`
) )
); );
}, },
el() { el() {
return queryAll(selector); return query(selector);
}, },
noneRow() { noneRow() {
return rowHelper(queryAll(selector).find(".select-kit-row.none")); return rowHelper(query(selector).querySelector(".select-kit-row.none"));
}, },
validationMessage() { validationMessage() {
const validationMessage = queryAll(selector).find(".validation-message"); const validationMessage = query(selector).querySelector(
".validation-message"
);
if (validationMessage.length) { if (validationMessage) {
return validationMessage.html().trim(); return validationMessage.innerHTML.trim();
} else { } else {
return null; return null;
} }
}, },
selectedRow() { selectedRow() {
return rowHelper(queryAll(selector).find(".select-kit-row.is-selected")); return rowHelper(
query(selector).querySelector(".select-kit-row.is-selected")
);
}, },
highlightedRow() { highlightedRow() {
return rowHelper( return rowHelper(
queryAll(selector).find(".select-kit-row.is-highlighted") query(selector).querySelector(".select-kit-row.is-highlighted")
); );
}, },
@ -314,11 +313,11 @@ export function testSelectKitModule(moduleName, options = {}) {
beforeEach() { beforeEach() {
this.set("subject", selectKit()); this.set("subject", selectKit());
options.beforeEach && options.beforeEach.call(this); options.beforeEach?.call(this);
}, },
afterEach() { afterEach() {
options.afterEach && options.afterEach.call(this); options.afterEach?.call(this);
}, },
}); });
} }

2
app/assets/javascripts/discourse/tests/integration/components/select-kit/category-chooser-test.js
View File

@ -314,7 +314,7 @@ discourseModule(
await this.subject.expand(); await this.subject.expand();
assert.strictEqual( assert.strictEqual(
this.subject.rowByIndex(0).el()[0].querySelector(".category-desc") this.subject.rowByIndex(0).el().querySelector(".category-desc")
.innerText, .innerText,
'baz "bar ‘foo’' 'baz "bar ‘foo’'
); );

30
app/assets/javascripts/discourse/tests/integration/components/select-kit/category-drop-test.js
View File

@ -5,7 +5,7 @@ import {
import componentTest, { import componentTest, {
setupRenderingTest, setupRenderingTest,
} from "discourse/tests/helpers/component-test"; } from "discourse/tests/helpers/component-test";
import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers"; import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
import Category from "discourse/models/category"; import Category from "discourse/models/category";
import DiscourseURL from "discourse/lib/url"; import DiscourseURL from "discourse/lib/url";
import I18n from "I18n"; import I18n from "I18n";
@ -53,10 +53,10 @@ discourseModule(
`, `,
async test(assert) { async test(assert) {
const $header = this.subject.header().el(); const header = this.subject.header().el();
assert.ok( assert.ok(
exists($header.find(`.d-icon-caret-right`)), header.querySelector(`.d-icon-caret-right`),
"it uses the correct default icon" "it uses the correct default icon"
); );
}, },
@ -101,7 +101,7 @@ discourseModule(
const row = this.subject.rowByValue(this.category.id); const row = this.subject.rowByValue(this.category.id);
assert.ok( assert.ok(
exists(row.el().find(".category-desc")), row.el().querySelector(".category-desc"),
"it shows category description for newcomers" "it shows category description for newcomers"
); );
}, },
@ -127,8 +127,8 @@ discourseModule(
await this.subject.expand(); await this.subject.expand();
const row = this.subject.rowByValue(this.category.id); const row = this.subject.rowByValue(this.category.id);
assert.ok( assert.notOk(
!exists(row.el().find(".category-desc")), row.el().querySelector(".category-desc"),
"it doesn't shows category description for TL0+" "it doesn't shows category description for TL0+"
); );
}, },
@ -154,8 +154,8 @@ discourseModule(
await this.subject.expand(); await this.subject.expand();
const row = this.subject.rowByValue(this.category.id); const row = this.subject.rowByValue(this.category.id);
assert.ok( assert.notOk(
!exists(row.el().find(".category-desc")), row.el().querySelector(".category-desc"),
"it doesn't show category description for staff" "it doesn't show category description for staff"
); );
}, },
@ -210,8 +210,8 @@ discourseModule(
const childRow = this.subject.rowByValue(childCategoryId); const childRow = this.subject.rowByValue(childCategoryId);
assert.ok(childRow.exists(), "the child row is showing"); assert.ok(childRow.exists(), "the child row is showing");
const $categoryStatus = childRow.el().find(".category-status"); const categoryStatus = childRow.el().querySelector(".category-status");
assert.ok($categoryStatus.text().trim().match(/^spec/)); assert.ok(categoryStatus.innerText.trim().match(/^spec/));
}, },
}); });
@ -279,7 +279,10 @@ discourseModule(
const category = Category.findById(7); const category = Category.findById(7);
const row = this.subject.rowByValue(category.id); const row = this.subject.rowByValue(category.id);
const topicCount = row.el().find(".topic-count").text().trim(); const topicCount = row
.el()
.querySelector(".topic-count")
.innerText.trim();
assert.strictEqual( assert.strictEqual(
topicCount, topicCount,
@ -310,7 +313,10 @@ discourseModule(
const category = Category.findById(7); const category = Category.findById(7);
const row = this.subject.rowByValue(category.id); const row = this.subject.rowByValue(category.id);
const topicCount = row.el().find(".topic-count").text().trim(); const topicCount = row
.el()
.querySelector(".topic-count")
.innerText.trim();
assert.strictEqual( assert.strictEqual(
topicCount, topicCount,

20
app/assets/javascripts/discourse/tests/integration/components/select-kit/combo-box-test.js
View File

@ -1,7 +1,7 @@
import componentTest, { import componentTest, {
setupRenderingTest, setupRenderingTest,
} from "discourse/tests/helpers/component-test"; } from "discourse/tests/helpers/component-test";
import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers"; import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
import { click } from "@ember/test-helpers"; import { click } from "@ember/test-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import selectKit from "discourse/tests/helpers/select-kit-helper"; import selectKit from "discourse/tests/helpers/select-kit-helper";
@ -54,21 +54,21 @@ discourseModule(
}, },
async test(assert) { async test(assert) {
const $header = this.subject.header(); const header = this.subject.header();
assert.ok( assert.ok(
exists($header.el().find(".btn-clear")), header.el().querySelector(".btn-clear"),
"it shows the clear button" "it shows the clear button"
); );
assert.strictEqual($header.value(), DEFAULT_VALUE.toString()); assert.strictEqual(header.value(), DEFAULT_VALUE.toString());
await click($header.el().find(".btn-clear")[0]); await click(header.el().querySelector(".btn-clear"));
assert.notOk( assert.notOk(
exists($header.el().find(".btn-clear")), header.el().querySelector(".btn-clear"),
"it hides the clear button" "it hides the clear button"
); );
assert.strictEqual($header.value(), null); assert.strictEqual(header.value(), null);
}, },
}); });
@ -92,17 +92,17 @@ discourseModule(
}, },
async test(assert) { async test(assert) {
const $header = this.subject.header().el(); const header = this.subject.header().el();
assert.ok( assert.ok(
exists($header.find(`.d-icon-${this.caretDownIcon}`)), header.querySelector(`.d-icon-${this.caretDownIcon}`),
"it uses the icon provided" "it uses the icon provided"
); );
await this.subject.expand(); await this.subject.expand();
assert.ok( assert.ok(
exists($header.find(`.d-icon-${this.caretUpIcon}`)), header.querySelector(`.d-icon-${this.caretUpIcon}`),
"it uses the icon provided" "it uses the icon provided"
); );
}, },

10
app/assets/javascripts/discourse/tests/integration/components/select-kit/dropdown-select-box-test.js
View File

@ -1,7 +1,7 @@
import componentTest, { import componentTest, {
setupRenderingTest, setupRenderingTest,
} from "discourse/tests/helpers/component-test"; } from "discourse/tests/helpers/component-test";
import { discourseModule, exists } from "discourse/tests/helpers/qunit-helpers"; import { discourseModule } from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile"; import hbs from "htmlbars-inline-precompile";
import selectKit from "discourse/tests/helpers/select-kit-helper"; import selectKit from "discourse/tests/helpers/select-kit-helper";
@ -82,13 +82,13 @@ discourseModule(
}, },
async test(assert) { async test(assert) {
assert.ok( assert.notOk(
!exists(this.subject.header().el().find(".selected-name")), this.subject.header().el().querySelector(".selected-name"),
"it hides the text of the selected item" "it hides the text of the selected item"
); );
assert.strictEqual( assert.strictEqual(
this.subject.header().el().attr("title"), this.subject.header().el().getAttribute("title"),
"[en.test_none]", "[en.test_none]",
"it adds a title attribute to the button" "it adds a title attribute to the button"
); );
@ -112,7 +112,7 @@ discourseModule(
async test(assert) { async test(assert) {
assert.ok( assert.ok(
exists(this.subject.header().el().find(".selected-name")), this.subject.header().el().querySelector(".selected-name"),
"it shows the text of the selected item" "it shows the text of the selected item"
); );
}, },

2
app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js
View File

@ -44,7 +44,7 @@ discourseModule(
"it shows the regular choice when value is not set" "it shows the regular choice when value is not set"
); );
const icon = this.subject.header().icon()[0]; const icon = this.subject.header().icon();
assert.ok( assert.ok(
icon.classList.contains("d-icon-d-regular"), icon.classList.contains("d-icon-d-regular"),
"it shows the correct icon" "it shows the correct icon"

10
app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js
View File

@ -401,19 +401,19 @@ discourseModule(
async test(assert) { async test(assert) {
assert.strictEqual( assert.strictEqual(
this.subject.header().el()[0].querySelector(".selected-name").lang, this.subject.header().el().querySelector(".selected-name").lang,
"" ""
); );
await this.subject.expand(); await this.subject.expand();
const row = this.subject.rowByValue(1); const row = this.subject.rowByValue(1);
assert.strictEqual(row.el()[0].lang, "be"); assert.strictEqual(row.el().lang, "be");
await this.subject.selectRowByValue(1); await this.subject.selectRowByValue(1);
assert.strictEqual( assert.strictEqual(
this.subject.header().el()[0].querySelector(".selected-name").lang, this.subject.header().el().querySelector(".selected-name").lang,
"be" "be"
); );
}, },
@ -431,7 +431,7 @@ discourseModule(
async test(assert) { async test(assert) {
assert.strictEqual( assert.strictEqual(
this.subject.header().el()[0].getAttribute("name"), this.subject.header().el().getAttribute("name"),
I18n.t("select_kit.select_to_filter") I18n.t("select_kit.select_to_filter")
); );
@ -439,7 +439,7 @@ discourseModule(
await this.subject.selectRowByValue(1); await this.subject.selectRowByValue(1);
assert.strictEqual( assert.strictEqual(
this.subject.header().el()[0].getAttribute("name"), this.subject.header().el().getAttribute("name"),
I18n.t("select_kit.filter_by", { I18n.t("select_kit.filter_by", {
name: this.content.firstObject.name, name: this.content.firstObject.name,
}) })

12
app/assets/javascripts/discourse/tests/integration/components/select-kit/topic-notifications-options-test.js
View File

@ -19,12 +19,8 @@ const buildTopic = function (archetype) {
}); });
}; };
function extractDescs(rows) { function extractDescriptions(rows) {
return Array.from( return [...rows].map((el) => el.querySelector(".desc").textContent.trim());
rows.find(".desc").map(function () {
return this.textContent.trim();
})
);
} }
function getTranslations(type = "") { function getTranslations(type = "") {
@ -53,7 +49,7 @@ discourseModule(
async test(assert) { async test(assert) {
await selectKit().expand(); await selectKit().expand();
const uiTexts = extractDescs(selectKit().rows()); const uiTexts = extractDescriptions(selectKit().rows());
const descriptions = getTranslations(); const descriptions = getTranslations();
assert.strictEqual( assert.strictEqual(
@ -86,7 +82,7 @@ discourseModule(
async test(assert) { async test(assert) {
await selectKit().expand(); await selectKit().expand();
const uiTexts = extractDescs(selectKit().rows()); const uiTexts = extractDescriptions(selectKit().rows());
const descriptions = getTranslations("_pm"); const descriptions = getTranslations("_pm");
assert.strictEqual( assert.strictEqual(