sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Move spaces tests from Puppeteer to Cypress (#8645)

Browse Source 
* Move spaces tests from Puppeteer to Cypress

* Add missing fixture

* Tweak synapsedocker to not double error on a docker failure

* Fix space hierarchy loading race condition

Fixes https://github.com/matrix-org/element-web-rageshakes/issues/10345

* Fix race condition when creating public space with url update code

* Try Electron once more due to perms issues around clipboard

* Try set browser permissions properly

* Try to enable clipboard another way

* Try electron again

* Try electron again again

* Switch to built-in cypress feature for file uploads

* Mock clipboard instead

* TMPDIR ftw?

* uid:gid pls

* Clipboard tests can now run on any browser due to mocking

* Test Enter as well as button for space creation

* Make the test actually work

* Update cypress/support/util.ts

Co-authored-by: Eric Eastwood <erice@element.io>

Co-authored-by: Eric Eastwood <erice@element.io>
This commit is contained in:
Michael Telatynski
2022-05-26 10:19:00 +01:00
committed by GitHub
co-authored by Eric Eastwood
parent d75e2f19c5
commit f3f14afbbf
21 changed files with 492 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cypress/fixtures/riot.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

cypress/integration/5-threads/threads.spec.ts
+5 -5
View File
@@ -87,8 +87,8 @@ describe("Threads", () => {
cy.get(".mx_RoomView_body .mx_BasicMessageComposer_input").type("Hello Mr. Bot{enter}");
// Wait for message to send, get its ID and save as @threadId
cy.get(".mx_RoomView_body .mx_EventTile").contains("Hello Mr. Bot")
.closest(".mx_EventTile[data-scroll-tokens]").invoke("attr", "data-scroll-tokens").as("threadId");
cy.get(".mx_RoomView_body .mx_EventTile").contains(".mx_EventTile[data-scroll-tokens]", "Hello Mr. Bot")
.invoke("attr", "data-scroll-tokens").as("threadId");
// Bot starts thread
cy.get<string>("@threadId").then(threadId => {
@@ -111,7 +111,7 @@ describe("Threads", () => {
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Test");
// User reacts to message instead
cy.get(".mx_ThreadView .mx_EventTile").contains("Hello there").closest(".mx_EventTile_line")
cy.get(".mx_ThreadView .mx_EventTile").contains(".mx_EventTile_line", "Hello there")
.find('[aria-label="React"]').click({ force: true }); // Cypress has no ability to hover
cy.get(".mx_EmojiPicker").within(() => {
cy.get('input[type="text"]').type("wave");
@@ -119,7 +119,7 @@ describe("Threads", () => {
});
// User redacts their prior response
cy.get(".mx_ThreadView .mx_EventTile").contains("Test").closest(".mx_EventTile_line")
cy.get(".mx_ThreadView .mx_EventTile").contains(".mx_EventTile_line", "Test")
.find('[aria-label="Options"]').click({ force: true }); // Cypress has no ability to hover
cy.get(".mx_IconizedContextMenu").within(() => {
cy.get('[role="menuitem"]').contains("Remove").click();
@@ -166,7 +166,7 @@ describe("Threads", () => {
cy.get(".mx_RoomView_body .mx_ThreadSummary .mx_ThreadSummary_content").should("contain", "Great!");
// User edits & asserts
cy.get(".mx_ThreadView .mx_EventTile_last").contains("Great!").closest(".mx_EventTile_line").within(() => {
cy.get(".mx_ThreadView .mx_EventTile_last").contains(".mx_EventTile_line", "Great!").within(() => {
cy.get('[aria-label="Edit"]').click({ force: true }); // Cypress has no ability to hover
cy.get(".mx_BasicMessageComposer_input").type(" How about yourself?{enter}");
});
cypress/integration/6-spaces/spaces.spec.ts
+244
View File
@@ -0,0 +1,244 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/// <reference types="cypress" />
import type { MatrixClient } from "matrix-js-sdk/src/client";
import type { ICreateRoomOpts } from "matrix-js-sdk/src/@types/requests";
import { SynapseInstance } from "../../plugins/synapsedocker";
import Chainable = Cypress.Chainable;
import { UserCredentials } from "../../support/login";
function openSpaceCreateMenu(): Chainable<JQuery> {
cy.get(".mx_SpaceButton_new").click();
return cy.get(".mx_SpaceCreateMenu_wrapper .mx_ContextualMenu");
}
function getSpacePanelButton(spaceName: string): Chainable<JQuery> {
return cy.get(`.mx_SpaceButton[aria-label="${spaceName}"]`);
}
function openSpaceContextMenu(spaceName: string): Chainable<JQuery> {
getSpacePanelButton(spaceName).rightclick();
return cy.get(".mx_SpacePanel_contextMenu");
}
function spaceCreateOptions(spaceName: string): ICreateRoomOpts {
return {
creation_content: {
type: "m.space",
},
initial_state: [{
type: "m.room.name",
content: {
name: spaceName,
},
}],
};
}
function spaceChildInitialState(roomId: string): ICreateRoomOpts["initial_state"]["0"] {
return {
type: "m.space.child",
state_key: roomId,
content: {
via: [roomId.split(":")[1]],
},
};
}
describe("Spaces", () => {
let synapse: SynapseInstance;
let user: UserCredentials;
beforeEach(() => {
cy.startSynapse("default").then(data => {
synapse = data;
cy.initTestUser(synapse, "Sue").then(_user => {
user = _user;
cy.mockClipboard();
});
});
});
afterEach(() => {
cy.stopSynapse(synapse);
});
it("should allow user to create public space", () => {
openSpaceCreateMenu().within(() => {
cy.get(".mx_SpaceCreateMenuType_public").click();
cy.get('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
.selectFile("cypress/fixtures/riot.png", { force: true });
cy.get('input[label="Name"]').type("Let's have a Riot");
cy.get('input[label="Address"]').should("have.value", "lets-have-a-riot");
cy.get('textarea[label="Description"]').type("This is a space to reminisce Riot.im!");
cy.get(".mx_AccessibleButton").contains("Create").click();
});
// Create the default General & Random rooms, as well as a custom "Jokes" room
cy.get('input[label="Room name"][value="General"]').should("exist");
cy.get('input[label="Room name"][value="Random"]').should("exist");
cy.get('input[placeholder="Support"]').type("Jokes");
cy.get(".mx_AccessibleButton").contains("Continue").click();
// Copy matrix.to link
cy.get(".mx_SpacePublicShare_shareButton").focus().realClick();
cy.getClipboardText().should("eq", "https://matrix.to/#/#lets-have-a-riot:localhost");
// Go to space home
cy.get(".mx_AccessibleButton").contains("Go to my first room").click();
// Assert rooms exist in the room list
cy.get(".mx_RoomTile").contains("General").should("exist");
cy.get(".mx_RoomTile").contains("Random").should("exist");
cy.get(".mx_RoomTile").contains("Jokes").should("exist");
});
it("should allow user to create private space", () => {
openSpaceCreateMenu().within(() => {
cy.get(".mx_SpaceCreateMenuType_private").click();
cy.get('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
.selectFile("cypress/fixtures/riot.png", { force: true });
cy.get('input[label="Name"]').type("This is not a Riot");
cy.get('input[label="Address"]').should("not.exist");
cy.get('textarea[label="Description"]').type("This is a private space of mourning Riot.im...");
cy.get(".mx_AccessibleButton").contains("Create").click();
});
cy.get(".mx_SpaceRoomView_privateScope_meAndMyTeammatesButton").click();
// Create the default General & Random rooms, as well as a custom "Projects" room
cy.get('input[label="Room name"][value="General"]').should("exist");
cy.get('input[label="Room name"][value="Random"]').should("exist");
cy.get('input[placeholder="Support"]').type("Projects");
cy.get(".mx_AccessibleButton").contains("Continue").click();
cy.get(".mx_SpaceRoomView").should("contain", "Invite your teammates");
cy.get(".mx_AccessibleButton").contains("Skip for now").click();
// Assert rooms exist in the room list
cy.get(".mx_RoomTile").contains("General").should("exist");
cy.get(".mx_RoomTile").contains("Random").should("exist");
cy.get(".mx_RoomTile").contains("Projects").should("exist");
// Assert rooms exist in the space explorer
cy.get(".mx_SpaceHierarchy_roomTile").contains("General").should("exist");
cy.get(".mx_SpaceHierarchy_roomTile").contains("Random").should("exist");
cy.get(".mx_SpaceHierarchy_roomTile").contains("Projects").should("exist");
});
it("should allow user to create just-me space", () => {
cy.createRoom({
name: "Sample Room",
});
openSpaceCreateMenu().within(() => {
cy.get(".mx_SpaceCreateMenuType_private").click();
cy.get('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
.selectFile("cypress/fixtures/riot.png", { force: true });
cy.get('input[label="Address"]').should("not.exist");
cy.get('textarea[label="Description"]').type("This is a personal space to mourn Riot.im...");
cy.get('input[label="Name"]').type("This is my Riot{enter}");
});
cy.get(".mx_SpaceRoomView_privateScope_justMeButton").click();
cy.get(".mx_AddExistingToSpace_entry").click();
cy.get(".mx_AccessibleButton").contains("Add").click();
cy.get(".mx_RoomTile").contains("Sample Room").should("exist");
cy.get(".mx_SpaceHierarchy_roomTile").contains("Sample Room").should("exist");
});
it("should allow user to invite another to a space", () => {
let bot: MatrixClient;
cy.getBot(synapse, "BotBob").then(_bot => {
bot = _bot;
});
cy.createSpace({
visibility: "public" as any,
room_alias_name: "space",
}).as("spaceId");
openSpaceContextMenu("#space:localhost").within(() => {
cy.get('.mx_SpacePanel_contextMenu_inviteButton[aria-label="Invite"]').click();
});
cy.get(".mx_SpacePublicShare").within(() => {
// Copy link first
cy.get(".mx_SpacePublicShare_shareButton").focus().realClick();
cy.getClipboardText().should("eq", "https://matrix.to/#/#space:localhost");
// Start Matrix invite flow
cy.get(".mx_SpacePublicShare_inviteButton").click();
});
cy.get(".mx_InviteDialog_other").within(() => {
cy.get('input[type="text"]').type(bot.getUserId());
cy.get(".mx_AccessibleButton").contains("Invite").click();
});
cy.get(".mx_InviteDialog_other").should("not.exist");
});
it("should show space invites at the top of the space panel", () => {
cy.createSpace({
name: "My Space",
});
getSpacePanelButton("My Space").should("exist");
cy.getBot(synapse, "BotBob").then({ timeout: 10000 }, async bot => {
const { room_id: roomId } = await bot.createRoom(spaceCreateOptions("Space Space"));
await bot.invite(roomId, user.userId);
});
// Assert that `Space Space` is above `My Space` due to it being an invite
getSpacePanelButton("Space Space").should("exist")
.parent().next().find('.mx_SpaceButton[aria-label="My Space"]').should("exist");
});
it("should include rooms in space home", () => {
cy.createRoom({
name: "Music",
}).as("roomId1");
cy.createRoom({
name: "Gaming",
}).as("roomId2");
const spaceName = "Spacey Mc. Space Space";
cy.all([
cy.get<string>("@roomId1"),
cy.get<string>("@roomId2"),
]).then(([roomId1, roomId2]) => {
cy.createSpace({
name: spaceName,
initial_state: [
spaceChildInitialState(roomId1),
spaceChildInitialState(roomId2),
],
}).as("spaceId");
});
cy.get("@spaceId").then(() => {
getSpacePanelButton(spaceName).dblclick(); // Open space home
});
cy.get(".mx_SpaceRoomView .mx_SpaceHierarchy_list").within(() => {
cy.get(".mx_SpaceHierarchy_roomTile").contains("Music").should("exist");
cy.get(".mx_SpaceHierarchy_roomTile").contains("Gaming").should("exist");
});
});
});
cypress/plugins/synapsedocker/index.ts
+6 -6
View File
@@ -66,9 +66,6 @@ async function cfgDirFromTemplate(template: string): Promise<SynapseConfig> {
}
const tempDir = await fse.mkdtemp(path.join(os.tmpdir(), 'react-sdk-synapsedocker-'));
// change permissions on the temp directory so the docker container can see its contents
await fse.chmod(tempDir, 0o777);
// copy the contents of the template dir, omitting homeserver.yaml as we'll template that
console.log(`Copy ${templateDir} -> ${tempDir}`);
await fse.copy(templateDir, tempDir, { filter: f => path.basename(f) !== 'homeserver.yaml' });
@@ -113,6 +110,7 @@ async function synapseStart(template: string): Promise<SynapseInstance> {
console.log(`Starting synapse with config dir ${synCfg.configDir}...`);
const containerName = `react-sdk-cypress-synapse-${crypto.randomBytes(4).toString("hex")}`;
const userInfo = os.userInfo();
const synapseId = await new Promise<string>((resolve, reject) => {
childProcess.execFile('docker', [
@@ -121,6 +119,8 @@ async function synapseStart(template: string): Promise<SynapseInstance> {
"-d",
"-v", `${synCfg.configDir}:/data`,
"-p", `${synCfg.port}:8008/tcp`,
// We run the docker container as our uid:gid otherwise cleaning it up its media_store can be difficult
"-u", `${userInfo.uid}:${userInfo.gid}`,
"matrixdotorg/synapse:develop",
"run",
], (err, stdout) => {
@@ -129,8 +129,6 @@ async function synapseStart(template: string): Promise<SynapseInstance> {
});
});
synapses.set(synapseId, { synapseId, ...synCfg });
console.log(`Started synapse with id ${synapseId} on port ${synCfg.port}.`);
// Await Synapse healthcheck
@@ -150,7 +148,9 @@ async function synapseStart(template: string): Promise<SynapseInstance> {
});
});
return synapses.get(synapseId);
const synapse: SynapseInstance = { synapseId, ...synCfg };
synapses.set(synapseId, synapse);
return synapse;
}
async function synapseStop(id: string): Promise<void> {
cypress/support/client.ts
+15
View File
@@ -35,6 +35,12 @@ declare global {
* @return the ID of the newly created room
*/
createRoom(options: ICreateRoomOpts): Chainable<string>;
/**
* Create a space with given options.
* @param options the options to apply when creating the space
* @return the ID of the newly created space (room)
*/
createSpace(options: ICreateRoomOpts): Chainable<string>;
/**
* Invites the given user to the given room.
* @param roomId the id of the room to invite to
@@ -71,6 +77,15 @@ Cypress.Commands.add("createRoom", (options: ICreateRoomOpts): Chainable<string>
});
});
Cypress.Commands.add("createSpace", (options: ICreateRoomOpts): Chainable<string> => {
return cy.createRoom({
...options,
creation_content: {
"type": "m.space",
},
});
});
Cypress.Commands.add("inviteUser", (roomId: string, userId: string): Chainable<{}> => {
return cy.getClient().then(async (cli: MatrixClient) => {
return cli.invite(roomId, userId);
cypress/support/clipboard.ts
+57
View File
@@ -0,0 +1,57 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/// <reference types="cypress" />
import Chainable = Cypress.Chainable;
// Mock the clipboard, as only Electron gives the app permission to the clipboard API by default
// Virtual clipboard
let copyText: string;
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
interface Chainable {
/**
* Mock the clipboard on the current window, ready for calling `getClipboardText`.
* Irreversible, refresh the window to restore mock.
*/
mockClipboard(): Chainable<AUTWindow>;
/**
* Read text from the mocked clipboard.
* @return {string} the clipboard text
*/
getClipboardText(): Chainable<string>;
}
}
}
Cypress.Commands.add("mockClipboard", () => {
cy.window({ log: false }).then(win => {
win.navigator.clipboard.writeText = (text) => {
copyText = text;
return Promise.resolve();
};
});
});
Cypress.Commands.add("getClipboardText", (): Chainable<string> => {
return cy.wrap(copyText);
});
// Needed to make this file a module
export { };
cypress/support/index.ts
+3
View File
@@ -17,6 +17,7 @@ limitations under the License.
/// <reference types="cypress" />
import "@percy/cypress";
import "cypress-real-events";
import "./performance";
import "./synapse";
@@ -24,3 +25,5 @@ import "./login";
import "./client";
import "./settings";
import "./bot";
import "./clipboard";
import "./util";
cypress/support/settings.ts
+3 -1
View File
@@ -16,7 +16,6 @@ limitations under the License.
/// <reference types="cypress" />
import "./client"; // XXX: without an (any) import here, types break down
import Chainable = Cypress.Chainable;
declare global {
@@ -99,3 +98,6 @@ Cypress.Commands.add("leaveBeta", (name: string): Chainable<JQuery<HTMLElement>>
return cy.get(".mx_BetaCard_buttons").contains("Leave the beta").click();
});
});
// Needed to make this file a module
export { };
cypress/support/util.ts
+82
View File
@@ -0,0 +1,82 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
/// <reference types="cypress" />
// @see https://github.com/cypress-io/cypress/issues/915#issuecomment-475862672
// Modified due to changes to `cy.queue` https://github.com/cypress-io/cypress/pull/17448
// Note: this DOES NOT run Promises in parallel like `Promise.all` due to the nature
// of Cypress promise-like objects and command queue. This only makes it convenient to use the same
// API but runs the commands sequentially.
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Cypress {
type ChainableValue<T> = T extends Cypress.Chainable<infer V> ? V : T;
interface cy {
all<T extends Cypress.Chainable[] | []>(
commands: T
): Cypress.Chainable<{ [P in keyof T]: ChainableValue<T[P]> }>;
queue: any;
}
interface Chainable {
chainerId: string;
}
}
}
const chainStart = Symbol("chainStart");
/**
* @description Returns a single Chainable that resolves when all of the Chainables pass.
* @param {Cypress.Chainable[]} commands - List of Cypress.Chainable to resolve.
* @returns {Cypress.Chainable} Cypress when all Chainables are resolved.
*/
cy.all = function all(commands): Cypress.Chainable {
const chain = cy.wrap(null, { log: false });
const stopCommand = Cypress._.find(cy.queue.get(), {
attributes: { chainerId: chain.chainerId },
});
const startCommand = Cypress._.find(cy.queue.get(), {
attributes: { chainerId: commands[0].chainerId },
});
const p = chain.then(() => {
return cy.wrap(
// @see https://lodash.com/docs/4.17.15#lodash
Cypress._(commands)
.map(cmd => {
return cmd[chainStart]
? cmd[chainStart].attributes
: Cypress._.find(cy.queue.get(), {
attributes: { chainerId: cmd.chainerId },
}).attributes;
})
.concat(stopCommand.attributes)
.slice(1)
.map(cmd => {
return cmd.prev.get("subject");
})
.value(),
);
});
p[chainStart] = startCommand;
return p;
};
// Needed to make this file a module
export { };