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

Commit

Permalink
Display redacted body on ThreadView in the same way as normal messages (
Browse files Browse the repository at this point in the history 
#9016)
  • Loading branch information
@luixxiul
luixxiul authored Mar 8, 2023
1 parent 6fa00a2 commit f60f7a1
Show file tree
Hide file tree
Showing 3 changed files with 235 additions and 58 deletions.
14 changes: 14 additions & 0 deletions cypress/e2e/polls/polls.spec.ts
View file
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";
import Chainable = Cypress.Chainable;

const hidePercyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";
Expand Down Expand Up @@ -313,6 +315,18 @@ describe("Polls", () => {
// and thread view
cy.get(".mx_ThreadView .mx_MPollBody_totalVotes").should("contain", "2 votes cast");

// Take snapshots of poll on ThreadView
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible");
cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with a poll on bubble layout", {
percyCSS: hidePercyCSS,
});
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);
cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible");
cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with a poll on group layout", {
percyCSS: hidePercyCSS,
});

cy.get(".mx_RoomView_body").within(() => {
// vote 'Maybe' in the main timeline poll
getPollOption(pollId, pollParams.options[2]).click("topLeft");
Expand Down
192 changes: 187 additions & 5 deletions cypress/e2e/threads/threads.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { HomeserverInstance } from "../../plugins/utils/homeserver";
import { MatrixClient } from "../../global";
import { SettingLevel } from "../../../src/settings/SettingLevel";
import { Layout } from "../../../src/settings/enums/Layout";
import Chainable = Cypress.Chainable;

describe("Threads", () => {
let homeserver: HomeserverInstance;
Expand Down Expand Up @@ -64,6 +65,9 @@ describe("Threads", () => {
// --MessageTimestamp-color = #acacac = rgb(172, 172, 172)
// See: _MessageTimestamp.pcss
const MessageTimestampColor = "rgb(172, 172, 172)";
const ThreadViewGroupSpacingStart = "56px"; // --ThreadView_group_spacing-start
// Exclude timestamp and read marker from snapshots
const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }";

// User sends message
cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
Expand All @@ -90,9 +94,29 @@ describe("Threads", () => {
});

// User asserts timeline thread summary visible & clicks it
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "BotBob");
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_RoomView_body").within(() => {
cy.get(".mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "BotBob");
cy.get(".mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there");
cy.get(".mx_ThreadSummary").click();
});

// Wait until the both messages are read
cy.get(".mx_ThreadView .mx_EventTile_last[data-layout=group]").within(() => {
cy.get(".mx_EventTile_line .mx_MTextBody").should("have.text", MessageLong);
cy.get(".mx_ReadReceiptGroup .mx_BaseAvatar_image").should("be.visible");

// Make sure the CSS style for spacing is applied to mx_EventTile_line on group/modern layout
cy.get(".mx_EventTile_line").should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart);
});

// Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView)
cy.get(".mx_ThreadView").percySnapshotElement("Initial ThreadView on group layout", { percyCSS });
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible");
cy.get(".mx_ThreadView").percySnapshotElement("Initial ThreadView on bubble layout", { percyCSS });

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

cy.get(".mx_ThreadView .mx_EventTile[data-layout='group'].mx_EventTile_last").within(() => {
// Wait until the messages are rendered
Expand Down Expand Up @@ -130,8 +154,17 @@ describe("Threads", () => {
);

// User asserts summary was updated correctly
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "Tom");
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test");
cy.get(".mx_RoomView_body .mx_ThreadSummary").within(() => {
cy.get(".mx_ThreadSummary_sender").should("contain", "Tom");
cy.get(".mx_ThreadSummary_content").should("contain", "Test");
});

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

// Enable hidden events to make the event for reaction displayed
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, true);

// User reacts to message instead
cy.contains(".mx_ThreadView .mx_EventTile .mx_EventTile_line", "Hello there")
Expand All @@ -142,6 +175,58 @@ describe("Threads", () => {
cy.contains('[role="menuitem"]', "👋").click();
});

cy.get(".mx_ThreadView").within(() => {
// Make sure the CSS style for spacing is applied to mx_ReactionsRow on group/modern layout
cy.get(".mx_EventTile[data-layout=group] .mx_ReactionsRow").should(
"have.css",
"margin-inline-start",
ThreadViewGroupSpacingStart,
);

// Make sure the CSS style for spacing is applied to the hidden event on group/modern layout
cy.get(
".mx_GenericEventListSummary[data-layout=group] .mx_EventTile_info.mx_EventTile_last " +
".mx_EventTile_line",
).should("have.css", "padding-inline-start", ThreadViewGroupSpacingStart);
});

// Take Percy snapshot of group layout (IRC layout is not available on ThreadView)
cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction and a hidden event on group layout", {
percyCSS,
});

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

// Make sure the CSS style for spacing is applied to the hidden event on bubble layout
cy.get(
".mx_ThreadView .mx_GenericEventListSummary[data-layout=bubble] .mx_EventTile_info.mx_EventTile_last",
).within(() => {
cy.get(".mx_EventTile_line .mx_EventTile_content")
// 76px: ThreadViewGroupSpacingStart + 14px + 6px
// 14px: avatar width
// See: _EventTile.pcss
.should("have.css", "margin-inline-start", "76px");
cy.get(".mx_EventTile_line")
// Make sure the margin is NOT applied to mx_EventTile_line
.should("have.css", "margin-inline-start", "0px");
});

// Take Percy snapshot of bubble layout
cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with reaction and a hidden event on bubble layout", {
percyCSS,
});

