From 694334461036ae8d676e02bf50057fb639b4b119 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 13 Apr 2023 04:18:01 +0900 Subject: [PATCH 01/10] Update sliding-sync.spec.ts - use Cypress Testing Library Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 56 +++++++++++++++++------- 1 file changed, 39 insertions(+), 17 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 10bd2467970..916c9588e56 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -109,9 +109,14 @@ describe("Sliding Sync", () => { cy.get(".mx_RoomTile").should("have.length", 4); // due to the Test Room in beforeEach checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); - cy.contains(".mx_RoomSublist", "Rooms").find(".mx_RoomSublist_menuButton").click({ force: true }); - cy.contains("A-Z").click(); - cy.get(".mx_StyledRadioButton_checked").should("contain.text", "A-Z"); + cy.contains(".mx_RoomSublist", "Rooms").within(() => { + cy.get(".mx_RoomSublist_stickable").realHover().findByRole("button", { name: "List options" }).click(); + }); + + // force click as the radio button's size is zero + cy.findByRole("menuitemradio", { name: "A-Z" }).click({ force: true }); + + cy.get(".mx_StyledRadioButton_checked").findByText("A-Z").should("exist"); checkOrder(["Apple", "Orange", "Pineapple", "Test Room"]); }); @@ -201,8 +206,11 @@ describe("Sliding Sync", () => { createAndJoinBob(); // disable notifs in this room (TODO: CS API call?) - cy.contains(".mx_RoomTile", "Test Room").find(".mx_RoomTile_notificationsButton").click({ force: true }); - cy.contains("Mute room").click(); + cy.contains(".mx_RoomTile", "Test Room") + .realHover() + .findByRole("button", { name: "Notification options" }) + .click(); + cy.findByRole("menuitemradio", { name: "Mute room" }).click(); // create a new room so we know when the message has been received as it'll re-shuffle the room list cy.createRoom({ @@ -220,9 +228,9 @@ describe("Sliding Sync", () => { }); it("should update user settings promptly", () => { - cy.get(".mx_UserMenu_userAvatar").click(); - cy.contains("All settings").click(); - cy.contains("Preferences").click(); + cy.findByRole("button", { name: "User menu" }).click(); + cy.findByRole("button", { name: "All settings" }).click(); + cy.findByRole("button", { name: "Preferences" }).click(); cy.contains(".mx_SettingsFlag", "Show timestamps in 12 hour format") .should("exist") .find(".mx_ToggleSwitch_on") @@ -277,12 +285,16 @@ describe("Sliding Sync", () => { cy.get(".mx_RoomTile").should("have.length", 4); // due to the Test Room in beforeEach cy.contains(".mx_RoomTile", "Join").click(); - cy.contains(".mx_AccessibleButton", "Accept").click(); + cy.findByRole("button", { name: "Accept" }).click(); checkOrder(["Join", "Test Room"]); - cy.contains(".mx_RoomTile", "Reject").click(); - cy.contains(".mx_RoomView .mx_AccessibleButton", "Reject").click(); + cy.get(".mx_RoomTile").within(() => { + cy.findByRole("button", { name: "Reject" }).click(); + }); + cy.get(".mx_RoomView").within(() => { + cy.findByRole("button", { name: "Reject" }).click(); + }); // wait for the rejected room to disappear cy.get(".mx_RoomTile").should("have.length", 3); @@ -340,9 +352,14 @@ describe("Sliding Sync", () => { cy.contains(".mx_RoomTile", "Test Room").click(); cy.get(".mx_ReplyPreview").should("not.exist"); // click reply-to on the Hello World message - cy.contains(".mx_EventTile", "Hello world") - .find('.mx_AccessibleButton[aria-label="Reply"]') - .click({ force: true }); + cy.get(".mx_EventTile") + .last() + .within(() => { + cy.findByText("Hello world"); + }) + .realHover() + .findByRole("button", { name: "Reply" }) + .click(); // check it's visible cy.get(".mx_ReplyPreview").should("exist"); // now click Other Room @@ -381,9 +398,14 @@ describe("Sliding Sync", () => { cy.contains(".mx_RoomTile", "Test Room").click(); cy.get(".mx_ReplyPreview").should("not.exist"); // click reply-to on the Reply to me message - cy.contains(".mx_EventTile", "Reply to me") - .find('.mx_AccessibleButton[aria-label="Reply"]') - .click({ force: true }); + cy.get(".mx_EventTile") + .last() + .within(() => { + cy.findByText("Reply to me"); + }) + .realHover() + .findByRole("button", { name: "Reply" }) + .click(); // check it's visible cy.get(".mx_ReplyPreview").should("exist"); // now click on the permalink for Permalink me From 9c86e6fe93850ebb883cf00e6acc780617c6295e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 13 Apr 2023 05:37:08 +0900 Subject: [PATCH 02/10] Use findByRole() - group, treeitem The elements with ARIA "treeitem" role resides in ones with ARIA "group" role such as Favourites, People, and Invites. The elements with the "treeitem" role correspond to rooms on the room list. Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 80 ++++++++++++------------ 1 file changed, 41 insertions(+), 39 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 916c9588e56..51e5f624237 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -62,7 +62,7 @@ describe("Sliding Sync", () => { // assert order const checkOrder = (wantOrder: string[]) => { - cy.contains(".mx_RoomSublist", "Rooms") + cy.findByRole("group", { name: "Rooms" }) .find(".mx_RoomTile_title") .should((elements) => { expect( @@ -102,14 +102,14 @@ describe("Sliding Sync", () => { it("should render the Rooms list in reverse chronological order by default and allowing sorting A-Z", () => { // create rooms and check room names are correct - cy.createRoom({ name: "Apple" }).then(() => cy.contains(".mx_RoomSublist", "Apple")); - cy.createRoom({ name: "Pineapple" }).then(() => cy.contains(".mx_RoomSublist", "Pineapple")); - cy.createRoom({ name: "Orange" }).then(() => cy.contains(".mx_RoomSublist", "Orange")); + cy.createRoom({ name: "Apple" }).then(() => cy.findByRole("treeitem", { name: "Apple" })); + cy.createRoom({ name: "Pineapple" }).then(() => cy.findByRole("treeitem", { name: "Pineapple" })); + cy.createRoom({ name: "Orange" }).then(() => cy.findByRole("treeitem", { name: "Orange" })); // check the rooms are in the right order cy.get(".mx_RoomTile").should("have.length", 4); // due to the Test Room in beforeEach checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); - cy.contains(".mx_RoomSublist", "Rooms").within(() => { + cy.findByRole("group", { name: "Rooms" }).within(() => { cy.get(".mx_RoomSublist_stickable").realHover().findByRole("button", { name: "List options" }).click(); }); @@ -124,16 +124,16 @@ describe("Sliding Sync", () => { // create rooms and check room names are correct cy.createRoom({ name: "Apple" }) .as("roomA") - .then(() => cy.contains(".mx_RoomSublist", "Apple")); + .then(() => cy.findByRole("treeitem", { name: "Apple" })); cy.createRoom({ name: "Pineapple" }) .as("roomP") - .then(() => cy.contains(".mx_RoomSublist", "Pineapple")); + .then(() => cy.findByRole("treeitem", { name: "Pineapple" })); cy.createRoom({ name: "Orange" }) .as("roomO") - .then(() => cy.contains(".mx_RoomSublist", "Orange")); + .then(() => cy.findByRole("treeitem", { name: "Orange" })); // Select the Test Room - cy.contains(".mx_RoomTile", "Test Room").click(); + cy.findByRole("treeitem", { name: "Test Room" }).click(); checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); bumpRoom("@roomA"); @@ -150,20 +150,20 @@ describe("Sliding Sync", () => { // create rooms and check room names are correct cy.createRoom({ name: "Apple" }) .as("roomA") - .then(() => cy.contains(".mx_RoomSublist", "Apple")); + .then(() => cy.findByRole("treeitem", { name: "Apple" })); cy.createRoom({ name: "Pineapple" }) .as("roomP") - .then(() => cy.contains(".mx_RoomSublist", "Pineapple")); + .then(() => cy.findByRole("treeitem", { name: "Pineapple" })); cy.createRoom({ name: "Orange" }) .as("roomO") - .then(() => cy.contains(".mx_RoomSublist", "Orange")); + .then(() => cy.findByRole("treeitem", { name: "Orange" })); // Given a list of Orange, Pineapple, Apple - if Pineapple is active and a message is sent in Apple, the list should // turn into Apple, Pineapple, Orange - the index position of Pineapple never changes even though the list should technically // be Apple, Orange Pineapple - only when you click on a different room do things reshuffle. // Select the Pineapple room - cy.contains(".mx_RoomTile", "Pineapple").click(); + cy.findByRole("treeitem", { name: "Pineapple" }).click(); checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); // Move Apple @@ -171,7 +171,7 @@ describe("Sliding Sync", () => { checkOrder(["Apple", "Pineapple", "Orange", "Test Room"]); // Select the Test Room - cy.contains(".mx_RoomTile", "Test Room").click(); + cy.findByRole("treeitem", { name: "Test Room" }).click(); // the rooms reshuffle to match reality checkOrder(["Apple", "Orange", "Pineapple", "Test Room"]); @@ -186,19 +186,22 @@ describe("Sliding Sync", () => { }); // check that there is an unread notification (grey) as 1 - cy.contains(".mx_RoomTile", "Test Room").contains(".mx_NotificationBadge_count", "1"); + cy.findByRole("treeitem", { name: "Test Room 1 unread message." }).contains(".mx_NotificationBadge_count", "1"); cy.get(".mx_NotificationBadge").should("not.have.class", "mx_NotificationBadge_highlighted"); // send an @mention: highlight count (red) should be 2. cy.all([cy.get("@roomId"), cy.get("@bob")]).then(([roomId, bob]) => { return bob.sendTextMessage(roomId, "Hello Sloth"); }); - cy.contains(".mx_RoomTile", "Test Room").contains(".mx_NotificationBadge_count", "2"); + cy.findByRole("treeitem", { name: "Test Room 2 unread messages including mentions." }).contains( + ".mx_NotificationBadge_count", + "2", + ); cy.get(".mx_NotificationBadge").should("have.class", "mx_NotificationBadge_highlighted"); // click on the room, the notif counts should disappear - cy.contains(".mx_RoomTile", "Test Room").click(); - cy.contains(".mx_RoomTile", "Test Room").should("not.have.class", "mx_NotificationBadge_count"); + cy.findByRole("treeitem", { name: "Test Room 2 unread messages including mentions." }).click(); + cy.findByRole("treeitem", { name: "Test Room" }).should("not.have.class", "mx_NotificationBadge_count"); }); it("should not show unread indicators", () => { @@ -206,7 +209,7 @@ describe("Sliding Sync", () => { createAndJoinBob(); // disable notifs in this room (TODO: CS API call?) - cy.contains(".mx_RoomTile", "Test Room") + cy.findByRole("treeitem", { name: "Test Room" }) .realHover() .findByRole("button", { name: "Notification options" }) .click(); @@ -224,12 +227,12 @@ describe("Sliding Sync", () => { // wait for this message to arrive, tell by the room list resorting checkOrder(["Test Room", "Dummy"]); - cy.contains(".mx_RoomTile", "Test Room").get(".mx_NotificationBadge").should("not.exist"); + cy.findByRole("treeitem", { name: "Test Room" }).get(".mx_NotificationBadge").should("not.exist"); }); it("should update user settings promptly", () => { cy.findByRole("button", { name: "User menu" }).click(); - cy.findByRole("button", { name: "All settings" }).click(); + cy.findByRole("menuitem", { name: "All settings" }).click(); cy.findByRole("button", { name: "Preferences" }).click(); cy.contains(".mx_SettingsFlag", "Show timestamps in 12 hour format") .should("exist") @@ -284,14 +287,13 @@ describe("Sliding Sync", () => { // wait for them all to be on the UI cy.get(".mx_RoomTile").should("have.length", 4); // due to the Test Room in beforeEach - cy.contains(".mx_RoomTile", "Join").click(); + cy.findByRole("treeitem", { name: "Join" }).click(); cy.findByRole("button", { name: "Accept" }).click(); checkOrder(["Join", "Test Room"]); - cy.get(".mx_RoomTile").within(() => { - cy.findByRole("button", { name: "Reject" }).click(); - }); + cy.findByRole("treeitem", { name: "Reject" }).click(); + cy.get(".mx_RoomView").within(() => { cy.findByRole("button", { name: "Reject" }).click(); }); @@ -301,7 +303,7 @@ describe("Sliding Sync", () => { // check the lists are correct checkOrder(["Join", "Test Room"]); - cy.contains(".mx_RoomSublist", "Invites") + cy.findByRole("group", { name: "Invites" }) .find(".mx_RoomTile_title") .should((elements) => { expect( @@ -332,8 +334,8 @@ describe("Sliding Sync", () => { cy.getClient().then((cli) => cli.setRoomTag(roomId, "m.favourite", { order: 0.5 })); }); - cy.contains('.mx_RoomSublist[aria-label="Favourites"] .mx_RoomTile', "Favourite DM").should("exist"); - cy.contains('.mx_RoomSublist[aria-label="People"] .mx_RoomTile', "Favourite DM").should("not.exist"); + cy.findByRole("group", { name: "Favourites" }).findByText("Favourite DM").should("exist"); + cy.findByRole("group", { name: "People" }).findByText("Favourite DM").should("not.exist"); }); // Regression test for a bug in SS mode, but would be useful to have in non-SS mode too. @@ -341,7 +343,7 @@ describe("Sliding Sync", () => { it("should clear the reply to field when swapping rooms", () => { cy.createRoom({ name: "Other Room" }) .as("roomA") - .then(() => cy.contains(".mx_RoomSublist", "Other Room")); + .then(() => cy.findByRole("treeitem", { name: "Other Room" })); cy.get("@roomId").then((roomId) => { return cy.sendEvent(roomId, null, "m.room.message", { body: "Hello world", @@ -349,7 +351,7 @@ describe("Sliding Sync", () => { }); }); // select the room - cy.contains(".mx_RoomTile", "Test Room").click(); + cy.findByRole("treeitem", { name: "Test Room" }).click(); cy.get(".mx_ReplyPreview").should("not.exist"); // click reply-to on the Hello World message cy.get(".mx_EventTile") @@ -363,11 +365,11 @@ describe("Sliding Sync", () => { // check it's visible cy.get(".mx_ReplyPreview").should("exist"); // now click Other Room - cy.contains(".mx_RoomTile", "Other Room").click(); + cy.findByRole("treeitem", { name: "Other Room" }).click(); // ensure the reply-to disappears cy.get(".mx_ReplyPreview").should("not.exist"); // click back - cy.contains(".mx_RoomTile", "Test Room").click(); + cy.findByRole("treeitem", { name: "Test Room" }).click(); // ensure the reply-to reappears cy.get(".mx_ReplyPreview").should("exist"); }); @@ -395,7 +397,7 @@ describe("Sliding Sync", () => { }); }); // select the room - cy.contains(".mx_RoomTile", "Test Room").click(); + cy.findByRole("treeitem", { name: "Test Room" }).click(); cy.get(".mx_ReplyPreview").should("not.exist"); // click reply-to on the Reply to me message cy.get(".mx_EventTile") @@ -423,15 +425,15 @@ describe("Sliding Sync", () => { cy.createRoom({ name: "Apple" }) .as("roomA") .then((roomId) => (roomAId = roomId)) - .then(() => cy.contains(".mx_RoomSublist", "Apple")); + .then(() => cy.findByRole("treeitem", { name: "Apple" })); cy.createRoom({ name: "Pineapple" }) .as("roomP") .then((roomId) => (roomPId = roomId)) - .then(() => cy.contains(".mx_RoomSublist", "Pineapple")); + .then(() => cy.findByRole("treeitem", { name: "Pineapple" })); cy.createRoom({ name: "Orange" }) .as("roomO") - .then(() => cy.contains(".mx_RoomSublist", "Orange")); + .then(() => cy.findByRole("treeitem", { name: "Orange" })); // Intercept all calls to /sync cy.intercept({ method: "POST", url: "**/sync*" }).as("syncRequest"); @@ -448,7 +450,7 @@ describe("Sliding Sync", () => { }; // Select the Test Room - cy.contains(".mx_RoomTile", "Apple").click(); + cy.findByRole("treeitem", { name: "Apple" }).click(); // and wait for cypress to get the result as alias cy.wait("@syncRequest").then((interception) => { @@ -457,11 +459,11 @@ describe("Sliding Sync", () => { }); // Switch to another room - cy.contains(".mx_RoomTile", "Pineapple").click(); + cy.findByRole("treeitem", { name: "Pineapple" }).click(); cy.wait("@syncRequest").then((interception) => assertUnsubExists(interception, roomPId, roomAId)); // And switch to even another room - cy.contains(".mx_RoomTile", "Apple").click(); + cy.findByRole("treeitem", { name: "Apple" }).click(); cy.wait("@syncRequest").then((interception) => assertUnsubExists(interception, roomPId, roomAId)); // TODO: Add tests for encrypted rooms From f97e6c1142a5df351ecae069ff73bcc81a78ece1 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 14 Apr 2023 19:37:59 +0000 Subject: [PATCH 03/10] Use the library more - 'should render the Rooms list in reverse chronological order by default and allowing sorting A-Z' Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 51e5f624237..7e3536b36eb 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -105,8 +105,11 @@ describe("Sliding Sync", () => { cy.createRoom({ name: "Apple" }).then(() => cy.findByRole("treeitem", { name: "Apple" })); cy.createRoom({ name: "Pineapple" }).then(() => cy.findByRole("treeitem", { name: "Pineapple" })); cy.createRoom({ name: "Orange" }).then(() => cy.findByRole("treeitem", { name: "Orange" })); - // check the rooms are in the right order - cy.get(".mx_RoomTile").should("have.length", 4); // due to the Test Room in beforeEach + + cy.get(".mx_RoomSublist_tiles").within(() => { + cy.findAllByRole("treeitem").should("have.length", 4); // due to the Test Room in beforeEach + }); + checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); cy.findByRole("group", { name: "Rooms" }).within(() => { @@ -116,7 +119,11 @@ describe("Sliding Sync", () => { // force click as the radio button's size is zero cy.findByRole("menuitemradio", { name: "A-Z" }).click({ force: true }); - cy.get(".mx_StyledRadioButton_checked").findByText("A-Z").should("exist"); + // Assert that the radio button is checked + cy.get(".mx_StyledRadioButton_checked").within(() => { + cy.findByText("A-Z").should("exist"); + }); + checkOrder(["Apple", "Orange", "Pineapple", "Test Room"]); }); From b80128e8207434ef4b8677a9856c16bd4e21bc88 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 14 Apr 2023 20:09:21 +0000 Subject: [PATCH 04/10] Use cy.findAllByRole("treeitem") Note the Test room is excluded from being counted thanks to within(). Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 7e3536b36eb..6a56bf4e7a4 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -292,10 +292,15 @@ describe("Sliding Sync", () => { }); // wait for them all to be on the UI - cy.get(".mx_RoomTile").should("have.length", 4); // due to the Test Room in beforeEach + cy.findByRole("group", { name: "Invites" }).within(() => { + cy.findAllByRole("treeitem").should("have.length", 3); + }); cy.findByRole("treeitem", { name: "Join" }).click(); - cy.findByRole("button", { name: "Accept" }).click(); + + cy.get(".mx_RoomView").within(() => { + cy.findByRole("button", { name: "Accept" }).click(); + }); checkOrder(["Join", "Test Room"]); @@ -306,7 +311,9 @@ describe("Sliding Sync", () => { }); // wait for the rejected room to disappear - cy.get(".mx_RoomTile").should("have.length", 3); + cy.findByRole("group", { name: "Invites" }).within(() => { + cy.findAllByRole("treeitem").should("have.length", 2); + }); // check the lists are correct checkOrder(["Join", "Test Room"]); @@ -327,7 +334,10 @@ describe("Sliding Sync", () => { }); // wait for the rescind to take effect and check the joined list once more - cy.get(".mx_RoomTile").should("have.length", 2); + cy.findByRole("group", { name: "Rooms" }).within(() => { + cy.findAllByRole("treeitem").should("have.length", 2); + }); + checkOrder(["Join", "Test Room"]); }); From b4710d2356ebbeb2776aebbaa5e914721839eec4 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Fri, 14 Apr 2023 20:26:57 +0000 Subject: [PATCH 05/10] Rename the rooms to avoid confusion Since it has been unclear "Join" etc. is a verb or a room name, the room names are changed as below: - Join -> Room to Join - Reject -> Room to Reject (the invite) - Rescind -> Room to Rescind (the invite) Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 47 ++++++++++++++++-------- 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 6a56bf4e7a4..10668fb27f0 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -275,9 +275,9 @@ describe("Sliding Sync", () => { .then((bob) => { bobClient = bob; return Promise.all([ - bob.createRoom({ name: "Join" }), - bob.createRoom({ name: "Reject" }), - bob.createRoom({ name: "Rescind" }), + bob.createRoom({ name: "Room to Join" }), + bob.createRoom({ name: "Room to Reject" }), + bob.createRoom({ name: "Room to Rescind" }), ]); }) .then(([join, reject, rescind]) => { @@ -291,32 +291,45 @@ describe("Sliding Sync", () => { ]); }); - // wait for them all to be on the UI cy.findByRole("group", { name: "Invites" }).within(() => { - cy.findAllByRole("treeitem").should("have.length", 3); + // Exclude headerText + cy.get(".mx_RoomSublist_tiles").within(() => { + + // Wait for them all to be on the UI + cy.findAllByRole("treeitem").should("have.length", 3); + }); }); - cy.findByRole("treeitem", { name: "Join" }).click(); + // Select the room to join + cy.findByRole("treeitem", { name: "Room to Join" }).click(); cy.get(".mx_RoomView").within(() => { + // Accept the invite cy.findByRole("button", { name: "Accept" }).click(); }); - checkOrder(["Join", "Test Room"]); + checkOrder(["Room to Join", "Test Room"]); - cy.findByRole("treeitem", { name: "Reject" }).click(); + // Select the room to reject + cy.findByRole("treeitem", { name: "Room to Reject" }).click(); cy.get(".mx_RoomView").within(() => { + // Reject the invite cy.findByRole("button", { name: "Reject" }).click(); }); - // wait for the rejected room to disappear cy.findByRole("group", { name: "Invites" }).within(() => { - cy.findAllByRole("treeitem").should("have.length", 2); + // Exclude headerText + cy.get(".mx_RoomSublist_tiles").within(() => { + + // Wait for the rejected room to disappear + cy.findAllByRole("treeitem").should("have.length", 2); + }); }); // check the lists are correct - checkOrder(["Join", "Test Room"]); + checkOrder(["Room to Join", "Test Room"]); + cy.findByRole("group", { name: "Invites" }) .find(".mx_RoomTile_title") .should((elements) => { @@ -325,7 +338,7 @@ describe("Sliding Sync", () => { return e.textContent; }), "rooms are sorted", - ).to.deep.equal(["Rescind"]); + ).to.deep.equal(["Room to Rescind"]); }); // now rescind the invite @@ -333,12 +346,16 @@ describe("Sliding Sync", () => { return bob.kick(roomRescind, clientUserId); }); - // wait for the rescind to take effect and check the joined list once more cy.findByRole("group", { name: "Rooms" }).within(() => { - cy.findAllByRole("treeitem").should("have.length", 2); + // Exclude headerText + cy.get(".mx_RoomSublist_tiles").within(() => { + + // Wait for the rescind to take effect and check the joined list once more + cy.findAllByRole("treeitem").should("have.length", 2); + }); }); - checkOrder(["Join", "Test Room"]); + checkOrder(["Room to Join", "Test Room"]); }); it("should show a favourite DM only in the favourite sublist", () => { From 193a47de4c0fac4139d7c689fa020d6f0acc6819 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 15 Apr 2023 08:14:43 +0000 Subject: [PATCH 06/10] Specify ARIA label for the room sublist headers Have different ARIA labels specified for "mx_RoomSublist" and "mx_RoomSublist_headerContainer" to clarify the structure. Change the test to check the new ARIA label. Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 2 +- src/components/views/rooms/RoomSublist.tsx | 4 +++- src/i18n/strings/en_EN.json | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 10668fb27f0..7be04f93251 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -113,7 +113,7 @@ describe("Sliding Sync", () => { checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); cy.findByRole("group", { name: "Rooms" }).within(() => { - cy.get(".mx_RoomSublist_stickable").realHover().findByRole("button", { name: "List options" }).click(); + cy.get("[aria-label='Header of Rooms']").realHover().findByRole("button", { name: "List options" }).click(); }); // force click as the radio button's size is zero diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 6e471dde428..141d4c10ba2 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -693,7 +693,9 @@ export default class RoomSublist extends React.Component { className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus} - aria-label={this.props.label} + aria-label={_t("Header of %(roomHeaderLabel)s", { + roomHeaderLabel: this.props.label, + })} >
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5f6ced12911..52124be040c 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2119,6 +2119,7 @@ "Activity": "Activity", "A-Z": "A-Z", "List options": "List options", + "Header of %(roomHeaderLabel)s": "Header of %(roomHeaderLabel)s", "Show %(count)s more|other": "Show %(count)s more", "Show %(count)s more|one": "Show %(count)s more", "Show less": "Show less", From fb0180059d8c924f9f54693d577180d8ce46c4fd Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 15 Apr 2023 10:30:12 +0000 Subject: [PATCH 07/10] lint Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 7be04f93251..22764eab655 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -294,7 +294,6 @@ describe("Sliding Sync", () => { cy.findByRole("group", { name: "Invites" }).within(() => { // Exclude headerText cy.get(".mx_RoomSublist_tiles").within(() => { - // Wait for them all to be on the UI cy.findAllByRole("treeitem").should("have.length", 3); }); @@ -321,7 +320,6 @@ describe("Sliding Sync", () => { cy.findByRole("group", { name: "Invites" }).within(() => { // Exclude headerText cy.get(".mx_RoomSublist_tiles").within(() => { - // Wait for the rejected room to disappear cy.findAllByRole("treeitem").should("have.length", 2); }); @@ -349,7 +347,6 @@ describe("Sliding Sync", () => { cy.findByRole("group", { name: "Rooms" }).within(() => { // Exclude headerText cy.get(".mx_RoomSublist_tiles").within(() => { - // Wait for the rescind to take effect and check the joined list once more cy.findAllByRole("treeitem").should("have.length", 2); }); From 1e6f23b5c57612021afaf13b7760c840d5fd060c Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Sat, 15 Apr 2023 11:08:25 +0000 Subject: [PATCH 08/10] Fix a race condition Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 22764eab655..a432b11519a 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -385,10 +385,9 @@ describe("Sliding Sync", () => { cy.findByRole("treeitem", { name: "Test Room" }).click(); cy.get(".mx_ReplyPreview").should("not.exist"); // click reply-to on the Hello World message - cy.get(".mx_EventTile") - .last() + cy.get(".mx_EventTile_last") .within(() => { - cy.findByText("Hello world"); + cy.findByText("Hello world", { timeout: 1000 }); }) .realHover() .findByRole("button", { name: "Reply" }) From 32c848ac620188104cc9f021676f4c1ace588d75 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 20 Apr 2023 09:36:18 +0000 Subject: [PATCH 09/10] Revert "Specify ARIA label for the room sublist headers" This reverts commit 193a47de4c0fac4139d7c689fa020d6f0acc6819. Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 2 +- src/components/views/rooms/RoomSublist.tsx | 4 +--- src/i18n/strings/en_EN.json | 1 - 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index a432b11519a..7846313930b 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -113,7 +113,7 @@ describe("Sliding Sync", () => { checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); cy.findByRole("group", { name: "Rooms" }).within(() => { - cy.get("[aria-label='Header of Rooms']").realHover().findByRole("button", { name: "List options" }).click(); + cy.get(".mx_RoomSublist_stickable").realHover().findByRole("button", { name: "List options" }).click(); }); // force click as the radio button's size is zero diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index 141d4c10ba2..6e471dde428 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -693,9 +693,7 @@ export default class RoomSublist extends React.Component { className={classes} onKeyDown={this.onHeaderKeyDown} onFocus={onFocus} - aria-label={_t("Header of %(roomHeaderLabel)s", { - roomHeaderLabel: this.props.label, - })} + aria-label={this.props.label} >
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 52124be040c..5f6ced12911 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2119,7 +2119,6 @@ "Activity": "Activity", "A-Z": "A-Z", "List options": "List options", - "Header of %(roomHeaderLabel)s": "Header of %(roomHeaderLabel)s", "Show %(count)s more|other": "Show %(count)s more", "Show %(count)s more|one": "Show %(count)s more", "Show less": "Show less", From 2e1a3c121e01d8002284959f8eefbd91f5eace71 Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 20 Apr 2023 12:51:45 +0000 Subject: [PATCH 10/10] Fix realHover() target Signed-off-by: Suguru Hirahara --- cypress/e2e/sliding-sync/sliding-sync.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/cypress/e2e/sliding-sync/sliding-sync.ts b/cypress/e2e/sliding-sync/sliding-sync.ts index 7846313930b..6caa01a9903 100644 --- a/cypress/e2e/sliding-sync/sliding-sync.ts +++ b/cypress/e2e/sliding-sync/sliding-sync.ts @@ -113,7 +113,10 @@ describe("Sliding Sync", () => { checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); cy.findByRole("group", { name: "Rooms" }).within(() => { - cy.get(".mx_RoomSublist_stickable").realHover().findByRole("button", { name: "List options" }).click(); + cy.get(".mx_RoomSublist_headerContainer") + .realHover() + .findByRole("button", { name: "List options" }) + .click(); }); // force click as the radio button's size is zero