element-web/playwright/e2e/threads/threads.spec.ts

/*
Copyright 2023 The Matrix.org Foundation C.I.C.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { Layout } from "../../../src/settings/enums/Layout";
import { test, expect } from "../../element-web-test";

test.describe("Threads", () => {
    test.use({
        displayName: "Tom",
        botCreateOpts: {
            displayName: "BotBob",
            autoAcceptInvites: true,
        },
    });

    test.beforeEach(async ({ page }) => {
        await page.addInitScript(() => {
            window.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
        });
    });

    // Flaky: https://github.com/vector-im/element-web/issues/26452
    test.skip("should be usable for a conversation", async ({ page, app, bot }) => {
        const roomId = await app.client.createRoom({});
        await app.client.inviteUser(roomId, bot.credentials.userId);
        await bot.joinRoom(roomId);
        await page.goto("/#/room/" + roomId);

        // Around 200 characters
        const MessageLong =
            "Hello there. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt " +
            "ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi";

        const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start
        // Exclude timestamp and read marker from snapshots
        const mask = [page.locator(".mx_MessageTimestamp"), page.locator(".mx_MessagePanel_myReadMarker")];

        const roomViewLocator = page.locator(".mx_RoomView_body");
        // User sends message
        const textbox = roomViewLocator.getByRole("textbox", { name: "Send a message…" });
        await textbox.fill("Hello Mr. Bot");
        await textbox.press("Enter");

        // Wait for message to send, get its ID and save as @threadId
        const threadId = await roomViewLocator
            .locator(".mx_EventTile[data-scroll-tokens]")
            .filter({ hasText: "Hello Mr. Bot" })
            .getAttribute("data-scroll-tokens");

        // Bot starts thread
        await bot.sendMessage(roomId, MessageLong, threadId);

        // User asserts timeline thread summary visible & clicks it
        let locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText(MessageLong)).toBeAttached();
        await locator.click();

        // Wait until the both messages are read
        locator = page.locator(".mx_ThreadView .mx_EventTile_last[data-layout=group]");
        await expect(locator.locator(".mx_EventTile_line .mx_MTextBody").getByText(MessageLong)).toBeAttached();
        await expect(locator.locator(".mx_ReadReceiptGroup .mx_BaseAvatar")).toBeVisible();
        // Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout
        await expect(locator.locator(".mx_EventTile_line")).toHaveCSS(
            "padding-inline-start",
            ThreadViewGroupSpacingStart,
        );

        // Take snapshots in group layout and bubble layout (IRC layout is not available on ThreadView)
        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_group_layout.png", {
            mask: mask,
        });
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toBeVisible();

        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Initial_ThreadView_on_bubble_layout.png", {
            mask: mask,
        });

        // Set the group layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);

        locator = page.locator(".mx_ThreadView .mx_EventTile[data-layout='group'].mx_EventTile_last");
        // Wait until the messages are rendered
        await expect(locator.locator(".mx_EventTile_line .mx_MTextBody").getByText(MessageLong)).toBeAttached();
        // Make sure the avatar inside ReadReceiptGroup is visible on the group layout
        await expect(locator.locator(".mx_ReadReceiptGroup .mx_BaseAvatar")).toBeVisible();

        // Enable the bubble layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);

        locator = page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last");
        // TODO: remove this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
        // See: https://github.com/vector-im/element-web/issues/23569
        await expect(locator.locator(".mx_ReadReceiptGroup .mx_BaseAvatar")).toBeAttached();
        // Make sure the avatar inside ReadReceiptGroup is visible on bubble layout
        // TODO: enable this after fixing the issue of ReadReceiptGroup being hidden on the bubble layout
        // See: https://github.com/vector-im/element-web/issues/23569
        // expect(locator.locator(".mx_ReadReceiptGroup .mx_BaseAvatar")).toBeVisible();

        // Re-enable the group layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);

        // User responds in thread
        locator = page.locator(".mx_ThreadView").getByRole("textbox", { name: "Send a message…" });
        await locator.fill("Test");
        await locator.press("Enter");

        // User asserts summary was updated correctly
        locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("Tom")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText("Test")).toBeAttached();

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // Check reactions and hidden events
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        // Enable hidden events to make the event for reaction displayed
        await app.settings.setValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);

        // User reacts to message instead
        locator = page
            .locator(".mx_ThreadView")
            .locator(".mx_EventTile .mx_EventTile_line")
            .filter({ hasText: "Hello there" });
        await locator.hover();
        await locator.getByRole("toolbar", { name: "Message Actions" }).getByRole("button", { name: "React" }).click();

        locator = page.locator(".mx_EmojiPicker");
        await locator.getByRole("textbox").fill("wave");
        await page.getByRole("gridcell", { name: "👋" }).click();

        locator = page.locator(".mx_ThreadView");
        // Make sure the CSS style for spacing is applied to mx_ReactionsRow on group/modern layout
        await expect(locator.locator(".mx_EventTile[data-layout=group] .mx_ReactionsRow")).toHaveCSS(
            "margin-inline-start",
            ThreadViewGroupSpacingStart,
        );
        // Make sure the CSS style for spacing is applied to the hidden event on group/modern layout
        await expect(
            locator.locator(
                ".mx_GenericEventListSummary[data-layout=group] .mx_EventTile_info.mx_EventTile_last " +
                    ".mx_EventTile_line",
            ),
        ).toHaveCSS("padding-inline-start", ThreadViewGroupSpacingStart);

        // Take snapshot of group layout (IRC layout is not available on ThreadView)
        expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
            "ThreadView_with_reaction_and_a_hidden_event_on_group_layout.png",
            {
                mask: mask,
            },
        );

        // Enable bubble layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);

        // Make sure the CSS style for spacing is applied to the hidden event on bubble layout
        locator = page.locator(
            ".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last",
        );
        expect(locator.locator(".mx_EventTile_line .mx_EventTile_content"))
            // 76px: ThreadViewGroupSpacingStart + 14px + 6px
            // 14px: avatar width
            // See: _EventTile.pcss
            .toHaveCSS("margin-inline-start", "76px");
        await expect(locator.locator(".mx_EventTile_line"))
            // Make sure the margin is NOT applied to mx_EventTile_line
            .toHaveCSS("margin-inline-start", "0px");

        // Take snapshot of bubble layout
        expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
            "ThreadView_with_reaction_and_a_hidden_event_on_bubble_layout.png",
            {
                mask: mask,
            },
        );

        // Disable hidden events
        await app.settings.setValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, false);

        // Reset to the group layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);

        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////
        // Check redactions
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////

        // User redacts their prior response
        locator = page.locator(".mx_ThreadView .mx_EventTile .mx_EventTile_line").filter({ hasText: "Test" });
        await locator.hover();
        await locator.getByRole("button", { name: "Options" }).click();

        await page.locator(".mx_IconizedContextMenu").getByRole("menuitem", { name: "Remove" }).click();
        locator = page.locator(".mx_TextInputDialog").getByRole("button", { name: "Remove" });
        await expect(locator).toHaveClass(/mx_Dialog_primary/);
        await locator.click();

        // Wait until the response is redacted
        await expect(
            page.locator(".mx_ThreadView").locator(".mx_EventTile_last .mx_EventTile_receiptSent"),
        ).toBeVisible();

        // Take snapshots in group layout and bubble layout (IRC layout is not available on ThreadView)
        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='group']")).toBeVisible();
        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
            "ThreadView_with_redacted_messages_on_group_layout.png",
            {
                mask: mask,
            },
        );
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
        await expect(page.locator(".mx_ThreadView .mx_EventTile[data-layout='bubble']")).toBeVisible();
        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot(
            "ThreadView_with_redacted_messages_on_bubble_layout.png",
            {
                mask: mask,
            },
        );

        // Set the group layout
        await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);

        // User asserts summary was updated correctly
        locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText(MessageLong)).toBeAttached();

        // User closes right panel after clicking back to thread list
        locator = page.locator(".mx_ThreadPanel");
        locator.getByRole("button", { name: "Threads" }).click();
        locator.getByRole("button", { name: "Close" }).click();

        // Bot responds to thread
        await bot.sendMessage(roomId, "How are things?", threadId);

        locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();

        locator = page.getByRole("button", { name: "Threads" });
        await expect(locator).toHaveClass(/mx_LegacyRoomHeader_button--unread/); // User asserts thread list unread indicator
        await locator.click(); // User opens thread list

        // User asserts thread with correct root & latest events & unread dot
        locator = page.locator(".mx_ThreadPanel .mx_EventTile_last");
        await expect(locator.locator(".mx_EventTile_body").getByText("Hello Mr. Bot")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();
        // Check the number of the replies
        await expect(locator.locator(".mx_ThreadPanel_replies_amount").getByText("2")).toBeAttached();
        // Make sure the notification dot is visible
        await expect(locator.locator(".mx_NotificationBadge_visible")).toBeVisible();
        // User opens thread via threads list
        await locator.locator(".mx_EventTile_line").click();

        // User responds & asserts
        locator = page.locator(".mx_ThreadView").getByRole("textbox", { name: "Send a message…" });
        await locator.fill("Great!");
        await locator.press("Enter");

        locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("Tom")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText("Great!")).toBeAttached();

        // User edits & asserts
        locator = page.locator(".mx_ThreadView .mx_EventTile_last");
        await expect(locator.getByText("Great!")).toBeAttached();
        await locator.locator(".mx_EventTile_line").hover();
        await locator.locator(".mx_EventTile_line").getByRole("button", { name: "Edit" }).click();
        await locator.getByRole("textbox").fill(" How about yourself?{enter}");
        await locator.getByRole("textbox").press("Enter");

        locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("Tom")).toBeAttached();
        await expect(
            locator.locator(".mx_ThreadSummary_content").getByText("Great! How about yourself?"),
        ).toBeAttached();

        // User closes right panel
        await page.locator(".mx_ThreadPanel").getByRole("button", { name: "Close" }).click();

        // Bot responds to thread and saves the id of their message to @eventId
        const { event_id: eventId } = await bot.sendMessage(roomId, threadId, "I'm very good thanks");

        // User asserts
        locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText("I'm very good thanks")).toBeAttached();

        // Bot edits their latest event
        await bot.sendMessage(roomId, {
            "body": "* I'm very good thanks :)",
            "msgtype": "m.text",
            "m.new_content": {
                body: "I'm very good thanks :)",
                msgtype: "m.text",
            },
            "m.relates_to": {
                rel_type: "m.replace",
                event_id: eventId,
            },
        });

        // User asserts
        locator = page.locator(".mx_RoomView_body .mx_ThreadSummary");
        await expect(locator.locator(".mx_ThreadSummary_sender").getByText("BotBob")).toBeAttached();
        await expect(locator.locator(".mx_ThreadSummary_content").getByText("I'm very good thanks :)")).toBeAttached();
    });

    test.describe("with larger viewport", async () => {
        // Increase viewport size so that voice messages fit
        test.use({ viewport: { width: 1280, height: 720 } });

        test.beforeEach(async ({ page }) => {
            // Increase right-panel size, so that voice messages fit
            await page.addInitScript(() => {
                window.localStorage.setItem("mx_rhs_size", "600");
            });
        });

        test("can send voice messages", async ({ page, app, user }) => {
            // Increase right-panel size, so that voice messages fit
            await page.evaluate(() => {
                window.localStorage.setItem("mx_rhs_size", "600");
            });

            const roomId = await app.client.createRoom({});
            await page.goto("/#/room/" + roomId);

            // Send message
            const locator = page.locator(".mx_RoomView_body");
            await locator.getByRole("textbox", { name: "Send a message…" }).fill("Hello Mr. Bot");
            await locator.getByRole("textbox", { name: "Send a message…" }).press("Enter");
            // Create thread
            const locator2 = locator.locator(".mx_EventTile[data-scroll-tokens]").filter({ hasText: "Hello Mr. Bot" });
            await locator2.hover();
            await locator2.getByRole("button", { name: "Reply in thread" }).click();

            await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1);

            (await app.openMessageComposerOptions(true)).getByRole("menuitem", { name: "Voice Message" }).click();
            await page.waitForTimeout(3000);
            await app.getComposer(true).getByRole("button", { name: "Send voice message" }).click();
            await expect(page.locator(".mx_ThreadView .mx_MVoiceMessageBody")).toHaveCount(1);
        });
    });

    test("should send location and reply to the location on ThreadView", async ({ page, app, bot }) => {
        const roomId = await app.client.createRoom({});
        await app.client.inviteUser(roomId, bot.credentials.userId);
        await bot.joinRoom(roomId);
        await page.goto("/#/room/" + roomId);

        // Exclude timestamp, read marker, and mapboxgl-map from snapshots
        const css =
            ".mx_MessageTimestamp, .mx_MessagePanel_myReadMarker, .mapboxgl-map { visibility: hidden !important; }";

        let locator = page.locator(".mx_RoomView_body");
        // User sends message
        let textbox = locator.getByRole("textbox", { name: "Send a message…" });
        await textbox.fill("Hello Mr. Bot");
        await textbox.press("Enter");
        // Wait for message to send, get its ID and save as @threadId
        const threadId = await locator
            .locator(".mx_EventTile[data-scroll-tokens]")
            .filter({ hasText: "Hello Mr. Bot" })
            .getAttribute("data-scroll-tokens");

        // Bot starts thread
        await bot.sendMessage(roomId, "Hello there", threadId);

        // User clicks thread summary
        await page.locator(".mx_RoomView_body .mx_ThreadSummary").click();

        // User sends location on ThreadView
        await expect(page.locator(".mx_ThreadView")).toBeAttached();
        await (await app.openMessageComposerOptions(true)).getByRole("menuitem", { name: "Location" }).click();
        await page.getByTestId(`share-location-option-Pin`).click();
        await page.locator("#mx_LocationPicker_map").click();
        await page.getByRole("button", { name: "Share location" }).click();
        await expect(page.locator(".mx_ThreadView .mx_EventTile_last .mx_MLocationBody")).toBeAttached({
            timeout: 10000,
        });

        // User replies to the location
        locator = page.locator(".mx_ThreadView");
        await locator.locator(".mx_EventTile_last").hover();
        await locator.locator(".mx_EventTile_last").getByRole("button", { name: "Reply" }).click();
        textbox = locator.getByRole("textbox", { name: "Reply to thread…" });
        await textbox.fill("Please come here");
        await textbox.press("Enter");
        // Wait until the reply is sent
        await expect(locator.locator(".mx_EventTile_last .mx_EventTile_receiptSent")).toBeVisible();

        // Take a snapshot of reply to the shared location
        await page.addStyleTag({ content: css });
        await expect(page.locator(".mx_ThreadView")).toMatchScreenshot("Reply_to_the_location_on_ThreadView.png");
    });

    test("right panel behaves correctly", async ({ page, app, user }) => {
        // Create room
        const roomId = await app.client.createRoom({});
        await page.goto("/#/room/" + roomId);

        // Send message
        let locator = page.locator(".mx_RoomView_body");
        let textbox = locator.getByRole("textbox", { name: "Send a message…" });
        await textbox.fill("Hello Mr. Bot");
        await textbox.press("Enter");
        // Create thread
        const locator2 = locator.locator(".mx_EventTile[data-scroll-tokens]").filter({ hasText: "Hello Mr. Bot" });
        await locator2.hover();
        await locator2.getByRole("button", { name: "Reply in thread" }).click();
        await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1);

        // Send message to thread
        locator = page.locator(".mx_ThreadPanel");
        textbox = locator.getByRole("textbox", { name: "Send a message…" });
        await textbox.fill("Hello Mr. User");
        await textbox.press("Enter");
        await expect(locator.locator(".mx_EventTile_last").getByText("Hello Mr. User")).toBeAttached();
        // Close thread
        await locator.getByRole("button", { name: "Close" }).click();

        // Open existing thread
        locator = page
            .locator(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]")
            .filter({ hasText: "Hello Mr. Bot" });
        await locator.hover();
        await locator.getByRole("button", { name: "Reply in thread" }).click();
        await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1);

        locator = page.locator(".mx_BaseCard");
        await expect(locator.locator(".mx_EventTile").first().getByText("Hello Mr. Bot")).toBeAttached();
        await expect(locator.locator(".mx_EventTile").last().getByText("Hello Mr. User")).toBeAttached();
    });

    test("navigate through right panel", async ({ page, app, user }) => {
        // Create room
        const roomId = await app.client.createRoom({});
        await page.goto("/#/room/" + roomId);

        /**
         * Send a message in the main timeline
         * @param message
         */
        const sendMessage = async (message: string) => {
            const messageComposer = page.getByRole("region", { name: "Message composer" });
            const textbox = messageComposer.getByRole("textbox", { name: "Send a message…" });
            await textbox.fill(message);
            await textbox.press("Enter");
        };

        /**
         * Create a thread from the rootMessage and send a message in the thread
         * @param rootMessage
         * @param threadMessage
         */
        const createThread = async (rootMessage: string, threadMessage: string) => {
            // First create a thread
            const roomViewBody = page.locator(".mx_RoomView_body");
            const messageTile = roomViewBody
                .locator(".mx_EventTile[data-scroll-tokens]")
                .filter({ hasText: rootMessage });
            await messageTile.hover();
            await messageTile.getByRole("button", { name: "Reply in thread" }).click();
            await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1);

            // Send a message in the thread
            const threadPanel = page.locator(".mx_ThreadPanel");
            const textbox = threadPanel.getByRole("textbox", { name: "Send a message…" });
            await textbox.fill(threadMessage);
            await textbox.press("Enter");
            await expect(threadPanel.locator(".mx_EventTile_last").getByText(threadMessage)).toBeVisible();
            // Close thread
            await threadPanel.getByRole("button", { name: "Close" }).click();
        };

        await sendMessage("Hello Mr. Bot");
        await sendMessage("Hello again Mr. Bot");
        await createThread("Hello Mr. Bot", "Hello Mr. User in a thread");
        await createThread("Hello again Mr. Bot", "Hello again Mr. User in a thread");

        // Open thread panel
        await page.getByRole("button", { name: "Threads" }).click();
        const threadPanel = page.locator(".mx_ThreadPanel");
        await expect(
            threadPanel.locator(".mx_EventTile_last").getByText("Hello again Mr. User in a thread"),
        ).toBeVisible();

        // Open threads list
        await threadPanel.getByRole("button", { name: "Threads" }).click();
        const rightPanel = page.locator(".mx_RightPanel");
        // Check that the threads are listed
        await expect(rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread")).toBeVisible();
        await expect(rightPanel.locator(".mx_EventTile").getByText("Hello again Mr. User in a thread")).toBeVisible();

        // Open the first thread
        await rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread").click();
        await expect(rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread")).toBeVisible();
        await expect(
            rightPanel.locator(".mx_EventTile").getByText("Hello again Mr. User in a thread"),
        ).not.toBeVisible();
    });
});