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

Commit be0f4a1

Browse files
author
Kerry
authored
add cypress test case for simple poll flow (#9073)
* add cypress test case for simple poll flow * tidy comments * actually correct comments * add polls x thread test * tweak comments * pr improvements
1 parent fa1bff6 commit be0f4a1

File tree

3 files changed

+298
-0
lines changed

3 files changed

+298
-0
lines changed

‎cypress/e2e/15-polls/polls.spec.ts‎

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
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+
/// <reference types="cypress" />
18+
19+
import { PollResponseEvent } from "matrix-events-sdk";
20+
21+
import { SynapseInstance } from "../../plugins/synapsedocker";
22+
import { MatrixClient } from "../../global";
23+
import Chainable = Cypress.Chainable;
24+
25+
const hideTimestampCSS = ".mx_MessageTimestamp { visibility: hidden !important; }";
26+
27+
describe("Polls", () => {
28+
let synapse: SynapseInstance;
29+
30+
type CreatePollOptions = {
31+
title: string;
32+
options: string[];
33+
};
34+
const createPoll = ({ title, options }: CreatePollOptions) => {
35+
if (options.length < 2) {
36+
throw new Error('Poll must have at least two options');
37+
}
38+
cy.get('.mx_PollCreateDialog').within((pollCreateDialog) => {
39+
cy.get('#poll-topic-input').type(title);
40+
41+
options.forEach((option, index) => {
42+
const optionId = `#pollcreate_option_${index}`;
43+
44+
// click 'add option' button if needed
45+
if (pollCreateDialog.find(optionId).length === 0) {
46+
cy.get('.mx_PollCreateDialog_addOption').scrollIntoView().click();
47+
}
48+
cy.get(optionId).scrollIntoView().type(option);
49+
});
50+
});
51+
cy.get('.mx_Dialog button[type="submit"]').click();
52+
};
53+
54+
const getPollTile = (pollId: string): Chainable<JQuery> => {
55+
return cy.get(`.mx_EventTile[data-scroll-tokens="${pollId}"]`);
56+
};
57+
58+
const getPollOption = (pollId: string, optionText: string): Chainable<JQuery> => {
59+
return getPollTile(pollId).contains('.mx_MPollBody_option .mx_StyledRadioButton', optionText);
60+
};
61+
62+
const expectPollOptionVoteCount = (pollId: string, optionText: string, votes: number): void => {
63+
getPollOption(pollId, optionText).within(() => {
64+
cy.get('.mx_MPollBody_optionVoteCount').should('contain', `${votes} vote`);
65+
});
66+
};
67+
68+
const botVoteForOption = (bot: MatrixClient, roomId: string, pollId: string, optionText: string): void => {
69+
getPollOption(pollId, optionText).within(ref => {
70+
cy.get('input[type="radio"]').invoke('attr', 'value').then(optionId => {
71+
const pollVote = PollResponseEvent.from([optionId], pollId).serialize();
72+
bot.sendEvent(
73+
roomId,
74+
pollVote.type,
75+
pollVote.content,
76+
);
77+
});
78+
});
79+
};
80+
81+
beforeEach(() => {
82+
cy.enableLabsFeature("feature_thread");
83+
cy.window().then(win => {
84+
win.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
85+
});
86+
cy.startSynapse("default").then(data => {
87+
synapse = data;
88+
89+
cy.initTestUser(synapse, "Tom");
90+
});
91+
});
92+
93+
afterEach(() => {
94+
cy.stopSynapse(synapse);
95+
});
96+
97+
it("Open polls can be created and voted in", () => {
98+
let bot: MatrixClient;
99+
cy.getBot(synapse, { displayName: "BotBob" }).then(_bot => {
100+
bot = _bot;
101+
});
102+
103+
let roomId: string;
104+
cy.createRoom({}).then(_roomId => {
105+
roomId = _roomId;
106+
cy.inviteUser(roomId, bot.getUserId());
107+
cy.visit('/#/room/' + roomId);
108+
});
109+
110+
cy.openMessageComposerOptions().within(() => {
111+
cy.get('[aria-label="Poll"]').click();
112+
});
113+
114+
cy.get('.mx_CompoundDialog').percySnapshotElement('Polls Composer');
115+
116+
const pollParams = {
117+
title: 'Does the polls feature work?',
118+
options: ['Yes', 'No', 'Maybe'],
119+
};
120+
createPoll(pollParams);
121+
122+
// Wait for message to send, get its ID and save as @pollId
123+
cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", pollParams.title)
124+
.invoke("attr", "data-scroll-tokens").as("pollId");
125+
126+
cy.get<string>("@pollId").then(pollId => {
127+
getPollTile(pollId).percySnapshotElement('Polls Timeline tile - no votes', { percyCSS: hideTimestampCSS });
128+
129+
// Bot votes 'Maybe' in the poll
130+
botVoteForOption(bot, roomId, pollId, pollParams.options[2]);
131+
132+
// no votes shown until I vote, check bots vote has arrived
133+
cy.get('.mx_MPollBody_totalVotes').should('contain', '1 vote cast');
134+
135+
// vote 'Maybe'
136+
getPollOption(pollId, pollParams.options[2]).click('topLeft');
137+
// both me and bot have voted Maybe
138+
expectPollOptionVoteCount(pollId, pollParams.options[2], 2);
139+
140+
// change my vote to 'Yes'
141+
getPollOption(pollId, pollParams.options[0]).click('topLeft');
142+
143+
// 1 vote for yes
144+
expectPollOptionVoteCount(pollId, pollParams.options[0], 1);
145+
// 1 vote for maybe
146+
expectPollOptionVoteCount(pollId, pollParams.options[2], 1);
147+
148+
// Bot updates vote to 'No'
149+
botVoteForOption(bot, roomId, pollId, pollParams.options[1]);
150+
151+
// 1 vote for yes
152+
expectPollOptionVoteCount(pollId, pollParams.options[0], 1);
153+
// 1 vote for no
154+
expectPollOptionVoteCount(pollId, pollParams.options[0], 1);
155+
// 0 for maybe
156+
expectPollOptionVoteCount(pollId, pollParams.options[2], 0);
157+
});
158+
});
159+
160+
it("displays polls correctly in thread panel", () => {
161+
let botBob: MatrixClient;
162+
let botCharlie: MatrixClient;
163+
cy.getBot(synapse, { displayName: "BotBob" }).then(_bot => {
164+
botBob = _bot;
165+
});
166+
cy.getBot(synapse, { displayName: "BotCharlie" }).then(_bot => {
167+
botCharlie = _bot;
168+
});
169+
170+
let roomId: string;
171+
cy.createRoom({}).then(_roomId => {
172+
roomId = _roomId;
173+
cy.inviteUser(roomId, botBob.getUserId());
174+
cy.inviteUser(roomId, botCharlie.getUserId());
175+
cy.visit('/#/room/' + roomId);
176+
});
177+
178+
cy.openMessageComposerOptions().within(() => {
179+
cy.get('[aria-label="Poll"]').click();
180+
});
181+
182+
const pollParams = {
183+
title: 'Does the polls feature work?',
184+
options: ['Yes', 'No', 'Maybe'],
185+
};
186+
createPoll(pollParams);
187+
188+
// Wait for message to send, get its ID and save as @pollId
189+
cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", pollParams.title)
190+
.invoke("attr", "data-scroll-tokens").as("pollId");
191+
192+
cy.get<string>("@pollId").then(pollId => {
193+
// Bob starts thread on the poll
194+
botBob.sendMessage(roomId, pollId, {
195+
body: "Hello there",
196+
msgtype: "m.text",
197+
});
198+
199+
// open the thread summary
200+
cy.get(".mx_RoomView_body .mx_ThreadSummary").click();
201+
202+
// Bob votes 'Maybe' in the poll
203+
botVoteForOption(botBob, roomId, pollId, pollParams.options[2]);
204+
// Charlie votes 'No'
205+
botVoteForOption(botCharlie, roomId, pollId, pollParams.options[1]);
206+
207+
// no votes shown until I vote, check votes have arrived in main tl
208+
cy.get('.mx_RoomView_body .mx_MPollBody_totalVotes').should('contain', '2 votes cast');
209+
// and thread view
210+
cy.get('.mx_ThreadView .mx_MPollBody_totalVotes').should('contain', '2 votes cast');
211+
212+
cy.get('.mx_RoomView_body').within(() => {
213+
// vote 'Maybe' in the main timeline poll
214+
getPollOption(pollId, pollParams.options[2]).click('topLeft');
215+
// both me and bob have voted Maybe
216+
expectPollOptionVoteCount(pollId, pollParams.options[2], 2);
217+
});
218+
219+
cy.get('.mx_ThreadView').within(() => {
220+
// votes updated in thread view too
221+
expectPollOptionVoteCount(pollId, pollParams.options[2], 2);
222+
// change my vote to 'Yes'
223+
getPollOption(pollId, pollParams.options[0]).click('topLeft');
224+
});
225+
226+
// Bob updates vote to 'No'
227+
botVoteForOption(botBob, roomId, pollId, pollParams.options[1]);
228+
229+
// me: yes, bob: no, charlie: no
230+
const expectVoteCounts = () => {
231+
// I voted yes
232+
expectPollOptionVoteCount(pollId, pollParams.options[0], 1);
233+
// Bob and Charlie voted no
234+
expectPollOptionVoteCount(pollId, pollParams.options[1], 2);
235+
// 0 for maybe
236+
expectPollOptionVoteCount(pollId, pollParams.options[2], 0);
237+
};
238+
239+
// check counts are correct in main timeline tile
240+
cy.get('.mx_RoomView_body').within(() => {
241+
expectVoteCounts();
242+
});
243+
// and in thread view tile
244+
cy.get('.mx_ThreadView').within(() => {
245+
expectVoteCounts();
246+
});
247+
});
248+
});
249+
});

‎cypress/support/composer.ts‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
/*
2+
Copyright 2022 The Matrix.org Foundation C.I.C.
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+
/// <reference types="cypress" />
18+
19+
import Chainable = Cypress.Chainable;
20+
21+
declare global {
22+
// eslint-disable-next-line @typescript-eslint/no-namespace
23+
namespace Cypress {
24+
interface Chainable {
25+
// Get the composer element
26+
// selects main timeline composer by default
27+
// set `isRightPanel` true to select right panel composer
28+
getComposer(isRightPanel?: boolean): Chainable<JQuery>;
29+
// Open the message composer kebab menu
30+
openMessageComposerOptions(isRightPanel?: boolean): Chainable<JQuery>;
31+
}
32+
}
33+
}
34+
35+
Cypress.Commands.add("getComposer", (isRightPanel?: boolean): Chainable<JQuery> => {
36+
const panelClass = isRightPanel ? '.mx_RightPanel' : '.mx_RoomView_body';
37+
return cy.get(`${panelClass} .mx_MessageComposer`);
38+
});
39+
40+
Cypress.Commands.add("openMessageComposerOptions", (isRightPanel?: boolean): Chainable<JQuery> => {
41+
cy.getComposer(isRightPanel).within(() => {
42+
cy.get('[aria-label="More options"]').click();
43+
});
44+
return cy.get('.mx_MessageComposer_Menu');
45+
});
46+
47+
// Needed to make this file a module
48+
export { };

‎cypress/support/e2e.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,4 @@ import "./views";
3535
import "./iframes";
3636
import "./timeline";
3737
import "./network";
38+
import "./composer";

0 commit comments

Comments
 (0)