Move Lazy Loading tests from Puppeteer to Cypress (#8982)

* Remove Puppeteer Lazy Loading tests

* Remove Puppeteer Lazy Loading tests

* Remove Puppeteer Lazy Loading tests

* Stash lazy loading cypress tests

* Stash lazy loading cypress tests

* Update cypress-real-events

* Stash offline-less test

* Add offline/online'ing

cypress/support/bot.ts

@@ -18,7 +18,7 @@ limitations under the License.
 
 import request from "browser-request";
 
-import type { MatrixClient, Room } from "matrix-js-sdk/src/matrix";
+import type { ISendEventResponse, MatrixClient, Room } from "matrix-js-sdk/src/matrix";
 import { SynapseInstance } from "../plugins/synapsedocker";
 import Chainable = Cypress.Chainable;
 
@@ -31,10 +31,15 @@ interface CreateBotOpts {
      * The display name to give to that bot user
      */
     displayName?: string;
+    /**
+     * Whether or not to start the syncing client.
+     */
+    startClient?: boolean;
 }
 
 const defaultCreateBotOptions = {
     autoAcceptInvites: true,
+    startClient: true,
 } as CreateBotOpts;
 
 declare global {
@@ -59,6 +64,13 @@ declare global {
              * @param roomName Name of the room to join
              */
             botJoinRoomByName(cli: MatrixClient, roomName: string): Chainable<Room>;
+            /**
+             * Send a message as a bot into a room
+             * @param cli The bot's MatrixClient
+             * @param roomId ID of the room to join
+             * @param message the message body to send
+             */
+            botSendMessage(cli: MatrixClient, roomId: string, message: string): Chainable<ISendEventResponse>;
         }
     }
 }
@@ -88,6 +100,10 @@ Cypress.Commands.add("getBot", (synapse: SynapseInstance, opts: CreateBotOpts):
                 });
             }
 
+            if (!opts.startClient) {
+                return cy.wrap(cli);
+            }
+
             return cy.wrap(
                 cli.initCrypto()
                     .then(() => cli.setGlobalErrorOnUnknownDevices(false))
@@ -114,3 +130,14 @@ Cypress.Commands.add("botJoinRoomByName", (cli: MatrixClient, roomName: string):
 
     return cy.wrap(Promise.reject());
 });
+
+Cypress.Commands.add("botSendMessage", (
+    cli: MatrixClient,
+    roomId: string,
+    message: string,
+): Chainable<ISendEventResponse> => {
+    return cy.wrap(cli.sendMessage(roomId, {
+        msgtype: "m.text",
+        body: message,
+    }), { log: false });
+});

cypress/support/client.ts

@@ -124,6 +124,11 @@ declare global {
              * Boostraps cross-signing.
              */
             bootstrapCrossSigning(): Chainable<void>;
+            /**
+             * Joins the given room by alias or ID
+             * @param roomIdOrAlias the id or alias of the room to join
+             */
+            joinRoom(roomIdOrAlias: string): Chainable<Room>;
         }
     }
 }
@@ -217,3 +222,7 @@ Cypress.Commands.add("bootstrapCrossSigning", () => {
         });
     });
 });
+
+Cypress.Commands.add("joinRoom", (roomIdOrAlias: string): Chainable<Room> => {
+    return cy.getClient().then(cli => cli.joinRoom(roomIdOrAlias));
+});

cypress/support/e2e.ts

@@ -33,3 +33,5 @@ import "./percy";
 import "./webserver";
 import "./views";
 import "./iframes";
+import "./timeline";
+import "./network";

cypress/support/network.ts

@@ -0,0 +1,62 @@
+/*
+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" />
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface Chainable {
+            // Intercept all /_matrix/ networking requests for the logged in user and fail them
+            goOffline(): void;
+            // Remove intercept on all /_matrix/ networking requests
+            goOnline(): void;
+        }
+    }
+}
+
+// We manage intercepting Matrix APIs here, as fully disabling networking will disconnect
+// the browser under test from the Cypress runner, so can cause issues.
+
+Cypress.Commands.add("goOffline", (): void => {
+    cy.log("Going offline");
+    cy.window({ log: false }).then(win => {
+        cy.intercept("**/_matrix/**", {
+            headers: {
+                "Authorization": "Bearer " + win.mxMatrixClientPeg.matrixClient.getAccessToken(),
+            },
+        }, req => {
+            req.destroy();
+        });
+    });
+});
+
+Cypress.Commands.add("goOnline", (): void => {
+    cy.log("Going online");
+    cy.window({ log: false }).then(win => {
+        cy.intercept("**/_matrix/**", {
+            headers: {
+                "Authorization": "Bearer " + win.mxMatrixClientPeg.matrixClient.getAccessToken(),
+            },
+        }, req => {
+            req.continue();
+        });
+        win.dispatchEvent(new Event("online"));
+    });
+});
+
+// Needed to make this file a module
+export { };

cypress/support/timeline.ts

@@ -0,0 +1,68 @@
+/*
+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;
+
+declare global {
+    // eslint-disable-next-line @typescript-eslint/no-namespace
+    namespace Cypress {
+        interface Chainable {
+            // Scroll to the top of the timeline
+            scrollToTop(): void;
+            // Find the event tile matching the given sender & body
+            findEventTile(sender: string, body: string): Chainable<JQuery>;
+        }
+    }
+}
+
+export interface Message {
+    sender: string;
+    body: string;
+    encrypted: boolean;
+    continuation: boolean;
+}
+
+Cypress.Commands.add("scrollToTop", (): void => {
+    cy.get(".mx_RoomView_timeline .mx_ScrollPanel").scrollTo("top", { duration: 100 }).then(ref => {
+        if (ref.scrollTop() > 0) {
+            return cy.scrollToTop();
+        }
+    });
+});
+
+Cypress.Commands.add("findEventTile", (sender: string, body: string): Chainable<JQuery> => {
+    // We can't just use a bunch of `.contains` here due to continuations meaning that the events don't
+    // have their own rendered sender displayname so we have to walk the list to keep track of the sender.
+    return cy.get(".mx_RoomView_MessageList .mx_EventTile").then(refs => {
+        let latestSender: string;
+        for (let i = 0; i < refs.length; i++) {
+            const ref = refs.eq(i);
+            const displayName = ref.find(".mx_DisambiguatedProfile_displayName");
+            if (displayName) {
+                latestSender = displayName.text();
+            }
+
+            if (latestSender === sender && ref.find(".mx_EventTile_body").text() === body) {
+                return ref;
+            }
+        }
+    });
+});
+
+// Needed to make this file a module
+export { };