a4f63cdd22
* Exploration of a virtuoso-powered emoji picker moved to shared components Fable generated * fix pnpm lock * format & fix some lint issues * wrong import * fix lint warning * Fix off-by-one and remove manual overflow adjustment: let's leave the default unless it turns out to be necessary. Emoji should not take that long to load. * Convert to functional component * WIP: change to one big virtuoso scroller * Change to use virtuoso's own onRangeChanged and santitise category data and how it's passed around * Convert Tabs to functional component and put the focusing behaviour back with it just keeping track of refs by itself. * Absorb two line config file into main component * Actually add the config to the main file * Convert emoji to functional Also make selected always defined and use useCallback. * QuickReactions to functional component * Non-default exports & doc * Search to functional component * Well it seems to work just fine now * Use ref prop * fix lockfile AGAIN * lint * Remove default export * Remove some mx_ classnames and fix the inputRef to make the arrow keys in the search box work (well, work as much as they ever did). * Remove last of the mx_ id / classnames (except the one in the test) * Use useMemo to memoize * No need to export props interface (I think?) and fix comment now we don't do the mutation stuff anymore * Fix test * Fix axe violations & add screenshots * Avoid comparing dom snapshots in test * Allow more before or after, just compare order of the ones present in both. * Switch existing usages to new emoji picker and kill the old one with fire * Unused stuff * Remove i18n strings * Fix some tests * Update screenshots * Fix test by removing the last of the weird memoized-but-mutated data structure * Move the string somewhere more sensible than 'a11y' * i18n lint * Give the emojis IDs so aria-activedescendant works * Fix more tests * Add a small wrapper emoji picker component This lets us easily memoize the recent emojis when the emoji picker is opened. Also it saves a bit of boilerplate. * Remove old emojipicker css * Typos Co-authored-by: David Langley <davidl@element.io> * Use compound constants * Rethemendex * Use catalog version for emojibase * Add comments * More comments * Fix comment * More comments * more comments (and make them uniform) * More comments * Fix pnpm lock again * Another comment * Apply button types to new version * Add comment * Disable screenshot as per comment --------- Co-authored-by: Will Hunt <2072976+Half-Shot@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io>
201 lines
8.3 KiB
TypeScript
201 lines
8.3 KiB
TypeScript
/*
|
|
Copyright 2024 New Vector Ltd.
|
|
Copyright 2023 The Matrix.org Foundation C.I.C.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
|
Please see LICENSE files in the repository root for full details.
|
|
*/
|
|
|
|
/* See readme.md for tips on writing these tests. */
|
|
|
|
import { test, expect } from ".";
|
|
import { isDendrite } from "../../plugins/homeserver/dendrite";
|
|
|
|
test.describe("Read receipts", { tag: "@mergequeue" }, () => {
|
|
test.skip(isDendrite, "due to Dendrite bug https://github.com/element-hq/dendrite/issues/2970");
|
|
|
|
test.describe("reactions", () => {
|
|
test.describe("in threads", () => {
|
|
test("A reaction to a threaded message does not make the room unread", async ({
|
|
roomAlpha: room1,
|
|
roomBeta: room2,
|
|
util,
|
|
msg,
|
|
}) => {
|
|
// Given a thread exists and I have read it
|
|
await util.goTo(room1);
|
|
await util.assertRead(room2);
|
|
await util.receiveMessages(room2, ["Msg1", msg.threadedOff("Msg1", "Reply1")]);
|
|
await util.assertUnread(room2, 1);
|
|
await util.goTo(room2);
|
|
await util.openThread("Msg1");
|
|
await util.assertRead(room2);
|
|
await util.assertReadThread("Msg1");
|
|
await util.goTo(room1);
|
|
|
|
// When someone reacts to a thread message
|
|
await util.receiveMessages(room2, [msg.reactionTo("Reply1", "🪿")]);
|
|
|
|
// Then the room remains read
|
|
await util.assertStillRead(room2);
|
|
await util.assertReadThread("Msg1");
|
|
});
|
|
|
|
test("Marking a room as read after a reaction in a thread makes it read", async ({
|
|
roomAlpha: room1,
|
|
roomBeta: room2,
|
|
util,
|
|
msg,
|
|
}) => {
|
|
// Given a thread exists with a reaction
|
|
await util.goTo(room1);
|
|
await util.assertRead(room2);
|
|
await util.receiveMessages(room2, [
|
|
"Msg1",
|
|
msg.threadedOff("Msg1", "Reply1"),
|
|
msg.reactionTo("Reply1", "🪿"),
|
|
]);
|
|
await util.assertUnread(room2, 1);
|
|
|
|
// When I mark the room as read
|
|
await util.markAsRead(room2);
|
|
|
|
// Then it becomes read
|
|
await util.assertRead(room2);
|
|
});
|
|
|
|
test("Reacting to a thread message after marking as read does not make the room unread", async ({
|
|
roomAlpha: room1,
|
|
roomBeta: room2,
|
|
util,
|
|
msg,
|
|
}) => {
|
|
// Given a thread exists and I have marked it as read
|
|
await util.goTo(room1);
|
|
await util.assertRead(room2);
|
|
await util.receiveMessages(room2, ["Msg1", msg.threadedOff("Msg1", "Reply1")]);
|
|
await util.assertUnread(room2, 1);
|
|
await util.markAsRead(room2);
|
|
await util.assertRead(room2);
|
|
|
|
// When someone reacts to a thread message
|
|
await util.receiveMessages(room2, [msg.reactionTo("Reply1", "🪿")]);
|
|
|
|
// Then the room remains read
|
|
await util.assertStillRead(room2);
|
|
// as does the thread
|
|
await util.assertReadThread("Msg1");
|
|
});
|
|
|
|
test("A room with a reaction to a threaded message is still unread after restart", async ({
|
|
roomAlpha: room1,
|
|
roomBeta: room2,
|
|
util,
|
|
msg,
|
|
}) => {
|
|
// Given a thread exists and I have read it
|
|
await util.goTo(room1);
|
|
await util.assertRead(room2);
|
|
await util.receiveMessages(room2, ["Msg1", msg.threadedOff("Msg1", "Reply1")]);
|
|
await util.assertUnread(room2, 1);
|
|
await util.goTo(room2);
|
|
await util.openThread("Msg1");
|
|
await util.assertRead(room2);
|
|
await util.goTo(room1);
|
|
|
|
// And someone reacted to it, which doesn't make it read
|
|
await util.receiveMessages(room2, [msg.reactionTo("Reply1", "🪿")]);
|
|
await util.assertStillRead(room2);
|
|
await util.assertReadThread("Msg1");
|
|
|
|
// When I restart
|
|
await util.saveAndReload();
|
|
|
|
// Then the room is still read
|
|
await util.assertRead(room2);
|
|
await util.assertReadThread("Msg1");
|
|
});
|
|
|
|
test("A room where all reactions in threads are read is still read after restart", async ({
|
|
roomAlpha: room1,
|
|
roomBeta: room2,
|
|
util,
|
|
msg,
|
|
}) => {
|
|
// Given multiple threads with reactions exist and are read
|
|
await util.goTo(room1);
|
|
await util.assertRead(room2);
|
|
await util.receiveMessages(room2, [
|
|
"Msg1",
|
|
msg.threadedOff("Msg1", "Reply1a"),
|
|
msg.reactionTo("Reply1a", "r"),
|
|
"Msg2",
|
|
msg.threadedOff("Msg1", "Reply1b"),
|
|
msg.threadedOff("Msg2", "Reply2a"),
|
|
msg.reactionTo("Msg1", "e"),
|
|
msg.threadedOff("Msg2", "Reply2b"),
|
|
msg.reactionTo("Reply2a", "a"),
|
|
msg.reactionTo("Reply2b", "c"),
|
|
msg.reactionTo("Reply1b", "t"),
|
|
]);
|
|
await util.assertUnread(room2, 2);
|
|
await util.goTo(room2);
|
|
await util.openThread("Msg1");
|
|
await util.assertReadThread("Msg1");
|
|
await util.openThread("Msg2");
|
|
await util.assertReadThread("Msg2");
|
|
await util.assertRead(room2);
|
|
await util.goTo(room1);
|
|
|
|
// When I restart
|
|
await util.saveAndReload();
|
|
|
|
// Then the room is still read
|
|
await util.assertRead(room2);
|
|
await util.goTo(room2);
|
|
await util.assertReadThread("Msg1");
|
|
await util.assertReadThread("Msg2");
|
|
});
|
|
|
|
test("Can remove a reaction in a thread", async ({
|
|
page,
|
|
roomAlpha: room1,
|
|
roomBeta: room2,
|
|
util,
|
|
msg,
|
|
}) => {
|
|
// Note: this is not strictly a read receipt test, but it checks
|
|
// for a bug we caused when we were fixing unreads, so it's
|
|
// included here. The bug is:
|
|
// https://github.com/vector-im/element-web/issues/26498
|
|
|
|
// Given a thread exists
|
|
await util.goTo(room1);
|
|
await util.assertRead(room2);
|
|
await util.receiveMessages(room2, ["Msg1", msg.threadedOff("Msg1", "Reply1a")]);
|
|
await util.assertUnread(room2, 1);
|
|
|
|
// When I react to a thread message
|
|
await util.goTo(room2);
|
|
await util.openThread("Msg1");
|
|
await page.locator(".mx_ThreadPanel").getByText("Reply1a").hover();
|
|
await page.getByRole("button", { name: "React" }).click();
|
|
await page.getByLabel("Emoji Picker").getByRole("gridcell", { name: "😀" }).click();
|
|
|
|
// And cancel the reaction
|
|
await page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀").click();
|
|
|
|
// Then it disappears
|
|
await expect(page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀")).not.toBeVisible();
|
|
|
|
// And I can do it all again without an error
|
|
await page.locator(".mx_ThreadPanel").getByText("Reply1a").hover();
|
|
await page.getByRole("button", { name: "React" }).click();
|
|
await page.getByLabel("Emoji Picker").getByRole("gridcell", { name: "😀" }).first().click();
|
|
await page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀").click();
|
|
await expect(page.locator(".mx_ThreadPanel").getByLabel("Mae reacted with 😀")).not.toBeVisible();
|
|
});
|
|
});
|
|
});
|
|
});
|