`,
)}
diff --git a/src/js/templates/icons/emojiIcon.template.js b/src/js/templates/icons/emojiIcon.template.js
new file mode 100644
index 00000000..2bf73876
--- /dev/null
+++ b/src/js/templates/icons/emojiIcon.template.js
@@ -0,0 +1,29 @@
+import { html } from "/js/lib/lit-html.js";
+
+export function emojiIconTemplate() {
+ return html`
`;
+}
diff --git a/src/js/views/chat.view.js b/src/js/views/chat.view.js
index 1918c907..08a7d8f4 100644
--- a/src/js/views/chat.view.js
+++ b/src/js/views/chat.view.js
@@ -13,7 +13,7 @@ import {
MISSING_HANDLE,
} from "/js/dataHelpers.js";
import { avatarTemplate } from "/js/templates/avatar.template.js";
-import { avatarStackTemplate } from "/js/templates/avatarStack.template.js";
+import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js";
import "/js/components/infinite-scroll-container.js";
class ChatView extends View {
@@ -47,7 +47,7 @@ class ChatView extends View {
${(() => {
if (groupDetails) {
- return avatarStackTemplate({ authors: otherMembers });
+ return avatarGroupTemplate({ authors: otherMembers });
}
return otherUser
? avatarTemplate({ author: otherUser })
diff --git a/src/js/views/chatDetail.view.js b/src/js/views/chatDetail.view.js
index 7ca3027a..73b23168 100644
--- a/src/js/views/chatDetail.view.js
+++ b/src/js/views/chatDetail.view.js
@@ -11,7 +11,7 @@ import {
getSystemMessageDisplayText,
} from "/js/dataHelpers.js";
import { avatarTemplate } from "/js/templates/avatar.template.js";
-import { avatarStackTemplate } from "/js/templates/avatarStack.template.js";
+import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js";
import { postEmbedTemplate } from "/js/templates/postEmbed.template.js";
import { CHAT_MESSAGES_PAGE_SIZE } from "/js/config.js";
import { showToast } from "/js/toasts.js";
@@ -398,7 +398,7 @@ class ChatDetailView extends View {
if (dialog.isOpen) {
dialog.close();
} else {
- dialog.open();
+ dialog.open(e.currentTarget);
}
}}
>
@@ -695,7 +695,7 @@ class ChatDetailView extends View {
const otherMembers = convo.members.filter(
(member) => member.did !== currentUser?.did,
);
- return avatarStackTemplate({ authors: otherMembers });
+ return avatarGroupTemplate({ authors: otherMembers });
}
return otherMember
? avatarTemplate({ author: otherMember })
diff --git a/src/js/views/chatRequests.view.js b/src/js/views/chatRequests.view.js
index 464b6a57..bcea379d 100644
--- a/src/js/views/chatRequests.view.js
+++ b/src/js/views/chatRequests.view.js
@@ -12,7 +12,7 @@ import {
MISSING_HANDLE,
} from "/js/dataHelpers.js";
import { avatarTemplate } from "/js/templates/avatar.template.js";
-import { avatarStackTemplate } from "/js/templates/avatarStack.template.js";
+import { avatarGroupTemplate } from "/js/templates/avatarGroup.template.js";
import { knownFollowersSummaryTemplate } from "/js/templates/knownFollowersSummary.template.js";
import { showToast } from "/js/toasts.js";
@@ -76,7 +76,7 @@ class ChatRequestsView extends View {
${(() => {
if (groupDetails) {
- return avatarStackTemplate({ authors: otherMembers });
+ return avatarGroupTemplate({ authors: otherMembers });
}
return otherMember
? avatarTemplate({ author: otherMember })
diff --git a/tests/e2e/specs/views/chat.view.test.js b/tests/e2e/specs/views/chat.view.test.js
index 89ec3f00..d8e592de 100644
--- a/tests/e2e/specs/views/chat.view.test.js
+++ b/tests/e2e/specs/views/chat.view.test.js
@@ -244,7 +244,7 @@ test.describe("Chat view", () => {
await expect(groupItem).toHaveCount(1, { timeout: 10000 });
await expect(groupItem.locator(".convo-name")).toContainText("Book Club");
await expect(
- groupItem.locator('[data-testid="member-avatar-stack"]'),
+ groupItem.locator('[data-testid="avatar-group"]'),
).toBeVisible();
await expect(groupItem.locator(".convo-preview")).toContainText(
"Alice: Chapter 3 tonight?",
@@ -280,9 +280,9 @@ test.describe("Chat view", () => {
await login(page);
await page.goto("/messages");
- const stack = page.locator('[data-testid="member-avatar-stack"]');
+ const stack = page.locator('[data-testid="avatar-group"]');
await expect(stack).toBeVisible({ timeout: 10000 });
- await expect(stack.locator(".member-avatar-stack-item")).toHaveCount(3);
+ await expect(stack.locator(".avatar-group-item")).toHaveCount(3);
});
test("should display direct and group conversations together", async ({
diff --git a/tests/e2e/specs/views/chatDetail.view.test.js b/tests/e2e/specs/views/chatDetail.view.test.js
index bbacfcbb..fa066ec6 100644
--- a/tests/e2e/specs/views/chatDetail.view.test.js
+++ b/tests/e2e/specs/views/chatDetail.view.test.js
@@ -559,6 +559,146 @@ test.describe("Chat detail view", () => {
await expect(chatDetailView.locator("emoji-picker")).toHaveCount(0);
});
+ test("should insert an emoji into the message input from the emoji button", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const alice = createProfile({
+ did: "did:plc:alice1",
+ handle: "alice.bsky.social",
+ displayName: "Alice",
+ });
+ const convo = createConvo({
+ id: "convo-1",
+ otherMember: alice,
+ });
+ mockServer.addConvos([convo]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/messages/convo-1");
+
+ const chatDetailView = page.locator("#chat-detail-view");
+ const textarea = chatDetailView.locator(".message-input-field");
+ await textarea.fill("hello ");
+
+ await chatDetailView.locator(".message-input-emoji-button").click();
+
+ const picker = chatDetailView.locator(
+ "chat-input emoji-picker-dialog emoji-picker",
+ );
+ await expect(picker).toHaveCount(1, { timeout: 5000 });
+
+ await picker.locator('button.emoji[aria-label*="party popper"]').click();
+
+ await expect(textarea).toHaveValue("hello 🎉");
+ await expect(chatDetailView.locator("chat-input emoji-picker")).toHaveCount(
+ 0,
+ );
+ });
+
+ test("should close the chat-input emoji picker when clicking outside", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const alice = createProfile({
+ did: "did:plc:alice1",
+ handle: "alice.bsky.social",
+ displayName: "Alice",
+ });
+ const convo = createConvo({
+ id: "convo-1",
+ otherMember: alice,
+ });
+ mockServer.addConvos([convo]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/messages/convo-1");
+
+ const chatDetailView = page.locator("#chat-detail-view");
+ await expect(
+ chatDetailView.locator(".message-input-emoji-button"),
+ ).toBeVisible({ timeout: 10000 });
+
+ await chatDetailView.locator(".message-input-emoji-button").click();
+ await expect(
+ chatDetailView.locator("chat-input emoji-picker-dialog emoji-picker"),
+ ).toHaveCount(1, { timeout: 5000 });
+
+ await chatDetailView
+ .locator('[data-testid="header-title"]')
+ .click({ force: true });
+
+ await expect(chatDetailView.locator("chat-input emoji-picker")).toHaveCount(
+ 0,
+ );
+ });
+
+ test("should toggle the chat-input emoji picker closed when the button is clicked twice", async ({
+ page,
+ }) => {
+ const mockServer = new MockServer();
+ const alice = createProfile({
+ did: "did:plc:alice1",
+ handle: "alice.bsky.social",
+ displayName: "Alice",
+ });
+ const convo = createConvo({
+ id: "convo-1",
+ otherMember: alice,
+ });
+ mockServer.addConvos([convo]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/messages/convo-1");
+
+ const chatDetailView = page.locator("#chat-detail-view");
+ const emojiButton = chatDetailView.locator(".message-input-emoji-button");
+ await expect(emojiButton).toBeVisible({ timeout: 10000 });
+
+ await emojiButton.click();
+ await expect(
+ chatDetailView.locator("chat-input emoji-picker-dialog emoji-picker"),
+ ).toHaveCount(1, { timeout: 5000 });
+
+ await emojiButton.click();
+ await expect(chatDetailView.locator("chat-input emoji-picker")).toHaveCount(
+ 0,
+ );
+ });
+
+ test("should hide the chat-input emoji button on mobile viewports", async ({
+ page,
+ }) => {
+ await page.setViewportSize({ width: 600, height: 800 });
+
+ const mockServer = new MockServer();
+ const alice = createProfile({
+ did: "did:plc:alice1",
+ handle: "alice.bsky.social",
+ displayName: "Alice",
+ });
+ const convo = createConvo({
+ id: "convo-1",
+ otherMember: alice,
+ });
+ mockServer.addConvos([convo]);
+ await mockServer.setup(page);
+
+ await login(page);
+ await page.goto("/messages/convo-1");
+
+ const chatDetailView = page.locator("#chat-detail-view");
+ await expect(chatDetailView.locator(".message-input-field")).toBeVisible({
+ timeout: 10000,
+ });
+ await expect(
+ chatDetailView.locator(".message-input-emoji-button"),
+ ).toBeHidden();
+ });
+
test.describe("Group conversations", () => {
const alice = createProfile({
did: "did:plc:alice1",
@@ -624,11 +764,9 @@ test.describe("Chat detail view", () => {
await page.goto("/messages/group-1");
const header = page.locator('#chat-detail-view [data-testid="header"]');
- const avatarStack = header.locator('[data-testid="member-avatar-stack"]');
- await expect(avatarStack).toBeVisible({ timeout: 10000 });
- await expect(
- avatarStack.locator(".member-avatar-stack-item"),
- ).toHaveCount(2);
+ const avatarGroup = header.locator('[data-testid="avatar-group"]');
+ await expect(avatarGroup).toBeVisible({ timeout: 10000 });
+ await expect(avatarGroup.locator(".avatar-group-item")).toHaveCount(2);
});
test("should show author names and avatars on received message clusters", async ({
diff --git a/tests/unit/env.js b/tests/unit/env.js
index 91b8f86b..ae96b432 100644
--- a/tests/unit/env.js
+++ b/tests/unit/env.js
@@ -105,3 +105,11 @@ class LocalStorageStub {
}
globalThis.localStorage = new LocalStorageStub();
+
+globalThis.Element = globalThis.window.Element;
+
+// Real emoji element makes a fetch / uses indexeddb, so stub it
+class EmojiPickerStub extends globalThis.window.HTMLElement {}
+if (!globalThis.customElements.get("emoji-picker")) {
+ globalThis.customElements.define("emoji-picker", EmojiPickerStub);
+}
diff --git a/tests/unit/specs/components/chat-input.test.js b/tests/unit/specs/components/chat-input.test.js
index 2b9d681b..5a49bd58 100644
--- a/tests/unit/specs/components/chat-input.test.js
+++ b/tests/unit/specs/components/chat-input.test.js
@@ -1,6 +1,7 @@
import { TestSuite } from "../../testSuite.js";
import { assert, assertEquals } from "../../testHelpers.js";
-import "/js/components/chat-input.js";
+
+await import("/js/components/chat-input.js");
const t = new TestSuite("ChatInput");
diff --git a/tests/unit/specs/components/emoji-picker-dialog.test.js b/tests/unit/specs/components/emoji-picker-dialog.test.js
index 6198198b..fffda8ad 100644
--- a/tests/unit/specs/components/emoji-picker-dialog.test.js
+++ b/tests/unit/specs/components/emoji-picker-dialog.test.js
@@ -1,16 +1,6 @@
import { TestSuite } from "../../testSuite.js";
import { assert, assertEquals } from "../../testHelpers.js";
-
-// The emoji-picker-element library reads `Element.prototype` at module load,
-// so expose JSDOM's Element on the global before the dialog module is imported.
-globalThis.Element = globalThis.window.Element;
-
-// Pre-register a stub `emoji-picker` so the real library does not try to
-// define itself (it depends on browser features JSDOM doesn't implement).
-class EmojiPickerStub extends globalThis.window.HTMLElement {}
-globalThis.customElements.define("emoji-picker", EmojiPickerStub);
-
-await import("/js/components/emoji-picker-dialog.js");
+import "/js/components/emoji-picker-dialog.js";
const t = new TestSuite("EmojiPickerDialog");