Add attachment support to mock tests

ts/components/CompositionUpload.tsx

@@ -49,6 +49,7 @@ export const CompositionUpload = forwardRef<HTMLInputElement, PropsType>(
 
     return (
       <input
+        data-testid="attachfile-input"
         hidden
         multiple
         onChange={onFileInputChange}

ts/test-mock/bootstrap.ts

@@ -158,14 +158,17 @@ export class Bootstrap {
   private privDesktop?: Device;
   private storagePath?: string;
   private backupPath?: string;
+  private cdn3Path: string;
   private timestamp: number = Date.now() - durations.WEEK;
   private lastApp?: App;
   private readonly randomId = crypto.randomBytes(8).toString('hex');
 
   constructor(options: BootstrapOptions = {}) {
+    this.cdn3Path = path.join(os.tmpdir(), 'mock-signal-cdn3-');
     this.server = new Server({
       // Limit number of storage read keys for easier testing
       maxStorageReadKeys: MAX_STORAGE_READ_KEYS,
+      cdn3Path: this.cdn3Path,
     });
 
     this.options = {
@@ -286,12 +289,9 @@ export class Bootstrap {
 
     await Promise.race([
       Promise.all([
-        this.storagePath
-          ? fs.rm(this.storagePath, { recursive: true })
-          : Promise.resolve(),
-        this.backupPath
-          ? fs.rm(this.backupPath, { recursive: true })
-          : Promise.resolve(),
+        ...[this.storagePath, this.backupPath, this.cdn3Path].map(tmpPath =>
+          tmpPath ? fs.rm(tmpPath, { recursive: true }) : Promise.resolve()
+        ),
         this.server.close(),
         this.lastApp?.close(),
       ]),
@@ -649,6 +649,7 @@ export class Bootstrap {
       cdn: {
         '0': url,
         '2': url,
+        '3': `${url}/cdn3`,
       },
       updatesEnabled: false,
 

ts/test-mock/helpers.ts

@@ -139,12 +139,14 @@ export function sendTextMessage({
   from,
   to,
   text,
+  attachments,
   desktop,
   timestamp = Date.now(),
 }: {
   from: PrimaryDevice;
   to: PrimaryDevice | Device | GroupInfo;
   text: string;
+  attachments?: Array<Proto.IAttachmentPointer>;
   desktop: Device;
   timestamp?: number;
 }): Promise<void> {
@@ -158,6 +160,7 @@ export function sendTextMessage({
       to: to as PrimaryDevice,
       dataMessage: {
         body: text,
+        attachments,
         timestamp: Long.fromNumber(timestamp),
         groupV2: groupInfo
           ? {

ts/test-mock/messaging/attachments_test.ts

@@ -0,0 +1,111 @@
+// Copyright 2024 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import createDebug from 'debug';
+import { expect } from 'playwright/test';
+import { type PrimaryDevice, StorageState } from '@signalapp/mock-server';
+import * as path from 'path';
+import type { App } from '../playwright';
+import { Bootstrap } from '../bootstrap';
+import {
+  getMessageInTimelineByTimestamp,
+  getTimeline,
+  sendTextMessage,
+  typeIntoInput,
+} from '../helpers';
+import * as durations from '../../util/durations';
+import { strictAssert } from '../../util/assert';
+
+export const debug = createDebug('mock:test:attachments');
+
+describe('attachments', function (this: Mocha.Suite) {
+  this.timeout(durations.MINUTE);
+
+  let bootstrap: Bootstrap;
+  let app: App;
+  let pinned: PrimaryDevice;
+
+  beforeEach(async () => {
+    bootstrap = new Bootstrap();
+    await bootstrap.init();
+
+    let state = StorageState.getEmpty();
+
+    const { phone, contacts } = bootstrap;
+    [pinned] = contacts;
+
+    state = state.addContact(pinned, {
+      identityKey: pinned.publicKey.serialize(),
+      profileKey: pinned.profileKey.serialize(),
+      whitelisted: true,
+    });
+
+    state = state.pin(pinned);
+    await phone.setStorageState(state);
+
+    app = await bootstrap.link();
+  });
+
+  afterEach(async function (this: Mocha.Context) {
+    if (!bootstrap) {
+      return;
+    }
+
+    await bootstrap.maybeSaveLogs(this.currentTest, app);
+    await app.close();
+    await bootstrap.teardown();
+  });
+
+  it('can upload attachment to CDN3 and download incoming attachment', async () => {
+    const page = await app.getWindow();
+
+    await page.getByTestId(pinned.device.aci).click();
+    await page
+      .getByTestId('attachfile-input')
+      .setInputFiles(
+        path.join(__dirname, '..', '..', '..', 'fixtures', 'cat-screenshot.png')
+      );
+    const input = await app.waitForEnabledComposer();
+    await typeIntoInput(input, 'This is my cat');
+    await input.press('Enter');
+
+    const allMessagesLocator = getTimeline(page).getByRole('article');
+    await expect(allMessagesLocator).toHaveCount(1);
+
+    const allMessages = await allMessagesLocator.all();
+    const message = allMessages[0];
+
+    await message.getByText('This is my cat').waitFor();
+    await message
+      .locator('.module-message__metadata__status-icon--sent')
+      .waitFor();
+
+    const timestamp = await message
+      .locator('.module-message.module-message--outgoing')
+      .getAttribute('data-testid');
+
+    strictAssert(timestamp, 'timestamp must exist');
+
+    // For this test, just send back the same attachment that was uploaded to test a
+    // round-trip
+    const receivedMessage = await pinned.waitForMessage();
+    const attachment = receivedMessage.dataMessage.attachments?.[0];
+    strictAssert(attachment, 'attachment must exist');
+
+    const incomingTimestamp = Date.now();
+    await sendTextMessage({
+      from: pinned,
+      to: bootstrap.desktop,
+      desktop: bootstrap.desktop,
+      text: 'Wait, that is MY cat!',
+      attachments: [attachment],
+      timestamp: incomingTimestamp,
+    });
+
+    await expect(
+      getMessageInTimelineByTimestamp(page, incomingTimestamp).locator(
+        'img.module-image__image'
+      )
+    ).toBeVisible();
+  });
+});