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

* fix image wrapping when showImage previews is disabled

* strict v2

(cherry picked from commit 542bf68c63)

Co-authored-by: Kerry <kerrya@element.io>
This commit is contained in:
ElementRobot 2023-05-05 13:13:51 +01:00 committed by GitHub
parent 23365ed023
commit b19a13dc8b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 70 additions and 9 deletions
src/components/views/messages
test/components/views/messages

View file

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

View file

@ -15,7 +15,7 @@ limitations under the License.
*/
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 fetchMock from "fetch-mock-jest";
import encrypt from "matrix-encrypt-attachment";
@ -31,6 +31,7 @@ import {
mockClientMethodsUser,
} from "../../../test-utils";
import { MediaEventHelper } from "../../../../src/utils/MediaEventHelper";
import SettingsStore from "../../../../src/settings/SettingsStore";
jest.mock("matrix-encrypt-attachment", () => ({
decryptAttachment: jest.fn(),
@ -61,6 +62,7 @@ describe("<MImageBody/>", () => {
sender: userId,
type: EventType.RoomMessage,
content: {
body: "alt for a test image",
info: {
w: 40,
h: 50,
@ -70,12 +72,18 @@ describe("<MImageBody/>", () => {
},
},
});
const props = {
onHeightChanged: jest.fn(),
onMessageAllowed: jest.fn(),
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 () => {
fetchMock.getOnce(url, { status: 200 });
@ -102,6 +110,8 @@ describe("<MImageBody/>", () => {
/>,
);
expect(fetchMock).toHaveBeenCalledWith(url);
await screen.findByText("Error downloading image");
});
@ -119,4 +129,46 @@ describe("<MImageBody/>", () => {
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();
});
});
});