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

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 });
-    clipboardEvent.clipboardData = {
-      types: ["text/html"],
-      getData: (type) => {
-        if (type === "text/html") {
-          return "<a href>Foo</a>";
-        }
+    await triggerEvent(".chat-composer__input", "paste", {
+      bubbles: true,
+      clipboardData: {
+        types: ["text/html"],
+        getData: (type) => {
+          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(
-      query(".chat-channel-icon.--category-badge").getAttribute("style"),
-      `color: #${channel.chatable.color}`
-    );
+    assert
+      .dom(".chat-channel-icon.--category-badge")
+      .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(
-        query(".chat-composer__input").placeholder,
-        "Jot something down"
-      );
+      assert
+        .dom(".chat-composer__input")
+        .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(
-        query(".chat-composer__input").placeholder,
-        "Chat with Tomtom, Steaky, @zorro"
-      );
+      assert
+        .dom(".chat-composer__input")
+        .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(
-        query(".chat-composer__input").placeholder,
-        i18n("chat.placeholder_group")
-      );
+      assert
+        .dom(".chat-composer__input")
+        .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(
-        query(".chat-composer__input").placeholder,
-        "Chat in #just-cats"
-      );
+      assert
+        .dom(".chat-composer__input")
+        .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.true(/heart\.png/.test(src));
+    assert.dom(".chat-message-reaction img").hasAttribute("src", /heart\.png/);
   });
 
   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.strictEqual(image.loading, "lazy", "is lazy loading");
+    assert
+      .dom("img.chat-img-upload")
+      .hasProperty("loading", "lazy", "is lazy loading");
 
-    assert.strictEqual(
-      image.style.backgroundColor,
-      "rgb(120, 131, 112)",
-      "sets background to dominant color"
-    );
+    assert
+      .dom("img.chat-img-upload")
+      .hasStyle(
+        { backgroundColor: "rgb(120, 131, 112)" },
+        "sets background to dominant color"
+      );
 
-    image.dispatchEvent(new Event("load")); // Fake that the image has loaded
-    await settled();
+    await triggerEvent("img.chat-img-upload", "load"); // Fake that the image has loaded
 
-    assert.strictEqual(
-      image.style.backgroundColor,
-      "",
-      "removes the background color once the image has loaded"
-    );
+    assert
+      .dom("img.chat-img-upload")
+      .doesNotHaveStyle(
+        "backgroundColor",
+        "removes the background color once the image has loaded"
+      );
   });
 
   test("with a video", async function (assert) {