imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: Images no longer reserve their space in the timeline correctly (#10571)

Browse source 
* test case

* fix + lint

* refix strictNullChecks issue

* add comment about max image size

* tweak

* use safer magic number
This commit is contained in:
Kerry 2023-04-13 13:22:16 +12:00 • committed by GitHub
parent 9b8459e8e9
commit 6280395928
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

19
test/components/views/messages/MImageBody-test.tsx
View file

@ -61,6 +61,10 @@ describe("<MImageBody/>", () => {
sender: userId,
type: EventType.RoomMessage,
content: {
info: {
w: 40,
h: 50,
},
file: {
url: "mxc://server/encrypted-image",
},
@ -72,6 +76,21 @@ describe("<MImageBody/>", () => {
permalinkCreator: new RoomPermalinkCreator(new Room(encryptedMediaEvent.getRoomId()!, cli, cli.getUserId()!)),
};
it("should show a thumbnail while image is being downloaded", async () => {
fetchMock.getOnce(url, { status: 200 });
const { container } = render(
<MImageBody
{...props}
mxEvent={encryptedMediaEvent}
mediaEventHelper={new MediaEventHelper(encryptedMediaEvent)}
/>,
);
// thumbnail with dimensions present
expect(container).toMatchSnapshot();
});
it("should show error when encrypted media cannot be downloaded", async () => {
fetchMock.getOnce(url, { status: 500 });

36
test/components/views/messages/__snapshots__/MImageBody-test.tsx.snap Normal file
View file

@ -0,0 +1,36 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<MImageBody/> should show a thumbnail while image is being downloaded 1`] = `
<div>
<div
class="mx_MImageBody"
>
<div
class="mx_MImageBody_thumbnail_container"
style="max-height: 50px; max-width: 40px;"
>
<div
class="mx_MImageBody_placeholder"
>
<div
class="mx_Spinner"
>
<div
aria-label="Loading…"
class="mx_Spinner_icon"
data-testid="spinner"
role="progressbar"
style="width: 32px; height: 32px;"
/>
</div>
</div>
<div
style="max-height: 50px; max-width: 40px;"
/>
<div
style="height: 50px; width: 40px;"
/>
</div>
</div>
</div>
`;