Revert "DEV: rework the chat-live-pane" (#20510)

This reverts commit 67c0498f6475f56472308d25441ea2a817dd1891.

plugins/chat/test/javascripts/components/chat-channel-metadata-test.js

@@ -9,17 +9,16 @@ module("Discourse Chat | Component | chat-channel-metadata", function (hooks) {
   setupRenderingTest(hooks);
 
   test("displays last message sent at", async function (assert) {
-    let lastMessageSentAt = moment().subtract(1, "day").format();
+    let lastMessageSentAt = moment().subtract(1, "day");
     this.channel = fabricators.directMessageChatChannel({
       last_message_sent_at: lastMessageSentAt,
     });
-
     await render(hbs`<ChatChannelMetadata @channel={{this.channel}} />`);
 
     assert.dom(".chat-channel-metadata__date").hasText("Yesterday");
 
     lastMessageSentAt = moment();
-    this.channel.lastMessageSentAt = lastMessageSentAt;
+    this.channel.set("last_message_sent_at", lastMessageSentAt);
     await render(hbs`<ChatChannelMetadata @channel={{this.channel}} />`);
 
     assert

plugins/chat/test/javascripts/components/chat-channel-row-test.js

@@ -51,7 +51,9 @@ module("Discourse Chat | Component | chat-channel-row", function (hooks) {
 
     assert
       .dom(".chat-channel-metadata")
-      .hasText(moment(this.categoryChatChannel.lastMessageSentAt).format("l"));
+      .hasText(
+        moment(this.categoryChatChannel.last_message_sent_at).format("l")
+      );
   });
 
   test("renders membership toggling button when necessary", async function (assert) {

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

@@ -8,6 +8,7 @@ import {
 import hbs from "htmlbars-inline-precompile";
 import { click, render, settled, waitFor } from "@ember/test-helpers";
 import { module, test } from "qunit";
+import { run } from "@ember/runloop";
 
 const fakeUpload = {
   type: ".png",
@@ -46,11 +47,12 @@ module("Discourse Chat | Component | chat-composer-uploads", function (hooks) {
   setupRenderingTest(hooks);
 
   test("loading uploads from an outside source (e.g. draft or editing message)", async function (assert) {
-    this.existingUploads = [fakeUpload];
-
     await render(hbs`
-      <ChatComposerUploads @existingUploads={{this.existingUploads}} @fileUploadElementId="chat-widget-uploader" />
+      <ChatComposerUploads @fileUploadElementId="chat-widget-uploader" />
     `);
+
+    this.appEvents = this.container.lookup("service:appEvents");
+    this.appEvents.trigger("chat-composer:load-uploads", [fakeUpload]);
     await settled();
 
     assert.strictEqual(count(".chat-composer-upload"), 1);
@@ -59,7 +61,10 @@ module("Discourse Chat | Component | chat-composer-uploads", function (hooks) {
 
   test("upload starts and completes", async function (assert) {
     setupUploadPretender();
-    this.set("onUploadChanged", () => {});
+    this.set("changedUploads", null);
+    this.set("onUploadChanged", (uploads) => {
+      this.set("changedUploads", uploads);
+    });
 
     await render(hbs`
       <ChatComposerUploads @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
@@ -75,31 +80,34 @@ module("Discourse Chat | Component | chat-composer-uploads", function (hooks) {
         done();
       }
     );
+
     this.appEvents.trigger(
       "upload-mixin:chat-composer-uploader:add-files",
       createFile("avatar.png")
     );
 
     await waitFor(".chat-composer-upload");
-
-    assert.dom(".chat-composer-upload").exists({ count: 1 });
+    assert.strictEqual(count(".chat-composer-upload"), 1);
   });
 
   test("removing a completed upload", async function (assert) {
     this.set("changedUploads", null);
-    this.set("onUploadChanged", () => {});
-
-    this.existingUploads = [fakeUpload];
+    this.set("onUploadChanged", (uploads) => {
+      this.set("changedUploads", uploads);
+    });
 
     await render(hbs`
-      <ChatComposerUploads @existingUploads={{this.existingUploads}} @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
+      <ChatComposerUploads @fileUploadElementId="chat-widget-uploader" @onUploadChanged={{this.onUploadChanged}} />
     `);
 
-    assert.dom(".chat-composer-upload").exists({ count: 1 });
+    this.appEvents = this.container.lookup("service:appEvents");
+    run(() =>
+      this.appEvents.trigger("chat-composer:load-uploads", [fakeUpload])
+    );
+    assert.strictEqual(count(".chat-composer-upload"), 1);
 
     await click(".remove-upload");
-
-    assert.dom(".chat-composer-upload").exists({ count: 0 });
+    assert.strictEqual(count(".chat-composer-upload"), 0);
   });
 
   test("cancelling in progress upload", async function (assert) {

plugins/chat/test/javascripts/components/chat-live-pane-test.js

@@ -0,0 +1,44 @@
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { exists } from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+import fabricators from "../helpers/fabricators";
+import { render } from "@ember/test-helpers";
+import pretender, { response } from "discourse/tests/helpers/create-pretender";
+import MockPresenceChannel from "../helpers/mock-presence-channel";
+
+function mockChat(context) {
+  const mock = context.container.lookup("service:chat");
+  mock.draftStore = {};
+  mock.currentUser = context.currentUser;
+  mock.presenceChannel = MockPresenceChannel.create();
+  return mock;
+}
+
+module("Discourse Chat | Component | chat-live-pane", function (hooks) {
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.set("chat", mockChat(this));
+    this.set("channel", fabricators.chatChannel());
+  });
+
+  test("Shows skeleton when loading", async function (assert) {
+    pretender.get(`/chat/chat_channels.json`, () => response(this.channel));
+    pretender.get(`/chat/:id/messages.json`, () =>
+      response({ chat_messages: [], meta: { can_delete_self: true } })
+    );
+
+    await render(
+      hbs`<ChatLivePane @loadingMorePast={{true}} @chat={{this.chat}} @chatChannel={{this.channel}} />`
+    );
+
+    assert.true(exists(".chat-skeleton"));
+
+    await render(
+      hbs`<ChatLivePane @loadingMoreFuture={{true}} @chat={{this.chat}} @chatChannel={{this.channel}} />`
+    );
+
+    assert.true(exists(".chat-skeleton"));
+  });
+});

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

@@ -3,16 +3,12 @@ import hbs from "htmlbars-inline-precompile";
 import { exists, query } from "discourse/tests/helpers/qunit-helpers";
 import { module, test } from "qunit";
 import { render } from "@ember/test-helpers";
-import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
-import fabricators from "../helpers/fabricators";
 
 module("Discourse Chat | Component | chat-message-avatar", function (hooks) {
   setupRenderingTest(hooks);
 
   test("chat_webhook_event", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      chat_webhook_event: { emoji: ":heart:" },
-    });
+    this.set("message", { chat_webhook_event: { emoji: ":heart:" } });
 
     await render(hbs`<ChatMessageAvatar @message={{this.message}} />`);
 
@@ -20,9 +16,7 @@ module("Discourse Chat | Component | chat-message-avatar", function (hooks) {
   });
 
   test("user", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-    });
+    this.set("message", { user: { username: "discobot" } });
 
     await render(hbs`<ChatMessageAvatar @message={{this.message}} />`);
 

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

@@ -6,21 +6,21 @@ import I18n from "I18n";
 import { module, test } from "qunit";
 import { render } from "@ember/test-helpers";
 import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
-import fabricators from "../helpers/fabricators";
 
 module("Discourse Chat | Component | chat-message-info", function (hooks) {
   setupRenderingTest(hooks);
 
   test("chat_webhook_event", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      chat_webhook_event: { username: "discobot" },
-    });
+    this.set(
+      "message",
+      ChatMessage.create({ chat_webhook_event: { username: "discobot" } })
+    );
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
     assert.strictEqual(
       query(".chat-message-info__username").innerText.trim(),
-      this.message.chatWebhookEvent.username
+      this.message.chat_webhook_event.username
     );
     assert.strictEqual(
       query(".chat-message-info__bot-indicator").textContent.trim(),
@@ -29,9 +29,7 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
   });
 
   test("user", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-    });
+    this.set("message", ChatMessage.create({ user: { username: "discobot" } }));
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
@@ -42,10 +40,13 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
   });
 
   test("date", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-      created_at: moment(),
-    });
+    this.set(
+      "message",
+      ChatMessage.create({
+        user: { username: "discobot" },
+        created_at: moment(),
+      })
+    );
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
@@ -53,13 +54,16 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
   });
 
   test("bookmark (with reminder)", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-      bookmark: Bookmark.create({
-        reminder_at: moment(),
-        name: "some name",
-      }),
-    });
+    this.set(
+      "message",
+      ChatMessage.create({
+        user: { username: "discobot" },
+        bookmark: Bookmark.create({
+          reminder_at: moment(),
+          name: "some name",
+        }),
+      })
+    );
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
@@ -69,12 +73,15 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
   });
 
   test("bookmark (no reminder)", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-      bookmark: Bookmark.create({
-        name: "some name",
-      }),
-    });
+    this.set(
+      "message",
+      ChatMessage.create({
+        user: { username: "discobot" },
+        bookmark: Bookmark.create({
+          name: "some name",
+        }),
+      })
+    );
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
@@ -83,9 +90,7 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
 
   test("user status", async function (assert) {
     const status = { description: "off to dentist", emoji: "tooth" };
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { status },
-    });
+    this.set("message", ChatMessage.create({ user: { status } }));
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
@@ -93,10 +98,13 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
   });
 
   test("reviewable", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-      user_flag_status: 0,
-    });
+    this.set(
+      "message",
+      ChatMessage.create({
+        user: { username: "discobot" },
+        user_flag_status: 0,
+      })
+    );
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
@@ -105,12 +113,13 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
       I18n.t("chat.you_flagged")
     );
 
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-      reviewable_id: 1,
-    });
-
-    await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
+    this.set(
+      "message",
+      ChatMessage.create({
+        user: { username: "discobot" },
+        reviewable_id: 1,
+      })
+    );
 
     assert.strictEqual(
       query(".chat-message-info__flag a .svg-icon-title").title,
@@ -119,15 +128,18 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
   });
 
   test("with username classes", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: {
-        username: "discobot",
-        admin: true,
-        moderator: true,
-        new_user: true,
-        primary_group_name: "foo",
-      },
-    });
+    this.set(
+      "message",
+      ChatMessage.create({
+        user: {
+          username: "discobot",
+          admin: true,
+          moderator: true,
+          new_user: true,
+          primary_group_name: "foo",
+        },
+      })
+    );
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 
@@ -139,9 +151,7 @@ module("Discourse Chat | Component | chat-message-info", function (hooks) {
   });
 
   test("without username classes", async function (assert) {
-    this.message = ChatMessage.create(fabricators.chatChannel(), {
-      user: { username: "discobot" },
-    });
+    this.set("message", ChatMessage.create({ user: { username: "discobot" } }));
 
     await render(hbs`<ChatMessageInfo @message={{this.message}} />`);
 

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

@@ -7,6 +7,14 @@ import { module, test } from "qunit";
 module("Discourse Chat | Component | chat-message-reaction", function (hooks) {
   setupRenderingTest(hooks);
 
+  test("accepts arbitrary class property", async function (assert) {
+    await render(hbs`
+      <ChatMessageReaction @reaction={{hash emoji="heart"}} @class="foo" />
+    `);
+
+    assert.true(exists(".chat-message-reaction.foo"));
+  });
+
   test("adds reacted class when user reacted", async function (assert) {
     await render(hbs`
       <ChatMessageReaction @reaction={{hash emoji="heart" reacted=true}} />
@@ -21,6 +29,19 @@ module("Discourse Chat | Component | chat-message-reaction", function (hooks) {
     assert.true(exists(`.chat-message-reaction[data-emoji-name="heart"]`));
   });
 
+  test("adds show class when count is positive", async function (assert) {
+    this.set("count", 0);
+
+    await render(hbs`
+      <ChatMessageReaction @reaction={{hash emoji="heart" count=this.count}} />
+    `);
+
+    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"}} />`);
 

plugins/chat/test/javascripts/components/chat-message-separator-date-test.js

@@ -1,24 +0,0 @@
-import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
-import hbs from "htmlbars-inline-precompile";
-import { module, test } from "qunit";
-import { render } from "@ember/test-helpers";
-
-module(
-  "Discourse Chat | Component | chat-message-separator-date",
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    test("first message of the day", async function (assert) {
-      this.set("date", moment().format("LLL"));
-      this.set("message", { firstMessageOfTheDayAt: this.date });
-
-      await render(hbs`<ChatMessageSeparatorDate @message={{this.message}} />`);
-
-      assert.strictEqual(
-        query(".chat-message-separator-date").innerText.trim(),
-        this.date
-      );
-    });
-  }
-);

plugins/chat/test/javascripts/components/chat-message-separator-new-test.js

@@ -1,24 +0,0 @@
-import { setupRenderingTest } from "discourse/tests/helpers/component-test";
-import { query } from "discourse/tests/helpers/qunit-helpers";
-import hbs from "htmlbars-inline-precompile";
-import I18n from "I18n";
-import { module, test } from "qunit";
-import { render } from "@ember/test-helpers";
-
-module(
-  "Discourse Chat | Component | chat-message-separator-new",
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    test("newest message", async function (assert) {
-      this.set("message", { newest: true });
-
-      await render(hbs`<ChatMessageSeparatorNew @message={{this.message}} />`);
-
-      assert.strictEqual(
-        query(".chat-message-separator-new").innerText.trim(),
-        I18n.t("chat.last_visit")
-      );
-    });
-  }
-);

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

@@ -0,0 +1,35 @@
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { query } from "discourse/tests/helpers/qunit-helpers";
+import hbs from "htmlbars-inline-precompile";
+import I18n from "I18n";
+import { module, test } from "qunit";
+import { render } from "@ember/test-helpers";
+
+module("Discourse Chat | Component | chat-message-separator", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("newest message", async function (assert) {
+    this.set("message", { newestMessage: true });
+
+    await render(hbs`<ChatMessageSeparator @message={{this.message}} />`);
+
+    assert.strictEqual(
+      query(".chat-message-separator.new-message .text").innerText.trim(),
+      I18n.t("chat.new_messages")
+    );
+  });
+
+  test("first message of the day", async function (assert) {
+    this.set("date", moment().format("LLL"));
+    this.set("message", { firstMessageOfTheDayAt: this.date });
+
+    await render(hbs`<ChatMessageSeparator @message={{this.message}} />`);
+
+    assert.strictEqual(
+      query(
+        ".chat-message-separator.first-daily-message .text"
+      ).innerText.trim(),
+      this.date
+    );
+  });
+});

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

@@ -1,5 +1,5 @@
 import User from "discourse/models/user";
-import { render } from "@ember/test-helpers";
+import { render, waitFor } from "@ember/test-helpers";
 import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
 import { exists } from "discourse/tests/helpers/qunit-helpers";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
@@ -21,16 +21,9 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
         unread_count: 0,
         muted: false,
       },
-      canInteractWithChat: true,
-      canDeleteSelf: true,
-      canDeleteOthers: true,
-      canFlag: true,
-      userSilenced: false,
-      canModerate: true,
     });
     return {
       message: ChatMessage.create(
-        chatChannel,
         Object.assign(
           {
             id: 178,
@@ -45,6 +38,14 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
           messageData
         )
       ),
+      canInteractWithChat: true,
+      details: {
+        can_delete_self: true,
+        can_delete_others: true,
+        can_flag: true,
+        user_silenced: false,
+        can_moderate: true,
+      },
       chatChannel,
       setReplyTo: () => {},
       replyMessageClicked: () => {},
@@ -54,9 +55,8 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
       onStartSelectingMessages: () => {},
       onSelectMessage: () => {},
       bulkSelectMessages: () => {},
+      afterReactionAdded: () => {},
       onHoverMessage: () => {},
-      didShowMessage: () => {},
-      didHideMessage: () => {},
     };
   }
 
@@ -64,7 +64,8 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
     <ChatMessage
       @message={{this.message}}
       @canInteractWithChat={{this.canInteractWithChat}}
-      @channel={{this.chatChannel}}
+      @details={{this.details}}
+      @chatChannel={{this.chatChannel}}
       @setReplyTo={{this.setReplyTo}}
       @replyMessageClicked={{this.replyMessageClicked}}
       @editButtonClicked={{this.editButtonClicked}}
@@ -73,8 +74,7 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
       @onSelectMessage={{this.onSelectMessage}}
       @bulkSelectMessages={{this.bulkSelectMessages}}
       @onHoverMessage={{this.onHoverMessage}}
-      @didShowMessage={{this.didShowMessage}}
-      @didHideMessage={{this.didHideMessage}}
+      @afterReactionAdded={{this.reStickScrollIfNeeded}}
     />
   `;
 
@@ -90,7 +90,6 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
   test("Deleted message", async function (assert) {
     this.setProperties(generateMessageProps({ deleted_at: moment() }));
     await render(template);
-
     assert.true(
       exists(".chat-message-deleted .chat-message-expand"),
       "has the correct deleted css class and expand button within"
@@ -105,4 +104,16 @@ module("Discourse Chat | Component | chat-message", function (hooks) {
       "has the correct hidden css class and expand button within"
     );
   });
+
+  test("Message marked as visible", async function (assert) {
+    this.setProperties(generateMessageProps());
+
+    await render(template);
+    await waitFor("div[data-visible=true]");
+
+    assert.true(
+      exists(".chat-message-container[data-visible=true]"),
+      "message is marked as visible"
+    );
+  });
 });

plugins/chat/test/javascripts/components/chat-retention-reminder-test.js

@@ -14,7 +14,9 @@ module(
       this.channel = ChatChannel.create({ chatable_type: "Category" });
       this.currentUser.set("needs_channel_retention_reminder", true);
 
-      await render(hbs`<ChatRetentionReminder @channel={{this.channel}} />`);
+      await render(
+        hbs`<ChatRetentionReminder @chatChannel={{this.channel}} />`
+      );
 
       assert.dom(".chat-retention-reminder").includesText(
         I18n.t("chat.retention_reminders.public", {

plugins/chat/test/javascripts/helpers/fabricators.js

@@ -3,7 +3,6 @@ import ChatChannel, {
 } from "discourse/plugins/chat/discourse/models/chat-channel";
 import EmberObject from "@ember/object";
 import { Fabricator } from "./fabricator";
-import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
 
 const userFabricator = Fabricator(EmberObject, {
   id: 1,
@@ -39,7 +38,7 @@ export default {
     },
   }),
 
-  chatChannelMessage: Fabricator(ChatMessage, {
+  chatChannelMessage: Fabricator(EmberObject, {
     id: 1,
     chat_channel_id: 1,
     user_id: 1,

plugins/chat/test/javascripts/modifiers/track-message-visibility-test.js

@@ -0,0 +1,36 @@
+import { render, waitFor } from "@ember/test-helpers";
+import { exists } from "discourse/tests/helpers/qunit-helpers";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import hbs from "htmlbars-inline-precompile";
+import { module, test } from "qunit";
+
+module(
+  "Discourse Chat | Modifier | track-message-visibility",
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test("Marks message as visible when it intersects with the viewport", async function (assert) {
+      const template = hbs`<div {{chat/track-message-visibility}}></div>`;
+
+      await render(template);
+      await waitFor("div[data-visible=true]");
+
+      assert.ok(
+        exists("div[data-visible=true]"),
+        "message is marked as visible"
+      );
+    });
+
+    test("Marks message as visible when it doesn't intersect with the viewport", async function (assert) {
+      const template = hbs`<div style="display:none;" {{chat/track-message-visibility}}></div>`;
+
+      await render(template);
+      await waitFor("div[data-visible=false]");
+
+      assert.ok(
+        exists("div[data-visible=false]"),
+        "message is not marked as visible"
+      );
+    });
+  }
+);

plugins/chat/test/javascripts/unit/helpers/format-chat-date-test.js

@@ -3,19 +3,12 @@ import hbs from "htmlbars-inline-precompile";
 import { render } from "@ember/test-helpers";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import { query } from "discourse/tests/helpers/qunit-helpers";
-import fabricators from "../../helpers/fabricators";
-import ChatMessage from "discourse/plugins/chat/discourse/models/chat-message";
 
 module("Discourse Chat | Unit | Helpers | format-chat-date", function (hooks) {
   setupRenderingTest(hooks);
 
   test("link to chat message", async function (assert) {
-    const channel = fabricators.chatChannel();
-    this.message = ChatMessage.create(channel, {
-      id: 1,
-      chat_channel_id: channel.id,
-    });
-
+    this.set("message", { id: 1, chat_channel_id: 1 });
     await render(hbs`{{format-chat-date this.message}}`);
 
     assert.equal(query(".chat-time").getAttribute("href"), "/chat/c/-/1/1");