DEV: Fix pending posts page, make tests work in legacy env (#15132)

* Running the tests only in the ember cli env hid the fact that the pending posts feature wasn't working in the legacy environment
* Tests were using ember-cli-only APIs while there are widely used testing APIs in Discourse that support both ember envs
* `ember-test-selectors` was in both dependencies and devDependencies in discourse/package.json
* `qunit-dom` in package.json was not only unused but also defunct, as it wasn't pulled into the legacy env app

A followup to #14501, and #15128.

app/assets/javascripts/discourse/app/templates/user-activity-pending.hbs

@@ -1,5 +1,5 @@
 <ul class="user-stream">
-  {{#each @model as |pending_post|}}
+  {{#each this.model as |pending_post|}}
     <PendingPost @post={{pending_post}} />
   {{/each}}
 </ul>

app/assets/javascripts/discourse/package.json

@@ -81,7 +81,6 @@
     ]
   },
   "devDependencies": {
-    "ember-exam": "6.1.0",
+    "ember-exam": "6.1.0"
-    "ember-test-selectors": "^6.0.0"
   }
 }

app/assets/javascripts/discourse/tests/acceptance/pending-posts-test.js

@@ -1,31 +1,26 @@
-import { acceptance } from "discourse/tests/helpers/qunit-helpers";
+import {
+  acceptance,
+  count,
+  exists,
+} from "discourse/tests/helpers/qunit-helpers";
 import { test } from "qunit";
 import { click, visit } from "@ember/test-helpers";
-import { setupApplicationTest as EMBER_CLI_ENV } from "ember-qunit";
 
 acceptance("Pending posts - no existing pending posts", function (needs) {
-  if (!EMBER_CLI_ENV) {
-    return; // dom helpers not available in legacy env
-  }
-
   needs.user();
 
   test("No link to pending posts", async function (assert) {
     await visit("/u/eviltrout");
-    assert.dom(".action-list").doesNotIncludeText("Pending");
+    assert.ok(!exists(".action-list [href='/u/eviltrout/activity/pending']"));
   });
 });
 
 acceptance("Pending posts - existing pending posts", function (needs) {
-  if (!EMBER_CLI_ENV) {
-    return; // dom helpers not available in legacy env
-  }
-
   needs.user({ pending_posts_count: 2 });
 
   test("Navigate to pending posts", async function (assert) {
     await visit("/u/eviltrout");
     await click("[href='/u/eviltrout/activity/pending']");
-    assert.dom(".user-stream-item").exists({ count: 2 });
+    assert.strictEqual(count(".user-stream-item"), 2);
   });
 });

app/assets/javascripts/discourse/tests/acceptance/sticky-avatars-test.js

@@ -1,28 +1,18 @@
-import { acceptance } from "discourse/tests/helpers/qunit-helpers";
+import { acceptance, query } from "discourse/tests/helpers/qunit-helpers";
 import { skip } from "qunit";
-import { find, scrollTo, visit, waitUntil } from "@ember/test-helpers";
+import { visit } from "@ember/test-helpers";
-import { setupApplicationTest as EMBER_CLI_ENV } from "ember-qunit";
-
-acceptance("Sticky Avatars", function (needs) {
-  if (!EMBER_CLI_ENV) {
-    return; // helpers not available in legacy env
-  }
-
-  const container = document.getElementById("ember-testing-container");
-
-  needs.hooks.beforeEach(function () {
-    container.scrollTop = 0;
-  });
 
+acceptance("Sticky Avatars", function () {
   skip("Adds sticky avatars when scrolling up", async function (assert) {
+    const container = document.getElementById("ember-testing-container");
+    container.scrollTo(0, 0);
+
     await visit("/t/internationalization-localization/280");
+    container.scrollTo(0, 800);
+    container.scrollTo(0, 700);
 
-    await scrollTo(container, 0, 800);
-    await scrollTo(container, 0, 700);
-
-    await waitUntil(() => find(".sticky-avatar"));
     assert.ok(
-      find("#post_5").parentElement.classList.contains("sticky-avatar"),
+      query("#post_5").parentElement.classList.contains("sticky-avatar"),
       "Sticky avatar is applied"
     );
   });

app/assets/javascripts/discourse/tests/integration/components/empty-state-test.js

@@ -1,23 +1,18 @@
-import { module, test } from "qunit";
+import { discourseModule, query } from "discourse/tests/helpers/qunit-helpers";
-import { setupRenderingTest } from "ember-qunit";
+import componentTest, {
-import { render } from "@ember/test-helpers";
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
 import hbs from "htmlbars-inline-precompile";
 
-const LEGACY_ENV = !setupRenderingTest;
+discourseModule("Integration | Component | empty-state", function (hooks) {
-
-module("Integration | Component | empty-state", function (hooks) {
-  if (LEGACY_ENV) {
-    return;
-  }
-
   setupRenderingTest(hooks);
 
-  test("it renders", async function (assert) {
+  componentTest("it renders", {
-    await render(hbs`
+    template: hbs`<EmptyState @title="title" @body="body" />`,
-      <EmptyState @title="title" @body="body" />
-    `);
 
-    assert.dom("[data-test-title]").hasText("title");
+    test(assert) {
-    assert.dom("[data-test-body]").hasText("body");
+      assert.strictEqual(query("[data-test-title]").textContent, "title");
+      assert.strictEqual(query("[data-test-body]").textContent, "body");
+    },
   });
 });

app/assets/javascripts/discourse/tests/integration/components/pending-post-test.js

@@ -1,37 +1,35 @@
-import { module, test } from "qunit";
+import { discourseModule, query } from "discourse/tests/helpers/qunit-helpers";
-import { setupRenderingTest } from "ember-qunit";
+import componentTest, {
-import { render } from "@ember/test-helpers";
+  setupRenderingTest,
+} from "discourse/tests/helpers/component-test";
 import hbs from "htmlbars-inline-precompile";
-import PendingPost from "discourse/models/pending-post";
 import createStore from "discourse/tests/helpers/create-store";
 
-const LEGACY_ENV = !setupRenderingTest;
+discourseModule("Integration | Component | pending-post", function (hooks) {
-
-module("Integration | Component | pending-post", function (hooks) {
-  if (LEGACY_ENV) {
-    return;
-  }
-
   setupRenderingTest(hooks);
 
-  test("it renders", async function (assert) {
+  componentTest("it renders", {
-    const store = createStore();
+    template: hbs`<PendingPost @post={{this.post}}/>`,
-    store.createRecord("category", { id: 2 });
-    const post = PendingPost.create({
-      id: 1,
-      topic_url: "topic-url",
-      username: "USERNAME",
-      category_id: 2,
-      raw_text: "**bold text**",
-    });
-    this.set("post", post);
 
-    await render(hbs`<PendingPost @post={{this.post}}/>`);
+    beforeEach() {
+      const store = createStore();
+      store.createRecord("category", { id: 2 });
+      const post = store.createRecord("pending-post", {
+        id: 1,
+        topic_url: "topic-url",
+        username: "USERNAME",
+        category_id: 2,
+        raw_text: "**bold text**",
+      });
+      this.set("post", post);
+    },
 
-    assert.equal(
+    test(assert) {
-      this.element.querySelector("p.excerpt").textContent.trim(),
+      assert.strictEqual(
-      "bold text",
+        query("p.excerpt").textContent.trim(),
-      "renders the cooked text"
+        "bold text",
-    );
+        "renders the cooked text"
+      );
+    },
   });
 });

package.json

@@ -55,7 +55,6 @@
     "pretender": "^3.4.7",
     "puppeteer": "1.20",
     "qunit": "2.8.0",
-    "qunit-dom": "^2.0.0",
     "route-recognizer": "^0.3.3",
     "sinon": "^9.0.2",
     "squoosh": "discourse/squoosh#dc9649d"