From b77e9523c1c9677346bafb7f11c6a33c6a095ce2 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 00:19:46 +0900 Subject: [PATCH 1/3] Invite the bot and have it send a message Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 28 ++++++++++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 3876e457b56..99424789f8c 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -21,6 +21,7 @@ import type { EventType, MsgType } from "matrix-js-sdk/src/@types/event"; import { HomeserverInstance } from "../../plugins/utils/homeserver"; import { SettingLevel } from "../../../src/settings/SettingLevel"; import { Layout } from "../../../src/settings/enums/Layout"; +import { MatrixClient } from "../../global"; import Chainable = Cypress.Chainable; // The avatar size used in the timeline @@ -500,6 +501,7 @@ describe("Timeline", () => { describe("message sending", () => { const MESSAGE = "Hello world"; + const reply = "Reply"; const viewRoomSendMessageAndSetupReply = () => { // View room cy.visit("/#/room/" + roomId); @@ -514,7 +516,6 @@ describe("Timeline", () => { }; it("can reply with a text message", () => { - const reply = "Reply"; viewRoomSendMessageAndSetupReply(); cy.getComposer().type(`${reply}{enter}`); @@ -566,5 +567,30 @@ describe("Timeline", () => { .children() .should("have.length", 4); }); + + it("should display a reply chain", () => { + let bot: MatrixClient; + + cy.visit("/#/room/" + roomId).as("testRoomId"); + + // Wait until configuration is finished + cy.contains( + ".mx_RoomView_body .mx_GenericEventListSummary .mx_GenericEventListSummary_summary", + "created and configured the room.", + ).should("exist"); + + // Create a bot and invite it + cy.getBot(homeserver, { + displayName: "BotBob", + autoAcceptInvites: false, + }).then((_bot) => { + bot = _bot; + cy.inviteUser(roomId, bot.getUserId()); + bot.joinRoom(roomId); + + // Have bot send MESSAGE to roomId + cy.botSendMessage(bot, roomId, MESSAGE); + }); + }); }); }); From 71f6657ddb075a9647a8a53353437872233a5e77 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 00:44:19 +0900 Subject: [PATCH 2/3] Show a reply chain, check CSS values, set Percy tests Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 82 ++++++++++++++++++++++++++- 1 file changed, 80 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 99424789f8c..393497fd528 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -570,8 +570,23 @@ describe("Timeline", () => { it("should display a reply chain", () => { let bot: MatrixClient; + const reply2 = "Reply again"; + + // For clicking the reply button on the last line + const clickButtonReply = () => { + cy.get(".mx_RoomView_MessageList").within(() => { + cy.get(".mx_EventTile_last").realHover(); + cy.get(".mx_EventTile_last .mx_MessageActionBar_optionsButton", { + timeout: 1000, + }) + .should("exist") + .realHover() + .get('.mx_EventTile_last [aria-label="Reply"]') + .click({ force: false }); + }); + }; - cy.visit("/#/room/" + roomId).as("testRoomId"); + cy.visit("/#/room/" + roomId); // Wait until configuration is finished cy.contains( @@ -579,7 +594,7 @@ describe("Timeline", () => { "created and configured the room.", ).should("exist"); - // Create a bot and invite it + // Create a bot "BotBob" and invite it cy.getBot(homeserver, { displayName: "BotBob", autoAcceptInvites: false, @@ -588,9 +603,72 @@ describe("Timeline", () => { cy.inviteUser(roomId, bot.getUserId()); bot.joinRoom(roomId); + // Make sure the bot joined the room + cy.contains( + ".mx_GenericEventListSummary .mx_EventTile_info.mx_EventTile_last ", + "BotBob joined the room", + ).should("exist"); + // Have bot send MESSAGE to roomId cy.botSendMessage(bot, roomId, MESSAGE); }); + + // Reply to the message + clickButtonReply(); + cy.getComposer().type(`${reply}{enter}`); + + // Make sure 'reply' was sent + cy.contains(".mx_RoomView_MessageList .mx_EventTile_last", reply).should("exist"); + + // Reply again to create a replyChain + clickButtonReply(); + cy.getComposer().type(`${reply2}{enter}`); + + // Make sure 'reply2' was sent + cy.contains(".mx_RoomView_MessageList .mx_EventTile_last", reply2).should("exist"); + + // Exclude timestamp and read marker from snapshot + const percyCSS = ".mx_MessageTimestamp, .mx_RoomView_myReadMarker { visibility: hidden !important; }"; + + // Check the margin value of ReplyChains of EventTile at the bottom on IRC layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.IRC); + cy.get(".mx_EventTile_last[data-layout='irc'] .mx_ReplyChain").should("have.css", "margin", "0px"); + + // Take a snapshot on IRC layout + cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on IRC layout", { + percyCSS, + }); + + // Check the margin value of ReplyChains of EventTile at the bottom on group/modern layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Group); + cy.get(".mx_EventTile_last[data-layout='group'] .mx_ReplyChain").should("have.css", "margin-bottom", "8px"); + + // Take a snapshot on modern layout + cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on modern layout", { + percyCSS, + }); + + // Check the margin value of ReplyChains of EventTile at the bottom on group/modern compact layout + cy.setSettingValue("useCompactLayout", null, SettingLevel.DEVICE, true); + cy.get(".mx_EventTile_last[data-layout='group'] .mx_ReplyChain").should("have.css", "margin-bottom", "4px"); + + // Take a snapshot on compact modern layout + cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on compact modern layout", { + percyCSS, + }); + + // Check the margin value of ReplyChains of EventTile at the bottom on bubble layout + cy.setSettingValue("layout", null, SettingLevel.DEVICE, Layout.Bubble); + cy.get(".mx_EventTile_last[data-layout='bubble'] .mx_ReplyChain").should( + "have.css", + "margin-bottom", + "8px", + ); + + // Take a snapshot on bubble layout + cy.get(".mx_EventTile_last").percySnapshotElement("EventTile with reply chains on bubble layout", { + percyCSS, + }); }); }); }); From 9118cd4e7944234c3ad03dd410699dc52f735cdf Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Tue, 7 Mar 2023 01:23:29 +0900 Subject: [PATCH 3/3] Remove a whitespace character Signed-off-by: Suguru Hirahara --- cypress/e2e/timeline/timeline.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cypress/e2e/timeline/timeline.spec.ts b/cypress/e2e/timeline/timeline.spec.ts index 393497fd528..da4c0a3f452 100644 --- a/cypress/e2e/timeline/timeline.spec.ts +++ b/cypress/e2e/timeline/timeline.spec.ts @@ -605,7 +605,7 @@ describe("Timeline", () => { // Make sure the bot joined the room cy.contains( - ".mx_GenericEventListSummary .mx_EventTile_info.mx_EventTile_last ", + ".mx_GenericEventListSummary .mx_EventTile_info.mx_EventTile_last", "BotBob joined the room", ).should("exist");