From 999865401cee7c4bf9b32f4ddf4cc04475d3da3f Mon Sep 17 00:00:00 2001 From: Jarek Radosz Date: Mon, 4 Jul 2022 11:37:11 +0200 Subject: [PATCH] DEV: Remove most jQ from select-kit test helpers (#17305) --- .../tests/acceptance/search-full-test.js | 9 ++ .../tests/helpers/select-kit-helper.js | 95 +++++++++---------- .../select-kit/category-chooser-test.js | 2 +- .../select-kit/category-drop-test.js | 30 +++--- .../components/select-kit/combo-box-test.js | 20 ++-- .../select-kit/dropdown-select-box-test.js | 10 +- .../select-kit/notifications-button-test.js | 2 +- .../select-kit/single-select-test.js | 10 +- .../topic-notifications-options-test.js | 12 +-- 9 files changed, 100 insertions(+), 90 deletions(-) diff --git a/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js b/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js index 7fe764a3544..a133d104e1b 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/search-full-test.js @@ -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"); diff --git a/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js b/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js index aaa15afe3ce..149cc9c1178 100644 --- a/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js +++ b/app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js @@ -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); }, }); } diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-chooser-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-chooser-test.js index aff1ac24273..75d9e005a3f 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-chooser-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-chooser-test.js @@ -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’' ); diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-drop-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-drop-test.js index 91b74845889..8f60850e36d 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-drop-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/category-drop-test.js @@ -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, diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/combo-box-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/combo-box-test.js index 1178156a55e..8d4d7d57c93 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/combo-box-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/combo-box-test.js @@ -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" ); }, diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/dropdown-select-box-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/dropdown-select-box-test.js index 80af3a66167..d2539e9fbbd 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/dropdown-select-box-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/dropdown-select-box-test.js @@ -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" ); }, diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js index 39592a80ba4..997722851eb 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js @@ -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" diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js index 9455f8dcb46..d84a898827e 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/single-select-test.js @@ -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, }) diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/topic-notifications-options-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/topic-notifications-options-test.js index 56e754ecc35..027b40f8a20 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/topic-notifications-options-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/topic-notifications-options-test.js @@ -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(