Move spaces tests from Puppeteer to Cypress (#8645)

* 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>

cypress/support/client.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 { };