{"size": 5775, "ext": "js", "max_stars_repo_path": "test/javascripts/components/chat-replying-indicator-test.js", "max_stars_repo_name": "discourse/discourse-chat", "max_stars_repo_stars_event_min_datetime": "2021-11-15T21:13:01.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-23T05:46:08.000Z", "max_issues_repo_path": "test/javascripts/components/chat-replying-indicator-test.js", "max_issues_repo_name": "discourse/discourse-chat", "max_issues_repo_issues_event_min_datetime": "2021-11-15T15:18:05.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-31T15:38:38.000Z", "max_forks_repo_path": "test/javascripts/components/chat-replying-indicator-test.js", "max_forks_repo_name": "discourse/discourse-chat", "max_forks_repo_forks_event_min_datetime": "2017-06-27T15:02:47.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-25T11:43:24.000Z"}
{"max_stars_count": 22, "max_issues_count": 130, "max_forks_count": 8, "avg_line_length": 31.0483870968, "max_line_length": 105, "alphanum_fraction": 0.5828571429}
import componentTest, {
  setupRenderingTest,
} from "discourse/tests/helpers/component-test";
import {
  discourseModule,
  exists,
  query,
} from "discourse/tests/helpers/qunit-helpers";
import hbs from "htmlbars-inline-precompile";
import fabricate from "../helpers/fabricators";
import MockPresenceChannel from "../helpers/mock-presence-channel";

discourseModule(
  "Discourse Chat | Component | chat-replying-indicator",
  function (hooks) {
    setupRenderingTest(hooks);

    componentTest("not displayed when no one is replying", {
      template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,

      async beforeEach() {
        this.set("chatChannel", fabricate("chat-channel"));
        this.set(
          "presenceChannel",
          MockPresenceChannel.create({
            name: `/chat-reply/${this.chatChannel.id}`,
          })
        );
      },

      async test(assert) {
        assert.notOk(exists(".chat-replying-indicator__text"));
      },
    });

    componentTest("displays indicator when user is replying", {
      template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,

      async beforeEach() {
        this.set("chatChannel", fabricate("chat-channel"));
        this.set(
          "presenceChannel",
          MockPresenceChannel.create({
            name: `/chat-reply/${this.chatChannel.id}`,
          })
        );
      },

      async test(assert) {
        const sam = { id: 1, username: "sam" };
        this.set("presenceChannel.users", [sam]);

        assert.equal(
          query(".chat-replying-indicator").innerText,
          `${sam.username} is typing . . .`
        );
      },
    });

    componentTest("displays indicator when 2 or 3 users are replying", {
      template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,

      async beforeEach() {
        this.set("chatChannel", fabricate("chat-channel"));
        this.set(
          "presenceChannel",
          MockPresenceChannel.create({
            name: `/chat-reply/${this.chatChannel.id}`,
          })
        );
      },

      async test(assert) {
        const sam = { id: 1, username: "sam" };
        const mark = { id: 2, username: "mark" };
        this.set("presenceChannel.users", [sam, mark]);

        assert.equal(
          query(".chat-replying-indicator").innerText,
          `${sam.username} and ${mark.username} are typing . . .`
        );
      },
    });

    componentTest("displays indicator when 3 users are replying", {
      template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,

      async beforeEach() {
        this.set("chatChannel", fabricate("chat-channel"));
        this.set(
          "presenceChannel",
          MockPresenceChannel.create({
            name: `/chat-reply/${this.chatChannel.id}`,
          })
        );
      },

      async test(assert) {
        const sam = { id: 1, username: "sam" };
        const mark = { id: 2, username: "mark" };
        const joffrey = { id: 3, username: "joffrey" };
        this.set("presenceChannel.users", [sam, mark, joffrey]);

        assert.equal(
          query(".chat-replying-indicator").innerText,
          `${sam.username}, ${mark.username} and ${joffrey.username} are typing . . .`
        );
      },
    });

    componentTest("displays indicator when more than 3 users are replying", {
      template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,

      async beforeEach() {
        this.set("chatChannel", fabricate("chat-channel"));
        this.set(
          "presenceChannel",
          MockPresenceChannel.create({
            name: `/chat-reply/${this.chatChannel.id}`,
          })
        );
      },

      async test(assert) {
        const sam = { id: 1, username: "sam" };
        const mark = { id: 2, username: "mark" };
        const joffrey = { id: 3, username: "joffrey" };
        const taylor = { id: 4, username: "taylor" };
        this.set("presenceChannel.users", [sam, mark, joffrey, taylor]);

        assert.equal(
          query(".chat-replying-indicator").innerText,
          `${sam.username}, ${mark.username} and 2 others are typing . . .`
        );
      },
    });

    componentTest("filters current user from list of replyers", {
      template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,

      async beforeEach() {
        this.set("chatChannel", fabricate("chat-channel"));
        this.set(
          "presenceChannel",
          MockPresenceChannel.create({
            name: `/chat-reply/${this.chatChannel.id}`,
          })
        );
      },

      async test(assert) {
        const sam = { id: 1, username: "sam" };
        this.set("presenceChannel.users", [sam, this.currentUser]);

        assert.equal(
          query(".chat-replying-indicator").innerText,
          `${sam.username} is typing . . .`
        );
      },
    });

    componentTest("resets presence when channel is draft", {
      template: hbs`{{chat-replying-indicator presenceChannel=presenceChannel chatChannel=chatChannel}}`,

      async beforeEach() {
        this.set("chatChannel", fabricate("chat-channel"));
        this.set(
          "presenceChannel",
          MockPresenceChannel.create({
            name: `/chat-reply/${this.chatChannel.id}`,
            subscribed: true,
          })
        );
      },

      async test(assert) {
        assert.ok(this.presenceChannel.subscribed);

        this.set("chatChannel", fabricate("chat-channel", { isDraft: true }));

        assert.notOk(this.presenceChannel.subscribed);
      },
    });
  }
);
