imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update sliding-sync.spec.ts - use Cypress Testing Library (#10618)

Browse source 
* Update sliding-sync.spec.ts - use Cypress Testing Library

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* 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 <luixxiul@users.noreply.github.com>

* 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 <luixxiul@users.noreply.github.com>

* Use cy.findAllByRole("treeitem")

Note the Test room is excluded from being counted thanks to within().

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* 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 <luixxiul@users.noreply.github.com>

* 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 <luixxiul@users.noreply.github.com>

* lint

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix a race condition

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Revert "Specify ARIA label for the room sublist headers"

This reverts commit 193a47de4c0fac4139d7c689fa020d6f0acc6819.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Fix realHover() target

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

---------

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2023-04-21 09:32:26 +00:00 • committed by GitHub
parent 7a914e73f8
commit 05ef1d5560
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 122 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

187
cypress/e2e/sliding-sync/sliding-sync.ts
View file

@ -62,7 +62,7 @@ describe("Sliding Sync", () => {
// assert order // assert order
const checkOrder = (wantOrder: string[]) => { const checkOrder = (wantOrder: string[]) => {
cy.contains(".mx_RoomSublist", "Rooms") cy.findByRole("group", { name: "Rooms" })
.find(".mx_RoomTile_title") .find(".mx_RoomTile_title")
.should((elements) => { .should((elements) => {
expect( expect(
@ -102,16 +102,31 @@ describe("Sliding Sync", () => {
it("should render the Rooms list in reverse chronological order by default and allowing sorting A-Z", () => { 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 // create rooms and check room names are correct
cy.createRoom({ name: "Apple" }).then(() => cy.contains(".mx_RoomSublist", "Apple")); cy.createRoom({ name: "Apple" }).then(() => cy.findByRole("treeitem", { name: "Apple" }));
cy.createRoom({ name: "Pineapple" }).then(() => cy.contains(".mx_RoomSublist", "Pineapple")); cy.createRoom({ name: "Pineapple" }).then(() => cy.findByRole("treeitem", { name: "Pineapple" }));
cy.createRoom({ name: "Orange" }).then(() => cy.contains(".mx_RoomSublist", "Orange")); 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"]); checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]);
cy.contains(".mx_RoomSublist", "Rooms").find(".mx_RoomSublist_menuButton").click({ force: true }); cy.findByRole("group", { name: "Rooms" }).within(() => {
cy.contains("A-Z").click(); cy.get(".mx_RoomSublist_headerContainer")
cy.get(".mx_StyledRadioButton_checked").should("contain.text", "A-Z"); .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 });
// 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"]); checkOrder(["Apple", "Orange", "Pineapple", "Test Room"]);
}); });
@ -119,16 +134,16 @@ describe("Sliding Sync", () => {
// create rooms and check room names are correct // create rooms and check room names are correct
cy.createRoom({ name: "Apple" }) cy.createRoom({ name: "Apple" })
.as("roomA") .as("roomA")
.then(() => cy.contains(".mx_RoomSublist", "Apple")); .then(() => cy.findByRole("treeitem", { name: "Apple" }));
cy.createRoom({ name: "Pineapple" }) cy.createRoom({ name: "Pineapple" })
.as("roomP") .as("roomP")
.then(() => cy.contains(".mx_RoomSublist", "Pineapple")); .then(() => cy.findByRole("treeitem", { name: "Pineapple" }));
cy.createRoom({ name: "Orange" }) cy.createRoom({ name: "Orange" })
.as("roomO") .as("roomO")
.then(() => cy.contains(".mx_RoomSublist", "Orange")); .then(() => cy.findByRole("treeitem", { name: "Orange" }));
// Select the Test Room // Select the Test Room
cy.contains(".mx_RoomTile", "Test Room").click(); cy.findByRole("treeitem", { name: "Test Room" }).click();
checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]);
bumpRoom("@roomA"); bumpRoom("@roomA");
@ -145,20 +160,20 @@ describe("Sliding Sync", () => {
// create rooms and check room names are correct // create rooms and check room names are correct
cy.createRoom({ name: "Apple" }) cy.createRoom({ name: "Apple" })
.as("roomA") .as("roomA")
.then(() => cy.contains(".mx_RoomSublist", "Apple")); .then(() => cy.findByRole("treeitem", { name: "Apple" }));
cy.createRoom({ name: "Pineapple" }) cy.createRoom({ name: "Pineapple" })
.as("roomP") .as("roomP")
.then(() => cy.contains(".mx_RoomSublist", "Pineapple")); .then(() => cy.findByRole("treeitem", { name: "Pineapple" }));
cy.createRoom({ name: "Orange" }) cy.createRoom({ name: "Orange" })
.as("roomO") .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 // 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 // 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. // be Apple, Orange Pineapple - only when you click on a different room do things reshuffle.
// Select the Pineapple room // Select the Pineapple room
cy.contains(".mx_RoomTile", "Pineapple").click(); cy.findByRole("treeitem", { name: "Pineapple" }).click();
checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]); checkOrder(["Orange", "Pineapple", "Apple", "Test Room"]);
// Move Apple // Move Apple
@ -166,7 +181,7 @@ describe("Sliding Sync", () => {
checkOrder(["Apple", "Pineapple", "Orange", "Test Room"]); checkOrder(["Apple", "Pineapple", "Orange", "Test Room"]);
// Select the 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 // the rooms reshuffle to match reality
checkOrder(["Apple", "Orange", "Pineapple", "Test Room"]); checkOrder(["Apple", "Orange", "Pineapple", "Test Room"]);
@ -181,19 +196,22 @@ describe("Sliding Sync", () => {
}); });
// check that there is an unread notification (grey) as 1 // 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"); cy.get(".mx_NotificationBadge").should("not.have.class", "mx_NotificationBadge_highlighted");
// send an @mention: highlight count (red) should be 2. // send an @mention: highlight count (red) should be 2.
cy.all([cy.get<string>("@roomId"), cy.get<MatrixClient>("@bob")]).then(([roomId, bob]) => { cy.all([cy.get<string>("@roomId"), cy.get<MatrixClient>("@bob")]).then(([roomId, bob]) => {
return bob.sendTextMessage(roomId, "Hello Sloth"); 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"); cy.get(".mx_NotificationBadge").should("have.class", "mx_NotificationBadge_highlighted");
// click on the room, the notif counts should disappear // click on the room, the notif counts should disappear
cy.contains(".mx_RoomTile", "Test Room").click(); cy.findByRole("treeitem", { name: "Test Room 2 unread messages including mentions." }).click();
cy.contains(".mx_RoomTile", "Test Room").should("not.have.class", "mx_NotificationBadge_count"); cy.findByRole("treeitem", { name: "Test Room" }).should("not.have.class", "mx_NotificationBadge_count");
}); });
it("should not show unread indicators", () => { it("should not show unread indicators", () => {
@ -201,8 +219,11 @@ describe("Sliding Sync", () => {
createAndJoinBob(); createAndJoinBob();
// disable notifs in this room (TODO: CS API call?) // disable notifs in this room (TODO: CS API call?)
cy.contains(".mx_RoomTile", "Test Room").find(".mx_RoomTile_notificationsButton").click({ force: true }); cy.findByRole("treeitem", { name: "Test Room" })
cy.contains("Mute room").click(); .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 // create a new room so we know when the message has been received as it'll re-shuffle the room list
cy.createRoom({ cy.createRoom({
@ -216,13 +237,13 @@ describe("Sliding Sync", () => {
// wait for this message to arrive, tell by the room list resorting // wait for this message to arrive, tell by the room list resorting
checkOrder(["Test Room", "Dummy"]); 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", () => { it("should update user settings promptly", () => {
cy.get(".mx_UserMenu_userAvatar").click(); cy.findByRole("button", { name: "User menu" }).click();
cy.contains("All settings").click(); cy.findByRole("menuitem", { name: "All settings" }).click();
cy.contains("Preferences").click(); cy.findByRole("button", { name: "Preferences" }).click();
cy.contains(".mx_SettingsFlag", "Show timestamps in 12 hour format") cy.contains(".mx_SettingsFlag", "Show timestamps in 12 hour format")
.should("exist") .should("exist")
.find(".mx_ToggleSwitch_on") .find(".mx_ToggleSwitch_on")
@ -257,9 +278,9 @@ describe("Sliding Sync", () => {
.then((bob) => { .then((bob) => {
bobClient = bob; bobClient = bob;
return Promise.all([ return Promise.all([
bob.createRoom({ name: "Join" }), bob.createRoom({ name: "Room to Join" }),
bob.createRoom({ name: "Reject" }), bob.createRoom({ name: "Room to Reject" }),
bob.createRoom({ name: "Rescind" }), bob.createRoom({ name: "Room to Rescind" }),
]); ]);
}) })
.then(([join, reject, rescind]) => { .then(([join, reject, rescind]) => {
@ -273,23 +294,44 @@ describe("Sliding Sync", () => {
]); ]);
}); });
// wait for them all to be on the UI cy.findByRole("group", { name: "Invites" }).within(() => {
cy.get(".mx_RoomTile").should("have.length", 4); // due to the Test Room in beforeEach // 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.contains(".mx_RoomTile", "Join").click(); // Select the room to join
cy.contains(".mx_AccessibleButton", "Accept").click(); cy.findByRole("treeitem", { name: "Room to Join" }).click();
checkOrder(["Join", "Test Room"]); cy.get(".mx_RoomView").within(() => {
// Accept the invite
cy.findByRole("button", { name: "Accept" }).click();
});
cy.contains(".mx_RoomTile", "Reject").click(); checkOrder(["Room to Join", "Test Room"]);
cy.contains(".mx_RoomView .mx_AccessibleButton", "Reject").click();
// wait for the rejected room to disappear // Select the room to reject
cy.get(".mx_RoomTile").should("have.length", 3); cy.findByRole("treeitem", { name: "Room to Reject" }).click();
cy.get(".mx_RoomView").within(() => {
// Reject the invite
cy.findByRole("button", { name: "Reject" }).click();
});
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);
});
});
// check the lists are correct // check the lists are correct
checkOrder(["Join", "Test Room"]); checkOrder(["Room to Join", "Test Room"]);
cy.contains(".mx_RoomSublist", "Invites")
cy.findByRole("group", { name: "Invites" })
.find(".mx_RoomTile_title") .find(".mx_RoomTile_title")
.should((elements) => { .should((elements) => {
expect( expect(
@ -297,7 +339,7 @@ describe("Sliding Sync", () => {
return e.textContent; return e.textContent;
}), }),
"rooms are sorted", "rooms are sorted",
).to.deep.equal(["Rescind"]); ).to.deep.equal(["Room to Rescind"]);
}); });
// now rescind the invite // now rescind the invite
@ -305,9 +347,15 @@ describe("Sliding Sync", () => {
return bob.kick(roomRescind, clientUserId); 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.get(".mx_RoomTile").should("have.length", 2); // Exclude headerText
checkOrder(["Join", "Test Room"]); 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(["Room to Join", "Test Room"]);
}); });
it("should show a favourite DM only in the favourite sublist", () => { it("should show a favourite DM only in the favourite sublist", () => {
@ -320,8 +368,8 @@ describe("Sliding Sync", () => {
cy.getClient().then((cli) => cli.setRoomTag(roomId, "m.favourite", { order: 0.5 })); 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.findByRole("group", { name: "Favourites" }).findByText("Favourite DM").should("exist");
cy.contains('.mx_RoomSublist[aria-label="People"] .mx_RoomTile', "Favourite DM").should("not.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. // Regression test for a bug in SS mode, but would be useful to have in non-SS mode too.
@ -329,7 +377,7 @@ describe("Sliding Sync", () => {
it("should clear the reply to field when swapping rooms", () => { it("should clear the reply to field when swapping rooms", () => {
cy.createRoom({ name: "Other Room" }) cy.createRoom({ name: "Other Room" })
.as("roomA") .as("roomA")
.then(() => cy.contains(".mx_RoomSublist", "Other Room")); .then(() => cy.findByRole("treeitem", { name: "Other Room" }));
cy.get<string>("@roomId").then((roomId) => { cy.get<string>("@roomId").then((roomId) => {
return cy.sendEvent(roomId, null, "m.room.message", { return cy.sendEvent(roomId, null, "m.room.message", {
body: "Hello world", body: "Hello world",
@ -337,20 +385,24 @@ describe("Sliding Sync", () => {
}); });
}); });
// select the room // select the room
cy.contains(".mx_RoomTile", "Test Room").click(); cy.findByRole("treeitem", { name: "Test Room" }).click();
cy.get(".mx_ReplyPreview").should("not.exist"); cy.get(".mx_ReplyPreview").should("not.exist");
// click reply-to on the Hello World message // click reply-to on the Hello World message
cy.contains(".mx_EventTile", "Hello world") cy.get(".mx_EventTile_last")
.find('.mx_AccessibleButton[aria-label="Reply"]') .within(() => {
.click({ force: true }); cy.findByText("Hello world", { timeout: 1000 });
})
.realHover()
.findByRole("button", { name: "Reply" })
.click();
// check it's visible // check it's visible
cy.get(".mx_ReplyPreview").should("exist"); cy.get(".mx_ReplyPreview").should("exist");
// now click Other Room // now click Other Room
cy.contains(".mx_RoomTile", "Other Room").click(); cy.findByRole("treeitem", { name: "Other Room" }).click();
// ensure the reply-to disappears // ensure the reply-to disappears
cy.get(".mx_ReplyPreview").should("not.exist"); cy.get(".mx_ReplyPreview").should("not.exist");
// click back // click back
cy.contains(".mx_RoomTile", "Test Room").click(); cy.findByRole("treeitem", { name: "Test Room" }).click();
// ensure the reply-to reappears // ensure the reply-to reappears
cy.get(".mx_ReplyPreview").should("exist"); cy.get(".mx_ReplyPreview").should("exist");
}); });
@ -378,12 +430,17 @@ describe("Sliding Sync", () => {
}); });
}); });
// select the room // select the room
cy.contains(".mx_RoomTile", "Test Room").click(); cy.findByRole("treeitem", { name: "Test Room" }).click();
cy.get(".mx_ReplyPreview").should("not.exist"); cy.get(".mx_ReplyPreview").should("not.exist");
// click reply-to on the Reply to me message // click reply-to on the Reply to me message
cy.contains(".mx_EventTile", "Reply to me") cy.get(".mx_EventTile")
.find('.mx_AccessibleButton[aria-label="Reply"]') .last()
.click({ force: true }); .within(() => {
cy.findByText("Reply to me");
})
.realHover()
.findByRole("button", { name: "Reply" })
.click();
// check it's visible // check it's visible
cy.get(".mx_ReplyPreview").should("exist"); cy.get(".mx_ReplyPreview").should("exist");
// now click on the permalink for Permalink me // now click on the permalink for Permalink me
@ -401,15 +458,15 @@ describe("Sliding Sync", () => {
cy.createRoom({ name: "Apple" }) cy.createRoom({ name: "Apple" })
.as("roomA") .as("roomA")
.then((roomId) => (roomAId = roomId)) .then((roomId) => (roomAId = roomId))
.then(() => cy.contains(".mx_RoomSublist", "Apple")); .then(() => cy.findByRole("treeitem", { name: "Apple" }));
cy.createRoom({ name: "Pineapple" }) cy.createRoom({ name: "Pineapple" })
.as("roomP") .as("roomP")
.then((roomId) => (roomPId = roomId)) .then((roomId) => (roomPId = roomId))
.then(() => cy.contains(".mx_RoomSublist", "Pineapple")); .then(() => cy.findByRole("treeitem", { name: "Pineapple" }));
cy.createRoom({ name: "Orange" }) cy.createRoom({ name: "Orange" })
.as("roomO") .as("roomO")
.then(() => cy.contains(".mx_RoomSublist", "Orange")); .then(() => cy.findByRole("treeitem", { name: "Orange" }));
// Intercept all calls to /sync // Intercept all calls to /sync
cy.intercept({ method: "POST", url: "**/sync*" }).as("syncRequest"); cy.intercept({ method: "POST", url: "**/sync*" }).as("syncRequest");
@ -426,7 +483,7 @@ describe("Sliding Sync", () => {
}; };
// Select the Test Room // 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 // and wait for cypress to get the result as alias
cy.wait("@syncRequest").then((interception) => { cy.wait("@syncRequest").then((interception) => {
@ -435,11 +492,11 @@ describe("Sliding Sync", () => {
}); });
// Switch to another room // 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)); cy.wait("@syncRequest").then((interception) => assertUnsubExists(interception, roomPId, roomAId));
// And switch to even another room // 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)); cy.wait("@syncRequest").then((interception) => assertUnsubExists(interception, roomPId, roomAId));
// TODO: Add tests for encrypted rooms // TODO: Add tests for encrypted rooms