Fix: reveal images when image previews are disabled (#10781)

* fix image wrapping when showImage previews is disabled

* strict v2
t3chguy/dedup-icons-17oct
Kerry 2023-05-05 15:41:42 +12:00 committed by GitHub
parent 44e0732144
commit 542bf68c63
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 9 deletions

View File

@ -389,7 +389,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
thumbUrl: string | null, thumbUrl: string | null,
content: IMediaEventContent, content: IMediaEventContent,
forcedHeight?: number, forcedHeight?: number,
): JSX.Element { ): ReactNode {
if (!thumbUrl) thumbUrl = contentUrl; // fallback if (!thumbUrl) thumbUrl = contentUrl; // fallback
// magic number // magic number
@ -524,16 +524,25 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
</div> </div>
); );
return contentUrl ? this.wrapImage(contentUrl, thumbnail) : thumbnail; return this.wrapImage(contentUrl, thumbnail);
} }
// Overridden by MStickerBody // Overridden by MStickerBody
protected wrapImage(contentUrl: string, children: JSX.Element): JSX.Element { protected wrapImage(contentUrl: string | null | undefined, children: JSX.Element): ReactNode {
return ( if (contentUrl) {
<a href={contentUrl} target={this.props.forExport ? "_blank" : undefined} onClick={this.onClick}> return (
{children} <a href={contentUrl} target={this.props.forExport ? "_blank" : undefined} onClick={this.onClick}>
</a> {children}
); </a>
);
} else if (!this.state.showImage) {
return (
<div role="button" onClick={this.onClick}>
{children}
</div>
);
}
return children;
} }
// Overridden by MStickerBody // Overridden by MStickerBody

View File

@ -15,7 +15,7 @@ limitations under the License.
*/ */
import React from "react"; import React from "react";
import { render, screen } from "@testing-library/react"; import { fireEvent, render, screen } from "@testing-library/react";
import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix"; import { EventType, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
import fetchMock from "fetch-mock-jest"; import fetchMock from "fetch-mock-jest";
import encrypt from "matrix-encrypt-attachment"; import encrypt from "matrix-encrypt-attachment";
@ -31,6 +31,7 @@ import {
mockClientMethodsUser, mockClientMethodsUser,
} from "../../../test-utils"; } from "../../../test-utils";
import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper"; import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
import SettingsStore from "../../../../src/settings/SettingsStore";
jest.mock("matrix-encrypt-attachment", () => ({ jest.mock("matrix-encrypt-attachment", () => ({
decryptAttachment: jest.fn(), decryptAttachment: jest.fn(),
@ -61,6 +62,7 @@ describe("<MImageBody/>", () => {
sender: userId, sender: userId,
type: EventType.RoomMessage, type: EventType.RoomMessage,
content: { content: {
body: "alt for a test image",
info: { info: {
w: 40, w: 40,
h: 50, h: 50,
@ -70,12 +72,18 @@ describe("<MImageBody/>", () => {
}, },
}, },
}); });
const props = { const props = {
onHeightChanged: jest.fn(), onHeightChanged: jest.fn(),
onMessageAllowed: jest.fn(), onMessageAllowed: jest.fn(),
permalinkCreator: new RoomPermalinkCreator(new Room(encryptedMediaEvent.getRoomId()!, cli, cli.getUserId()!)), permalinkCreator: new RoomPermalinkCreator(new Room(encryptedMediaEvent.getRoomId()!, cli, cli.getUserId()!)),
}; };
beforeEach(() => {
jest.spyOn(SettingsStore, "getValue").mockRestore();
fetchMock.mockReset();
});
it("should show a thumbnail while image is being downloaded", async () => { it("should show a thumbnail while image is being downloaded", async () => {
fetchMock.getOnce(url, { status: 200 }); fetchMock.getOnce(url, { status: 200 });
@ -102,6 +110,8 @@ describe("<MImageBody/>", () => {
/>, />,
); );
expect(fetchMock).toHaveBeenCalledWith(url);
await screen.findByText("Error downloading image"); await screen.findByText("Error downloading image");
}); });
@ -119,4 +129,46 @@ describe("<MImageBody/>", () => {
await screen.findByText("Error decrypting image"); await screen.findByText("Error decrypting image");
}); });
describe("with image previews/thumbnails disabled", () => {
beforeEach(() => {
jest.spyOn(SettingsStore, "getValue").mockReturnValue(false);
});
it("should not download image", async () => {
fetchMock.getOnce(url, { status: 200 });
render(
<MImageBody
{...props}
mxEvent={encryptedMediaEvent}
mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
/>,
);
expect(fetchMock).not.toHaveFetched(url);
});
it("should render hidden image placeholder", async () => {
fetchMock.getOnce(url, { status: 200 });
render(
<MImageBody
{...props}
mxEvent={encryptedMediaEvent}
mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
/>,
);
expect(screen.getByText("Show image")).toBeInTheDocument();
fireEvent.click(screen.getByRole("button"));
// image fetched after clicking show image
expect(fetchMock).toHaveFetched(url);
// spinner while downloading image
expect(screen.getByRole("progressbar")).toBeInTheDocument();
});
});
}); });