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

Commit 0d2af83

Browse files
luixxiulluixxiul
authored
Add E2E test: invite-dialog.spec.ts (#10693)
* Add `invite-dialog.spec.ts` Signed-off-by: Suguru Hirahara <[email protected]> * Apply the latest status The ARIA role of the buttons in 'mx_HeaderButtons' was recently changed from 'tab' to 'button' Signed-off-by: Suguru Hirahara <[email protected]> --------- Signed-off-by: Suguru Hirahara <[email protected]>
1 parent 9fc4410 commit 0d2af83

File tree

2 files changed

+181
-2
lines changed

2 files changed

+181
-2
lines changed

‎cypress/e2e/invite/invite-dialog.spec.ts

+174
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/*
2+
Copyright 2023 Suguru Hirahara
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
import type { MatrixClient } from "matrix-js-sdk/src/client";
18+
import { HomeserverInstance } from "../../plugins/utils/homeserver";
19+
20+
describe("Invite dialog", function () {
21+
let homeserver: HomeserverInstance;
22+
let bot: MatrixClient;
23+
const botName = "BotAlice";
24+
25+
beforeEach(() => {
26+
cy.startHomeserver("default").then((data) => {
27+
homeserver = data;
28+
cy.initTestUser(homeserver, "Hanako");
29+
30+
cy.getBot(homeserver, { displayName: botName, autoAcceptInvites: true }).then((_bot) => {
31+
bot = _bot;
32+
});
33+
});
34+
});
35+
36+
afterEach(() => {
37+
cy.stopHomeserver(homeserver);
38+
});
39+
40+
it("should support inviting a user to a room", () => {
41+
// Create and view a room
42+
cy.createRoom({ name: "Test Room" }).viewRoomByName("Test Room");
43+
44+
// Assert that the room was configured
45+
cy.findByText("Hanako created and configured the room.").should("exist");
46+
47+
// Open the room info panel
48+
cy.findByRole("button", { name: "Room info" }).click();
49+
50+
// Click "People" button on the panel
51+
// Regex pattern due to the string of "mx_BaseCard_Button_sublabel"
52+
cy.findByRole("button", { name: /People/ }).click();
53+
54+
cy.get(".mx_BaseCard_header").within(() => {
55+
// Click "Invite to this room" button
56+
// Regex pattern due to "mx_MemberList_invite span::before"
57+
cy.findByRole("button", { name: /Invite to this room/ }).click();
58+
});
59+
60+
cy.get(".mx_InviteDialog_other").within(() => {
61+
cy.get(".mx_Dialog_header .mx_Dialog_title").within(() => {
62+
// Assert that the header is rendered
63+
cy.findByText("Invite to Test Room").should("exist");
64+
});
65+
66+
// Assert that the bar is rendered
67+
cy.get(".mx_InviteDialog_addressBar").should("exist");
68+
});
69+
70+
// TODO: unhide userId
71+
const percyCSS = ".mx_InviteDialog_helpText_userId { visibility: hidden !important; }";
72+
73+
// Take a snapshot of the invite dialog including its wrapper
74+
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Room (without a user)", { percyCSS });
75+
76+
cy.get(".mx_InviteDialog_other").within(() => {
77+
cy.get(".mx_InviteDialog_identityServer").should("not.exist");
78+
79+
cy.findByTestId("invite-dialog-input").type(bot.getUserId());
80+
81+
// Assert that notification about identity servers appears after typing userId
82+
cy.get(".mx_InviteDialog_identityServer").should("exist");
83+
84+
cy.get(".mx_InviteDialog_tile_nameStack").within(() => {
85+
cy.get(".mx_InviteDialog_tile_nameStack_userId").within(() => {
86+
// Assert that the bot id is rendered properly
87+
cy.findByText(bot.getUserId()).should("exist");
88+
});
89+
90+
cy.get(".mx_InviteDialog_tile_nameStack_name").within(() => {
91+
cy.findByText(botName).click();
92+
});
93+
});
94+
95+
cy.get(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").within(() => {
96+
cy.findByText(botName).should("exist");
97+
});
98+
});
99+
100+
// Take a snapshot of the invite dialog with a user pill
101+
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Room (with a user pill)", { percyCSS });
102+
103+
cy.get(".mx_InviteDialog_other").within(() => {
104+
// Invite the bot
105+
cy.findByRole("button", { name: "Invite" }).click();
106+
});
107+
108+
// Assert that the invite dialog disappears
109+
cy.get(".mx_InviteDialog_other").should("not.exist");
110+
111+
// Assert that they were invited and joined
112+
cy.findByText(`${botName} joined the room`).should("exist");
113+
});
114+
115+
it("should support inviting a user to Direct Messages", () => {
116+
cy.get(".mx_RoomList").within(() => {
117+
cy.findByRole("button", { name: "Start chat" }).click();
118+
});
119+
120+
cy.get(".mx_InviteDialog_other").within(() => {
121+
cy.get(".mx_Dialog_header .mx_Dialog_title").within(() => {
122+
// Assert that the header is rendered
123+
cy.findByText("Direct Messages").should("exist");
124+
});
125+
126+
// Assert that the bar is rendered
127+
cy.get(".mx_InviteDialog_addressBar").should("exist");
128+
});
129+
130+
// TODO: unhide userId and invite link
131+
const percyCSS =
132+
".mx_InviteDialog_footer_link, .mx_InviteDialog_helpText_userId { visibility: hidden !important; }";
133+
134+
// Take a snapshot of the invite dialog including its wrapper
135+
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Direct Messages (without a user)", {
136+
percyCSS,
137+
});
138+
139+
cy.get(".mx_InviteDialog_other").within(() => {
140+
cy.findByTestId("invite-dialog-input").type(bot.getUserId());
141+
142+
cy.get(".mx_InviteDialog_tile_nameStack").within(() => {
143+
cy.findByText(bot.getUserId()).should("exist");
144+
cy.findByText(botName).click();
145+
});
146+
147+
cy.get(".mx_InviteDialog_userTile_pill .mx_InviteDialog_userTile_name").within(() => {
148+
cy.findByText(botName).should("exist");
149+
});
150+
});
151+
152+
// Take a snapshot of the invite dialog with a user pill
153+
cy.get(".mx_Dialog_wrapper").percySnapshotElement("Invite Dialog - Direct Messages (with a user pill)", {
154+
percyCSS,
155+
});
156+
157+
cy.get(".mx_InviteDialog_other").within(() => {
158+
// Open a direct message UI
159+
cy.findByRole("button", { name: "Go" }).click();
160+
});
161+
162+
// Assert that the invite dialog disappears
163+
cy.get(".mx_InviteDialog_other").should("not.exist");
164+
165+
// Send a message to invite the bots
166+
cy.getComposer().type("Hello{enter}");
167+
168+
// Assert that they were invited and joined
169+
cy.findByText(`${botName} joined the room`).should("exist");
170+
171+
// Assert that the message is displayed at the bottom
172+
cy.get(".mx_EventTile_last").findByText("Hello").should("exist");
173+
});
174+
});

‎src/components/views/dialogs/InviteDialog.tsx

+7-2
Original file line numberDiff line numberDiff line change
@@ -1337,7 +1337,7 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
13371337
<div className="mx_InviteDialog_footer">
13381338
<h3>{_t("Or send invite link")}</h3>
13391339
<CopyableText getTextToCopy={() => makeUserPermalink(MatrixClientPeg.get().getUserId()!)}>
1340-
<a href={link} onClick={this.onLinkClick}>
1340+
<a className="mx_InviteDialog_footer_link" href={link} onClick={this.onLinkClick}>
13411341
{link}
13421342
</a>
13431343
</CopyableText>
@@ -1385,7 +1385,12 @@ export default class InviteDialog extends React.PureComponent<Props, IInviteDial
13851385
{},
13861386
{
13871387
userId: () => (
1388-
<a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">
1388+
<a
1389+
className="mx_InviteDialog_helpText_userId"
1390+
href={makeUserPermalink(userId)}
1391+
rel="noreferrer noopener"
1392+
target="_blank"
1393+
>
13891394
{userId}
13901395
</a>
13911396
),

0 commit comments

Comments
 (0)