Put the 'decrypting' tooltip back (#30446)

...when downloading encrypted attachments (regressed by https://github.com/element-hq/element-web/pull/30330).

Also adds tests for the tooltips and fix the tests so they don't pollute
mocks / dialogs.

test/unit-tests/components/views/messages/DownloadActionButton-test.tsx

@@ -11,14 +11,39 @@ import { mocked } from "jest-mock";
 import fetchMockJest from "fetch-mock-jest";
 import { fireEvent, render, screen, waitFor } from "jest-matrix-react";
 import { MatrixEvent } from "matrix-js-sdk/src/matrix";
+import userEvent from "@testing-library/user-event";
 
-import { stubClient } from "../../../../test-utils";
+import { clearAllModals, stubClient } from "../../../../test-utils";
 import DownloadActionButton from "../../../../../src/components/views/messages/DownloadActionButton";
 import Modal from "../../../../../src/Modal";
 import { MediaEventHelper } from "../../../../../src/utils/MediaEventHelper";
 import ErrorDialog from "../../../../../src/components/views/dialogs/ErrorDialog";
 
+jest.mock("matrix-encrypt-attachment", () => ({
+    decryptAttachment: jest.fn().mockResolvedValue(new Blob(["TESTFILE"], { type: "application/octet-stream" })),
+}));
+
 describe("DownloadActionButton", () => {
+    const plainEvent = new MatrixEvent({
+        room_id: "!room:id",
+        sender: "@user:id",
+        type: "m.room.message",
+        content: {
+            body: "test",
+            msgtype: "m.image",
+            url: "mxc://matrix.org/1234",
+        },
+    });
+
+    beforeEach(() => {
+        jest.restoreAllMocks();
+        fetchMockJest.restore();
+    });
+
+    afterEach(() => {
+        clearAllModals();
+    });
+
     it("should show error if media API returns one", async () => {
         const cli = stubClient();
         // eslint-disable-next-line no-restricted-properties
@@ -26,24 +51,14 @@ describe("DownloadActionButton", () => {
             (mxc) => `https://matrix.org/_matrix/media/r0/download/${mxc.slice(6)}`,
         );
 
-        fetchMockJest.get("https://matrix.org/_matrix/media/r0/download/matrix.org/1234", {
+        fetchMockJest.getOnce("https://matrix.org/_matrix/media/r0/download/matrix.org/1234", {
             status: 404,
             body: { errcode: "M_NOT_FOUND", error: "Not found" },
         });
 
-        const event = new MatrixEvent({
-            room_id: "!room:id",
-            sender: "@user:id",
-            type: "m.room.message",
-            content: {
-                body: "test",
-                msgtype: "m.image",
-                url: "mxc://matrix.org/1234",
-            },
-        });
-        const mediaEventHelper = new MediaEventHelper(event);
+        const mediaEventHelper = new MediaEventHelper(plainEvent);
 
-        render(<DownloadActionButton mxEvent={event} mediaEventHelperGet={() => mediaEventHelper} />);
+        render(<DownloadActionButton mxEvent={plainEvent} mediaEventHelperGet={() => mediaEventHelper} />);
 
         const spy = jest.spyOn(Modal, "createDialog");
 
@@ -57,4 +72,85 @@ describe("DownloadActionButton", () => {
             ),
         );
     });
+
+    it("should show download tooltip on hover", async () => {
+        stubClient();
+
+        const user = userEvent.setup();
+
+        fetchMockJest.getOnce("https://matrix.org/_matrix/media/r0/download/matrix.org/1234", "TESTFILE");
+
+        const event = new MatrixEvent({
+            room_id: "!room:id",
+            sender: "@user:id",
+            type: "m.room.message",
+            content: {
+                body: "test",
+                msgtype: "m.image",
+                url: "mxc://matrix.org/1234",
+            },
+        });
+
+        render(<DownloadActionButton mxEvent={event} mediaEventHelperGet={() => undefined} />);
+
+        const button = screen.getByRole("button");
+        await user.hover(button);
+
+        await waitFor(() => {
+            expect(screen.getByRole("tooltip")).toHaveTextContent("Download");
+        });
+    });
+
+    it("should show downloading tooltip while unencrypted files are downloading", async () => {
+        const user = userEvent.setup();
+
+        stubClient();
+
+        fetchMockJest.getOnce("http://this.is.a.url/matrix.org/1234", "TESTFILE");
+
+        const mediaEventHelper = new MediaEventHelper(plainEvent);
+
+        render(<DownloadActionButton mxEvent={plainEvent} mediaEventHelperGet={() => mediaEventHelper} />);
+
+        const button = screen.getByRole("button");
+        await user.hover(button);
+
+        await user.click(button);
+
+        await waitFor(() => {
+            expect(screen.getByRole("tooltip")).toHaveTextContent("Downloading");
+        });
+    });
+
+    it("should show decrypting tooltip while encrypted files are downloading", async () => {
+        const user = userEvent.setup();
+
+        stubClient();
+
+        fetchMockJest.getOnce("http://this.is.a.url/matrix.org/1234", "UFTUGJMF");
+
+        const e2eEvent = new MatrixEvent({
+            room_id: "!room:id",
+            sender: "@user:id",
+            type: "m.room.message",
+            content: {
+                body: "test",
+                msgtype: "m.image",
+                file: { url: "mxc://matrix.org/1234" },
+            },
+        });
+
+        const mediaEventHelper = new MediaEventHelper(e2eEvent);
+
+        render(<DownloadActionButton mxEvent={e2eEvent} mediaEventHelperGet={() => mediaEventHelper} />);
+
+        const button = screen.getByRole("button");
+        await user.hover(button);
+
+        await user.click(button);
+
+        await waitFor(() => {
+            expect(screen.getByRole("tooltip")).toHaveTextContent("Decrypting");
+        });
+    });
 });