nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Fix handling of SVGs (#31359)

Browse Source 
* Fix handling of SVGs

1. Ensure we always include thumbnails for them
2. Show `m.file` handler if we cannot render the SVG
3. When opening ImageView use svg thumbnail if the SVG cannot be rendered

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix UploadConfirmDialog choking under React devmode

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix test

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Add tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
2025-12-01 16:00:09 +00:00
committed by GitHub
parent afa186cdf4
commit 45ab536737
10 changed files with 389 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
test/unit-tests/components/views/dialogs/UploadConfirmDialog-test.tsx Normal file
View File

@@ -0,0 +1,27 @@
/*
Copyright 2025 Element Creations Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { render } from "jest-matrix-react";
import { secureRandomString } from "matrix-js-sdk/src/randomstring";
import UploadConfirmDialog from "../../../../../src/components/views/dialogs/UploadConfirmDialog.tsx";
describe("<UploadConfirmDialog />", () => {
it("should display image preview", () => {
const url = "blob:null/1234-5678-9101-1121";
jest.spyOn(URL, "createObjectURL").mockReturnValue(url);
const file = new File([secureRandomString(1024 * 124)], "image.png", { type: "image/png" });
const { asFragment, getByRole } = render(
<UploadConfirmDialog file={file} currentIndex={0} totalFiles={1} onFinished={jest.fn()} />,
);
expect(getByRole("img")).toHaveAttribute("src", url);
expect(asFragment()).toMatchSnapshot();
});
});

80
test/unit-tests/components/views/dialogs/__snapshots__/UploadConfirmDialog-test.tsx.snap Normal file
View File

@@ -0,0 +1,80 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`<UploadConfirmDialog /> should display image preview 1`] = `
<DocumentFragment>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
<div
aria-describedby="mx_Dialog_content"
aria-labelledby="mx_BaseDialog_title"
class="mx_UploadConfirmDialog"
data-focus-lock-disabled="false"
role="dialog"
tabindex="-1"
>
<div
class="mx_Dialog_header"
>
<h1
class="mx_Heading_h3 mx_Dialog_title"
id="mx_BaseDialog_title"
>
Upload files
</h1>
</div>
<div
id="mx_Dialog_content"
>
<div
class="mx_UploadConfirmDialog_previewOuter"
>
<div
class="mx_UploadConfirmDialog_previewInner"
>
<div>
<img
aria-labelledby="mx-uploadconfirmdialog-image.png"
class="mx_UploadConfirmDialog_imagePreview"
src="blob:null/1234-5678-9101-1121"
/>
</div>
<div
id="mx-uploadconfirmdialog-image.png"
>
image.png (124 KB)
</div>
</div>
</div>
</div>
<div
class="mx_Dialog_buttons"
>
<span
class="mx_Dialog_buttons_row"
>
<button
class="mx_Dialog_primary"
data-testid="dialog-primary-button"
type="button"
>
Upload
</button>
</span>
</div>
<div
aria-label="Close dialog"
class="mx_AccessibleButton mx_Dialog_cancelButton"
role="button"
tabindex="0"
/>
</div>
<div
data-focus-guard="true"
style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
tabindex="0"
/>
</DocumentFragment>
`;