Move threads e2e tests over to cypress (#8501)

* Add non-consent (default) Synapse template

* Add consent test

* Add create room test

* Stash work

* Initial threads tests

* fix

* Delete old threads e2e tests, plan new ones

* Fix typed s'more

* Try something else

* specify d.ts

* Fix types once and for all?

* Fix the consent tests

* Iterate threads test harness

* Fix dispatcher types

* Iterate threads test

* fix typing

* Alternative import attempt

* let it break let it break let it break

* Tweak types

* Stash

* delint and update docs

* null-guard scrollIntoView

* Iterate threads test

* Apply suggestions from code review

Author: t3chguy

cypress.json

@@ -1,5 +1,7 @@
 {
     "baseUrl": "http://localhost:8080",
     "videoUploadOnPasses": false,
-    "projectId": "ppvnzg"
+    "projectId": "ppvnzg",
+    "experimentalSessionAndOrigin": true,
+    "experimentalInteractiveRunEvents": true
 }

cypress/global.d.ts

@@ -0,0 +1,45 @@
+/*
+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.
+*/
+
+import "matrix-js-sdk/src/@types/global";
+import type { MatrixClient, ClientEvent } from "matrix-js-sdk/src/client";
+import type { RoomMemberEvent } from "matrix-js-sdk/src/models/room-member";
+import type { MatrixDispatcher } from "../src/dispatcher/dispatcher";
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface ApplicationWindow {
+            mxMatrixClientPeg: {
+                matrixClient?: MatrixClient;
+            };
+            mxDispatcher: MatrixDispatcher;
+            beforeReload?: boolean; // for detecting reloads
+            // Partial type for the matrix-js-sdk module, exported by browser-matrix
+            matrixcs: {
+                MatrixClient: typeof MatrixClient;
+                ClientEvent: typeof ClientEvent;
+                RoomMemberEvent: typeof RoomMemberEvent;
+            };
+        }
+    }
+
+    interface Window {
+        mxDispatcher: MatrixDispatcher; // to appease the MatrixDispatcher import
+    }
+}
+
+export { MatrixClient };

cypress/integration/2-login/consent.spec.ts

@@ -0,0 +1,73 @@
+/*
+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 { SinonStub } from "cypress/types/sinon";
+
+import { SynapseInstance } from "../../plugins/synapsedocker";
+
+describe("Consent", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("consent").then(data => {
+            synapse = data;
+
+            cy.initTestUser(synapse, "Bob");
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it("should prompt the user to consent to terms when server deems it necessary", () => {
+        // Attempt to create a room using the js-sdk which should return an error with `M_CONSENT_NOT_GIVEN`
+        cy.window().then(win => {
+            win.mxMatrixClientPeg.matrixClient.createRoom({}).catch(() => {});
+
+            // Stub `window.open` - clicking the primary button below will call it
+            cy.stub(win, "open").as("windowOpen").returns({});
+        });
+
+        // Accept terms & conditions
+        cy.get(".mx_QuestionDialog").within(() => {
+            cy.get("#mx_BaseDialog_title").contains("Terms and Conditions");
+            cy.get(".mx_Dialog_primary").click();
+        });
+
+        cy.get<SinonStub>("@windowOpen").then(stub => {
+            const url = stub.getCall(0).args[0];
+
+            // Go to Synapse's consent page and accept it
+            cy.origin(synapse.baseUrl, { args: { url } }, ({ url }) => {
+                cy.visit(url);
+
+                cy.get('[type="submit"]').click();
+                cy.get("p").contains("Danke schon");
+            });
+        });
+
+        // go back to the app
+        cy.visit("/");
+        // wait for the app to re-load
+        cy.get(".mx_MatrixChat", { timeout: 15000 });
+
+        // attempt to perform the same action again and expect it to not fail
+        cy.createRoom({});
+    });
+});

cypress/integration/3-user-menu/user-menu.spec.ts

@@ -19,12 +19,12 @@ limitations under the License.
 import { SynapseInstance } from "../../plugins/synapsedocker";
 import type { UserCredentials } from "../../support/login";
 
-describe("UserMenu", () => {
+describe("User Menu", () => {
     let synapse: SynapseInstance;
     let user: UserCredentials;
 
     beforeEach(() => {
-        cy.startSynapse("consent").then(data => {
+        cy.startSynapse("default").then(data => {
             synapse = data;
 
             cy.initTestUser(synapse, "Jeff").then(credentials => {
@@ -38,8 +38,10 @@ describe("UserMenu", () => {
     });
 
     it("should contain our name & userId", () => {
-        cy.get('[aria-label="User menu"]', { timeout: 15000 }).click();
-        cy.get(".mx_UserMenu_contextMenu_displayName").should("contain", "Jeff");
-        cy.get(".mx_UserMenu_contextMenu_userId").should("contain", user.userId);
+        cy.get('[aria-label="User menu"]').click();
+        cy.get(".mx_ContextualMenu").within(() => {
+            cy.get(".mx_UserMenu_contextMenu_displayName").should("contain", "Jeff");
+            cy.get(".mx_UserMenu_contextMenu_userId").should("contain", user.userId);
+        });
     });
 });

cypress/integration/4-create-room/create-room.spec.ts

@@ -0,0 +1,64 @@
+/*
+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 { SynapseInstance } from "../../plugins/synapsedocker";
+import Chainable = Cypress.Chainable;
+
+function openCreateRoomDialog(): Chainable<JQuery<HTMLElement>> {
+    cy.get('[aria-label="Add room"]').click();
+    cy.get('.mx_ContextualMenu [aria-label="New room"]').click();
+    return cy.get(".mx_CreateRoomDialog");
+}
+
+describe("Create Room", () => {
+    let synapse: SynapseInstance;
+
+    beforeEach(() => {
+        cy.startSynapse("default").then(data => {
+            synapse = data;
+
+            cy.initTestUser(synapse, "Jim");
+        });
+    });
+
+    afterEach(() => {
+        cy.stopSynapse(synapse);
+    });
+
+    it("should allow us to create a public room with name, topic & address set", () => {
+        const name = "Test room 1";
+        const topic = "This room is dedicated to this test and this test only!";
+
+        openCreateRoomDialog().within(() => {
+            // Fill name & topic
+            cy.get('[label="Name"]').type(name);
+            cy.get('[label="Topic (optional)"]').type(topic);
+            // Change room to public
+            cy.get('[aria-label="Room visibility"]').click();
+            cy.get("#mx_JoinRuleDropdown__public").click();
+            // Fill room address
+            cy.get('[label="Room address"]').type("test-room-1");
+            // Submit
+            cy.get(".mx_Dialog_primary").click();
+        });
+
+        cy.url().should("contain", "/#/room/#test-room-1:localhost");
+        cy.get(".mx_RoomHeader_nametext").contains(name);
+        cy.get(".mx_RoomHeader_topic").contains(topic);
+    });
+});