Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Add a test to check whether ReadReceiptGroup exists on ThreadView in …
Browse files Browse the repository at this point in the history
…the bubble layout (#10284)
  • Loading branch information
luixxiul authored Mar 6, 2023
1 parent 727afdc commit 4f5a65f
Showing 1 changed file with 35 additions and 2 deletions.
37 changes: 35 additions & 2 deletions cypress/e2e/threads/threads.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ limitations under the License.

import { HomeserverInstance } from "../../plugins/utils/homeserver";
import { MatrixClient } from "../../global";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { Layout } from "../../../src/settings/enums/Layout";

describe("Threads", () => {
let homeserver: HomeserverInstance;
Expand Down Expand Up @@ -54,6 +56,11 @@ describe("Threads", () => {
cy.visit("/#/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";

// --MessageTimestamp-color = #acacac = rgb(172, 172, 172)
// See: _MessageTimestamp.pcss
const MessageTimestampColor = "rgb(172, 172, 172)";
Expand All @@ -76,7 +83,8 @@ describe("Threads", () => {
// Bot starts thread
cy.get<string>("@threadId").then((threadId) => {
bot.sendMessage(roomId, threadId, {
body: "Hello there",
// Send a message long enough to be wrapped to check if avatars inside the ReadReceiptGroup are visible
body: MessageLong,
msgtype: "m.text",
});
});
Expand All @@ -86,11 +94,36 @@ describe("Threads", () => {
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there");
cy.get(".mx_RoomView_body .mx_ThreadSummary").click();

cy.get(".mx_ThreadView .mx_EventTile[data-layout='group'].mx_EventTile_last").within(() => {
// Wait until the messages are rendered
cy.get(".mx_EventTile_line .mx_MTextBody").should("have.text", MessageLong);

// Make sure the avatar inside ReadReceiptGroup is visible on the group layout
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
});

// Enable the bubble layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);

cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble'].mx_EventTile_last").within(() => {
// 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
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("exist");

// 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
// cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");
});

// Re-enable the group layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);

// User responds in thread
cy.get(".mx_ThreadView .mx_BasicMessageComposer_input").type("Test{enter}");

// Check the colour of timestamp on EventTile in a thread (mx_ThreadView)
cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_line .mx_MessageTimestamp").should(
cy.get(".mx_ThreadView .mx_EventTile_last[data-layout='group'] .mx_EventTile_line .mx_MessageTimestamp").should(
"have.css",
"color",
MessageTimestampColor,
Expand Down

0 comments on commit 4f5a65f

Please sign in to comment.