// Disable hidden events
cy.setSettingValue("showHiddenEventsInTimeline", null, SettingLevel.DEVICE, false);

// Reset to the group layout
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group);

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

// User redacts their prior response
cy.contains(".mx_ThreadView .mx_EventTile .mx_EventTile_line", "Test")
.find('[aria-label="Options"]')
Expand All @@ -153,6 +238,23 @@ describe("Threads", () => {
cy.contains(".mx_Dialog_primary", "Remove").click();
});

// Wait until the response is redacted
cy.get(".mx_ThreadView .mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");

// Take Percy snapshots in group layout and bubble layout (IRC layout is not available on ThreadView)
cy.get(".mx_ThreadView .mx_EventTile[data-layout='group']").should("be.visible");
cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on group layout", {
percyCSS,
});
cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
cy.get(".mx_ThreadView .mx_EventTile[data-layout='bubble']").should("be.visible");
cy.get(".mx_ThreadView").percySnapshotElement("ThreadView with redacted messages on bubble layout", {
percyCSS,
});

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

// User asserts summary was updated correctly
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_sender").should("contain", "BotBob");
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Hello there");
Expand Down Expand Up @@ -182,9 +284,15 @@ describe("Threads", () => {
cy.get(".mx_EventTile_body").should("contain", "Hello Mr. Bot");
cy.get(".mx_ThreadSummary_content").should("contain", "How are things?");

// Check the number of the replies
cy.get(".mx_ThreadPanel_replies_amount").should("have.text", "2");

// Check the colour of timestamp on thread list
cy.get(".mx_EventTile_details .mx_MessageTimestamp").should("have.css", "color", MessageTimestampColor);

// Make sure the notification dot is visible
cy.get(".mx_NotificationBadge_visible").should("be.visible");

// User opens thread via threads list
cy.get(".mx_EventTile_line").click();
});
Expand Down Expand Up @@ -281,6 +389,80 @@ describe("Threads", () => {
cy.get(".mx_ThreadView .mx_MVoiceMessageBody").should("have.length", 1);
});

it("should send location and reply to the location on ThreadView", () => {
// See: location.spec.ts
const selectLocationShareTypeOption = (shareType: string): Chainable<JQuery> => {
return cy.get(`[data-test-id="share-location-option-${shareType}"]`);
};
const submitShareLocation = (): void => {
cy.get('[data-testid="location-picker-submit-button"]').click();
};

let bot: MatrixClient;
cy.getBot(homeserver, {
displayName: "BotBob",
autoAcceptInvites: false,
}).then((_bot) => {
bot = _bot;
});

let roomId: string;
cy.createRoom({}).then((_roomId) => {
roomId = _roomId;
cy.inviteUser(roomId, bot.getUserId());
bot.joinRoom(roomId);
cy.visit("/#/room/" + roomId);
});

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

// User sends message
cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");

// Wait for message to send, get its ID and save as @threadId
cy.contains(".mx_RoomView_body .mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
.invoke("attr", "data-scroll-tokens")
.as("threadId");

// Bot starts thread
cy.get<string>("@threadId").then((threadId) => {
bot.sendMessage(roomId, threadId, {
body: "Hello there",
msgtype: "m.text",
});
});

// User clicks thread summary
cy.get(".mx_RoomView_body .mx_ThreadSummary").click();

// User sends location on ThreadView
cy.get(".mx_ThreadView").should("exist");
cy.openMessageComposerOptions(true).find("[aria-label='Location']").click();
selectLocationShareTypeOption("Pin").click();
cy.get("#mx_LocationPicker_map").click("center");
submitShareLocation();
cy.get(".mx_ThreadView .mx_EventTile_last .mx_MLocationBody", { timeout: 10000 }).should("exist");

// User replies to the location
cy.get(".mx_ThreadView").within(() => {
cy.get(".mx_EventTile_last")
.realHover()
.within(() => {
cy.get("[aria-label='Reply']").click({ force: false });
});

cy.get(".mx_BasicMessageComposer_input").type("Please come here.{enter}");

// Wait until the reply is sent
cy.get(".mx_EventTile_last .mx_EventTile_receiptSent").should("be.visible");
});

// Take a snapshot of reply to the shared location
cy.get(".mx_ThreadView").percySnapshotElement("Reply to the location on ThreadView", { percyCSS });
});

it("right panel behaves correctly", () => {
// Create room
let roomId: string;
Expand Down
Loading

0 comments on commit f60f7a1

Please sign in to comment.