Take Jest snapshots of widgets (`AppTile`) (#10897)

* Take a Jest snapshot of a widget (AppTile)

* Fix the comment

* Update test/components/views/elements/AppTile-test.tsx

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Add container

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
t3chguy/dedup-icons-17oct
Suguru Hirahara 2023-05-18 08:30:55 +00:00 committed by GitHub
parent 38467c64bb
commit 8637a5d77d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 0 deletions

View File

@ -359,6 +359,13 @@ describe("AppTile", () => {
moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer");
});
it("should render", () => {
const { container, asFragment } = renderResult;
expect(container.querySelector(".mx_Spinner")).toBeFalsy(); // Assert that the spinner is gone
expect(asFragment()).toMatchSnapshot(); // Take a snapshot of the pinned widget
});
it("should not display the »Popout widget« button", () => {
expect(renderResult.queryByLabelText("Popout widget")).not.toBeInTheDocument();
});

View File

@ -0,0 +1,64 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AppTile for a pinned widget should render 1`] = `
<DocumentFragment>
<div
class="mx_AppTile"
id="1"
>
<div
class="mx_AppTileMenuBar"
>
<span
class="mx_AppTileMenuBar_title"
style="pointer-events: none;"
>
<span>
<img
alt=""
class="mx_BaseAvatar mx_BaseAvatar_image mx_WidgetAvatar"
data-testid="avatar-img"
loading="lazy"
src="image-file-stub"
style="width: 20px; height: 20px;"
/>
<b>
Example 1
</b>
<span />
</span>
</span>
<span
class="mx_AppTileMenuBar_widgets"
>
<div
class="mx_AccessibleButton mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--collapse"
role="button"
tabindex="0"
title="Un-maximise"
/>
<div
class="mx_AccessibleButton mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--minimise"
role="button"
tabindex="0"
title="Minimise"
/>
<div
aria-expanded="false"
aria-haspopup="true"
aria-label="Options"
class="mx_AccessibleButton mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--menu"
role="button"
tabindex="0"
title="Options"
/>
</span>
</div>
<div
class="mx_AppTile_persistedWrapper"
>
<div />
</div>
</div>
</DocumentFragment>
`;