From 429b6a4e4ec778a568a10e3867dcb4b8ace99d5e Mon Sep 17 00:00:00 2001
From: Jarek Radosz <jradosz@gmail.com>
Date: Mon, 11 Nov 2024 11:44:42 +0100
Subject: [PATCH] DEV: Use qunit-dom instead of `classList`/`activeElement`
 (#29676)

---
 .../tests/acceptance/composer-test.js         | 34 +++----------
 .../acceptance/loading-indicator-test.js      | 12 ++---
 .../acceptance/sidebar-anonymous-user-test.js |  7 ++-
 .../acceptance/sidebar-plugin-api-test.js     | 24 ++++------
 .../tests/acceptance/sidebar-user-test.js     | 17 +++----
 .../discourse/tests/acceptance/static-test.js | 32 ++++---------
 .../discourse/tests/acceptance/tags-test.js   |  5 +-
 .../tests/acceptance/topic-discovery-test.js  | 48 +++++++++----------
 .../tests/acceptance/topic-entrance-test.js   | 27 +++++------
 .../tests/acceptance/user-anonymous-test.js   | 21 ++++----
 .../user-preferences-interface-test.js        |  4 +-
 .../acceptance/user-private-messages-test.js  |  2 +-
 .../discourse/tests/acceptance/user-test.js   | 28 +++++------
 .../discourse/tests/acceptance/users-test.js  | 15 ++----
 .../select-kit/notifications-button-test.js   |  8 ++--
 .../components/themes-list-test.js            | 32 +++++--------
 .../user-menu/bookmarks-list-test.js          |  8 ++--
 .../components/user-menu/menu-item-test.js    | 23 ++++-----
 .../components/user-menu/menu-test.js         |  6 +--
 .../user-menu/messages-list-test.js           | 34 ++++++-------
 .../widgets/widget-dropdown-test.js           | 20 ++++----
 .../integration/helpers/body-class-test.js    | 17 ++++---
 .../tests/unit/lib/dom-from-string-test.js    |  4 +-
 .../tests/unit/lib/formatter-test.js          |  8 ++--
 24 files changed, 172 insertions(+), 264 deletions(-)

diff --git a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
index bbf5b9babfc..e853007b50c 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/composer-test.js
@@ -522,8 +522,8 @@ acceptance("Composer", function (needs) {
 
     pretender.put("/posts/:post_id", async () => {
       // at this point, request is in flight, so post is staged
-      assert.dom(".topic-post.staged").exists();
-      assert.ok(query(".topic-post").classList.contains("staged"));
+      assert.dom(".topic-post").exists();
+      assert.dom(".topic-post").hasClass("staged");
       assert.strictEqual(
         query(".topic-post.staged .cooked").innerText.trim(),
         "will return empty json"
@@ -1103,11 +1103,7 @@ acceptance("Composer - Focus Open and Closed", function (needs) {
     await composer.focusComposer({ fallbackToNewTopic: true });
 
     await settled();
-    assert.strictEqual(
-      document.activeElement.classList.contains("d-editor-input"),
-      true,
-      "composer is opened and focused"
-    );
+    assert.dom(".d-editor-input").isFocused("composer is open and focused");
     assert.strictEqual(composer.model.action, Composer.CREATE_TOPIC);
   });
 
@@ -1121,11 +1117,7 @@ acceptance("Composer - Focus Open and Closed", function (needs) {
     });
 
     await settled();
-    assert.strictEqual(
-      document.activeElement.classList.contains("d-editor-input"),
-      true,
-      "composer is opened and focused"
-    );
+    assert.dom(".d-editor-input").isFocused("composer is open and focused");
     assert.strictEqual(
       query("textarea.d-editor-input").value.trim(),
       "this is appended"
@@ -1140,11 +1132,7 @@ acceptance("Composer - Focus Open and Closed", function (needs) {
     await composer.focusComposer();
 
     await settled();
-    assert.strictEqual(
-      document.activeElement.classList.contains("d-editor-input"),
-      true,
-      "composer is opened and focused"
-    );
+    assert.dom(".d-editor-input").isFocused("composer is open and focused");
   });
 
   test("Focusing a composer which is already open and append text", async function (assert) {
@@ -1155,11 +1143,7 @@ acceptance("Composer - Focus Open and Closed", function (needs) {
     await composer.focusComposer({ insertText: "this is some appended text" });
 
     await settled();
-    assert.strictEqual(
-      document.activeElement.classList.contains("d-editor-input"),
-      true,
-      "composer is opened and focused"
-    );
+    assert.dom(".d-editor-input").isFocused("composer is open and focused");
     assert.strictEqual(
       query("textarea.d-editor-input").value.trim(),
       "this is some appended text"
@@ -1177,11 +1161,7 @@ acceptance("Composer - Focus Open and Closed", function (needs) {
     await composer.focusComposer({ insertText: "this is some appended text" });
 
     await settled();
-    assert.strictEqual(
-      document.activeElement.classList.contains("d-editor-input"),
-      true,
-      "composer is opened and focused"
-    );
+    assert.dom(".d-editor-input").isFocused("composer is open and focused");
     assert.strictEqual(
       query("textarea.d-editor-input").value.trim(),
       "This is a dirty reply\n\nthis is some appended text"
diff --git a/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js b/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js
index 7d35925d24f..070b3294d9e 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/loading-indicator-test.js
@@ -4,12 +4,13 @@ import {
   getSettledState,
   settled,
   visit,
+  waitFor,
   waitUntil,
 } from "@ember/test-helpers";
 import { test } from "qunit";
 import AboutFixtures from "discourse/tests/fixtures/about";
 import pretender from "discourse/tests/helpers/create-pretender";
-import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 
 const SPINNER_SELECTOR =
   "#main-outlet-wrapper .route-loading-spinner div.spinner";
@@ -85,16 +86,11 @@ acceptance("Page Loading Indicator", function (needs) {
     assert.strictEqual(currentRouteName(), "discovery.latest");
     assert.dom(SPINNER_SELECTOR).doesNotExist();
 
-    await waitUntil(() =>
-      query(".loading-indicator-container").classList.contains("loading")
-    );
+    await waitFor(".loading-indicator-container.loading");
 
     pretender.resolve(aboutRequest);
 
-    await waitUntil(() =>
-      query(".loading-indicator-container").classList.contains("done")
-    );
-
+    await waitFor(".loading-indicator-container.done");
     await settled();
 
     assert.strictEqual(currentRouteName(), "about");
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-user-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-user-test.js
index be0bd263ab3..ca76fa9fb86 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-user-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-anonymous-user-test.js
@@ -10,10 +10,9 @@ acceptance("Sidebar - Anonymous User", function (needs) {
   test("sidebar is displayed", async function (assert) {
     await visit("/");
 
-    assert.ok(
-      document.body.classList.contains("has-sidebar-page"),
-      "adds sidebar utility class to body"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("has-sidebar-page", "adds sidebar utility class to body");
 
     assert
       .dom(".sidebar-container")
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
index 9fbdee35f13..f408f0a15a8 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js
@@ -182,23 +182,17 @@ acceptance("Sidebar - Plugin API", function (needs) {
       .dom(links[0].children[0])
       .hasStyle({ color: "rgb(255, 0, 0)" }, "has correct prefix color");
 
-    assert.strictEqual(
-      links[0].children[0].children[0].classList.contains("d-icon-d-chat"),
-      true,
-      "displays prefix icon"
-    );
+    assert
+      .dom(links[0].children[0].children[0])
+      .hasClass("d-icon-d-chat", "displays prefix icon");
 
-    assert.strictEqual(
-      links[0].children[0].children[1].classList.contains("d-icon-lock"),
-      true,
-      "displays prefix icon badge"
-    );
+    assert
+      .dom(links[0].children[0].children[1])
+      .hasClass("d-icon-lock", "displays prefix icon badge");
 
-    assert.strictEqual(
-      links[0].children[2].children[0].classList.contains("d-icon-circle"),
-      true,
-      "displays suffix icon"
-    );
+    assert
+      .dom(links[0].children[2].children[0])
+      .hasClass("d-icon-circle", "displays suffix icon");
 
     assert
       .dom(links[1].children[1])
diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js
index 1d5b8f05b25..d6a1f8b3d02 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-user-test.js
@@ -112,10 +112,9 @@ acceptance(
     test("showing and hiding sidebar", async function (assert) {
       await visit("/");
 
-      assert.ok(
-        document.body.classList.contains("has-sidebar-page"),
-        "adds sidebar utility class to body"
-      );
+      assert
+        .dom(document.body)
+        .hasClass("has-sidebar-page", "adds sidebar utility class to body");
 
       assert
         .dom(".sidebar-container")
@@ -123,10 +122,12 @@ acceptance(
 
       await click(".btn-sidebar-toggle");
 
-      assert.ok(
-        !document.body.classList.contains("has-sidebar-page"),
-        "removes sidebar utility class from body"
-      );
+      assert
+        .dom(document.body)
+        .doesNotHaveClass(
+          "has-sidebar-page",
+          "removes sidebar utility class from body"
+        );
 
       assert.dom(".sidebar-container").doesNotExist("hides the sidebar");
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/static-test.js b/app/assets/javascripts/discourse/tests/acceptance/static-test.js
index 0566166dfa2..1385ec5bb8b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/static-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/static-test.js
@@ -5,55 +5,39 @@ import { acceptance } from "discourse/tests/helpers/qunit-helpers";
 acceptance("Static pages", function () {
   test("/faq", async function (assert) {
     await visit("/faq");
-    assert.true(
-      document.body.classList.contains("static-faq"),
-      "/faq has the body class"
-    );
+    assert.dom(document.body).hasClass("static-faq", "/faq has the body class");
     assert.dom(".body-page").exists("The content is present");
   });
 
   test("/guidelines", async function (assert) {
     await visit("/guidelines");
-    assert.true(
-      document.body.classList.contains("static-guidelines"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("static-guidelines", "has the body class");
     assert.dom(".body-page").exists("The content is present");
   });
 
   test("/conduct", async function (assert) {
     await visit("/conduct");
-    assert.true(
-      document.body.classList.contains("static-conduct"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("static-conduct", "has the body class");
     assert.dom(".body-page").exists("The content is present");
   });
 
   test("/tos", async function (assert) {
     await visit("/tos");
-    assert.true(
-      document.body.classList.contains("static-tos"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("static-tos", "has the body class");
     assert.dom(".body-page").exists("The content is present");
   });
 
   test("/privacy", async function (assert) {
     await visit("/privacy");
-    assert.true(
-      document.body.classList.contains("static-privacy"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("static-privacy", "has the body class");
     assert.dom(".body-page").exists("The content is present");
   });
 
   test("/rules", async function (assert) {
     await visit("/rules");
-    assert.true(
-      document.body.classList.contains("static-rules"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("static-rules", "has the body class");
     assert.dom(".body-page").exists("The content is present");
   });
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/tags-test.js b/app/assets/javascripts/discourse/tests/acceptance/tags-test.js
index ef4e61a1e65..7e1326d0a4c 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/tags-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/tags-test.js
@@ -105,10 +105,7 @@ acceptance("Tags", function (needs) {
   test("list the tags", async function (assert) {
     await visit("/tags");
 
-    assert.ok(
-      document.body.classList.contains("tags-page"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("tags-page", "has the body class");
     assert.dom(`[data-tag-name="eviltrout"]`).exists("shows the eviltrout tag");
   });
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js
index 5a45560d8c2..eb2a043e00d 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/topic-discovery-test.js
@@ -25,10 +25,9 @@ acceptance("Topic Discovery", function (needs) {
 
   test("Visit Discovery Pages", async function (assert) {
     await visit("/");
-    assert.ok(
-      document.body.classList.contains("navigation-topics"),
-      "has the default navigation"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("navigation-topics", "has the default navigation");
     assert.dom(".topic-list").exists("the list of topics was rendered");
     assert.dom(".topic-list .topic-list-item").exists("has topics");
 
@@ -52,31 +51,32 @@ acceptance("Topic Discovery", function (needs) {
     assert.dom(".topic-list").exists("the list of topics was rendered");
     assert.dom(".topic-list .topic-list-item").exists("has topics");
     assert.dom(".category-list").doesNotExist("doesn't render subcategories");
-    assert.ok(
-      document.body.classList.contains("category-bug"),
-      "has a custom css class for the category id on the body"
-    );
+    assert
+      .dom(document.body)
+      .hasClass(
+        "category-bug",
+        "has a custom css class for the category id on the body"
+      );
 
     await visit("/categories");
-    assert.ok(
-      document.body.classList.contains("navigation-categories"),
-      "has the body class"
-    );
-    assert.ok(
-      !document.body.classList.contains("category-bug"),
-      "removes the custom category class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("navigation-categories", "has the body class");
+    assert
+      .dom(document.body)
+      .doesNotHaveClass("category-bug", "removes the custom category class");
     assert.dom(".category").exists("has a list of categories");
-    assert.ok(
-      document.body.classList.contains("categories-list"),
-      "has a custom class to indicate categories"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("categories-list", "has a custom class to indicate categories");
 
     await visit("/top");
-    assert.ok(
-      !document.body.classList.contains("categories-list"),
-      "removes the `categories-list` class"
-    );
+    assert
+      .dom(document.body)
+      .doesNotHaveClass(
+        "categories-list",
+        "removes the `categories-list` class"
+      );
     assert.dom(".topic-list .topic-list-item").exists("has topics");
 
     await visit("/c/feature");
diff --git a/app/assets/javascripts/discourse/tests/acceptance/topic-entrance-test.js b/app/assets/javascripts/discourse/tests/acceptance/topic-entrance-test.js
index 8a7dc75b761..5d7e1447b0b 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/topic-entrance-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/topic-entrance-test.js
@@ -1,27 +1,22 @@
 import { click, triggerKeyEvent, 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("Topic Entrance Modal", function () {
   test("can be closed with the esc key", async function (assert) {
     await visit("/");
     await click(".topic-list-item button.posts-map");
 
-    const topicEntrance = query("#topic-entrance");
-    assert.ok(
-      !topicEntrance.classList.contains("hidden"),
-      "topic entrance modal appears"
-    );
-    assert.equal(
-      document.activeElement,
-      topicEntrance.querySelector(".jump-top"),
-      "the jump top button has focus when the modal is shown"
-    );
+    assert
+      .dom("#topic-entrance")
+      .doesNotHaveClass("hidden", "topic entrance modal appears");
+    assert
+      .dom("#topic-entrance .jump-top")
+      .isFocused("the jump top button has focus when the modal is shown");
 
-    await triggerKeyEvent(topicEntrance, "keydown", "Escape");
-    assert.ok(
-      topicEntrance.classList.contains("hidden"),
-      "topic entrance modal disappears after pressing esc"
-    );
+    await triggerKeyEvent("#topic-entrance", "keydown", "Escape");
+    assert
+      .dom("#topic-entrance")
+      .hasClass("hidden", "topic entrance modal disappears after pressing esc");
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-anonymous-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-anonymous-test.js
index 40376326916..dc97f2cc9e4 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-anonymous-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-anonymous-test.js
@@ -6,10 +6,9 @@ acceptance("User Anonymous", function () {
   test("Root URL", async function (assert) {
     await visit("/u/eviltrout");
 
-    assert.ok(
-      document.body.classList.contains("user-summary-page"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("user-summary-page", "has the body class");
     assert.strictEqual(
       currentRouteName(),
       "user.summary",
@@ -19,10 +18,9 @@ acceptance("User Anonymous", function () {
 
   test("Filters", async function (assert) {
     await visit("/u/eviltrout/activity");
-    assert.ok(
-      document.body.classList.contains("user-activity-page"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("user-activity-page", "has the body class");
     assert.dom(".user-main .about").exists("has the about section");
     assert.dom(".user-stream .item").exists("has stream items");
 
@@ -40,10 +38,9 @@ acceptance("User Anonymous", function () {
   test("Badges", async function (assert) {
     await visit("/u/eviltrout/badges");
 
-    assert.ok(
-      document.body.classList.contains("user-badges-page"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("user-badges-page", "has the body class");
     assert.dom(".badge-group-list .badge-card").exists("shows a badge");
   });
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js
index 964eec9a984..5af4bc27695 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-preferences-interface-test.js
@@ -35,11 +35,11 @@ acceptance("User Preferences - Interface", function (needs) {
     const textSize = selectKit(".text-size .combo-box");
     await textSize.expand();
     await textSize.selectRowByValue("larger");
-    assert.ok(document.documentElement.classList.contains("text-size-larger"));
+    assert.dom(document.documentElement).hasClass("text-size-larger");
 
     await textSize.expand();
     await textSize.selectRowByValue("largest");
-    assert.ok(document.documentElement.classList.contains("text-size-largest"));
+    assert.dom(document.documentElement).hasClass("text-size-largest");
 
     assert.strictEqual(cookie("text_size"), undefined, "cookie is not set");
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js
index 41156d80e84..0f6d9a8a016 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js
@@ -688,7 +688,7 @@ acceptance(
         const row = messagesDropdown.rowByName("test nav");
 
         assert.strictEqual(row.value(), "/u/eviltrout/preferences");
-        assert.ok(row.icon().classList.contains("d-icon-arrow-left"));
+        assert.dom(row.icon()).hasClass("d-icon-arrow-left");
       } finally {
         resetCustomUserNavMessagesDropdownRows();
       }
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-test.js
index bce764e6b74..1dea60481c6 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-test.js
@@ -63,19 +63,17 @@ acceptance("User Routes", function (needs) {
 
   test("Invites", async function (assert) {
     await visit("/u/eviltrout/invited/pending");
-    assert.ok(
-      document.body.classList.contains("user-invites-page"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("user-invites-page", "has the body class");
   });
 
   test("Notifications", async function (assert) {
     await visit("/u/eviltrout/notifications");
 
-    assert.ok(
-      document.body.classList.contains("user-notifications-page"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("user-notifications-page", "has the body class");
 
     const $links = queryAll(".notification a");
 
@@ -102,10 +100,9 @@ acceptance("User Routes", function (needs) {
 
   test("Root URL - Viewing Self", async function (assert) {
     await visit("/u/eviltrout");
-    assert.ok(
-      document.body.classList.contains("user-activity-page"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("user-activity-page", "has the body class");
     assert.strictEqual(
       currentRouteName(),
       "userActivity.index",
@@ -163,10 +160,9 @@ acceptance("User Routes - Moderator viewing warnings", function (needs) {
 
   test("Messages - Warnings", async function (assert) {
     await visit("/u/eviltrout/messages/warnings");
-    assert.ok(
-      document.body.classList.contains("user-messages-page"),
-      "has the body class"
-    );
+    assert
+      .dom(document.body)
+      .hasClass("user-messages-page", "has the body class");
     assert.dom("div.alert-info").exists("has the permissions alert");
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/acceptance/users-test.js b/app/assets/javascripts/discourse/tests/acceptance/users-test.js
index 3f722a6caa5..d28bc44a60d 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/users-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/users-test.js
@@ -13,10 +13,7 @@ import I18n from "discourse-i18n";
 acceptance("User Directory", function () {
   test("Visit Page", async function (assert) {
     await visit("/u");
-    assert.ok(
-      document.body.classList.contains("users-page"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("users-page", "has the body class");
     assert
       .dom(".directory .directory-table .directory-table__row")
       .exists("has a list of users");
@@ -29,10 +26,7 @@ acceptance("User Directory", function () {
 
   test("Visit Without Usernames", async function (assert) {
     await visit("/u?exclude_usernames=system");
-    assert.ok(
-      document.body.classList.contains("users-page"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("users-page", "has the body class");
     assert
       .dom(".directory .directory-table .directory-table__row")
       .exists("has a list of users");
@@ -86,10 +80,7 @@ acceptance("User Directory", function () {
 
   test("Visit With Group Filter", async function (assert) {
     await visit("/u?group=trust_level_0");
-    assert.ok(
-      document.body.classList.contains("users-page"),
-      "has the body class"
-    );
+    assert.dom(document.body).hasClass("users-page", "has the body class");
     assert
       .dom(".directory .directory-table .directory-table__row")
       .exists("has a list of users");
diff --git a/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js b/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js
index e9e54c852f5..9f1e5a1e500 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/select-kit/notifications-button-test.js
@@ -39,11 +39,9 @@ module(
         "it shows the regular choice when value is not set"
       );
 
-      const icon = this.subject.header().icon();
-      assert.ok(
-        icon.classList.contains("d-icon-d-regular"),
-        "it shows the correct icon"
-      );
+      assert
+        .dom(this.subject.header().icon())
+        .hasClass("d-icon-d-regular", "shows the correct icon");
     });
   }
 );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js
index 51c55ea8618..0d745126078 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/themes-list-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/themes-list-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 { 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";
 import Theme, { COMPONENTS, THEMES } from "admin/models/theme";
@@ -40,16 +40,10 @@ module("Integration | Component | themes-list", function (hooks) {
       hbs`<ThemesList @themes={{this.themes}} @components={{this.components}} @currentTab={{this.currentTab}} />`
     );
 
-    assert.strictEqual(
-      query(".themes-tab").classList.contains("active"),
-      true,
-      "themes tab is active"
-    );
-    assert.strictEqual(
-      query(".components-tab").classList.contains("active"),
-      false,
-      "components tab is not active"
-    );
+    assert.dom(".themes-tab").hasClass("active", "themes tab is active");
+    assert
+      .dom(".components-tab")
+      .doesNotHaveClass("active", "components tab is not active");
 
     assert
       .dom(".inactive-indicator")
@@ -120,16 +114,12 @@ module("Integration | Component | themes-list", function (hooks) {
       hbs`<ThemesList @themes={{this.themes}} @components={{this.components}} @currentTab={{this.currentTab}} />`
     );
 
-    assert.strictEqual(
-      query(".components-tab").classList.contains("active"),
-      true,
-      "components tab is active"
-    );
-    assert.strictEqual(
-      query(".themes-tab").classList.contains("active"),
-      false,
-      "themes tab is not active"
-    );
+    assert
+      .dom(".components-tab")
+      .hasClass("active", "components tab is active");
+    assert
+      .dom(".themes-tab")
+      .doesNotHaveClass("active", "themes tab is not active");
 
     assert.dom(".inactive-indicator").doesNotExist("there is no separator");
     assert
diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js
index bc5ab83ac40..3be06eae156 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/bookmarks-list-test.js
@@ -20,11 +20,11 @@ module(
 
       assert.strictEqual(items.length, 2);
 
-      assert.ok(items[0].classList.contains("notification"));
-      assert.ok(items[0].classList.contains("unread"));
-      assert.ok(items[0].classList.contains("bookmark-reminder"));
+      assert.dom(items[0]).hasClass("notification");
+      assert.dom(items[0]).hasClass("unread");
+      assert.dom(items[0]).hasClass("bookmark-reminder");
 
-      assert.ok(items[1].classList.contains("bookmark"));
+      assert.dom(items[1]).hasClass("bookmark");
     });
 
     test("show all button for bookmark notifications", async function (assert) {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-item-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-item-test.js
index 2be97ea7093..5f2ed412a69 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-item-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-item-test.js
@@ -82,8 +82,7 @@ module(
         getNotification(this.currentUser, this.siteSettings, this.site)
       );
       await render(template);
-      let item = query("li");
-      assert.ok(item.classList.contains("mentioned"));
+      assert.dom("li").hasClass("mentioned");
 
       this.set(
         "item",
@@ -303,24 +302,20 @@ module(
 
       assert.dom("svg.d-icon-wrench").exists("icon is customized");
 
-      const label = query("li .item-label");
-      assert.ok(
-        label.classList.contains("label-wrapper-1"),
-        "label wrapper has additional classes"
-      );
+      assert
+        .dom("li .item-label")
+        .hasClass("label-wrapper-1", "label wrapper has additional classes");
       assert.strictEqual(
-        label.textContent.trim(),
+        query("li .item-label").textContent.trim(),
         "notification label 666 <span>",
         "label content is customized"
       );
 
-      const description = query(".item-description");
-      assert.ok(
-        description.classList.contains("description-class-1"),
-        "description has additional classes"
-      );
+      assert
+        .dom(".item-description")
+        .hasClass("description-class-1", "description has additional classes");
       assert.strictEqual(
-        description.textContent.trim(),
+        query(".item-description").textContent.trim(),
         "notification description 123 <script>",
         "description content is customized"
       );
diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js
index f42d359672c..26b75cad277 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/menu-test.js
@@ -16,9 +16,9 @@ module("Integration | Component | user-menu", function (hooks) {
     const activeTab = query(".top-tabs.tabs-list .btn.active");
     assert.strictEqual(activeTab.id, "user-menu-button-all-notifications");
     const notifications = queryAll("#quick-access-all-notifications ul li");
-    assert.ok(notifications[0].classList.contains("edited"));
-    assert.ok(notifications[1].classList.contains("replied"));
-    assert.ok(notifications[2].classList.contains("liked-consolidated"));
+    assert.dom(notifications[0]).hasClass("edited");
+    assert.dom(notifications[1]).hasClass("replied");
+    assert.dom(notifications[2]).hasClass("liked-consolidated");
   });
 
   test("active tab has a11y attributes that indicate it's active", async function (assert) {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/user-menu/messages-list-test.js b/app/assets/javascripts/discourse/tests/integration/components/user-menu/messages-list-test.js
index 5b02f357d65..39dce29ba1d 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/user-menu/messages-list-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/user-menu/messages-list-test.js
@@ -107,15 +107,15 @@ module("Integration | Component | user-menu | messages-list", function (hooks) {
 
     assert.strictEqual(items.length, 3);
 
-    assert.ok(items[0].classList.contains("notification"));
-    assert.ok(items[0].classList.contains("unread"));
-    assert.ok(items[0].classList.contains("private-message"));
+    assert.dom(items[0]).hasClass("notification");
+    assert.dom(items[0]).hasClass("unread");
+    assert.dom(items[0]).hasClass("private-message");
 
-    assert.ok(items[1].classList.contains("notification"));
-    assert.ok(items[1].classList.contains("read"));
-    assert.ok(items[1].classList.contains("group-message-summary"));
+    assert.dom(items[1]).hasClass("notification");
+    assert.dom(items[1]).hasClass("read");
+    assert.dom(items[1]).hasClass("group-message-summary");
 
-    assert.ok(items[2].classList.contains("message"));
+    assert.dom(items[2]).hasClass("message");
   });
 
   test("does not error when there are no group_message_summary notifications", async function (assert) {
@@ -132,11 +132,11 @@ module("Integration | Component | user-menu | messages-list", function (hooks) {
 
     assert.strictEqual(items.length, 2);
 
-    assert.ok(items[0].classList.contains("notification"));
-    assert.ok(items[0].classList.contains("unread"));
-    assert.ok(items[0].classList.contains("private-message"));
+    assert.dom(items[0]).hasClass("notification");
+    assert.dom(items[0]).hasClass("unread");
+    assert.dom(items[0]).hasClass("private-message");
 
-    assert.ok(items[1].classList.contains("message"));
+    assert.dom(items[1]).hasClass("message");
   });
 
   test("does not error when there are no messages", async function (assert) {
@@ -154,13 +154,13 @@ module("Integration | Component | user-menu | messages-list", function (hooks) {
 
     assert.strictEqual(items.length, 2);
 
-    assert.ok(items[0].classList.contains("notification"));
-    assert.ok(items[0].classList.contains("unread"));
-    assert.ok(items[0].classList.contains("private-message"));
+    assert.dom(items[0]).hasClass("notification");
+    assert.dom(items[0]).hasClass("unread");
+    assert.dom(items[0]).hasClass("private-message");
 
-    assert.ok(items[1].classList.contains("notification"));
-    assert.ok(items[1].classList.contains("read"));
-    assert.ok(items[1].classList.contains("group-message-summary"));
+    assert.dom(items[1]).hasClass("notification");
+    assert.dom(items[1]).hasClass("read");
+    assert.dom(items[1]).hasClass("group-message-summary");
   });
 
   test("merge-sorts group_message_summary notifications and messages", async function (assert) {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-dropdown-test.js b/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-dropdown-test.js
index 393f90799db..3b6443ef7f6 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-dropdown-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/widgets/widget-dropdown-test.js
@@ -203,11 +203,9 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
     await render(TEMPLATE);
 
     await toggle();
-    assert.ok(
-      query(
-        "#my-dropdown .widget-dropdown-item:nth-child(3)"
-      ).classList.contains("separator")
-    );
+    assert
+      .dom("#my-dropdown .widget-dropdown-item:nth-child(3)")
+      .hasClass("separator");
   });
 
   test("hides widget if no content", async function (assert) {
@@ -225,9 +223,9 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
 
     await render(TEMPLATE);
 
-    assert.ok(header().classList.contains("widget-dropdown-header"));
-    assert.ok(header().classList.contains("btn-small"));
-    assert.ok(header().classList.contains("and-text"));
+    assert.dom(header()).hasClass("widget-dropdown-header");
+    assert.dom(header()).hasClass("btn-small");
+    assert.dom(header()).hasClass("and-text");
   });
 
   test("bodyClass option", async function (assert) {
@@ -237,9 +235,9 @@ module("Integration | Component | Widget | widget-dropdown", function (hooks) {
     await render(TEMPLATE);
 
     await toggle();
-    assert.ok(body().classList.contains("widget-dropdown-body"));
-    assert.ok(body().classList.contains("gigantic"));
-    assert.ok(body().classList.contains("and-yet-small"));
+    assert.dom(body()).hasClass("widget-dropdown-body");
+    assert.dom(body()).hasClass("gigantic");
+    assert.dom(body()).hasClass("and-yet-small");
   });
 
   test("caret option", async function (assert) {
diff --git a/app/assets/javascripts/discourse/tests/integration/helpers/body-class-test.js b/app/assets/javascripts/discourse/tests/integration/helpers/body-class-test.js
index 5f43e6a2a09..5960efc82b5 100644
--- a/app/assets/javascripts/discourse/tests/integration/helpers/body-class-test.js
+++ b/app/assets/javascripts/discourse/tests/integration/helpers/body-class-test.js
@@ -9,15 +9,15 @@ module("Integration | Helper | body-class", function (hooks) {
   test("A single class", async function (assert) {
     await render(hbs`{{body-class "foo"}}`);
 
-    assert.true(document.body.classList.contains("foo"));
+    assert.dom(document.body).hasClass("foo");
   });
 
   test("Multiple classes", async function (assert) {
     this.set("bar", "bar");
     await render(hbs`{{body-class "baz" this.bar}}`);
 
-    assert.true(document.body.classList.contains("baz"));
-    assert.true(document.body.classList.contains("bar"));
+    assert.dom(document.body).hasClass("baz");
+    assert.dom(document.body).hasClass("bar");
   });
 
   test("Empty classes", async function (assert) {
@@ -29,14 +29,13 @@ module("Integration | Helper | body-class", function (hooks) {
   test("Dynamic classes", async function (assert) {
     this.set("dynamic", "bar");
     await render(hbs`{{body-class this.dynamic}}`);
-    assert.true(document.body.classList.contains("bar"), "has .bar");
+    assert.dom(document.body).hasClass("bar");
 
     this.set("dynamic", "baz");
     await settled();
-    assert.true(document.body.classList.contains("baz"), "has .baz");
-    assert.false(
-      document.body.classList.contains("bar"),
-      "does not have .bar anymore"
-    );
+    assert.dom(document.body).hasClass("baz");
+    assert
+      .dom(document.body)
+      .doesNotHaveClass("bar", "does not have .bar anymore");
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js b/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js
index 3d14acf2357..10e942ce951 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js
+++ b/app/assets/javascripts/discourse/tests/unit/lib/dom-from-string-test.js
@@ -9,7 +9,7 @@ module("Unit | Utility | domFromString", function (hooks) {
     const node = domFromString(
       '<div class="foo">foo</div><div class="boo">boo</div>'
     );
-    assert.ok(node[0].classList.contains("foo"));
-    assert.ok(node[1].classList.contains("boo"));
+    assert.dom(node[0]).hasClass("foo");
+    assert.dom(node[1]).hasClass("boo");
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js b/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js
index fb3c2bbb373..4c81a34e3d3 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js
+++ b/app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js
@@ -130,11 +130,9 @@ module("Unit | Utility | formatter", function (hooks) {
       longDate(new Date())
     );
 
-    assert.ok(
-      domFromString(formatDays(0, { format: "medium" }))[0].classList.contains(
-        "date"
-      )
-    );
+    assert
+      .dom(domFromString(formatDays(0, { format: "medium" }))[0])
+      .hasClass("date");
 
     this.clock.restore();
     this.clock = fakeTime("2012-01-09 12:00");