[FIX, #6852] bug/missing buttons on zoomed in pictures #6852

stylesheets/components/Lightbox.scss

@@ -259,13 +259,6 @@
     transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
   }
 
-  &__container--zoom {
-    .Lightbox__header,
-    .Lightbox__footer {
-      opacity: 0;
-    }
-  }
-
   &__controls {
     display: flex;
     gap: 32px;

ts/test-mock/messaging/edit_test.ts

@@ -19,6 +19,7 @@ import { IMAGE_GIF } from '../../types/MIME';
 import { typeIntoInput } from '../helpers';
 import type { MessageAttributesType } from '../../model-types';
 import { sleep } from '../../util/sleep';
+import { createMessage } from './support/messages';
 
 export const debug = createDebug('mock:test:edit');
 
@@ -44,14 +45,6 @@ function wrap({
   };
 }
 
-function createMessage(body: string): Proto.IDataMessage {
-  return {
-    body,
-    groupV2: undefined,
-    timestamp: Long.fromNumber(Date.now()),
-  };
-}
-
 function createMessageWithQuote(body: string): Proto.IDataMessage {
   return {
     body,

ts/test-mock/messaging/image_test.ts

@@ -0,0 +1,103 @@
+/* eslint-disable no-console */
+// Copyright 2023 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import type { Proto } from '@signalapp/mock-server';
+import { assert } from 'chai';
+import type { App } from '../playwright';
+import * as durations from '../../util/durations';
+import { Bootstrap } from '../bootstrap';
+import { createMessage } from './support/messages';
+import { dropFile } from './support/file-upload';
+
+const pause = process.env.PAUSE;
+
+describe('image attachments', function (this: Mocha.Suite) {
+  this.timeout(durations.MINUTE);
+
+  let bootstrap: Bootstrap;
+  let app: App;
+
+  let message: Proto.IDataMessage;
+
+  beforeEach(async () => {
+    bootstrap = new Bootstrap({});
+    await bootstrap.init();
+    app = await bootstrap.link();
+
+    const { phone, desktop } = bootstrap;
+
+    message = createMessage('A B C');
+
+    await phone.sendRaw(
+      desktop,
+      {
+        dataMessage: message,
+      },
+      {
+        timestamp: Number(message.timestamp),
+      }
+    );
+  });
+
+  afterEach(async function (this: Mocha.Context) {
+    if (!pause) {
+      await bootstrap?.maybeSaveLogs(this.currentTest, app);
+      await app?.close();
+      await bootstrap?.teardown();
+    }
+  });
+
+  it('preserves controls when zooming in on images', async () => {
+    const window = await app.getWindow();
+    const leftPane = window.locator('#LeftPane');
+
+    await leftPane
+      .locator('.module-conversation-list__item--contact-or-conversation')
+      .first()
+      .click();
+
+    await window.locator('.module-conversation-hero').waitFor();
+
+    await window
+      .locator(`.module-message__text >> "${message.body}"`)
+      .waitFor();
+
+    await dropFile({
+      filePath: './fixtures/cat-screenshot.png',
+      contentType: 'image/png',
+      selector: '.module-timeline__messages',
+      window,
+    });
+
+    await window
+      .getByAltText('Draft image attachment: cat-screenshot.png')
+      .waitFor();
+
+    const messageTextInput = await app.waitForEnabledComposer();
+
+    await messageTextInput.press('Enter');
+
+    // @todo: How do I get the ids of the conversation or message that was just added?
+
+    // Click the image in the message to open it in lighbox view
+    await window.click('.module-message .module-image__border-overlay');
+
+    // Zoom in
+    await window.click('.Lightbox__zoom-button');
+
+    // [6852] Checking computed style because
+    //
+    //    "Elements with opacity:0 are considered visible."
+    //
+    // See: https://playwright.dev/docs/actionability#visible
+    const opacity: string = await (
+      await window.locator('.Lightbox__header')
+    ).evaluate(element => {
+      // @ts-expect-error '"window" means browser window here'
+      return window.getComputedStyle(element).getPropertyValue('opacity');
+    });
+
+    assert.strictEqual(opacity, '1');
+  });
+});

ts/test-mock/messaging/support/delay.ts

@@ -0,0 +1,7 @@
+export const delay = (ms: number): Promise<void> =>
+  new Promise(accept => {
+    const timer = setTimeout(() => {
+      clearTimeout(timer);
+      accept();
+    }, ms);
+  });

ts/test-mock/messaging/support/file-upload.ts

@@ -0,0 +1,39 @@
+import path from 'path';
+import { readFileSync } from 'fs';
+import type { Page } from 'playwright';
+
+export type Options = {
+  window: Page;
+  selector: string;
+  filePath: string;
+  contentType: string;
+};
+
+export const dropFile = async (opts: Options): Promise<void> => {
+  const { window } = opts;
+
+  const dataTransfer = await window.evaluateHandle(
+    args => {
+      // Have to take care with `args` here because this runs in the browser.
+      // So you can't supply a `Buffer` for example.
+      const { filename, data, contentType } = args;
+
+      const dt = new DataTransfer();
+      dt.items.add(
+        new File([new Uint8Array(data)], filename, {
+          type: contentType,
+        })
+      );
+      return dt;
+    },
+    {
+      contentType: opts.contentType,
+      filename: path.basename(opts.filePath),
+      data: readFileSync(opts.filePath).toJSON().data,
+    }
+  ); // https://stackoverflow.com/questions/72383727/playwright-a-buffer-is-incorrectly-serialized-when-passing-it-to-page-evaluateh
+
+  await window.dispatchEvent(opts.selector, 'drop', {
+    dataTransfer,
+  });
+};

ts/test-mock/messaging/support/messages.ts

@@ -0,0 +1,10 @@
+import type { Proto } from '@signalapp/mock-server';
+import Long from 'long';
+
+export const createMessage = (body: string): Proto.IDataMessage => {
+  return {
+    body,
+    groupV2: undefined,
+    timestamp: Long.fromNumber(Date.now()),
+  };
+};