DEV: Replace remaining uses of query helper (#30019)

app/assets/javascripts/discourse/app/lib/utilities.js

@@ -208,6 +208,10 @@ export function caretPosition(el) {
 
 // Set the caret's position
 export function setCaretPosition(ctrl, pos) {
+  if (typeof ctrl === "string") {
+    ctrl = document.querySelector(ctrl);
+  }
+
   let range;
   if (ctrl.setSelectionRange) {
     ctrl.focus();

app/assets/javascripts/discourse/tests/acceptance/composer-editor-mentions-test.js

@@ -7,7 +7,6 @@ import {
   acceptance,
   fakeTime,
   loggedInUser,
-  query,
   queryAll,
   simulateKeys,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -67,7 +66,7 @@ acceptance("Composer - editor mentions", function (needs) {
     await visit("/");
     await click("#create-topic");
 
-    await simulateKeys(query(".d-editor-input"), "abc @u\r");
+    await simulateKeys(".d-editor-input", "abc @u\r");
 
     assert
       .dom(".d-editor-input")
@@ -78,7 +77,7 @@ acceptance("Composer - editor mentions", function (needs) {
     await visit("/");
     await click("#create-topic");
 
-    await simulateKeys(query(".d-editor-input"), "abc @user a\b\b\r");
+    await simulateKeys(".d-editor-input", "abc @user a\b\b\r");
 
     assert
       .dom(".d-editor-input")
@@ -89,11 +88,9 @@ acceptance("Composer - editor mentions", function (needs) {
     await visit("/");
     await click("#create-topic");
 
-    const editor = query(".d-editor-input");
+    await simulateKeys(".d-editor-input", "abc @user 123");
-
+    await setCaretPosition(".d-editor-input", 9);
-    await simulateKeys(editor, "abc @user 123");
+    await simulateKeys(".d-editor-input", "\b\b\r");
-    await setCaretPosition(editor, 9);
-    await simulateKeys(editor, "\b\b\r");
 
     assert
       .dom(".d-editor-input")
@@ -108,9 +105,7 @@ acceptance("Composer - editor mentions", function (needs) {
     await visit("/");
     await click("#create-topic");
 
-    const editor = query(".d-editor-input");
+    await simulateKeys(".d-editor-input", "@u");
-
-    await simulateKeys(editor, "@u");
 
     assert
       .dom(`.autocomplete .emoji[alt='${status.emoji}']`)
@@ -125,16 +120,14 @@ acceptance("Composer - editor mentions", function (needs) {
     await visit("/");
     await click("#create-topic");
 
-    const editor = query(".d-editor-input");
+    await simulateKeys(".d-editor-input", "abc @u");
-
-    await simulateKeys(editor, "abc @u");
 
     assert.deepEqual(
       [...queryAll(".ac-user .username")].map((e) => e.innerText),
       ["user", "user2", "user_group", "foo"]
     );
 
-    await simulateKeys(editor, "\bf");
+    await simulateKeys(".d-editor-input", "\bf");
 
     assert.deepEqual(
       [...queryAll(".ac-user .username")].map((e) => e.innerText),

app/assets/javascripts/discourse/tests/acceptance/composer-image-preview-test.js

@@ -365,10 +365,9 @@ acceptance("Composer - Image Preview - Plugin API", function (needs) {
         "My Custom Button",
         "custom-button-class",
         "lock",
-        (event) => {
+        async (event) => {
           if (event.target.classList.contains("custom-button-class")) {
-            document.querySelector(".d-editor-input").value =
+            await fillIn(".d-editor-input", "custom button change");
-              "custom button change";
           }
         }
       );

app/assets/javascripts/discourse/tests/acceptance/composer-messages-test.js

@@ -1,12 +1,13 @@
 import {
   click,
   fillIn,
+  triggerEvent,
   triggerKeyEvent,
   visit,
   waitUntil,
 } from "@ember/test-helpers";
 import { test } from "qunit";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 import pretender, { response } from "../helpers/create-pretender";
@@ -153,9 +154,9 @@ acceptance("Composer - Messages - Duplicate links", function (needs) {
     await click("button.create");
 
     // Work around the lack of CSS transitions in the test env
-    const event = new Event("transitionend");
+    await triggerEvent("#reply-control", "transitionend", {
-    event.propertyName = "height";
+      propertyName: "height",
-    query("#reply-control").dispatchEvent(event);
+    });
 
     assert
       .dom(".composer-popup")

app/assets/javascripts/discourse/tests/acceptance/composer-test.js

@@ -2,6 +2,7 @@ import {
   click,
   currentURL,
   fillIn,
+  find,
   focus,
   settled,
   triggerEvent,
@@ -26,7 +27,6 @@ import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import {
   acceptance,
   metaModifier,
-  query,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
@@ -129,9 +129,9 @@ acceptance("Composer", function (needs) {
   test("Composer height adjustment", async function (assert) {
     await visit("/");
     await click("#create-topic");
-    await triggerEvent(document.querySelector(".grippie"), "mousedown");
+    await triggerEvent(".grippie", "mousedown");
-    await triggerEvent(document.querySelector(".grippie"), "mousemove");
+    await triggerEvent(".grippie", "mousemove");
-    await triggerEvent(document.querySelector(".grippie"), "mouseup");
+    await triggerEvent(".grippie", "mouseup");
     await visit("/"); // reload page
     await click("#create-topic");
 
@@ -205,17 +205,16 @@ acceptance("Composer", function (needs) {
       .dom(".d-editor-textarea-wrapper .popup-tip.good")
       .exists("the body is now good");
 
-    const textarea = query("#reply-control .d-editor-input");
+    const textarea = find("#reply-control .d-editor-input");
     textarea.selectionStart = textarea.value.length;
     textarea.selectionEnd = textarea.value.length;
 
     await triggerKeyEvent(textarea, "keydown", "B", metaModifier);
 
-    const example = i18n(`composer.bold_text`);
     assert
       .dom("#reply-control .d-editor-input")
       .hasValue(
-        `this is the *content* of a post**${example}**`,
+        `this is the *content* of a post**${i18n("composer.bold_text")}**`,
         "supports keyboard shortcuts"
       );
 
@@ -365,7 +364,7 @@ acceptance("Composer", function (needs) {
     assert
       .dom(".d-editor-input")
       .hasValue(
-        query(".topic-post:nth-of-type(1) .cooked > p").innerText,
+        find(".topic-post:nth-of-type(1) .cooked > p").innerText,
         "composer has contents of post to be edited"
       );
   });
@@ -614,10 +613,12 @@ acceptance("Composer", function (needs) {
     assert.dom(".d-editor-input").hasNoValue("clears the composer input");
 
     await click(".topic-post:nth-of-type(2) button.edit");
-    assert.true(
+    assert
-      query(".d-editor-input").value.startsWith("This is the second post."),
+      .dom(".d-editor-input")
-      "populates the input with the post text"
+      .hasValue(
-    );
+        /^This is the second post\./,
+        "populates the input with the post text"
+      );
   });
 
   test("Composer can toggle whispers when whisperer user", async function (assert) {
@@ -1344,7 +1345,7 @@ acceptance("composer buttons API", function (needs) {
     await click(".post-controls button.reply");
     await fillIn(".d-editor-input", "hello the world");
 
-    const editor = document.querySelector(".d-editor-input");
+    const editor = find(".d-editor-input");
     editor.setSelectionRange(6, 9); // select the text input in the composer
 
     await triggerKeyEvent(".d-editor-input", "keydown", "B", {
@@ -1398,7 +1399,7 @@ acceptance("composer buttons API", function (needs) {
     await visit("/t/internationalization-localization/280");
     await click(".post-controls button.reply");
 
-    const editor = document.querySelector(".d-editor-input");
+    const editor = find(".d-editor-input");
     await triggerKeyEvent(".d-editor-input", "keydown", "S", {
       altKey: true,
       ...metaModifier,

app/assets/javascripts/discourse/tests/acceptance/composer-uploads-uppy-test.js

@@ -1,5 +1,12 @@
 import { getOwner } from "@ember/owner";
-import { click, fillIn, settled, visit } from "@ember/test-helpers";
+import {
+  click,
+  fillIn,
+  find,
+  focus,
+  settled,
+  visit,
+} from "@ember/test-helpers";
 import { skip, test } from "qunit";
 import { Promise } from "rsvp";
 import sinon from "sinon";
@@ -10,7 +17,6 @@ import {
   chromeTest,
   createFile,
   paste,
-  query,
 } from "discourse/tests/helpers/qunit-helpers";
 import { i18n } from "discourse-i18n";
 
@@ -305,7 +311,7 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) {
     await visit("/");
     await click("#create-topic");
     await fillIn(".d-editor-input", "The image: Text after the image.");
-    const textArea = query(".d-editor-input");
+    const textArea = find(".d-editor-input");
     textArea.selectionStart = 10;
     textArea.selectionEnd = 10;
 
@@ -341,7 +347,7 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) {
       ".d-editor-input",
       "The image: [paste here] Text after the image."
     );
-    const textArea = query(".d-editor-input");
+    const textArea = find(".d-editor-input");
     textArea.selectionStart = 10;
     textArea.selectionEnd = 23;
 
@@ -428,7 +434,7 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) {
     await visit("/");
     await click("#create-topic");
     await fillIn(".d-editor-input", "The image:\ntext after image");
-    const input = query(".d-editor-input");
+    const input = find(".d-editor-input");
     input.selectionStart = 10;
     input.selectionEnd = 10;
 
@@ -457,17 +463,14 @@ acceptance("Uppy Composer Attachment - Upload Placeholder", function (needs) {
       uppyEventFired = true;
     });
 
-    let element = query(".d-editor");
+    await focus(".d-editor-input");
-    let inputElement = query(".d-editor-input");
+    await paste(".d-editor", "\ta\tb\n1\t2\t3", {
-    inputElement.focus();
-    await paste(element, "\ta\tb\n1\t2\t3", {
       types: ["text/plain", "Files"],
       files: [createFile("avatar.png")],
     });
-    await settled();
 
     assert
-      .dom(inputElement)
+      .dom(".d-editor-input")
       .hasValue(
         "||a|b|\n|---|---|---|\n|1|2|3|\n",
         "only the plain text table is pasted"
@@ -546,7 +549,7 @@ acceptance(
       appEvents.on("composer:upload-error", async () => {
         await settled();
 
-        if (query(".dialog-body")) {
+        if (find(".dialog-body")) {
           assert
             .dom(".dialog-body")
             .hasText(

app/assets/javascripts/discourse/tests/acceptance/emoji-test.js

@@ -4,7 +4,6 @@ import { test } from "qunit";
 import emojiPicker from "discourse/tests/helpers/emoji-picker-helper";
 import {
   acceptance,
-  query,
   simulateKey,
   simulateKeys,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -60,14 +59,10 @@ acceptance("Emoji", function (needs) {
     await visit("/t/internationalization-localization/280");
     await click("#topic-footer-buttons .btn.create");
 
-    const editor = query(".d-editor-input");
+    await simulateKeys(".d-editor-input", ":s");
-
-    await simulateKeys(editor, ":s");
-
     assert.dom(".autocomplete.ac-emoji").doesNotExist();
 
-    await simulateKey(editor, "w");
+    await simulateKey(".d-editor-input", "w");
-
     assert.dom(".autocomplete.ac-emoji").exists();
   });
 });

app/assets/javascripts/discourse/tests/acceptance/fast-edit-test.js

@@ -1,11 +1,16 @@
-import { click, fillIn, triggerKeyEvent, visit } from "@ember/test-helpers";
+import {
+  click,
+  fillIn,
+  find,
+  triggerKeyEvent,
+  visit,
+} from "@ember/test-helpers";
 import { test } from "qunit";
 import { cloneJSON } from "discourse/lib/object";
 import postFixtures from "discourse/tests/fixtures/post";
 import {
   acceptance,
   metaModifier,
-  query,
   selectText,
 } from "discourse/tests/helpers/qunit-helpers";
 
@@ -21,7 +26,7 @@ acceptance("Fast Edit", function (needs) {
   test("Fast edit button works", async function (assert) {
     await visit("/t/internationalization-localization/280");
 
-    const textNode = query("#post_1 .cooked p").childNodes[0];
+    const textNode = find("#post_1 .cooked p").childNodes[0];
 
     await selectText(textNode, 9);
     await click(".quote-button .quote-edit-label");
@@ -40,7 +45,7 @@ acceptance("Fast Edit", function (needs) {
   test("Works with keyboard shortcut", async function (assert) {
     await visit("/t/internationalization-localization/280");
 
-    const textNode = query("#post_1 .cooked p").childNodes[0];
+    const textNode = find("#post_1 .cooked p").childNodes[0];
 
     await selectText(textNode, 9);
 
@@ -75,7 +80,7 @@ acceptance("Fast Edit", function (needs) {
   test("Opens full composer for multi-line selection", async function (assert) {
     await visit("/t/internationalization-localization/280");
 
-    const textNode = query("#post_2 .cooked");
+    const textNode = find("#post_2 .cooked");
 
     await selectText(textNode);
     await click(".quote-button .quote-edit-label");
@@ -87,8 +92,8 @@ acceptance("Fast Edit", function (needs) {
   test("Opens full composer when selection has typographic characters", async function (assert) {
     await visit("/t/internationalization-localization/280");
 
-    query("#post_2 .cooked").append(`That’s what she said!`);
+    find("#post_2 .cooked").append(`That’s what she said!`);
-    const textNode = query("#post_2 .cooked").childNodes[3];
+    const textNode = find("#post_2 .cooked").childNodes[3];
 
     await selectText(textNode);
     await click(".quote-button .quote-edit-label");
@@ -100,8 +105,8 @@ acceptance("Fast Edit", function (needs) {
   test("Works with diacritics", async function (assert) {
     await visit("/t/internationalization-localization/280");
 
-    query("#post_2 .cooked").append(`Je suis désolé, comment ça va?`);
+    find("#post_2 .cooked").append(`Je suis désolé, comment ça va?`);
-    const textNode = query("#post_2 .cooked").childNodes[3];
+    const textNode = find("#post_2 .cooked").childNodes[3];
 
     await selectText(textNode);
     await click(".quote-button .quote-edit-label");
@@ -112,8 +117,8 @@ acceptance("Fast Edit", function (needs) {
   test("Works with CJK ranges", async function (assert) {
     await visit("/t/internationalization-localization/280");
 
-    query("#post_2 .cooked").append(`这是一个测试`);
+    find("#post_2 .cooked").append(`这是一个测试`);
-    const textNode = query("#post_2 .cooked").childNodes[3];
+    const textNode = find("#post_2 .cooked").childNodes[3];
 
     await selectText(textNode);
     await click(".quote-button .quote-edit-label");
@@ -124,8 +129,8 @@ acceptance("Fast Edit", function (needs) {
   test("Works with emoji", async function (assert) {
     await visit("/t/internationalization-localization/280");
 
-    query("#post_2 .cooked").append(`This is great 👍`);
+    find("#post_2 .cooked").append(`This is great 👍`);
-    const textNode = query("#post_2 .cooked").childNodes[3];
+    const textNode = find("#post_2 .cooked").childNodes[3];
 
     await selectText(textNode);
     await click(".quote-button .quote-edit-label");

app/assets/javascripts/discourse/tests/acceptance/flag-post-test.js

@@ -1,7 +1,7 @@
-import { click, fillIn, settled, visit } from "@ember/test-helpers";
+import { click, fillIn, triggerEvent, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import userFixtures from "discourse/tests/fixtures/user-fixtures";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 
 async function openFlagModal() {
@@ -13,16 +13,14 @@ async function openFlagModal() {
   await click(".topic-post:first-child button.create-flag");
 }
 
-async function pressEnter(element, modifier) {
+async function pressEnter(selector, modifier) {
-  const event = new KeyboardEvent("keydown", {
+  await triggerEvent(selector, "keydown", {
     bubbles: true,
     cancelable: true,
     key: "Enter",
     keyCode: 13,
     [modifier]: true,
   });
-  element.dispatchEvent(event);
-  await settled();
 }
 
 acceptance("flagging", function (needs) {
@@ -187,14 +185,13 @@ acceptance("flagging", function (needs) {
     await visit("/t/internationalization-localization/280");
     await openFlagModal();
 
-    const modal = query(".d-modal");
+    await pressEnter(".d-modal", "ctrlKey");
-    await pressEnter(modal, "ctrlKey");
     assert
       .dom(".d-modal")
       .exists("The modal wasn't closed because the accept button was disabled");
 
     await click("#radio_inappropriate"); // this enables the accept button
-    await pressEnter(modal, "ctrlKey");
+    await pressEnter(".d-modal", "ctrlKey");
     assert.dom(".d-modal").doesNotExist("The modal was closed");
   });
 
@@ -202,14 +199,13 @@ acceptance("flagging", function (needs) {
     await visit("/t/internationalization-localization/280");
     await openFlagModal();
 
-    const modal = query(".d-modal");
+    await pressEnter(".d-modal", "metaKey");
-    await pressEnter(modal, "metaKey");
     assert
       .dom(".d-modal")
       .exists("The modal wasn't closed because the accept button was disabled");
 
     await click("#radio_inappropriate"); // this enables the accept button
-    await pressEnter(modal, "ctrlKey");
+    await pressEnter(".d-modal", "ctrlKey");
     assert.dom(".d-modal").doesNotExist("The modal was closed");
   });
 });

app/assets/javascripts/discourse/tests/acceptance/image-aspect-ratio-test.js

@@ -1,12 +1,13 @@
 import { visit } from "@ember/test-helpers";
 import { test } from "qunit";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 
 acceptance("Image aspect ratio", function () {
-  test("it applies the aspect ratio", async function (assert) {
+  test("applies the aspect ratio", async function (assert) {
     await visit("/t/2480");
-    const image = query("#post_3 img[src='/assets/logo.png']");
 
-    assert.strictEqual(image.style.aspectRatio, "690 / 388");
+    assert
+      .dom("#post_3 img[src='/assets/logo.png']")
+      .hasStyle({ aspectRatio: "690 / 388" });
   });
 });

app/assets/javascripts/discourse/tests/acceptance/post-inline-mentions-test.js

@@ -5,7 +5,6 @@ import pretender, { response } from "discourse/tests/helpers/create-pretender";
 import {
   acceptance,
   publishToMessageBus,
-  query,
 } from "discourse/tests/helpers/qunit-helpers";
 import topicFixtures from "../fixtures/topic";
 
@@ -52,13 +51,9 @@ acceptance("Post inline mentions", function (needs) {
     assert
       .dom(".topic-post .cooked .mention .user-status-message")
       .exists("user status is shown");
-    const statusElement = query(
+    assert
-      ".topic-post .cooked .mention .user-status-message img"
+      .dom(".topic-post .cooked .mention .user-status-message img")
-    );
+      .hasAttribute("src", /surfing_man/, "status emoji is correct");
-    assert.true(
-      statusElement.src.includes(status.emoji),
-      "status emoji is correct"
-    );
   });
 
   test("inserts user status on message bus message", async function (assert) {
@@ -81,13 +76,9 @@ acceptance("Post inline mentions", function (needs) {
     assert
       .dom(".topic-post .cooked .mention .user-status-message")
       .exists("user status is shown");
-    const statusElement = query(
+    assert
-      ".topic-post .cooked .mention .user-status-message img"
+      .dom(".topic-post .cooked .mention .user-status-message img")
-    );
+      .hasAttribute("src", /surfing_man/, "status emoji is correct");
-    assert.true(
-      statusElement.src.includes(status.emoji),
-      "status emoji is correct"
-    );
   });
 
   test("updates user status on message bus message", async function (assert) {
@@ -114,13 +105,9 @@ acceptance("Post inline mentions", function (needs) {
     assert
       .dom(".topic-post .cooked .mention .user-status-message")
       .exists("updated user status is shown");
-    const statusElement = query(
+    assert
-      ".topic-post .cooked .mention .user-status-message img"
+      .dom(".topic-post .cooked .mention .user-status-message img")
-    );
+      .hasAttribute("src", /tooth/, "updated status emoji is correct");
-    assert.true(
-      statusElement.src.includes(newStatus.emoji),
-      "updated status emoji is correct"
-    );
   });
 
   test("removes user status on message bus message", async function (assert) {

app/assets/javascripts/discourse/tests/acceptance/post-table-wrapper-test.js

@@ -1,6 +1,6 @@
-import { click, visit } from "@ember/test-helpers";
+import { click, find, visit } from "@ember/test-helpers";
 import { test } from "qunit";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 
 acceptance("Post Table Wrapper Test", function () {
   test("fullscreen table wrapper appears on post with large table", async function (assert) {
@@ -16,7 +16,7 @@ acceptance("Post Table Wrapper Test", function () {
       )
       .exists("buttons for the table wrapper appear inside a separate div");
 
-    const fullscreenButtonWrapper = query(
+    const fullscreenButtonWrapper = find(
       `${postWithLargeTable} .fullscreen-table-wrapper .fullscreen-table-wrapper__buttons`
     );
 

app/assets/javascripts/discourse/tests/acceptance/preferences-test.js

@@ -3,12 +3,12 @@ import {
   currentRouteName,
   currentURL,
   fillIn,
+  find,
   visit,
 } from "@ember/test-helpers";
 import { test } from "qunit";
 import {
   acceptance,
-  query,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
@@ -55,7 +55,7 @@ acceptance("User Preferences", function (needs) {
       assert.dom(".saved").doesNotExist("it hasn't been saved yet");
       await click(".save-changes");
       assert.dom(".saved").exists("it displays the saved message");
-      query(".saved").remove();
+      find(".saved").remove();
     };
 
     await fillIn(".pref-name input[type=text]", "Jon Snow");

app/assets/javascripts/discourse/tests/acceptance/search-test.js

@@ -11,16 +11,11 @@ import { test } from "qunit";
 import { DEFAULT_TYPE_FILTER } from "discourse/components/search-menu";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import searchFixtures from "discourse/tests/fixtures/search-fixtures";
-import {
+import { acceptance, queryAll } from "discourse/tests/helpers/qunit-helpers";
-  acceptance,
-  query,
-  queryAll,
-} from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 
-const clickOutside = () =>
+const clickOutside = () => triggerEvent("header.d-header", "pointerdown");
-  triggerEvent(document.querySelector("header.d-header"), "pointerdown");
 
 acceptance("Search - Anonymous", function (needs) {
   needs.pretender((server, helper) => {
@@ -349,7 +344,7 @@ acceptance("Search - Anonymous", function (needs) {
       .doesNotExist("search context indicator is no longer visible");
 
     await fillIn("#search-term", "dev");
-    await query("#search-term").focus();
+    await focus("#search-term");
     await triggerKeyEvent(document.activeElement, "keyup", "ArrowDown");
     await triggerKeyEvent(document.activeElement, "keydown", "ArrowDown");
     await click(document.activeElement);
@@ -359,7 +354,7 @@ acceptance("Search - Anonymous", function (needs) {
       .exists("search context indicator is visible");
 
     await fillIn("#search-term", "");
-    await query("#search-term").focus();
+    await focus("#search-term");
     await triggerKeyEvent("#search-term", "keyup", "Backspace");
 
     assert
@@ -548,9 +543,7 @@ acceptance("Search - Authenticated", function (needs) {
     assert.dom(`${container} ul li`).exists("has a list of items");
 
     await triggerKeyEvent("#search-term", "keyup", "Enter");
-    assert
+    assert.dom(`${container} .search-result-topic`).exists("has topic results");
-      .dom(query(`${container} .search-result-topic`))
-      .exists("has topic results");
 
     await triggerKeyEvent("#search-term", "keyup", "ArrowDown");
     assert
@@ -576,11 +569,9 @@ acceptance("Search - Authenticated", function (needs) {
       );
 
     await triggerKeyEvent("#search-term", "keydown", "Escape");
-    assert.strictEqual(
+    assert
-      document.activeElement,
+      .dom("#search-button")
-      query("#search-button"),
+      .isFocused("Escaping search returns focus to search button");
-      "Escaping search returns focus to search button"
-    );
     assert.dom(".search-menu").doesNotExist("Esc removes search dropdown");
 
     await click("#search-button");
@@ -593,16 +584,14 @@ acceptance("Search - Authenticated", function (needs) {
     );
 
     await triggerKeyEvent("#search-term", "keyup", "Enter");
-    assert
+    assert.dom(`${container} .search-result-topic`).exists("has topic results");
-      .dom(query(`${container} .search-result-topic`))
-      .exists("has topic results");
 
     await triggerKeyEvent("#search-term", "keyup", "Enter");
     assert
-      .dom(query(`.search-container`))
+      .dom(".search-container")
       .exists("second Enter hit goes to full page search");
     assert
-      .dom(query(`.search-menu`))
+      .dom(".search-menu")
       .doesNotExist("search dropdown is collapsed after second Enter hit");
 
     // new search launched, Enter key should be reset
@@ -1164,7 +1153,7 @@ acceptance("Search - assistant", function (needs) {
     assert.dom(".btn.search-context").exists("shows the button");
 
     await fillIn("#search-term", "");
-    await query("input#search-term").focus();
+    await focus("input#search-term");
     await triggerKeyEvent("input#search-term", "keyup", "Backspace");
 
     assert.dom(".btn.search-context").doesNotExist("removes the button");
@@ -1176,7 +1165,7 @@ acceptance("Search - assistant", function (needs) {
       .exists("shows the button when reinvoking search");
 
     await fillIn("#search-term", "emoji");
-    await query("input#search-term").focus();
+    await focus("input#search-term");
     await triggerKeyEvent("#search-term", "keyup", "Enter");
 
     assert

app/assets/javascripts/discourse/tests/acceptance/sidebar-narrow-desktop-test.js

@@ -36,7 +36,7 @@ acceptance("Sidebar - Narrow Desktop", function (needs) {
       .dom(".sidebar-hamburger-dropdown")
       .exists("cloak sidebar is displayed");
 
-    await triggerEvent(document.querySelector(".header-cloak"), "pointerdown");
+    await triggerEvent(".header-cloak", "pointerdown");
 
     assert
       .dom(".sidebar-hamburger-dropdown")

app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js

@@ -1,4 +1,4 @@
-import { click, currentURL, settled, visit } from "@ember/test-helpers";
+import { click, currentURL, find, settled, visit } from "@ember/test-helpers";
 import { skip, test } from "qunit";
 import { configureEyeline } from "discourse/lib/eyeline";
 import { cloneJSON } from "discourse/lib/object";
@@ -8,7 +8,6 @@ import topFixtures from "discourse/tests/fixtures/top-fixtures";
 import {
   acceptance,
   publishToMessageBus,
-  query,
 } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 
@@ -134,20 +133,20 @@ acceptance("Topic Discovery", function (needs) {
 
   test("switching between tabs", async function (assert) {
     await visit("/latest");
-    assert.strictEqual(
+    assert
-      query(".topic-list-body .topic-list-item:first-of-type").dataset.topicId,
+      .dom(".topic-list-body .topic-list-item:first-of-type")
-      "11557",
+      .hasAttribute(
-      "shows the correct latest topics"
+        "data-topic-id",
-    );
+        "11557",
+        "shows the correct latest topics"
+      );
 
     await click(".navigation-container a[href='/hot']");
     assert.strictEqual(currentURL(), "/hot", "switches to hot");
 
-    assert.deepEqual(
+    assert
-      query(".topic-list-body .topic-list-item:first-of-type").dataset.topicId,
+      .dom(".topic-list-body .topic-list-item:first-of-type")
-      "13088",
+      .hasAttribute("data-topic-id", "13088", "shows the correct hot topics");
-      "shows the correct hot topics"
-    );
 
     await click(".navigation-container a[href='/categories']");
     assert.strictEqual(currentURL(), "/categories", "switches to categories");
@@ -156,13 +155,16 @@ acceptance("Topic Discovery", function (needs) {
   test("refreshing tabs", async function (assert) {
     const assertShowingLatest = (url) => {
       assert.strictEqual(currentURL(), url, "stays on latest");
-      const el = query(".topic-list-body .topic-list-item:first-of-type");
-      assert.strictEqual(el.closest(".hidden"), null, "topic list is visible");
       assert.strictEqual(
-        el.dataset.topicId,
+        find(".topic-list-body .topic-list-item:first-of-type").closest(
-        "11557",
+          ".hidden"
-        "shows the correct topic"
+        ),
+        null,
+        "topic list is visible"
       );
+      assert
+        .dom(".topic-list-body .topic-list-item:first-of-type")
+        .hasAttribute("data-topic-id", "11557", "shows the correct topic");
     };
 
     await visit("/latest");

app/assets/javascripts/discourse/tests/acceptance/topic-quote-button-test.js

@@ -2,11 +2,7 @@ import { click, triggerKeyEvent, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { cloneJSON } from "discourse/lib/object";
 import topicFixtures from "discourse/tests/fixtures/topic";
-import {
+import { acceptance, selectText } from "discourse/tests/helpers/qunit-helpers";
-  acceptance,
-  query,
-  selectText,
-} from "discourse/tests/helpers/qunit-helpers";
 import { i18n } from "discourse-i18n";
 
 acceptance("Topic - Quote button - logged in", function (needs) {
@@ -82,12 +78,12 @@ acceptance("Closed Topic - Quote button - logged in", function (needs) {
     assert.dom(".insert-quote").exists("shows the quote button");
 
     await click(".insert-quote");
-    assert.true(
+    assert
-      query(".d-editor-input")
+      .dom(".d-editor-input")
-        .value.trim()
+      .hasValue(
-        .startsWith("Continuing the discussion from"),
+        /^\s*Continuing the discussion from/,
-      "quote action defaults to reply as new topic (since topic is closed)"
+        "quote action defaults to reply as new topic (since topic is closed)"
-    );
+      );
   });
 });
 

app/assets/javascripts/discourse/tests/acceptance/topic-user-status-test.js

@@ -5,18 +5,15 @@ import TopicFixtures from "discourse/tests/fixtures/topic";
 import {
   acceptance,
   publishToMessageBus,
-  query,
 } from "discourse/tests/helpers/qunit-helpers";
 
 acceptance("Topic - User Status", function (needs) {
-  const status = { emoji: "tooth", description: "off to dentist" };
-
   needs.user();
   needs.pretender((server, helper) => {
     server.get("/t/299/1.json", () => {
       const response = cloneJSON(TopicFixtures["/t/299/1.json"]);
       response.post_stream.posts.forEach((post) => {
-        post.user_status = status;
+        post.user_status = { emoji: "tooth", description: "off to dentist" };
 
         // we need the poster's name to be different from username
         // so when display_name_on_posts = true, both name and username will be shown:
@@ -50,7 +47,6 @@ acceptance("Topic - User Status", function (needs) {
 
 acceptance("Topic - User Status - live updates", function (needs) {
   const userId = 1;
-  const status = { emoji: "tooth", description: "off to dentist" };
 
   needs.user();
   needs.pretender((server, helper) => {
@@ -72,12 +68,9 @@ acceptance("Topic - User Status - live updates", function (needs) {
     assert
       .dom(".topic-post .user-status-message")
       .exists({ count: 3 }, "all posts has user status");
-    assert.true(
+    assert
-      query(".topic-post .user-status-message .emoji").src.includes(
+      .dom(".topic-post .user-status-message .emoji")
-        status.emoji
+      .hasAttribute("src", /tooth/, "status emoji is correct");
-      ),
-      "status emoji is correct"
-    );
 
     const newStatus = { emoji: "surfing_man", description: "surfing" };
     await publishToMessageBus(`/user-status`, { [userId]: newStatus });
@@ -85,12 +78,9 @@ acceptance("Topic - User Status - live updates", function (needs) {
     assert
       .dom(".topic-post .user-status-message")
       .exists({ count: 3 }, "all posts has user status");
-    assert.true(
+    assert
-      query(".topic-post .user-status-message .emoji").src.includes(
+      .dom(".topic-post .user-status-message .emoji")
-        newStatus.emoji
+      .hasAttribute("src", /surfing_man/, "status emoji is correct");
-      ),
-      "status emoji is correct"
-    );
   });
 
   test("removing status and setting again", async function (assert) {
@@ -100,12 +90,9 @@ acceptance("Topic - User Status - live updates", function (needs) {
     assert
       .dom(".topic-post .user-status-message")
       .exists({ count: 3 }, "all posts has user status");
-    assert.true(
+    assert
-      query(".topic-post .user-status-message .emoji").src.includes(
+      .dom(".topic-post .user-status-message .emoji")
-        status.emoji
+      .hasAttribute("src", /tooth/, "status emoji is correct");
-      ),
-      "status emoji is correct"
-    );
 
     await publishToMessageBus(`/user-status`, { [userId]: null });
 
@@ -119,11 +106,8 @@ acceptance("Topic - User Status - live updates", function (needs) {
     assert
       .dom(".topic-post .user-status-message")
       .exists({ count: 3 }, "all posts have user status");
-    assert.true(
+    assert
-      query(".topic-post .user-status-message .emoji").src.includes(
+      .dom(".topic-post .user-status-message .emoji")
-        newStatus.emoji
+      .hasAttribute("src", /surfing_man/, "status emoji is correct");
-      ),
-      "status emoji is correct"
-    );
   });
 });

app/assets/javascripts/discourse/tests/acceptance/user-menu-test.js

@@ -20,7 +20,6 @@ import {
   acceptance,
   loggedInUser,
   publishToMessageBus,
-  query,
   queryAll,
   updateCurrentUser,
 } from "discourse/tests/helpers/qunit-helpers";
@@ -296,34 +295,28 @@ acceptance("User menu", function (needs) {
       expectedTabOrder,
       "data-tab-number of the tabs has no gaps when custom tabs are added and the tabs are in the right order"
     );
-    assert.strictEqual(
+    assert
-      query(".tabs-list.bottom-tabs .btn").dataset.tabNumber,
+      .dom(".tabs-list.bottom-tabs .btn")
-      "9",
+      .hasAttribute(
-      "bottom tab has the correct data-tab-number"
+        "data-tab-number",
-    );
+        "9",
+        "bottom tab has the correct data-tab-number"
+      );
 
-    let customTab1Bubble = query(
+    assert
-      "#user-menu-button-custom-tab-1 .badge-notification"
+      .dom("#user-menu-button-custom-tab-1 .badge-notification")
-    );
+      .hasText("73", "bubble shows the right count");
 
-    assert.dom(customTab1Bubble).hasText("73", "bubble shows the right count");
+    assert
-
+      .dom("#user-menu-button-custom-tab-2 .badge-notification")
-    const customTab2Bubble = query(
+      .hasText("29", "bubble shows the right count");
-      "#user-menu-button-custom-tab-2 .badge-notification"
-    );
-
-    assert.dom(customTab2Bubble).hasText("29", "bubble shows the right count");
 
     await publishToMessageBus(`/notification/${loggedInUser().id}`, {
       unread_high_priority_notifications: 18,
     });
 
-    customTab1Bubble = query(
-      "#user-menu-button-custom-tab-1 .badge-notification"
-    );
-
     assert
-      .dom(customTab1Bubble)
+      .dom("#user-menu-button-custom-tab-1 .badge-notification")
       .hasText(
         "18",
         "displayed bubble count updates when the value is changed"
@@ -413,51 +406,56 @@ acceptance("User menu", function (needs) {
   });
 
   test("the profile tab", async function (assert) {
-    const clickOutside = () =>
+    const clickOutside = () => triggerEvent("header.d-header", "pointerdown");
-      triggerEvent(document.querySelector("header.d-header"), "pointerdown");
 
     updateCurrentUser({ draft_count: 13 });
     await visit("/");
     await click(".d-header-icons .current-user button");
     await click("#user-menu-button-profile");
 
-    const summaryLink = query("#quick-access-profile ul li.summary a");
-    assert.true(
-      summaryLink.href.endsWith("/u/eviltrout/summary"),
-      "has a link to the summary page of the user"
-    );
     assert
-      .dom(summaryLink)
+      .dom("#quick-access-profile ul li.summary a")
+      .hasAttribute(
+        "href",
+        /\/u\/eviltrout\/summary$/,
+        "has a link to the summary page of the user"
+      );
+    assert
+      .dom("#quick-access-profile ul li.summary a")
       .hasText(i18n("user.summary.title"), "summary link has the right label");
     assert
-      .dom(".d-icon-user", summaryLink)
+      .dom("#quick-access-profile ul li.summary a .d-icon-user")
       .exists("summary link has the right icon");
 
-    const activityLink = query("#quick-access-profile ul li.activity a");
-    assert.true(
-      activityLink.href.endsWith("/u/eviltrout/activity"),
-      "has a link to the activity page of the user"
-    );
     assert
-      .dom(activityLink)
+      .dom("#quick-access-profile ul li.activity a")
+      .hasAttribute(
+        "href",
+        /\/u\/eviltrout\/activity$/,
+        "has a link to the activity page of the user"
+      );
+    assert
+      .dom("#quick-access-profile ul li.activity a")
       .hasText(
         i18n("user.activity_stream"),
         "activity link has the right label"
       );
     assert
-      .dom(".d-icon-bars-staggered", activityLink)
+      .dom("#quick-access-profile ul li.activity a .d-icon-bars-staggered")
       .exists("activity link has the right icon");
 
-    const invitesLink = query("#quick-access-profile ul li.invites a");
-    assert.true(
-      invitesLink.href.endsWith("/u/eviltrout/invited"),
-      "has a link to the invites page of the user"
-    );
     assert
-      .dom(invitesLink)
+      .dom("#quick-access-profile ul li.invites a")
+      .hasAttribute(
+        "href",
+        /\/u\/eviltrout\/invited$/,
+        "has a link to the invites page of the user"
+      );
+    assert
+      .dom("#quick-access-profile ul li.invites a")
       .hasText(i18n("user.invited.title"), "invites link has the right label");
     assert
-      .dom(".d-icon-user-plus", invitesLink)
+      .dom("#quick-access-profile ul li.invites a .d-icon-user-plus")
       .exists("invites link has the right icon");
 
     await clickOutside();
@@ -470,47 +468,48 @@ acceptance("User menu", function (needs) {
       .dom("#quick-access-profile ul li.invites")
       .doesNotExist("invites link not shown when the user can't invite");
 
-    const draftsLink = query("#quick-access-profile ul li.drafts a");
-    assert.true(
-      draftsLink.href.endsWith("/u/eviltrout/activity/drafts"),
-      "has a link to the drafts page of the user"
-    );
     assert
-      .dom(draftsLink)
+      .dom("#quick-access-profile ul li.drafts a")
+      .hasAttribute(
+        "href",
+        /\/u\/eviltrout\/activity\/drafts$/,
+        "has a link to the drafts page of the user"
+      );
+    assert
+      .dom("#quick-access-profile ul li.drafts a")
       .hasText(
         i18n("drafts.label_with_count", { count: 13 }),
         "drafts link has the right label with count of the user's drafts"
       );
     assert
-      .dom(".d-icon-user_menu\\.drafts", draftsLink)
+      .dom("#quick-access-profile ul li.drafts a .d-icon-user_menu\\.drafts")
       .exists("drafts link has the right icon");
 
-    const preferencesLink = query("#quick-access-profile ul li.preferences a");
-    assert.true(
-      preferencesLink.href.endsWith("/u/eviltrout/preferences"),
-      "has a link to the preferences page of the user"
-    );
     assert
-      .dom(preferencesLink)
+      .dom("#quick-access-profile ul li.preferences a")
+      .hasAttribute(
+        "href",
+        /\/u\/eviltrout\/preferences$/,
+        "has a link to the preferences page of the user"
+      );
+    assert
+      .dom("#quick-access-profile ul li.preferences a")
       .hasText(
         i18n("user.preferences.title"),
         "preferences link has the right label"
       );
     assert
-      .dom(".d-icon-gear", preferencesLink)
+      .dom("#quick-access-profile ul li.preferences a .d-icon-gear")
       .exists("preferences link has the right icon");
 
-    let doNotDisturbButton = query(
-      "#quick-access-profile ul li.do-not-disturb .btn"
-    );
     assert
-      .dom(doNotDisturbButton)
+      .dom("#quick-access-profile ul li.do-not-disturb .btn")
       .hasText(
         i18n("pause_notifications.label"),
         "Do Not Disturb button has the right label"
       );
     assert
-      .dom(".d-icon-toggle-off", doNotDisturbButton)
+      .dom("#quick-access-profile ul li.do-not-disturb .btn .d-icon-toggle-off")
       .exists("Do Not Disturb button has the right icon");
 
     await clickOutside();
@@ -520,17 +519,14 @@ acceptance("User menu", function (needs) {
     await click(".d-header-icons .current-user button");
     await click("#user-menu-button-profile");
 
-    doNotDisturbButton = query(
-      "#quick-access-profile ul li.do-not-disturb .btn"
-    );
     assert
-      .dom(doNotDisturbButton)
+      .dom("#quick-access-profile ul li.do-not-disturb .btn")
       .hasText(
         `${i18n("pause_notifications.label")} 2h`,
         "Do Not Disturb button has the right label when Do Not Disturb is enabled"
       );
     assert
-      .dom(".d-icon-toggle-on", doNotDisturbButton)
+      .dom("#quick-access-profile ul li.do-not-disturb .btn .d-icon-toggle-on")
       .exists(
         "Do Not Disturb button has the right icon when Do Not Disturb is enabled"
       );
@@ -538,17 +534,16 @@ acceptance("User menu", function (needs) {
     assert
       .dom("#quick-access-profile ul li.enable-anonymous .btn")
       .exists("toggle anon button is shown");
-    let toggleAnonButton = query(
-      "#quick-access-profile ul li.enable-anonymous .btn"
-    );
     assert
-      .dom(toggleAnonButton)
+      .dom("#quick-access-profile ul li.enable-anonymous .btn")
       .hasText(
         i18n("switch_to_anon"),
         "toggle anonymous button has the right label when the user isn't anonymous"
       );
     assert
-      .dom(".d-icon-user-secret", toggleAnonButton)
+      .dom(
+        "#quick-access-profile ul li.enable-anonymous .btn .d-icon-user-secret"
+      )
       .exists(
         "toggle anonymous button has the right icon when the user isn't anonymous"
       );
@@ -558,17 +553,14 @@ acceptance("User menu", function (needs) {
     await click(".d-header-icons .current-user button");
     await click("#user-menu-button-profile");
 
-    toggleAnonButton = query(
-      "#quick-access-profile ul li.disable-anonymous .btn"
-    );
     assert
-      .dom(toggleAnonButton)
+      .dom("#quick-access-profile ul li.disable-anonymous .btn")
       .hasText(
         i18n("switch_from_anon"),
         "toggle anonymous button has the right label when the user is anonymous"
       );
     assert
-      .dom(".d-icon-ban", toggleAnonButton)
+      .dom("#quick-access-profile ul li.disable-anonymous .btn .d-icon-ban")
       .exists(
         "toggle anonymous button has the right icon when the user is anonymous"
       );
@@ -658,12 +650,11 @@ acceptance("User menu", function (needs) {
         "toggle anon button is not shown if the user is not allowed to post anonymously"
       );
 
-    const logoutButton = query("#quick-access-profile ul li.logout .btn");
     assert
-      .dom(logoutButton)
+      .dom("#quick-access-profile ul li.logout .btn")
       .hasText(i18n("user.log_out"), "logout button has the right label");
     assert
-      .dom(".d-icon-right-from-bracket", logoutButton)
+      .dom("#quick-access-profile ul li.logout .btn .d-icon-right-from-bracket")
       .exists("logout button has the right icon");
   });
 
@@ -687,25 +678,27 @@ acceptance("User menu", function (needs) {
     await click(".d-header-icons .current-user button");
     await click("#user-menu-button-profile");
 
-    const item1 = query("#quick-access-profile ul li.test-1-item");
-
     assert
-      .dom(".d-icon-wrench", item1)
+      .dom("#quick-access-profile ul li.test-1-item .d-icon-wrench")
       .exists("The first item's icon is rendered");
-    assert.true(
+    assert
-      item1.querySelector("a").href.endsWith("/test_1_path"),
+      .dom("#quick-access-profile ul li.test-1-item a")
-      "The first item's link is present with correct href"
+      .hasAttribute(
-    );
+        "href",
-
+        /\/test_1_path$/,
-    const item2 = query("#quick-access-profile ul li.test-2-item");
+        "The first item's link is present with correct href"
+      );
 
     assert
-      .dom(".d-icon", item2)
+      .dom("#quick-access-profile ul li.test-2-item .d-icon")
       .doesNotExist("The second item doesn't have an icon");
-    assert.true(
+    assert
-      item2.querySelector("a").href.endsWith("/test_2_path"),
+      .dom("#quick-access-profile ul li.test-2-item a")
-      "The second item's link is present with correct href"
+      .hasAttribute(
-    );
+        "href",
+        /\/test_2_path$/,
+        "The second item's link is present with correct href"
+      );
   });
 
   test("the active tab can be clicked again to navigate to a page", async function (assert) {
@@ -1031,11 +1024,8 @@ acceptance("User menu - Dismiss button", function (needs) {
     await click(".d-header-icons .current-user button");
 
     await click("#user-menu-button-other-notifications");
-    let othersBadgeNotification = query(
-      "#user-menu-button-other-notifications .badge-notification"
-    );
     assert
-      .dom(othersBadgeNotification)
+      .dom("#user-menu-button-other-notifications .badge-notification")
       .hasText("4", "badge shows the right count");
 
     await click(".user-menu .notifications-dismiss");

app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js

@@ -1,10 +1,10 @@
-import { click, visit } from "@ember/test-helpers";
+import { click, find, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import cookie, { removeCookie } from "discourse/lib/cookie";
 import Session from "discourse/models/session";
 import Site from "discourse/models/site";
 import userFixtures from "discourse/tests/fixtures/user-fixtures";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 
@@ -26,7 +26,7 @@ acceptance("User Preferences - Interface", function (needs) {
       assert.dom(".saved").doesNotExist("hasn't been saved yet");
       await click(".save-changes");
       assert.dom(".saved").exists("it displays the saved message");
-      query(".saved").remove();
+      find(".saved").remove();
     };
 
     await visit("/u/eviltrout/preferences/interface");
@@ -213,11 +213,13 @@ acceptance(
 
       await visit("/u/eviltrout/preferences/interface");
       assert.dom(".light-color-scheme").exists("has light scheme dropdown");
-      assert.strictEqual(
+      assert
-        query(".light-color-scheme .selected-name").dataset.value,
+        .dom(".light-color-scheme .selected-name")
-        session.userColorSchemeId.toString(),
+        .hasAttribute(
-        "user's selected color scheme is selected value in light scheme dropdown"
+          "data-value",
-      );
+          session.userColorSchemeId.toString(),
+          "user's selected color scheme is selected value in light scheme dropdown"
+        );
     });
 
     test("display 'Theme default' when default color scheme is not marked as selectable", async function (assert) {
@@ -264,17 +266,19 @@ acceptance(
         assert.dom(".saved").doesNotExist("hasn't been saved yet");
         await click(".save-changes");
         assert.dom(".saved").exists("displays the saved message");
-        query(".saved").remove();
+        find(".saved").remove();
       };
 
       await visit("/u/eviltrout/preferences/interface");
       assert.dom(".light-color-scheme").exists("has regular dropdown");
       assert.dom(".dark-color-scheme").exists("has dark color scheme dropdown");
-      assert.strictEqual(
+      assert
-        query(".dark-color-scheme .selected-name").dataset.value,
+        .dom(".dark-color-scheme .selected-name")
-        session.userDarkSchemeId.toString(),
+        .hasAttribute(
-        "sets site default as selected dark scheme"
+          "data-value",
-      );
+          session.userDarkSchemeId.toString(),
+          "sets site default as selected dark scheme"
+        );
       assert
         .dom(".control-group.dark-mode")
         .doesNotExist("does not show disable dark mode checkbox");

app/assets/javascripts/discourse/tests/acceptance/video-placeholder-test.js

@@ -1,4 +1,4 @@
-import { click, visit } from "@ember/test-helpers";
+import { click, triggerEvent, visit } from "@ember/test-helpers";
 import { test } from "qunit";
 import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 
@@ -40,8 +40,7 @@ acceptance("Video Placeholder Test", function () {
 
     const video = document.querySelector("video");
     video.play = function () {}; // We don't actually want the video to play in our test
-    const canPlayEvent = new Event("canplay");
+    await triggerEvent(video, "canplay");
-    video.dispatchEvent(canPlayEvent);
 
     assert
       .dom(video)

app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js

@@ -1,5 +1,6 @@
 import { run } from "@ember/runloop";
 import {
+  find,
   getApplication,
   settled,
   triggerKeyEvent,
@@ -589,15 +590,23 @@ export function createFile(name, type = "image/png", blobData = null) {
   return file;
 }
 
-export async function paste(element, text, otherClipboardData = {}) {
+export async function paste(selector, text, otherClipboardData = {}) {
-  let e = new Event("paste", { cancelable: true });
+  const e = new Event("paste", { cancelable: true });
   e.clipboardData = deepMerge({ getData: () => text }, otherClipboardData);
+
+  const element = typeof selector === "string" ? find(selector) : selector;
+
   element.dispatchEvent(e);
+
   await settled();
   return e;
 }
 
 export async function simulateKey(element, key) {
+  if (typeof element === "string") {
+    element = find(element);
+  }
+
   if (key === "\b") {
     await triggerKeyEvent(element, "keydown", "Backspace");
 

app/assets/javascripts/discourse/tests/integration/components/admin-theme-settings-editor-test.gjs

@@ -1,7 +1,6 @@
-import { click, fillIn, render } from "@ember/test-helpers";
+import { click, fillIn, find, render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import ThemeSettingsEditor from "admin/components/theme-settings-editor";
 
 module(
@@ -89,7 +88,7 @@ module(
         <ThemeSettingsEditor @model={{model}} />
       </template>);
 
-      query(".ace").aceEditor.session.doc.setValue(
+      find(".ace").aceEditor.session.doc.setValue(
         JSON.stringify([{ setting: "bar", value: "bar" }])
       );
       await click("button#save");
@@ -112,7 +111,7 @@ module(
         <ThemeSettingsEditor @model={{model}} />
       </template>);
 
-      query(".ace").aceEditor.session.doc.setValue(
+      find(".ace").aceEditor.session.doc.setValue(
         JSON.stringify([
           { setting: "foo", value: "foo" },
           { setting: "bar", value: "bar" },

app/assets/javascripts/discourse/tests/integration/components/d-editor-test.js

@@ -2,6 +2,7 @@ import { next } from "@ember/runloop";
 import {
   click,
   fillIn,
+  find,
   focus,
   render,
   settled,
@@ -15,7 +16,7 @@ import { setCaretPosition } from "discourse/lib/utilities";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import formatTextWithSelection from "discourse/tests/helpers/d-editor-helper";
 import emojiPicker from "discourse/tests/helpers/emoji-picker-helper";
-import { paste, query, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import { paste, queryAll } from "discourse/tests/helpers/qunit-helpers";
 import {
   getTextareaSelection,
   setTextareaSelection,
@@ -63,6 +64,10 @@ module("Integration | Component | d-editor", function (hooks) {
   });
 
   function jumpEnd(textarea) {
+    if (typeof textarea === "string") {
+      textarea = find(textarea);
+    }
+
     textarea.selectionStart = textarea.value.length;
     textarea.selectionEnd = textarea.value.length;
     return textarea;
@@ -79,7 +84,7 @@ module("Integration | Component | d-editor", function (hooks) {
 
       await render(hbs`<DEditor @value={{this.value}} />`);
 
-      const textarea = jumpEnd(query("textarea.d-editor-input"));
+      const textarea = jumpEnd("textarea.d-editor-input");
       await testFunc.call(this, assert, textarea);
     });
   }
@@ -92,7 +97,7 @@ module("Integration | Component | d-editor", function (hooks) {
         hbs`<DEditor @value={{this.value}} @composerEvents={{true}} />`
       );
 
-      const textarea = jumpEnd(query("textarea.d-editor-input"));
+      const textarea = jumpEnd("textarea.d-editor-input");
       await testFunc.call(this, assert, textarea);
     });
   }
@@ -247,7 +252,7 @@ function xyz(x, y, z) {
 
     await render(hbs`<DEditor @value={{this.value}} />`);
 
-    const textarea = query("textarea.d-editor-input");
+    const textarea = find("textarea.d-editor-input");
     textarea.selectionStart = 0;
     textarea.selectionEnd = textarea.value.length;
 
@@ -269,7 +274,7 @@ function xyz(x, y, z) {
 
     await render(hbs`<DEditor @value={{this.value}} />`);
 
-    const textarea = jumpEnd(query("textarea.d-editor-input"));
+    const textarea = jumpEnd("textarea.d-editor-input");
 
     await click("button.code");
     assert.strictEqual(this.value, `    ${i18n("composer.code_text")}`);
@@ -350,7 +355,7 @@ third line`
     this.set("value", "existing");
 
     await render(hbs`<DEditor @value={{this.value}} />`);
-    const textarea = query("textarea.d-editor-input");
+    const textarea = find("textarea.d-editor-input");
     textarea.selectionStart = 0;
     textarea.selectionEnd = 8;
 
@@ -371,7 +376,7 @@ third line`
 
     await render(hbs`<DEditor @value={{this.value}} />`);
 
-    const textarea = jumpEnd(query("textarea.d-editor-input"));
+    const textarea = jumpEnd("textarea.d-editor-input");
 
     await click("button.code");
     assert.strictEqual(
@@ -486,7 +491,7 @@ third line`
       hbs`<DEditor @value={{this.value}} @composerEvents={{true}} />`
     );
 
-    const textarea = jumpEnd(query("textarea.d-editor-input"));
+    const textarea = jumpEnd("textarea.d-editor-input");
 
     textarea.selectionStart = 0;
 
@@ -507,7 +512,7 @@ third line`
       hbs`<DEditor @value={{this.value}} @composerEvents={{true}} />`
     );
 
-    const textarea = jumpEnd(query("textarea.d-editor-input"));
+    const textarea = jumpEnd("textarea.d-editor-input");
 
     textarea.selectionStart = 6;
     textarea.selectionEnd = 10;
@@ -709,7 +714,7 @@ third line`
     // the in-element outlet container necessary for DMenu to work
     await render(hbs`<DMenus /><DEditor @value={{this.value}} />`);
     const picker = emojiPicker();
-    jumpEnd(query("textarea.d-editor-input"));
+    jumpEnd("textarea.d-editor-input");
     await click(".d-editor-button-bar .emoji");
     await picker.select("raised_hands");
 
@@ -721,7 +726,7 @@ third line`
 
     await click("textarea.d-editor-input");
     await fillIn(".d-editor-input", "starting to type an emoji like :woman");
-    jumpEnd(query("textarea.d-editor-input"));
+    jumpEnd("textarea.d-editor-input");
     await triggerKeyEvent(".d-editor-input", "keyup", "Backspace"); //simplest way to trigger more menu here
     await click(".ac-emoji li:last-child a");
     await picker.select("womans_clothes");
@@ -892,8 +897,7 @@ third line`
       hbs`<DEditor @value={{this.value}} @composerEvents={{true}} />`
     );
 
-    let element = query(".d-editor");
+    await paste(".d-editor", "\ta\tb\n1\t2\t3");
-    await paste(element, "\ta\tb\n1\t2\t3");
     assert.strictEqual(this.value, "||a|b|\n|---|---|---|\n|1|2|3|\n");
 
     document.execCommand("undo");
@@ -908,8 +912,7 @@ third line`
       hbs`<DEditor @value={{this.value}} @composerEvents={{true}} />`
     );
 
-    let element = query(".d-editor");
+    await paste(".d-editor", '\ta\tb\n1\t"2\n2.5"\t3');
-    await paste(element, '\ta\tb\n1\t"2\n2.5"\t3');
     assert.strictEqual(this.value, "||a|b|\n|---|---|---|\n|1|2<br>2.5|3|\n");
   });
 
@@ -918,13 +921,12 @@ third line`
     async function (assert, textarea) {
       this.set("value", "See discourse in action");
       setTextareaSelection(textarea, 4, 13);
-      const element = query(".d-editor");
+      const event = await paste(".d-editor", "https://www.discourse.org/");
-      const event = await paste(element, "https://www.discourse.org/");
       assert.strictEqual(
         this.value,
         "See [discourse](https://www.discourse.org/) in action"
       );
-      assert.strictEqual(event.defaultPrevented, true);
+      assert.true(event.defaultPrevented);
 
       document.execCommand("undo");
       assert.strictEqual(this.value, "See discourse in action");
@@ -936,11 +938,10 @@ third line`
     async function (assert, textarea) {
       this.set("value", "good morning");
       setTextareaSelection(textarea, 5, 12);
-      const element = query(".d-editor");
+      const event = await paste(".d-editor", "evening");
-      const event = await paste(element, "evening");
       // Synthetic paste events do not manipulate document content.
       assert.strictEqual(this.value, "good morning");
-      assert.strictEqual(event.defaultPrevented, false);
+      assert.false(event.defaultPrevented);
     }
   );
 
@@ -949,11 +950,10 @@ third line`
     async function (assert, textarea) {
       this.set("value", "a link example:");
       jumpEnd(textarea);
-      const element = query(".d-editor");
+      const event = await paste(".d-editor", "https://www.discourse.org/");
-      const event = await paste(element, "https://www.discourse.org/");
       // Synthetic paste events do not manipulate document content.
       assert.strictEqual(this.value, "a link example:");
-      assert.strictEqual(event.defaultPrevented, false);
+      assert.false(event.defaultPrevented);
     }
   );
 
@@ -962,14 +962,13 @@ third line`
     async function (assert, textarea) {
       this.set("value", "a link example:");
       setTextareaSelection(textarea, 0, 1);
-      const element = query(".d-editor");
       const event = await paste(
-        element,
+        ".d-editor",
         "Try out Discourse at: https://www.discourse.org/"
       );
       // Synthetic paste events do not manipulate document content.
       assert.strictEqual(this.value, "a link example:");
-      assert.strictEqual(event.defaultPrevented, false);
+      assert.false(event.defaultPrevented);
     }
   );
 
@@ -978,10 +977,9 @@ third line`
     async function (assert, textarea) {
       this.set("value", "team email");
       setTextareaSelection(textarea, 5, 10);
-      const element = query(".d-editor");
+      const event = await paste(".d-editor", "mailto:team@discourse.org");
-      const event = await paste(element, "mailto:team@discourse.org");
       assert.strictEqual(this.value, "team [email](mailto:team@discourse.org)");
-      assert.strictEqual(event.defaultPrevented, true);
+      assert.true(event.defaultPrevented);
     }
   );
 
@@ -990,11 +988,10 @@ third line`
     async function (assert, textarea) {
       this.set("value", "Try https://www.discourse.org");
       setTextareaSelection(textarea, 0, 29);
-      const element = query(".d-editor");
+      const event = await paste(".d-editor", "https://www.discourse.com/");
-      const event = await paste(element, "https://www.discourse.com/");
       // Synthetic paste events do not manipulate document content.
       assert.strictEqual(this.value, "Try https://www.discourse.org");
-      assert.strictEqual(event.defaultPrevented, false);
+      assert.false(event.defaultPrevented);
     }
   );
 
@@ -1003,11 +1000,10 @@ third line`
     async function (assert, textarea) {
       this.set("value", "hello [url=foobar]foobar[/url]");
       setTextareaSelection(textarea, 0, 30);
-      const element = query(".d-editor");
+      const event = await paste(".d-editor", "https://www.discourse.com/");
-      const event = await paste(element, "https://www.discourse.com/");
       // Synthetic paste events do not manipulate document content.
       assert.strictEqual(this.value, "hello [url=foobar]foobar[/url]");
-      assert.strictEqual(event.defaultPrevented, false);
+      assert.false(event.defaultPrevented);
     }
   );
 

app/assets/javascripts/discourse/tests/integration/components/date-input-test.js

@@ -1,4 +1,4 @@
-import { render } from "@ember/test-helpers";
+import { fillIn, render, triggerEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
@@ -24,8 +24,8 @@ module("Integration | Component | date-input", function (hooks) {
       hbs`<DateInput @date={{this.date}} @onChange={{this.onChange}} />`
     );
 
-    document.querySelector(".date-picker").value = "2019-01-02";
+    await fillIn(".date-picker", "2019-01-02");
-    document.querySelector(".date-picker").dispatchEvent(new Event("change"));
+    await triggerEvent(".date-picker", "change");
 
     assert.true(this.date.isSame(DEFAULT_DATE));
   });
@@ -38,8 +38,8 @@ module("Integration | Component | date-input", function (hooks) {
       hbs`<DateInput @date={{this.date}} @onChange={{this.onChange}} />`
     );
 
-    document.querySelector(".date-picker").value = "2019-02-02";
+    await fillIn(".date-picker", "2019-02-02");
-    document.querySelector(".date-picker").dispatchEvent(new Event("change"));
+    await triggerEvent(".date-picker", "change");
 
     assert.true(this.date.isSame(moment("2019-02-02")));
   });

app/assets/javascripts/discourse/tests/integration/components/date-time-input-range-test.js

@@ -2,25 +2,8 @@ import { fillIn, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 
-function fromDateInput() {
-  return query(".from.d-date-time-input .date-picker");
-}
-
-function fromTimeInput() {
-  return query(".from.d-date-time-input .d-time-input .combo-box-header");
-}
-
-function toDateInput() {
-  return query(".to.d-date-time-input .date-picker");
-}
-
-function toTimeInput() {
-  return query(".to.d-date-time-input .d-time-input .combo-box-header");
-}
-
 const DEFAULT_DATE_TIME_STRING = "2019-01-29 14:45";
 const DEFAULT_DATE_TIME = moment(DEFAULT_DATE_TIME_STRING);
 
@@ -34,21 +17,27 @@ module("Integration | Component | date-time-input-range", function (hooks) {
       hbs`<DateTimeInputRange @from={{this.state.from}} @to={{this.state.to}} @onChange={{fn (mut this.state)}} />`
     );
 
-    assert.dom(fromDateInput()).hasValue("2019-01-29");
+    assert.dom(".from.d-date-time-input .date-picker").hasValue("2019-01-29");
-    assert.strictEqual(fromTimeInput().dataset.name, "14:45");
+    assert
-    assert.dom(toDateInput()).hasNoValue();
+      .dom(".from.d-date-time-input .d-time-input .combo-box-header")
-    assert.strictEqual(toTimeInput().dataset.name, "--:--");
+      .hasAttribute("data-name", "14:45");
+    assert.dom(".to.d-date-time-input .date-picker").hasNoValue();
+    assert
+      .dom(".to.d-date-time-input .d-time-input .combo-box-header")
+      .hasAttribute("data-name", "--:--");
 
-    await fillIn(toDateInput(), "2019-01-29");
+    await fillIn(".to.d-date-time-input .date-picker", "2019-01-29");
     const toTimeSelectKit = selectKit(".to .d-time-input .select-kit");
     await toTimeSelectKit.expand();
+
     let rows = toTimeSelectKit.rows();
     assert.dom(rows[0]).hasAttribute("data-name", "14:45");
     assert.dom(rows[rows.length - 1]).hasAttribute("data-name", "23:45");
     await toTimeSelectKit.collapse();
 
-    await fillIn(toDateInput(), "2019-01-30");
+    await fillIn(".to.d-date-time-input .date-picker", "2019-01-30");
     await toTimeSelectKit.expand();
+
     rows = toTimeSelectKit.rows();
     assert.dom(rows[0]).hasAttribute("data-name", "00:00");
     assert.dom(rows[rows.length - 1]).hasAttribute("data-name", "23:45");
@@ -61,9 +50,10 @@ module("Integration | Component | date-time-input-range", function (hooks) {
       hbs`<DateTimeInputRange @from={{this.state.from}} @to={{this.state.to}} @relativeDate={{this.state.from}} @onChange={{fn (mut this.state)}} />`
     );
 
-    await fillIn(toDateInput(), "2019-01-29");
+    await fillIn(".to.d-date-time-input .date-picker", "2019-01-29");
     const toTimeSelectKit = selectKit(".to .d-time-input .select-kit");
     await toTimeSelectKit.expand();
+
     let rows = toTimeSelectKit.rows();
     assert.dom(rows[4]).hasAttribute("data-name", "15:45");
     assert.dom(rows[5]).hasAttribute("data-name", "16:15");
@@ -81,12 +71,16 @@ module("Integration | Component | date-time-input-range", function (hooks) {
       hbs`<DateTimeInputRange @from={{this.state.from}} @to={{this.state.to}} @onChange={{fn (mut this.state)}} @timezone="Europe/Paris" />`
     );
 
-    assert.dom(fromDateInput()).hasValue("2019-01-29");
+    assert.dom(".from.d-date-time-input .date-picker").hasValue("2019-01-29");
-    assert.strictEqual(fromTimeInput().dataset.name, "14:45");
+    assert
-    assert.dom(toDateInput()).hasNoValue();
+      .dom(".from.d-date-time-input .d-time-input .combo-box-header")
-    assert.strictEqual(toTimeInput().dataset.name, "--:--");
+      .hasAttribute("data-name", "14:45");
+    assert.dom(".to.d-date-time-input .date-picker").hasNoValue();
+    assert
+      .dom(".to.d-date-time-input .d-time-input .combo-box-header")
+      .hasAttribute("data-name", "--:--");
 
-    await fillIn(toDateInput(), "2019-01-29");
+    await fillIn(".to.d-date-time-input .date-picker", "2019-01-29");
     const toTimeSelectKit = selectKit(".to .d-time-input .select-kit");
     await toTimeSelectKit.expand();
     await toTimeSelectKit.selectRowByName("19:15");

app/assets/javascripts/discourse/tests/integration/components/date-time-input-test.js

@@ -1,16 +1,7 @@
-import { render } from "@ember/test-helpers";
+import { fillIn, render, triggerEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
-
-function dateInput() {
-  return query(".date-picker");
-}
-
-function timeInput() {
-  return query(".d-time-input .combo-box-header");
-}
 
 function setDate(date) {
   this.set("date", date);
@@ -26,8 +17,10 @@ module("Integration | Component | date-time-input", function (hooks) {
 
     await render(hbs`<DateTimeInput @date={{this.date}} />`);
 
-    assert.dom(dateInput()).hasValue("2019-01-29");
+    assert.dom(".date-picker").hasValue("2019-01-29");
-    assert.strictEqual(timeInput().dataset.name, "14:45");
+    assert
+      .dom(".d-time-input .combo-box-header")
+      .hasAttribute("data-name", "14:45");
   });
 
   test("prevents mutations", async function (assert) {
@@ -35,7 +28,7 @@ module("Integration | Component | date-time-input", function (hooks) {
 
     await render(hbs`<DateTimeInput @date={{this.date}} />`);
 
-    dateInput().value = "2019-01-02";
+    await fillIn(".date-picker", "2019-01-02");
 
     assert.true(this.date.isSame(DEFAULT_DATE_TIME));
   });
@@ -48,8 +41,8 @@ module("Integration | Component | date-time-input", function (hooks) {
       hbs`<DateTimeInput @date={{this.date}} @onChange={{this.onChange}} />`
     );
 
-    dateInput().value = "2019-01-02";
+    await fillIn(".date-picker", "2019-01-02");
-    dateInput().dispatchEvent(new Event("change"));
+    await triggerEvent(".date-picker", "change");
 
     assert.true(this.date.isSame(moment("2019-01-02 14:45")));
   });
@@ -74,12 +67,12 @@ module("Integration | Component | date-time-input", function (hooks) {
     await render(
       hbs`<DateTimeInput @date={{this.date}} @timezone={{this.timezone}} @onChange={{this.onChange}} />`
     );
-    dateInput().dispatchEvent(new Event("change"));
+    await triggerEvent(".date-picker", "change");
     assert.strictEqual(this.date.format(), "2023-05-05T12:00:00+01:00");
 
     this.setProperties({ timezone: "Australia/Sydney" });
 
-    dateInput().dispatchEvent(new Event("change"));
+    await triggerEvent(".date-picker", "change");
     assert.strictEqual(this.date.format(), "2023-05-05T12:00:00+10:00");
   });
 });

app/assets/javascripts/discourse/tests/integration/components/dialog-holder-test.js

@@ -1,6 +1,7 @@
 import {
   click,
   fillIn,
+  find,
   render,
   settled,
   triggerKeyEvent,
@@ -10,7 +11,6 @@ import { module, test } from "qunit";
 import GroupDeleteDialogMessage from "discourse/components/dialog-messages/group-delete";
 import SecondFactorConfirmPhrase from "discourse/components/dialog-messages/second-factor-confirm-phrase";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import { i18n } from "discourse-i18n";
 
 module("Integration | Component | dialog-holder", function (hooks) {
@@ -30,7 +30,7 @@ module("Integration | Component | dialog-holder", function (hooks) {
     });
     await settled();
 
-    assert.true(query(".dialog-overlay").offsetWidth > 0, "overlay is visible");
+    assert.true(find(".dialog-overlay").offsetWidth > 0, "overlay is visible");
     assert
       .dom(".dialog-body")
       .hasText("This is an error", "dialog has error message");
@@ -39,11 +39,9 @@ module("Integration | Component | dialog-holder", function (hooks) {
     await click(".dialog-overlay");
 
     assert.dom("#dialog-holder").exists("element is still in DOM");
-    assert.strictEqual(
+    assert
-      query(".dialog-overlay").offsetWidth,
+      .dom(".dialog-overlay")
-      0,
+      .hasProperty("offsetWidth", 0, "overlay is not visible");
-      "overlay is not visible"
-    );
     assert.dom("#dialog-holder").hasNoText("dialog is empty");
   });
 
@@ -61,7 +59,7 @@ module("Integration | Component | dialog-holder", function (hooks) {
     });
     await settled();
 
-    assert.true(query(".dialog-overlay").offsetWidth > 0, "overlay is visible");
+    assert.true(find(".dialog-overlay").offsetWidth > 0, "overlay is visible");
     assert
       .dom(".dialog-body")
       .hasText("This is an error", "dialog has error message");
@@ -72,11 +70,9 @@ module("Integration | Component | dialog-holder", function (hooks) {
     assert.true(cancelCallbackCalled, "cancel callback called");
     assert.dom("#dialog-holder").exists("element is still in DOM");
 
-    assert.strictEqual(
+    assert
-      query(".dialog-overlay").offsetWidth,
+      .dom(".dialog-overlay")
-      0,
+      .hasProperty("offsetWidth", 0, "overlay is not visible");
-      "overlay is not visible"
-    );
 
     assert.dom("#dialog-holder").hasNoText("dialog is empty");
   });
@@ -106,11 +102,9 @@ module("Integration | Component | dialog-holder", function (hooks) {
     await click(".dialog-close");
 
     assert.dom("#dialog-holder").exists("element is still in DOM");
-    assert.strictEqual(
+    assert
-      query(".dialog-overlay").offsetWidth,
+      .dom(".dialog-overlay")
-      0,
+      .hasProperty("offsetWidth", 0, "overlay is not visible");
-      "overlay is not visible"
-    );
     assert.dom("#dialog-holder").hasNoText("dialog is empty");
   });
 

app/assets/javascripts/discourse/tests/integration/components/form-template-field/input-test.js

@@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 module(
   "Integration | Component | form-template-field | input",
@@ -33,10 +32,9 @@ module(
         .exists("a text input component exists");
 
       assert.dom(".form-template-field__label").hasText("My text label");
-      assert.strictEqual(
+      assert
-        query(".form-template-field__input").placeholder,
+        .dom(".form-template-field__input")
-        "Enter text here"
+        .hasAttribute("placeholder", "Enter text here");
-      );
     });
 
     test("doesn't render a label when attribute is missing", async function (assert) {

app/assets/javascripts/discourse/tests/integration/components/form-template-field/textarea-test.js

@@ -2,7 +2,6 @@ import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 module(
   "Integration | Component | form-template-field | textarea",
@@ -33,10 +32,9 @@ module(
         .exists("a textarea input component exists");
 
       assert.dom(".form-template-field__label").hasText("My text label");
-      assert.strictEqual(
+      assert
-        query(".form-template-field__textarea").placeholder,
+        .dom(".form-template-field__textarea")
-        "Enter text here"
+        .hasAttribute("placeholder", "Enter text here");
-      );
     });
 
     test("doesn't render a label when attribute is missing", async function (assert) {

app/assets/javascripts/discourse/tests/integration/components/home-logo-test.gjs

@@ -4,7 +4,6 @@ import { module, test } from "qunit";
 import HomeLogo from "discourse/components/header/home-logo";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 const bigLogo = "/images/d-logo-sketch.png?test";
 const smallLogo = "/images/d-logo-sketch-small.png?test";
@@ -178,12 +177,7 @@ module("Integration | Component | home-logo", function (hooks) {
   test("the home logo href url defaults to /", async function (assert) {
     await render(<template><HomeLogo @minimized={{false}} /></template>);
 
-    const anchorElement = query("#site-logo").closest("a");
+    assert.dom(".title a").hasAttribute("href", "/", "home logo href equals /");
-    assert.strictEqual(
-      anchorElement.getAttribute("href"),
-      "/",
-      "home logo href equals /"
-    );
   });
 
   test("api.registerHomeLogoHrefCallback can be used to change the logo href url", async function (assert) {
@@ -193,11 +187,12 @@ module("Integration | Component | home-logo", function (hooks) {
 
     await render(<template><HomeLogo @minimized={{false}} /></template>);
 
-    const anchorElement = query("#site-logo").closest("a");
+    assert
-    assert.strictEqual(
+      .dom(".title a")
-      anchorElement.getAttribute("href"),
+      .hasAttribute(
-      "https://example.com",
+        "href",
-      "home logo href equals the one set by the callback"
+        "https://example.com",
-    );
+        "home logo href equals the one set by the callback"
+      );
   });
 });

app/assets/javascripts/discourse/tests/integration/components/input-size-test.js

@@ -1,8 +1,7 @@
-import { render } from "@ember/test-helpers";
+import { find, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 module(
   "Integration | Component | consistent input/dropdown/button sizes",
@@ -15,13 +14,13 @@ module(
       );
 
       assert.strictEqual(
-        query(".btn:nth-child(1)").offsetHeight,
+        find(".btn:nth-child(1)").offsetHeight,
-        query(".btn:nth-child(2)").offsetHeight,
+        find(".btn:nth-child(2)").offsetHeight,
         "have equal height"
       );
       assert.strictEqual(
-        query(".btn:nth-child(1)").offsetHeight,
+        find(".btn:nth-child(1)").offsetHeight,
-        query(".btn:nth-child(3)").offsetHeight,
+        find(".btn:nth-child(3)").offsetHeight,
         "have equal height"
       );
     });
@@ -32,8 +31,8 @@ module(
       );
 
       assert.strictEqual(
-        query("input").offsetHeight,
+        find("input").offsetHeight,
-        query(".btn").offsetHeight,
+        find(".btn").offsetHeight,
         "have equal height"
       );
     });
@@ -44,8 +43,8 @@ module(
       );
 
       assert.strictEqual(
-        query("input").offsetHeight,
+        find("input").offsetHeight,
-        query(".combo-box").offsetHeight,
+        find(".combo-box").offsetHeight,
         "have equal height"
       );
     });

app/assets/javascripts/discourse/tests/integration/components/light-dark-img-test.gjs

@@ -3,7 +3,6 @@ import { render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import LightDarkImg from "discourse/components/light-dark-img";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 const lightSrc = { url: "/images/light.jpg", width: 376, height: 500 };
 const darkSrc = { url: "/images/light.jpg", width: 432, height: 298 };
@@ -36,11 +35,9 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").doesNotExist("there is no picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      lightSrc.url,
+      .hasAttribute("src", lightSrc.url, "the img src is the light image");
-      "the img src is the light image"
-    );
     assert.dom("source").doesNotExist("there are no source tags");
   });
 
@@ -54,11 +51,9 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").doesNotExist("there is no picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      lightSrc.url,
+      .hasAttribute("src", lightSrc.url, "the img src is the light image");
-      "the img src is the light image"
-    );
     assert.dom("source").doesNotExist("there are no source tags");
   });
 
@@ -81,11 +76,9 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").doesNotExist("there is no picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      lightSrc.url,
+      .hasAttribute("src", lightSrc.url, "the img src is the light image");
-      "the img src is the light image"
-    );
     assert.dom("source").doesNotExist("there are no source tags");
   });
 
@@ -99,17 +92,17 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").exists("there is a picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      lightSrc.url,
+      .hasAttribute("src", lightSrc.url, "the img src is the light image");
-      "the img src is the light image"
-    );
     assert.dom("source").exists("there is a source tag");
-    assert.strictEqual(
+    assert
-      query("source").getAttribute("srcset"),
+      .dom("source")
-      darkSrc.url,
+      .hasAttribute(
-      "the source srcset is the dark image"
+        "srcset",
-    );
+        darkSrc.url,
+        "the source srcset is the dark image"
+      );
   });
 
   test("dark theme with no images provided | dark mode not available", async function (assert) {
@@ -131,11 +124,9 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").doesNotExist("there is no picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      lightSrc.url,
+      .hasAttribute("src", lightSrc.url, "the img src is the light image");
-      "the img src is the light image"
-    );
     assert.dom("source").doesNotExist("there are no source tags");
   });
 
@@ -149,17 +140,17 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").exists("there is a picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      darkSrc.url,
+      .hasAttribute("src", darkSrc.url, "the img src is the dark image");
-      "the img src is the dark image"
-    );
     assert.dom("source").exists("there is a source tag");
-    assert.strictEqual(
+    assert
-      query("source").getAttribute("srcset"),
+      .dom("source")
-      darkSrc.url,
+      .hasAttribute(
-      "the source srcset is the dark image"
+        "srcset",
-    );
+        darkSrc.url,
+        "the source srcset is the dark image"
+      );
   });
 
   test("dark theme with no images provided | dark mode available", async function (assert) {
@@ -181,11 +172,9 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").doesNotExist("there is no picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      lightSrc.url,
+      .hasAttribute("src", lightSrc.url, "the img src is the light image");
-      "the img src is the light image"
-    );
     assert.dom("source").doesNotExist("there are no source tags");
   });
 
@@ -199,16 +188,16 @@ module("Integration | Component | light-dark-img", function (hooks) {
 
     assert.dom("picture").exists("there is a picture tag");
     assert.dom("img").exists("there is an img tag");
-    assert.strictEqual(
+    assert
-      query("img").getAttribute("src"),
+      .dom("img")
-      darkSrc.url,
+      .hasAttribute("src", darkSrc.url, "the img src is the dark image");
-      "the img src is the dark image"
-    );
     assert.dom("source").exists("there is a source tag");
-    assert.strictEqual(
+    assert
-      query("source").getAttribute("srcset"),
+      .dom("source")
-      darkSrc.url,
+      .hasAttribute(
-      "the source srcset is the dark image"
+        "srcset",
-    );
+        darkSrc.url,
+        "the source srcset is the dark image"
+      );
   });
 });

app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-decorator-test.gjs

@@ -6,7 +6,6 @@ import PluginOutlet from "discourse/components/plugin-outlet";
 import { withSilencedDeprecations } from "discourse/lib/deprecated";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import { registerTemporaryModule } from "../../helpers/temporary-module-helper";
 
 const PREFIX = "discourse/plugins/some-plugin/templates/connectors";
@@ -39,12 +38,13 @@ module("Plugin Outlet - Decorator", function (hooks) {
       <PluginOutlet @connectorTagName="div" @name="my-outlet-name" />
     </template>);
 
-    const fooConnector = query(".my-outlet-name-outlet.foo");
+    assert.dom(".my-outlet-name-outlet.foo").exists();
-    const barConnector = query(".my-outlet-name-outlet.bar");
+    assert
-
+      .dom(".my-outlet-name-outlet.foo")
-    assert.dom(fooConnector).exists();
+      .hasAttribute("style", "background-color: yellow;");
-    assert.strictEqual(fooConnector.style.backgroundColor, "yellow");
+    assert
-    assert.strictEqual(barConnector.style.backgroundColor, "");
+      .dom(".my-outlet-name-outlet.bar")
+      .doesNotHaveStyle("backgroundColor");
 
     await render(<template>
       <PluginOutlet

app/assets/javascripts/discourse/tests/integration/components/plugin-outlet-test.gjs

@@ -2,7 +2,7 @@ import Component from "@glimmer/component";
 import templateOnly from "@ember/component/template-only";
 import { hash } from "@ember/helper";
 import { getOwner } from "@ember/owner";
-import { click, render, settled } from "@ember/test-helpers";
+import { click, find, render, settled } from "@ember/test-helpers";
 import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import sinon from "sinon";
@@ -17,7 +17,6 @@ import {
   extraConnectorComponent,
 } from "discourse/lib/plugin-connectors";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import { registerTemporaryModule } from "discourse/tests/helpers/temporary-module-helper";
 import {
   disableRaiseOnDeprecation,
@@ -431,17 +430,19 @@ module("Integration | Component | plugin-outlet", function (hooks) {
       />
     `);
 
-    const otherOutletElement = query(".hello-username");
+    find(".hello-username").someUniqueProperty = true;
-    otherOutletElement.someUniqueProperty = true;
 
     this.set("shouldDisplay", true);
     await settled();
     assert.dom(".conditional-render").exists("renders conditional outlet");
 
-    assert.true(
+    assert
-      query(".hello-username").someUniqueProperty,
+      .dom(".hello-username")
-      "other outlet is left untouched"
+      .hasProperty(
-    );
+        "someUniqueProperty",
+        true,
+        "other outlet is left untouched"
+      );
   });
 
   module("deprecated arguments", function (innerHooks) {

app/assets/javascripts/discourse/tests/integration/components/search-menu-test.gjs

@@ -6,7 +6,6 @@ import SearchMenu, {
 import searchFixtures from "discourse/tests/fixtures/search-fixtures";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import { i18n } from "discourse-i18n";
 
 // Note this isn't a full-fledge test of the search menu. Those tests are in
@@ -75,19 +74,15 @@ module("Integration | Component | search-menu", function (hooks) {
     await render(<template><div id="click-me"><SearchMenu /></div></template>);
     await click("#search-term");
 
-    assert.strictEqual(
+    assert
-      document.activeElement,
+      .dom("#search-term")
-      query("#search-term"),
+      .isFocused("Clicking the search term input focuses it");
-      "Clicking the search term input focuses it"
-    );
 
     await click("#click-me");
 
-    assert.strictEqual(
+    assert
-      document.activeElement,
+      .dom(document.body)
-      document.body,
+      .isFocused("Clicking outside blurs focus and closes panel");
-      "Clicking outside blurs focus and closes panel"
-    );
     assert
       .dom(".menu-panel .search-menu-initial-options")
       .doesNotExist("Menu panel is hidden");

app/assets/javascripts/discourse/tests/integration/components/select-kit/email-group-user-chooser-test.js

@@ -2,7 +2,7 @@ import { fillIn, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { paste, query } from "discourse/tests/helpers/qunit-helpers";
+import { paste } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import pretender, { response } from "../../../helpers/create-pretender";
 
@@ -19,26 +19,26 @@ module(
       await render(hbs`<EmailGroupUserChooser/>`);
 
       await this.subject.expand();
-      await paste(query(".filter-input"), "foo,bar");
+      await paste(".filter-input", "foo,bar");
 
       assert.strictEqual(this.subject.header().value(), "foo,bar");
 
-      await paste(query(".filter-input"), "evil,trout");
+      await paste(".filter-input", "evil,trout");
       assert.strictEqual(this.subject.header().value(), "foo,bar,evil,trout");
 
-      await paste(query(".filter-input"), "names with spaces");
+      await paste(".filter-input", "names with spaces");
       assert.strictEqual(
         this.subject.header().value(),
         "foo,bar,evil,trout,names,with,spaces"
       );
 
-      await paste(query(".filter-input"), "@osama,@sam");
+      await paste(".filter-input", "@osama,@sam");
       assert.strictEqual(
         this.subject.header().value(),
         "foo,bar,evil,trout,names,with,spaces,osama,sam"
       );
 
-      await paste(query(".filter-input"), "new\nlines");
+      await paste(".filter-input", "new\nlines");
       assert.strictEqual(
         this.subject.header().value(),
         "foo,bar,evil,trout,names,with,spaces,osama,sam,new,lines"

app/assets/javascripts/discourse/tests/integration/components/select-kit/mini-tag-chooser-test.js

@@ -2,7 +2,7 @@ import { click, render, triggerKeyEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import { queryAll } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 
@@ -96,8 +96,8 @@ module(
 
       await this.subject.expand();
 
-      assert.strictEqual(
+      assert.dom("input[name=filter-input-search]").hasAttribute(
-        query("input[name=filter-input-search]").placeholder,
+        "placeholder",
         i18n("tagging.choose_for_topic_required_group", {
           count: 1,
           name: "monkey group",
@@ -106,10 +106,9 @@ module(
 
       await this.subject.selectRowByValue("monkey");
 
-      assert.strictEqual(
+      assert
-        query("input[name=filter-input-search]").placeholder,
+        .dom("input[name=filter-input-search]")
-        i18n("select_kit.filter_placeholder")
+        .hasAttribute("placeholder", i18n("select_kit.filter_placeholder"));
-      );
     });
 
     test("creating a tag using invalid character", async function (assert) {

app/assets/javascripts/discourse/tests/integration/components/select-kit/multi-select-test.js

@@ -2,7 +2,7 @@ import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { paste, query } from "discourse/tests/helpers/qunit-helpers";
+import { paste } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 
 const DEFAULT_CONTENT = [
@@ -114,7 +114,7 @@ module("Integration | Component | select-kit/multi-select", function (hooks) {
     `);
 
     await this.subject.expand();
-    await paste(query(".filter-input"), "foo|bar");
+    await paste(".filter-input", "foo|bar");
 
     assert.strictEqual(this.subject.header().value(), "1,2");
   });

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

@@ -1,8 +1,7 @@
-import { render, tab } from "@ember/test-helpers";
+import { find, render, tab } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import I18n, { i18n } from "discourse-i18n";
 
@@ -469,8 +468,8 @@ module("Integration | Component | select-kit/single-select", function (hooks) {
       />
     `);
     await this.subject.expand();
-    const header = query(".select-kit-header").getBoundingClientRect();
+    const header = find(".select-kit-header").getBoundingClientRect();
-    const body = query(".select-kit-body").getBoundingClientRect();
+    const body = find(".select-kit-body").getBoundingClientRect();
 
     assert.true(header.bottom > body.top, "correctly offsets the body");
   });

app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js

@@ -2,15 +2,6 @@ import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
-
-function containsExactly(assert, expectation, actual, message) {
-  assert.deepEqual(
-    Array.from(expectation).sort(),
-    Array.from(actual).sort(),
-    message
-  );
-}
 
 module("Integration | Component | sidebar | section-link", function (hooks) {
   setupRenderingTest(hooks);
@@ -20,12 +11,13 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
 
     await render(template);
 
-    containsExactly(
+    assert
-      assert,
+      .dom("a")
-      query("a").classList,
+      .hasAttribute(
-      ["ember-view", "sidebar-row", "sidebar-section-link"],
+        "class",
-      "has the right class attribute for the link"
+        "ember-view sidebar-section-link sidebar-row",
-    );
+        "has the right class attribute for the link"
+      );
   });
 
   test("custom class attribute for link", async function (assert) {
@@ -33,12 +25,13 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
 
     await render(template);
 
-    containsExactly(
+    assert
-      assert,
+      .dom("a")
-      query("a").classList,
+      .hasAttribute(
-      ["123", "abc", "ember-view", "sidebar-row", "sidebar-section-link"],
+        "class",
-      "has the right class attribute for the link"
+        "ember-view sidebar-section-link sidebar-row 123 abc",
-    );
+        "has the right class attribute for the link"
+      );
   });
 
   test("target attribute for link", async function (assert) {

app/assets/javascripts/discourse/tests/integration/components/site-setting-test.js

@@ -4,7 +4,6 @@ import { hbs } from "ember-cli-htmlbars";
 import { module, skip, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender, { response } from "discourse/tests/helpers/create-pretender";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 
@@ -40,7 +39,7 @@ module("Integration | Component | site-setting", function (hooks) {
     await fillIn(".setting input", "value");
     await click(".setting .d-icon-check");
 
-    assert.strictEqual(query(".validation-error h1").outerHTML, message);
+    assert.dom(".validation-error").includesHtml(message);
   });
 
   test("Error response without html_message is not rendered as HTML", async function (assert) {

app/assets/javascripts/discourse/tests/integration/components/uppy-image-uploader-test.js

@@ -1,4 +1,4 @@
-import { click, render } from "@ember/test-helpers";
+import { click, render, triggerEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
@@ -63,25 +63,22 @@ module("Integration | Component | uppy-image-uploader", function (hooks) {
       `
     );
 
-    const dropImage = (target) => {
+    const dropImage = async (target) => {
-      target = document.querySelector(target);
       const dataTransfer = new DataTransfer();
       const file = new File(["dummy content"], "test-image.png", {
         type: "image/png",
       });
       dataTransfer.items.add(file);
-      const dragEnterEvent = new DragEvent("dragenter", { dataTransfer });
-      target.dispatchEvent(dragEnterEvent);
-      const dragOverEvent = new DragEvent("dragover", { dataTransfer });
-      target.dispatchEvent(dragOverEvent);
 
-      return () => {
+      await triggerEvent(target, "dragenter", { dataTransfer });
-        const dragLeaveEvent = new DragEvent("dragleave", { dataTransfer });
+      await triggerEvent(target, "dragover", { dataTransfer });
-        target.dispatchEvent(dragLeaveEvent);
+
+      return async () => {
+        await triggerEvent(target, "dragleave", { dataTransfer });
       };
     };
 
-    const leave1 = dropImage("#uploader1 .uploaded-image-preview");
+    const leave1 = await dropImage("#uploader1 .uploaded-image-preview");
 
     assert
       .dom("#uploader1 .uploaded-image-preview")
@@ -90,9 +87,9 @@ module("Integration | Component | uppy-image-uploader", function (hooks) {
       .dom("#uploader2 .uploaded-image-preview")
       .hasNoClass("uppy-is-drag-over");
 
-    leave1();
+    await leave1();
 
-    dropImage("#uploader2 .uploaded-image-preview");
+    await dropImage("#uploader2 .uploaded-image-preview");
 
     assert
       .dom("#uploader2 .uploaded-image-preview")

app/assets/javascripts/discourse/tests/integration/components/user-info-test.js

@@ -2,7 +2,6 @@ import { render, triggerEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 module("Integration | Component | user-info", function (hooks) {
   setupRenderingTest(hooks);
@@ -127,7 +126,7 @@ module("Integration | Component | user-info", function (hooks) {
     await render(
       hbs`<UserInfo @user={{this.currentUser}} @showStatus={{true}} /><DTooltips />`
     );
-    await triggerEvent(query(".user-status-message"), "pointermove");
+    await triggerEvent(".user-status-message", "pointermove");
 
     assert
       .dom("[data-content][data-identifier='user-status-message-tooltip']")

app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js

@@ -4,7 +4,7 @@ import { module, test } from "qunit";
 import { NOTIFICATION_TYPES } from "discourse/tests/fixtures/concerns/notification-types";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender from "discourse/tests/helpers/create-pretender";
-import { query, queryAll } from "discourse/tests/helpers/qunit-helpers";
+import { queryAll } from "discourse/tests/helpers/qunit-helpers";
 
 module("Integration | Component | user-menu", function (hooks) {
   setupRenderingTest(hooks);
@@ -13,8 +13,11 @@ module("Integration | Component | user-menu", function (hooks) {
 
   test("default tab is all notifications", async function (assert) {
     await render(template);
-    const activeTab = query(".top-tabs.tabs-list .btn.active");
+
-    assert.strictEqual(activeTab.id, "user-menu-button-all-notifications");
+    assert
+      .dom(".top-tabs.tabs-list .btn.active")
+      .hasAttribute("id", "user-menu-button-all-notifications");
+
     const notifications = queryAll("#quick-access-all-notifications ul li");
     assert.dom(notifications[0]).hasClass("edited");
     assert.dom(notifications[1]).hasClass("replied");
@@ -83,8 +86,10 @@ module("Integration | Component | user-menu", function (hooks) {
     this.currentUser.set("reviewable_count", 1);
     this.currentUser.set("can_send_private_messages", true);
     await render(template);
-    const tab = query("#user-menu-button-review-queue");
+
-    assert.strictEqual(tab.dataset.tabNumber, "5");
+    assert
+      .dom("#user-menu-button-review-queue")
+      .hasAttribute("data-tab-number", "5");
 
     const tabs = Array.from(queryAll(".tabs-list .btn")); // top and bottom tabs
     assert.strictEqual(tabs.length, 8);

app/assets/javascripts/discourse/tests/integration/components/user-status-message-test.js

@@ -2,11 +2,7 @@ import { render, triggerEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { fakeTime, query } from "discourse/tests/helpers/qunit-helpers";
+import { fakeTime } from "discourse/tests/helpers/qunit-helpers";
-
-async function mouseenter() {
-  await triggerEvent(query(".user-status-message"), "pointermove");
-}
 
 module("Integration | Component | user-status-message", function (hooks) {
   setupRenderingTest(hooks);
@@ -50,7 +46,7 @@ module("Integration | Component | user-status-message", function (hooks) {
     await render(
       hbs`<UserStatusMessage @status={{this.status}} /><DTooltips />`
     );
-    await mouseenter();
+    await triggerEvent(".user-status-message", "pointermove");
 
     assert
       .dom('[data-content][data-identifier="user-status-message-tooltip"]')
@@ -68,7 +64,7 @@ module("Integration | Component | user-status-message", function (hooks) {
     await render(
       hbs`<UserStatusMessage @status={{this.status}} /><DTooltips />`
     );
-    await mouseenter();
+    await triggerEvent(".user-status-message", "pointermove");
 
     assert
       .dom('[data-content][data-identifier="user-status-message-tooltip"]')
@@ -86,7 +82,7 @@ module("Integration | Component | user-status-message", function (hooks) {
     await render(
       hbs`<UserStatusMessage @status={{this.status}} /><DTooltips />`
     );
-    await mouseenter();
+    await triggerEvent(".user-status-message", "pointermove");
 
     assert
       .dom(
@@ -99,7 +95,7 @@ module("Integration | Component | user-status-message", function (hooks) {
     await render(
       hbs`<UserStatusMessage @status={{this.status}} /><DTooltips />`
     );
-    await mouseenter();
+    await triggerEvent(".user-status-message", "pointermove");
 
     assert
       .dom('[data-content][data-identifier="user-status-message-tooltip"]')

app/assets/javascripts/discourse/tests/integration/components/widgets/widget-dropdown-test.js

@@ -2,7 +2,6 @@ import { click, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import I18n from "discourse-i18n";
 
 const DEFAULT_CONTENT = {
@@ -17,26 +16,6 @@ const DEFAULT_CONTENT = {
   label: "foo",
 };
 
-async function clickRowById(id) {
-  await click(`#my-dropdown .widget-dropdown-item.item-${id}`);
-}
-
-function rowById(id) {
-  return query(`#my-dropdown .widget-dropdown-item.item-${id}`);
-}
-
-async function toggle() {
-  await click("#my-dropdown .widget-dropdown-header");
-}
-
-function header() {
-  return query("#my-dropdown .widget-dropdown-header");
-}
-
-function body() {
-  return query("#my-dropdown .widget-dropdown-body");
-}
-
 const TEMPLATE = hbs`
   <MountWidget
     @widget="widget-dropdown"
@@ -93,22 +72,23 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    assert.strictEqual(rowById(1).dataset.id, "1", "it creates rows");
+    assert
-    assert.strictEqual(rowById(2).dataset.id, "2", "it creates rows");
+      .dom("#my-dropdown .widget-dropdown-item.item-1")
-    assert.strictEqual(rowById(3).dataset.id, "3", "it creates rows");
+      .hasAttribute("data-id", "1", "creates rows");
+    assert
+      .dom("#my-dropdown .widget-dropdown-item.item-2")
+      .hasAttribute("data-id", "2", "creates rows");
+    assert
+      .dom("#my-dropdown .widget-dropdown-item.item-3")
+      .hasAttribute("data-id", "3", "creates rows");
   });
 
   test("onChange action", async function (assert) {
     this.setProperties(DEFAULT_CONTENT);
-    this.set(
+    this.set("onChange", (item) => assert.step(`${item.id}`));
-      "onChange",
-      (item) => (document.querySelector("#test").innerText = item.id)
-    );
 
     await render(hbs`
-      <div id="test"></div>
-
       <MountWidget
         @widget="widget-dropdown"
         @args={{hash
@@ -120,9 +100,9 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
       />
     `);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    await clickRowById(2);
+    await click("#my-dropdown .widget-dropdown-item.item-2");
-    assert.dom("#test").hasText("2", "it calls the onChange actions");
+    assert.verifySteps(["2"], "calls the onChange actions");
   });
 
   test("can be opened and closed", async function (assert) {
@@ -132,11 +112,11 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     assert.dom("#my-dropdown.closed").exists();
     assert.dom("#my-dropdown .widget-dropdown-body").doesNotExist();
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    assert.dom(rowById(2)).hasText("FooBar");
+    assert.dom("#my-dropdown .widget-dropdown-item.item-2").hasText("FooBar");
     assert.dom("#my-dropdown.opened").exists();
     assert.dom("#my-dropdown .widget-dropdown-body").exists();
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
     assert.dom("#my-dropdown.closed").exists();
     assert.dom("#my-dropdown .widget-dropdown-body").doesNotExist();
   });
@@ -147,7 +127,7 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    assert.dom(".d-icon-xmark", header()).exists();
+    assert.dom("#my-dropdown .widget-dropdown-header .d-icon-xmark").exists();
   });
 
   test("class", async function (assert) {
@@ -164,8 +144,8 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    assert.dom(rowById(2)).hasText("FooBar");
+    assert.dom("#my-dropdown .widget-dropdown-item.item-2").hasText("FooBar");
   });
 
   test("content with label", async function (assert) {
@@ -174,8 +154,8 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    assert.dom(rowById(1)).hasText("FooBaz");
+    assert.dom("#my-dropdown .widget-dropdown-item.item-1").hasText("FooBaz");
   });
 
   test("content with icon", async function (assert) {
@@ -183,17 +163,21 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    assert.dom(".d-icon-xmark", rowById(3)).exists();
+    assert
+      .dom("#my-dropdown .widget-dropdown-item.item-3 .d-icon-xmark")
+      .exists();
   });
 
   test("content with html", async function (assert) {
     this.setProperties(DEFAULT_CONTENT);
 
     await render(TEMPLATE);
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
 
-    assert.dom(rowById(4)).hasHtml("<span><b>baz</b></span>");
+    assert
+      .dom("#my-dropdown .widget-dropdown-item.item-4")
+      .hasHtml("<span><b>baz</b></span>");
   });
 
   test("separator", async function (assert) {
@@ -201,7 +185,7 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
     assert
       .dom("#my-dropdown .widget-dropdown-item:nth-child(3)")
       .hasClass("separator");
@@ -222,9 +206,8 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    assert.dom(header()).hasClass("widget-dropdown-header");
+    assert.dom("#my-dropdown .widget-dropdown-header").hasClass("btn-small");
-    assert.dom(header()).hasClass("btn-small");
+    assert.dom("#my-dropdown .widget-dropdown-header").hasClass("and-text");
-    assert.dom(header()).hasClass("and-text");
   });
 
   test("bodyClass option", async function (assert) {
@@ -233,10 +216,9 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    assert.dom(body()).hasClass("widget-dropdown-body");
+    assert.dom("#my-dropdown .widget-dropdown-body").hasClass("gigantic");
-    assert.dom(body()).hasClass("gigantic");
+    assert.dom("#my-dropdown .widget-dropdown-body").hasClass("and-yet-small");
-    assert.dom(body()).hasClass("and-yet-small");
   });
 
   test("caret option", async function (assert) {
@@ -258,8 +240,10 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     assert.dom("#my-dropdown.disabled").exists();
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
-    assert.strictEqual(rowById(1), null, "it does not display options");
+    assert
+      .dom("#my-dropdown .widget-dropdown-item.item-1")
+      .doesNotExist("does not display options");
   });
 
   test("disabled item", async function (assert) {
@@ -267,7 +251,7 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    await toggle();
+    await click("#my-dropdown .widget-dropdown-header");
     assert.dom(".widget-dropdown-item.item-5.disabled").exists();
   });
 });

plugins/chat/test/javascripts/acceptance/chat-composer-test.js

@@ -1,4 +1,10 @@
-import { click, fillIn, settled, visit } from "@ember/test-helpers";
+import {
+  click,
+  fillIn,
+  settled,
+  triggerEvent,
+  visit,
+} from "@ember/test-helpers";
 import { skip } from "qunit";
 import {
   acceptance,
@@ -45,21 +51,17 @@ acceptance("Discourse Chat - Composer", function (needs) {
   skip("when pasting html in composer", async function (assert) {
     await visit("/chat/c/another-category/11");
 
-    const clipboardEvent = new Event("paste", { bubbles: true });
+    await triggerEvent(".chat-composer__input", "paste", {
-    clipboardEvent.clipboardData = {
+      bubbles: true,
-      types: ["text/html"],
+      clipboardData: {
-      getData: (type) => {
+        types: ["text/html"],
-        if (type === "text/html") {
+        getData: (type) => {
-          return "<a href>Foo</a>";
+          if (type === "text/html") {
-        }
+            return "<a href>Foo</a>";
+          }
+        },
       },
-    };
+    });
-
-    document
-      .querySelector(".chat-composer__input")
-      .dispatchEvent(clipboardEvent);
-
-    await settled();
 
     assert.dom(".chat-composer__input").hasValue("Foo");
   });

plugins/chat/test/javascripts/components/channel-icon-test.gjs

@@ -3,7 +3,6 @@ import { render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import CoreFabricators from "discourse/lib/fabricators";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import ChannelIcon from "discourse/plugins/chat/discourse/components/channel-icon";
 import ChatFabricators from "discourse/plugins/chat/discourse/lib/fabricators";
 import { CHATABLE_TYPES } from "discourse/plugins/chat/discourse/models/chat-channel";
@@ -16,10 +15,9 @@ module("Discourse Chat | Component | <ChannelIcon />", function (hooks) {
 
     await render(<template><ChannelIcon @channel={{channel}} /></template>);
 
-    assert.strictEqual(
+    assert
-      query(".chat-channel-icon.--category-badge").getAttribute("style"),
+      .dom(".chat-channel-icon.--category-badge")
-      `color: #${channel.chatable.color}`
+      .hasAttribute("style", `color: #${channel.chatable.color}`);
-    );
   });
 
   test("category channel - escapes label", async function (assert) {

plugins/chat/test/javascripts/components/chat-composer-placeholder-test.js

@@ -3,7 +3,6 @@ import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import pretender from "discourse/tests/helpers/create-pretender";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import { i18n } from "discourse-i18n";
 import ChatChannel from "discourse/plugins/chat/discourse/models/chat-channel";
 
@@ -25,10 +24,9 @@ module(
 
       await render(hbs`<Chat::Composer::Channel @channel={{this.channel}} />`);
 
-      assert.strictEqual(
+      assert
-        query(".chat-composer__input").placeholder,
+        .dom(".chat-composer__input")
-        "Jot something down"
+        .hasAttribute("placeholder", "Jot something down");
-      );
     });
 
     test("direct message to multiple folks shows their names  when not a group", async function (assert) {
@@ -48,10 +46,9 @@ module(
 
       await render(hbs`<Chat::Composer::Channel @channel={{this.channel}} />`);
 
-      assert.strictEqual(
+      assert
-        query(".chat-composer__input").placeholder,
+        .dom(".chat-composer__input")
-        "Chat with Tomtom, Steaky, @zorro"
+        .hasAttribute("placeholder", "Chat with Tomtom, Steaky, @zorro");
-      );
     });
 
     test("direct message to group shows Chat in group", async function (assert) {
@@ -72,10 +69,9 @@ module(
 
       await render(hbs`<Chat::Composer::Channel @channel={{this.channel}} />`);
 
-      assert.strictEqual(
+      assert
-        query(".chat-composer__input").placeholder,
+        .dom(".chat-composer__input")
-        i18n("chat.placeholder_group")
+        .hasAttribute("placeholder", i18n("chat.placeholder_group"));
-      );
     });
 
     test("message to channel shows send message to channel name", async function (assert) {
@@ -88,10 +84,9 @@ module(
 
       await render(hbs`<Chat::Composer::Channel @channel={{this.channel}} />`);
 
-      assert.strictEqual(
+      assert
-        query(".chat-composer__input").placeholder,
+        .dom(".chat-composer__input")
-        "Chat in #just-cats"
+        .hasAttribute("placeholder", "Chat in #just-cats");
-      );
     });
   }
 );

plugins/chat/test/javascripts/components/chat-message-reaction-test.js

@@ -2,7 +2,6 @@ import { click, render } from "@ember/test-helpers";
 import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 module("Discourse Chat | Component | chat-message-reaction", function (hooks) {
   setupRenderingTest(hooks);
@@ -44,8 +43,7 @@ module("Discourse Chat | Component | chat-message-reaction", function (hooks) {
   test("reaction’s image", async function (assert) {
     await render(hbs`<ChatMessageReaction @reaction={{hash emoji="heart"}} />`);
 
-    const src = query(".chat-message-reaction img").src;
+    assert.dom(".chat-message-reaction img").hasAttribute("src", /heart\.png/);
-    assert.true(/heart\.png/.test(src));
   });
 
   test("click action", async function (assert) {

plugins/chat/test/javascripts/components/chat-upload-test.js

@@ -1,8 +1,7 @@
-import { render, settled } from "@ember/test-helpers";
+import { render, triggerEvent } from "@ember/test-helpers";
 import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 
 const IMAGE_FIXTURE = {
   id: 290,
@@ -74,23 +73,25 @@ module("Discourse Chat | Component | chat-upload", function (hooks) {
     await render(hbs`<ChatUpload @upload={{this.upload}} />`);
 
     assert.dom("img.chat-img-upload").exists("displays as an image");
-    const image = query("img.chat-img-upload");
+    assert
-    assert.strictEqual(image.loading, "lazy", "is lazy loading");
+      .dom("img.chat-img-upload")
+      .hasProperty("loading", "lazy", "is lazy loading");
 
-    assert.strictEqual(
+    assert
-      image.style.backgroundColor,
+      .dom("img.chat-img-upload")
-      "rgb(120, 131, 112)",
+      .hasStyle(
-      "sets background to dominant color"
+        { backgroundColor: "rgb(120, 131, 112)" },
-    );
+        "sets background to dominant color"
+      );
 
-    image.dispatchEvent(new Event("load")); // Fake that the image has loaded
+    await triggerEvent("img.chat-img-upload", "load"); // Fake that the image has loaded
-    await settled();
 
-    assert.strictEqual(
+    assert
-      image.style.backgroundColor,
+      .dom("img.chat-img-upload")
-      "",
+      .doesNotHaveStyle(
-      "removes the background color once the image has loaded"
+        "backgroundColor",
-    );
+        "removes the background color once the image has loaded"
+      );
   });
 
   test("with a video", async function (assert) {

plugins/discourse-details/test/javascripts/acceptance/details-button-test.js

@@ -1,6 +1,6 @@
-import { click, fillIn, visit } from "@ember/test-helpers";
+import { click, fillIn, find, visit } from "@ember/test-helpers";
 import { test } from "qunit";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 
@@ -30,7 +30,7 @@ acceptance("Details Button", function (needs) {
 
     await fillIn(".d-editor-input", "This is my title");
 
-    const textarea = query(".d-editor-input");
+    const textarea = find(".d-editor-input");
     textarea.selectionStart = 0;
     textarea.selectionEnd = textarea.value.length;
 
@@ -125,7 +125,7 @@ acceptance("Details Button", function (needs) {
     await categoryChooser.selectRowByValue(2);
     await fillIn(".d-editor-input", multilineInput);
 
-    const textarea = query(".d-editor-input");
+    const textarea = find(".d-editor-input");
     textarea.selectionStart = 0;
     textarea.selectionEnd = textarea.value.length;
 

plugins/poll/test/javascripts/component/poll-buttons-dropdown-test.js

@@ -2,7 +2,6 @@ import { click, render } from "@ember/test-helpers";
 import hbs from "htmlbars-inline-precompile";
 import { module, test } from "qunit";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
 import { i18n } from "discourse-i18n";
 
 module("Poll | Component | poll-buttons-dropdown", function (hooks) {
@@ -75,7 +74,7 @@ module("Poll | Component | poll-buttons-dropdown", function (hooks) {
 
     assert.dom("li.dropdown-menu__item").exists({ count: 2 });
     assert
-      .dom(query("li.dropdown-menu__item span"))
+      .dom("li.dropdown-menu__item span")
       .hasText(
         i18n("poll.show-tally.label"),
         "displays the show absolute button"

plugins/spoiler-alert/test/javascripts/acceptance/spoiler-button-test.js

@@ -1,6 +1,6 @@
-import { click, fillIn, visit } from "@ember/test-helpers";
+import { click, fillIn, find, visit } from "@ember/test-helpers";
 import { test } from "qunit";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 import selectKit from "discourse/tests/helpers/select-kit-helper";
 import { i18n } from "discourse-i18n";
 
@@ -29,20 +29,24 @@ acceptance("Spoiler Button", function (needs) {
         "contains the right output"
       );
 
-    let textarea = query(".d-editor-input");
+    assert
-    assert.strictEqual(
+      .dom(".d-editor-input")
-      textarea.selectionStart,
+      .hasProperty(
-      9,
+        "selectionStart",
-      "it should start highlighting at the right position"
+        9,
-    );
+        "starts highlighting at the right position"
-    assert.strictEqual(
+      );
-      textarea.selectionEnd,
+    assert
-      i18n("composer.spoiler_text").length + 9,
+      .dom(".d-editor-input")
-      "it should end highlighting at the right position"
+      .hasProperty(
-    );
+        "selectionEnd",
+        i18n("composer.spoiler_text").length + 9,
+        "ends highlighting at the right position"
+      );
 
     await fillIn(".d-editor-input", "This is hidden");
 
+    const textarea = find(".d-editor-input");
     textarea.selectionStart = 0;
     textarea.selectionEnd = textarea.value.length;
 
@@ -56,16 +60,20 @@ acceptance("Spoiler Button", function (needs) {
         "contains the right output"
       );
 
-    assert.strictEqual(
+    assert
-      textarea.selectionStart,
+      .dom(".d-editor-input")
-      9,
+      .hasProperty(
-      "it should start highlighting at the right position"
+        "selectionStart",
-    );
+        9,
-    assert.strictEqual(
+        "starts highlighting at the right position"
-      textarea.selectionEnd,
+      );
-      23,
+    assert
-      "it should end highlighting at the right position"
+      .dom(".d-editor-input")
-    );
+      .hasProperty(
+        "selectionEnd",
+        23,
+        "ends highlighting at the right position"
+      );
 
     await fillIn(".d-editor-input", "Before this is hidden After");
 
@@ -82,16 +90,20 @@ acceptance("Spoiler Button", function (needs) {
         "contains the right output"
       );
 
-    assert.strictEqual(
+    assert
-      textarea.selectionStart,
+      .dom(".d-editor-input")
-      16,
+      .hasProperty(
-      "it should start highlighting at the right position"
+        "selectionStart",
-    );
+        16,
-    assert.strictEqual(
+        "starts highlighting at the right position"
-      textarea.selectionEnd,
+      );
-      30,
+    assert
-      "it should end highlighting at the right position"
+      .dom(".d-editor-input")
-    );
+      .hasProperty(
+        "selectionEnd",
+        30,
+        "ends highlighting at the right position"
+      );
 
     await fillIn(".d-editor-input", "Before\nthis is hidden\nAfter");
 
@@ -108,16 +120,20 @@ acceptance("Spoiler Button", function (needs) {
         "contains the right output"
       );
 
-    assert.strictEqual(
+    assert
-      textarea.selectionStart,
+      .dom(".d-editor-input")
-      16,
+      .hasProperty(
-      "it should start highlighting at the right position"
+        "selectionStart",
-    );
+        16,
-    assert.strictEqual(
+        "starts highlighting at the right position"
-      textarea.selectionEnd,
+      );
-      30,
+    assert
-      "it should end highlighting at the right position"
+      .dom(".d-editor-input")
-    );
+      .hasProperty(
+        "selectionEnd",
+        30,
+        "ends highlighting at the right position"
+      );
 
     // enforce block mode when selected text is multiline
     await fillIn(".d-editor-input", "Before\nthis is\n\nhidden\nAfter");
@@ -135,15 +151,19 @@ acceptance("Spoiler Button", function (needs) {
         "contains the right output"
       );
 
-    assert.strictEqual(
+    assert
-      textarea.selectionStart,
+      .dom(".d-editor-input")
-      17,
+      .hasProperty(
-      "it should start highlighting at the right position"
+        "selectionStart",
-    );
+        17,
-    assert.strictEqual(
+        "starts highlighting at the right position"
-      textarea.selectionEnd,
+      );
-      32,
+    assert
-      "it should end highlighting at the right position"
+      .dom(".d-editor-input")
-    );
+      .hasProperty(
+        "selectionEnd",
+        32,
+        "ends highlighting at the right position"
+      );
   });
 });