Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

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 click(".advanced-filters > summary");
await fillIn(".search-query", "none");
await inSelector.expand();
await inSelector.selectRowByValue("bookmarks");
@ -322,6 +323,7 @@ acceptance("Search - Full Page", function (needs) {
await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none");
await statusSelector.expand();
await statusSelector.selectRowByValue("closed");
@ -345,6 +347,7 @@ acceptance("Search - Full Page", function (needs) {
await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "status:none");
assert.strictEqual(
@ -359,6 +362,7 @@ acceptance("Search - Full Page", function (needs) {
await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "in:none");
assert.strictEqual(
@ -378,6 +382,7 @@ acceptance("Search - Full Page", function (needs) {
);
await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none");
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) {
await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none");
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) {
await visit("/search");
await click(".advanced-filters > summary");
await fillIn(".search-query", "none");
await fillIn("#search-max-post-count", "5");
@ -484,6 +491,7 @@ acceptance("Search - Full Page", function (needs) {
await fillIn(".search-query", "admin");
assert.ok(!exists(".fps-user-item"), "has no user results");
await click(".advanced-filters > summary");
await typeSelector.expand();
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");
await click(".advanced-filters > summary");
await typeSelector.expand();
await typeSelector.selectRowByValue(SEARCH_TYPE_CATS_TAGS);
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 { exists, queryAll } from "discourse/tests/helpers/qunit-helpers";
import { exists, query, queryAll } from "discourse/tests/helpers/qunit-helpers";
import { isEmpty } from "@ember/utils";
import { moduleForComponent } from "ember-qunit";
function checkSelectKitIsNotExpanded(selector) {
if (queryAll(selector).hasClass("is-expanded")) {
if (query(selector).classList.contains("is-expanded")) {
// eslint-disable-next-line no-console
console.warn("You expected select-kit to be collapsed but it is expanded.");
}
}
function checkSelectKitIsNotCollapsed(selector) {
if (!queryAll(selector).hasClass("is-expanded")) {
if (!query(selector).classList.contains("is-expanded")) {
// eslint-disable-next-line no-console
console.warn("You expected select-kit to be expanded but it is collapsed.");
}
@ -31,7 +31,7 @@ async function selectKitFillInFilter(filter, selector) {
checkSelectKitIsNotCollapsed(selector);
await fillIn(
`${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) {
target = queryAll(selector).find(target || ".filter-input");
target = query(selector).querySelector(target || ".filter-input");
if (value === "selectAll") {
// special casing the only one not working with triggerEvent
@ -70,7 +70,7 @@ async function keyboardHelper(value, target, selector) {
event.key = "A";
event.keyCode = 65;
event.metaKey = true;
target.trigger(event);
$(target).trigger(event);
} else {
const mapping = {
enter: { key: "Enter", keyCode: 13 },
@ -82,7 +82,7 @@ async function keyboardHelper(value, target, selector) {
};
await triggerEvent(
target[0],
target,
"keydown",
mapping[value.toLowerCase()] || {
key: value,
@ -95,19 +95,19 @@ async function keyboardHelper(value, target, selector) {
function rowHelper(row) {
return {
name() {
return row.attr("data-name");
return row.getAttribute("data-name");
},
icon() {
return row.find(".d-icon");
return row.querySelector(".d-icon");
},
title() {
return row.attr("title");
return row.getAttribute("title");
},
label() {
return row.find(".name").text().trim();
return row.querySelector(".name").innerText.trim();
},
value() {
const value = row.attr("data-value");
const value = row?.getAttribute("data-value");
return isEmpty(value) ? null : value;
},
exists() {
@ -122,23 +122,22 @@ function rowHelper(row) {
function headerHelper(header) {
return {
value() {
const value = header.attr("data-value");
const value = header.getAttribute("data-value");
return isEmpty(value) ? null : value;
},
name() {
return header.attr("data-name");
return header.getAttribute("data-name");
},
label() {
return header
.text()
return header.innerText
.trim()
.replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, "");
},
icon() {
return header.find(".d-icon");
return header.querySelector(".d-icon");
},
title() {
return header.find(".selected-name").attr("title");
return header.querySelector(".selected-name").getAttribute("title");
},
el() {
return header;
@ -149,13 +148,13 @@ function headerHelper(header) {
function filterHelper(filter) {
return {
icon() {
return filter.find(".d-icon");
return filter.querySelector(".d-icon");
},
exists() {
return exists(filter);
},
value() {
return filter.find("input").val();
return filter.querySelector("input").value;
},
el() {
return filter;
@ -208,89 +207,89 @@ export default function selectKit(selector) {
},
isExpanded() {
return queryAll(selector).hasClass("is-expanded");
return query(selector).classList.contains("is-expanded");
},
isFocused() {
return queryAll(selector).hasClass("is-focused");
return query(selector).classList.contains("is-focused");
},
isHidden() {
return queryAll(selector).hasClass("is-hidden");
return query(selector).classList.contains("is-hidden");
},
isDisabled() {
return queryAll(selector).hasClass("is-disabled");
return query(selector).classList.contains("is-disabled");
},
header() {
return headerHelper(queryAll(selector).find(".select-kit-header"));
return headerHelper(query(selector).querySelector(".select-kit-header"));
},
filter() {
return filterHelper(queryAll(selector).find(".select-kit-filter"));
return filterHelper(query(selector).querySelector(".select-kit-filter"));
},
rows() {
return queryAll(selector).find(".select-kit-row");
return query(selector).querySelectorAll(".select-kit-row");
},
displayedContent() {
return this.rows()
.map((_, row) => {
return {
name: row.getAttribute("data-name"),
id: row.getAttribute("data-value"),
};
})
.toArray();
return [...this.rows()].map((row) => ({
name: row.getAttribute("data-name"),
id: row.getAttribute("data-value"),
}));
},
rowByValue(value) {
return rowHelper(
queryAll(selector).find('.select-kit-row[data-value="' + value + '"]')
query(selector).querySelector(`.select-kit-row[data-value="${value}"]`)
);
},
rowByName(name) {
return rowHelper(
queryAll(selector).find('.select-kit-row[data-name="' + name + '"]')
query(selector).querySelector(`.select-kit-row[data-name="${name}"]`)
);
},
rowByIndex(index) {
return rowHelper(
queryAll(selector).find(
".select-kit-row:nth-of-type(" + (index + 1) + ")"
query(selector).querySelector(
`.select-kit-row:nth-of-type(${index + 1})`
)
);
},
el() {
return queryAll(selector);
return query(selector);
},
noneRow() {
return rowHelper(queryAll(selector).find(".select-kit-row.none"));
return rowHelper(query(selector).querySelector(".select-kit-row.none"));
},
validationMessage() {
const validationMessage = queryAll(selector).find(".validation-message");
const validationMessage = query(selector).querySelector(
".validation-message"
);
if (validationMessage.length) {
return validationMessage.html().trim();
if (validationMessage) {
return validationMessage.innerHTML.trim();
} else {
return null;
}
},
selectedRow() {
return rowHelper(queryAll(selector).find(".select-kit-row.is-selected"));
return rowHelper(
query(selector).querySelector(".select-kit-row.is-selected")
);
},
highlightedRow() {
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() {
this.set("subject", selectKit());
options.beforeEach && options.beforeEach.call(this);
options.beforeEach?.call(this);
},
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();
assert.strictEqual(
this.subject.rowByIndex(0).el()[0].querySelector(".category-desc")
this.subject.rowByIndex(0).el().querySelector(".category-desc")
.innerText,
'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, {
setupRenderingTest,
} 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 DiscourseURL from "discourse/lib/url";
import I18n from "I18n";
@ -53,10 +53,10 @@ discourseModule(
`,
async test(assert) {
const $header = this.subject.header().el();
const header = this.subject.header().el();
assert.ok(
exists($header.find(`.d-icon-caret-right`)),
header.querySelector(`.d-icon-caret-right`),
"it uses the correct default icon"
);
},
@ -101,7 +101,7 @@ discourseModule(
const row = this.subject.rowByValue(this.category.id);
assert.ok(
exists(row.el().find(".category-desc")),
row.el().querySelector(".category-desc"),
"it shows category description for newcomers"
);
},
@ -127,8 +127,8 @@ discourseModule(
await this.subject.expand();
const row = this.subject.rowByValue(this.category.id);
assert.ok(
!exists(row.el().find(".category-desc")),
assert.notOk(
row.el().querySelector(".category-desc"),
"it doesn't shows category description for TL0+"
);
},
@ -154,8 +154,8 @@ discourseModule(
await this.subject.expand();
const row = this.subject.rowByValue(this.category.id);
assert.ok(
!exists(row.el().find(".category-desc")),
assert.notOk(
row.el().querySelector(".category-desc"),
"it doesn't show category description for staff"
);
},
@ -210,8 +210,8 @@ discourseModule(
const childRow = this.subject.rowByValue(childCategoryId);
assert.ok(childRow.exists(), "the child row is showing");
const $categoryStatus = childRow.el().find(".category-status");
assert.ok($categoryStatus.text().trim().match(/^spec/));
const categoryStatus = childRow.el().querySelector(".category-status");
assert.ok(categoryStatus.innerText.trim().match(/^spec/));
},
});
@ -279,7 +279,10 @@ discourseModule(
const category = Category.findById(7);
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(
topicCount,
@ -310,7 +313,10 @@ discourseModule(
const category = Category.findById(7);
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(
topicCount,

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

@ -1,7 +1,7 @@
import componentTest, {
setupRenderingTest,
} 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 hbs from "htmlbars-inline-precompile";
import selectKit from "discourse/tests/helpers/select-kit-helper";
@ -54,21 +54,21 @@ discourseModule(
},
async test(assert) {
const $header = this.subject.header();
const header = this.subject.header();
assert.ok(
exists($header.el().find(".btn-clear")),
header.el().querySelector(".btn-clear"),
"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(
exists($header.el().find(".btn-clear")),
header.el().querySelector(".btn-clear"),
"it hides the clear button"
);
assert.strictEqual($header.value(), null);
assert.strictEqual(header.value(), null);
},
});
@ -92,17 +92,17 @@ discourseModule(
},
async test(assert) {
const $header = this.subject.header().el();
const header = this.subject.header().el();
assert.ok(
exists($header.find(`.d-icon-${this.caretDownIcon}`)),
header.querySelector(`.d-icon-${this.caretDownIcon}`),
"it uses the icon provided"
);
await this.subject.expand();
assert.ok(
exists($header.find(`.d-icon-${this.caretUpIcon}`)),
header.querySelector(`.d-icon-${this.caretUpIcon}`),
"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, {
setupRenderingTest,
} 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 selectKit from "discourse/tests/helpers/select-kit-helper";
@ -82,13 +82,13 @@ discourseModule(
},
async test(assert) {
assert.ok(
!exists(this.subject.header().el().find(".selected-name")),
assert.notOk(
this.subject.header().el().querySelector(".selected-name"),
"it hides the text of the selected item"
);
assert.strictEqual(
this.subject.header().el().attr("title"),
this.subject.header().el().getAttribute("title"),
"[en.test_none]",
"it adds a title attribute to the button"
);
@ -112,7 +112,7 @@ discourseModule(
async test(assert) {
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"
);
},

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"
);
const icon = this.subject.header().icon()[0];
const icon = this.subject.header().icon();
assert.ok(
icon.classList.contains("d-icon-d-regular"),
"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) {
assert.strictEqual(
this.subject.header().el()[0].querySelector(".selected-name").lang,
this.subject.header().el().querySelector(".selected-name").lang,
""
);
await this.subject.expand();
const row = this.subject.rowByValue(1);
assert.strictEqual(row.el()[0].lang, "be");
assert.strictEqual(row.el().lang, "be");
await this.subject.selectRowByValue(1);
assert.strictEqual(
this.subject.header().el()[0].querySelector(".selected-name").lang,
this.subject.header().el().querySelector(".selected-name").lang,
"be"
);
},
@ -431,7 +431,7 @@ discourseModule(
async test(assert) {
assert.strictEqual(
this.subject.header().el()[0].getAttribute("name"),
this.subject.header().el().getAttribute("name"),
I18n.t("select_kit.select_to_filter")
);
@ -439,7 +439,7 @@ discourseModule(
await this.subject.selectRowByValue(1);
assert.strictEqual(
this.subject.header().el()[0].getAttribute("name"),
this.subject.header().el().getAttribute("name"),
I18n.t("select_kit.filter_by", {
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) {
return Array.from(
rows.find(".desc").map(function () {
return this.textContent.trim();
})
);
function extractDescriptions(rows) {
return [...rows].map((el) => el.querySelector(".desc").textContent.trim());
}
function getTranslations(type = "") {
@ -53,7 +49,7 @@ discourseModule(
async test(assert) {
await selectKit().expand();
const uiTexts = extractDescs(selectKit().rows());
const uiTexts = extractDescriptions(selectKit().rows());
const descriptions = getTranslations();
assert.strictEqual(
@ -86,7 +82,7 @@ discourseModule(
async test(assert) {
await selectKit().expand();
const uiTexts = extractDescs(selectKit().rows());
const uiTexts = extractDescriptions(selectKit().rows());
const descriptions = getTranslations("_pm");
assert.strictEqual(