@meetelise/chat 1.59.0 → 1.59.2

package/src/pubnub-chat.test.ts

@@ -250,3 +250,187 @@ it("keeps a photo carousel and its arrows inside the message bubble", async () =
   expect(centreY(next)).to.be.closeTo(centreY(photo), 1);
   expect(media.shadowRoot?.textContent).not.to.contain("Living Room");
 });
+
+const announcerText = (chat: PubnubChat): string =>
+  (chat.shadowRoot?.querySelector("#reply-announcer")?.textContent ?? "")
+    .replace(/\s+/g, " ")
+    .trim();
+
+const streamedReply = (
+  chunks: string[],
+  done: boolean,
+  timestamp: number
+): SimpleTextChatMessage => ({
+  timestamp,
+  message: chunks.join(""),
+  isLeadMessage: false,
+  chunks: chunks.map((text, order) => ({
+    text,
+    order,
+    isDone: done && order === chunks.length - 1,
+  })),
+  type: "text",
+});
+
+it("announces a streamed reply once, after it finishes", async () => {
+  const { chat } = await createScrollableChat();
+  const list = chat.shadowRoot?.querySelector("#message-thread-list");
+  const region = chat.shadowRoot?.querySelector("#reply-announcer");
+  if (!region) throw new Error("Expected the reply announcer");
+
+  expect(list?.getAttribute("role")).to.equal(null);
+  expect(list?.hasAttribute("aria-live")).to.equal(false);
+  expect(region.getAttribute("role")).to.equal("status");
+  expect(region.getAttribute("aria-live")).to.equal("polite");
+  expect(region.getAttribute("aria-atomic")).to.equal("true");
+
+  const seen: string[] = [];
+  const note = (): void => {
+    const text = announcerText(chat);
+    if (seen[seen.length - 1] !== text) seen.push(text);
+  };
+  note();
+
+  const chunks = ["The maple ", "studio is ", "available now."];
+  for (let i = 1; i <= chunks.length; i++) {
+    const partial = chunks.slice(0, i);
+    const done = i === chunks.length;
+    chat.messages = [streamedReply(partial, done, 100)];
+    await waitForRender(chat);
+    note();
+    if (!done) {
+      expect(announcerText(chat)).to.equal("");
+      expect(
+        chat.shadowRoot
+          ?.querySelector('[role="article"]')
+          ?.getAttribute("aria-label")
+      ).to.equal(`Elise: ${partial.join("")}`);
+    }
+  }
+
+  expect(seen).to.deep.equal(["", "Elise: The maple studio is available now."]);
+
+  // Redrawing the finished reply must not speak it again.
+  chat.messages = [...chat.messages];
+  await waitForRender(chat);
+  note();
+  expect(seen).to.deep.equal(["", "Elise: The maple studio is available now."]);
+
+  const followUp = ["Ask ", "about parking."];
+  for (let i = 1; i <= followUp.length; i++) {
+    const partial = followUp.slice(0, i);
+    chat.messages = [
+      chat.messages[0],
+      streamedReply(partial, i === followUp.length, 200),
+    ];
+    await waitForRender(chat);
+    note();
+  }
+
+  expect(announcerText(chat)).to.equal("Elise: Ask about parking.");
+  expect(seen).to.deep.equal([
+    "",
+    "Elise: The maple studio is available now.",
+    "Elise: Ask about parking.",
+  ]);
+
+  chat.messages = [
+    ...chat.messages,
+    {
+      timestamp: 300,
+      message: "Thanks",
+      isLeadMessage: true,
+      chunks: [{ text: "Thanks", order: 0, isDone: true }],
+      type: "text",
+    },
+  ];
+  await waitForRender(chat);
+  note();
+  expect(seen).to.deep.equal([
+    "",
+    "Elise: The maple studio is available now.",
+    "Elise: Ask about parking.",
+  ]);
+});
+
+it("announces a later reply when it repeats the previous text", async () => {
+  const { chat } = await createScrollableChat();
+  chat.messages = [streamedReply(["Ok"], false, 100)];
+  await waitForRender(chat);
+
+  chat.messages = [streamedReply(["Ok"], true, 100)];
+  await waitForRender(chat);
+  const first = announcerText(chat);
+
+  chat.messages = [...chat.messages, streamedReply(["Ok"], true, 200)];
+  await waitForRender(chat);
+  const second = announcerText(chat);
+
+  expect(first).to.equal("Elise: Ok");
+  expect(second.replace(/\u200b/g, "")).to.equal("Elise: Ok");
+  expect(second).to.not.equal(first);
+});
+
+it("does not announce replies already on screen when the chat connects", async () => {
+  const chat = document.createElement("pubnub-chat") as PubnubChat;
+  chat.buildingSlug = "test-building";
+  chat.orgSlug = "test-org";
+  chat.building = {
+    id: 1,
+    orgId: 1,
+    name: "Test Building",
+    welcomeMessage: null,
+    state: "NY",
+    country: "US",
+    customAdditionalDisclaimer: null,
+    userFirstName: "Emily",
+  } as BuildingWebchatView;
+  chat.myPubnub = {
+    simpleChatMessages: [completedMessage("Already in the thread.")],
+    addChatListener: () => undefined,
+  } as unknown as PubnubChat["myPubnub"];
+  document.body.appendChild(chat);
+  await waitForRender(chat);
+
+  expect(announcerText(chat)).to.equal("");
+  expect(
+    chat.shadowRoot
+      ?.querySelector('[role="article"]')
+      ?.getAttribute("aria-label")
+  ).to.equal("Emily: Already in the thread.");
+
+  chat.messages = [
+    ...chat.messages,
+    streamedReply(["A new reply after connect."], true, 200),
+  ];
+  await waitForRender(chat);
+
+  expect(announcerText(chat)).to.equal("Emily: A new reply after connect.");
+});
+
+it("keeps every widget's message list out of the live region", async () => {
+  for (const widgetType of ["default", "healthcare", "utilities"] as const) {
+    const chat = document.createElement("pubnub-chat") as PubnubChat;
+    chat.buildingSlug = "test-building";
+    chat.orgSlug = "test-org";
+    chat.widgetType = widgetType;
+    chat.building = {
+      id: 1,
+      orgId: 1,
+      name: "Test Building",
+      welcomeMessage: "Welcome",
+      state: "NY",
+      country: "US",
+      customAdditionalDisclaimer: null,
+    } as BuildingWebchatView;
+    document.body.appendChild(chat);
+    await waitForRender(chat);
+
+    const list = chat.shadowRoot?.querySelector("#message-thread-list");
+    const region = chat.shadowRoot?.querySelector("#reply-announcer");
+    expect(list?.getAttribute("role")).to.equal(null);
+    expect(list?.hasAttribute("aria-live")).to.equal(false);
+    expect(region?.getAttribute("aria-live")).to.equal("polite");
+    chat.remove();
+  }
+});