Migrate timeline.spec.ts from Cypress to Playwright (#12025)

* Migrate timeline.spec.ts from Cypress to Playwright

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Monospace font for timestamps

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* More expects

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* delint

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

playwright/pages/ElementAppPage.ts

@@ -105,6 +105,14 @@ export class ElementAppPage {
         return this.page.locator(`${panelClass} .mx_MessageComposer`);
     }
 
+    /**
+     * Get the composer input field
+     * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
+     */
+    public getComposerField(isRightPanel?: boolean): Locator {
+        return this.getComposer(isRightPanel).locator("[contenteditable]");
+    }
+
     /**
      * Open the message composer kebab menu
      * @param isRightPanel whether to select the right panel composer, otherwise the main timeline composer
@@ -155,4 +163,10 @@ export class ElementAppPage {
         await spotlight.open();
         return spotlight;
     }
+
+    public async scrollToBottom(page: Page): Promise<void> {
+        await page
+            .locator(".mx_ScrollPanel")
+            .evaluate((scrollPanel) => scrollPanel.scrollTo(0, scrollPanel.scrollHeight));
+    }
 }

playwright/pages/client.ts

@@ -28,6 +28,8 @@ import type {
     IRoomDirectoryOptions,
     KnockRoomOpts,
     Visibility,
+    UploadOpts,
+    Upload,
 } from "matrix-js-sdk/src/matrix";
 import { Credentials } from "../plugins/homeserver";
 
@@ -293,6 +295,46 @@ export class Client {
         }, options);
     }
 
+    /**
+     * @param {string} name
+     * @param {module:client.callback} callback Optional.
+     * @return {Promise} Resolves: {} an empty object.
+     * @return {module:http-api.MatrixError} Rejects: with an error response.
+     */
+    public async setDisplayName(name: string): Promise<{}> {
+        const client = await this.prepareClient();
+        return client.evaluate(async (cli: MatrixClient, name) => cli.setDisplayName(name), name);
+    }
+
+    /**
+     * @param {string} url
+     * @param {module:client.callback} callback Optional.
+     * @return {Promise} Resolves: {} an empty object.
+     * @return {module:http-api.MatrixError} Rejects: with an error response.
+     */
+    public async setAvatarUrl(url: string): Promise<{}> {
+        const client = await this.prepareClient();
+        return client.evaluate(async (cli: MatrixClient, url) => cli.setAvatarUrl(url), url);
+    }
+
+    /**
+     * Upload a file to the media repository on the homeserver.
+     *
+     * @param {object} file The object to upload. On a browser, something that
+     *   can be sent to XMLHttpRequest.send (typically a File).  Under node.js,
+     *   a Buffer, String or ReadStream.
+     */
+    public async uploadContent(file: Buffer, opts?: UploadOpts): Promise<Awaited<Upload["promise"]>> {
+        const client = await this.prepareClient();
+        return client.evaluate(
+            async (cli: MatrixClient, { file, opts }) => cli.uploadContent(new Uint8Array(file), opts),
+            {
+                file: [...file],
+                opts,
+            },
+        );
+    }
+
     /**
      * Boostraps cross-signing.
      */