DEV: Modernize chat's component tests (#19577)

1. `test()` and `render()` instead of `componentTest()`
2. Angle brackets
3. `strictEqual()`/`true()`/`false()` assertions

This removes all remaining uses of `componentTest` from core

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

@@ -1,104 +1,87 @@
-import componentTest, {
-  setupRenderingTest,
-} from "discourse/tests/helpers/component-test";
-import { click } from "@ember/test-helpers";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { click, render } from "@ember/test-helpers";
 import { exists, query } from "discourse/tests/helpers/qunit-helpers";
 import hbs from "htmlbars-inline-precompile";
-import { module } from "qunit";
+import { module, test } from "qunit";
 
 module("Discourse Chat | Component | chat-message-reaction", function (hooks) {
   setupRenderingTest(hooks);
 
-  componentTest("accepts arbitrary class property", {
-    template: hbs`{{chat-message-reaction reaction=(hash emoji="heart") class="foo"}}`,
+  test("accepts arbitrary class property", async function (assert) {
+    await render(hbs`
+      <ChatMessageReaction @reaction={{hash emoji="heart"}} @class="foo" />
+    `);
 
-    async test(assert) {
-      assert.ok(exists(".chat-message-reaction.foo"));
-    },
+    assert.true(exists(".chat-message-reaction.foo"));
   });
 
-  componentTest("adds reacted class when user reacted", {
-    template: hbs`{{chat-message-reaction reaction=(hash emoji="heart" reacted=true)}}`,
+  test("adds reacted class when user reacted", async function (assert) {
+    await render(hbs`
+      <ChatMessageReaction @reaction={{hash emoji="heart" reacted=true}} />
+    `);
 
-    async test(assert) {
-      assert.ok(exists(".chat-message-reaction.reacted"));
-    },
+    assert.true(exists(".chat-message-reaction.reacted"));
   });
 
-  componentTest("adds reaction name as class", {
-    template: hbs`{{chat-message-reaction reaction=(hash emoji="heart")}}`,
+  test("adds reaction name as class", async function (assert) {
+    await render(hbs`<ChatMessageReaction @reaction={{hash emoji="heart"}} />`);
 
-    async test(assert) {
-      assert.ok(exists(`.chat-message-reaction[data-emoji-name="heart"]`));
-    },
+    assert.true(exists(`.chat-message-reaction[data-emoji-name="heart"]`));
   });
 
-  componentTest("adds show class when count is positive", {
-    template: hbs`{{chat-message-reaction reaction=(hash emoji="heart" count=this.count)}}`,
+  test("adds show class when count is positive", async function (assert) {
+    this.set("count", 0);
 
-    beforeEach() {
-      this.set("count", 0);
-    },
+    await render(hbs`
+      <ChatMessageReaction @reaction={{hash emoji="heart" count=this.count}} />
+    `);
 
-    async test(assert) {
-      assert.notOk(exists(".chat-message-reaction.show"));
+    assert.false(exists(".chat-message-reaction.show"));
 
+    this.set("count", 1);
+    assert.true(exists(".chat-message-reaction.show"));
+  });
+
+  test("title/alt attributes", async function (assert) {
+    await render(hbs`<ChatMessageReaction @reaction={{hash emoji="heart"}} />`);
+
+    assert.strictEqual(query(".chat-message-reaction").title, ":heart:");
+    assert.strictEqual(query(".chat-message-reaction img").alt, ":heart:");
+  });
+
+  test("count of reactions", async function (assert) {
+    this.set("count", 0);
+
+    await render(hbs`
+      <ChatMessageReaction @reaction={{hash emoji="heart" count=this.count}} />
+    `);
+
+    assert.false(exists(".chat-message-reaction .count"));
+
+    this.set("count", 2);
+    assert.strictEqual(query(".chat-message-reaction .count").innerText, "2");
+  });
+
+  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));
+  });
+
+  test("click action", async function (assert) {
+    this.set("count", 0);
+    this.set("react", () => {
       this.set("count", 1);
+    });
 
-      assert.ok(exists(".chat-message-reaction.show"));
-    },
-  });
+    await render(hbs`
+      <ChatMessageReaction class="show" @reaction={{hash emoji="heart" count=this.count}} @react={{this.react}} />
+    `);
 
-  componentTest("title/alt attributes", {
-    template: hbs`{{chat-message-reaction reaction=(hash emoji="heart")}}`,
+    assert.false(exists(".chat-message-reaction .count"));
 
-    async test(assert) {
-      assert.equal(query(".chat-message-reaction").title, ":heart:");
-      assert.equal(query(".chat-message-reaction img").alt, ":heart:");
-    },
-  });
-
-  componentTest("count of reactions", {
-    template: hbs`{{chat-message-reaction reaction=(hash emoji="heart" count=this.count)}}`,
-
-    beforeEach() {
-      this.set("count", 0);
-    },
-
-    async test(assert) {
-      assert.notOk(exists(".chat-message-reaction .count"));
-
-      this.set("count", 2);
-
-      assert.equal(query(".chat-message-reaction .count").innerText, "2");
-    },
-  });
-
-  componentTest("reaction’s image", {
-    template: hbs`{{chat-message-reaction reaction=(hash emoji="heart")}}`,
-
-    async test(assert) {
-      const src = query(".chat-message-reaction img").src;
-      assert.ok(/heart\.png/.test(src));
-    },
-  });
-
-  componentTest("click action", {
-    template: hbs`{{chat-message-reaction class="show" reaction=(hash emoji="heart" count=this.count) react=this.react}}`,
-
-    beforeEach() {
-      this.set("count", 0);
-      this.set("react", () => {
-        this.set("count", 1);
-      });
-    },
-
-    async test(assert) {
-      assert.notOk(exists(".chat-message-reaction .count"));
-
-      await click(".chat-message-reaction");
-
-      assert.equal(query(".chat-message-reaction .count").innerText, "1");
-    },
+    await click(".chat-message-reaction");
+    assert.strictEqual(query(".chat-message-reaction .count").innerText, "1");
   });
 });