Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Fix tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@florianduros
florianduros committed Apr 18, 2024
1 parent 7ac5665 commit 1d249a2
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 8 deletions.
1 change: 0 additions & 1 deletion src/components/views/elements/AccessibleButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,6 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
[`mx_AccessibleButton_kind_${kind}`]: kind,
mx_AccessibleButton_disabled: disabled,
});

// React.createElement expects InputHTMLAttributes
const button = React.createElement(element, newProps, children);

Expand Down
10 changes: 5 additions & 5 deletions test/components/views/right_panel/UserInfo-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,10 +442,10 @@ describe("<UserInfo />", () => {
});

// there should now be a button with the non-dehydrated device ID
expect(screen.getByRole("button", { description: "d1" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument();

// but not for the dehydrated device ID
expect(screen.queryByRole("button", { description: "d2" })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "dehydrated device" })).not.toBeInTheDocument();

// there should be a line saying that the user has "Offline device" enabled
expect(screen.getByText("Offline device enabled")).toBeInTheDocument();
Expand Down Expand Up @@ -528,7 +528,7 @@ describe("<UserInfo />", () => {

// the dehydrated device should be shown as an unverified device, which means
// there should now be a button with the device id ...
const deviceButton = screen.getByRole("button", { description: "d2" });
const deviceButton = screen.getByRole("button", { name: "dehydrated device" });

Check warning on line 531 in test/components/views/right_panel/UserInfo-test.tsx

View workflow job for this annotation

GitHub Actions / Jest (1)

RETRY 1: <UserInfo /> › with crypto enabled › device dehydration › shows an unverified dehydrated device 

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "dehydrated device"

Here are the accessible roles:

  button:

  Name "":
  <div
    class="mx_AccessibleButton mx_BaseCard_close"
    data-state="closed"
    data-testid="base-card-close-button"
    role="button"
    tabindex="0"
  />

  Name "Profile picture":
  <button
    aria-label="Profile picture"
    aria-live="off"
    class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
    data-color="3"
    data-testid="avatar-img"
    data-type="round"
    role="button"
    style="--cpd-avatar-size: 230.39999999999998px;"
  />

  Name "my device Not trusted":
  <div
    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
    data-state="closed"
    role="button"
    tabindex="0"
  />

  Name "dehydrated device Not trusted":
  <div
    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
    data-state="closed"
    role="button"
    tabindex="0"
  />

  Name "Message":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  Name "Share Link to User":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  Name "Ignore":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  --------------------------------------------------
  heading:

  Name "@user:example.com":
  <h2 />

  Name "Security":
  <h3 />

  Name "Options":
  <h3 />

  --------------------------------------------------
  paragraph:

  Name "":
  <p />

  --------------------------------------------------

Ignored nodes: comments, script, style
<body>
  <div
    id="mx_Dialog_Container"
  />
  <div
    id="mx_Dialog_StaticContainer"
  />
  <div>
    <div
      class="mx_BaseCard mx_UserInfo"
    >
      <div
        class="mx_BaseCard_header"
      >
        <div
          class="mx_AccessibleButton mx_BaseCard_close"
          data-state="closed"
          data-testid="base-card-close-button"
          role="button"
          tabindex="0"
        />
        <div
          class="mx_BaseCard_headerProp"
        />
      </div>
      <div
        class="mx_AutoHideScrollbar"
        tabindex="-1"
      >
        <div
          class="mx_UserInfo_avatar"
        >
          <div
            class="mx_UserInfo_avatar_transition"
          >
            <div
              class="mx_UserInfo_avatar_transition_child"
            >
              <button
                aria-label="Profile picture"
                aria-live="off"
                class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
                data-color="3"
                data-testid="avatar-img"
                data-type="round"
                role="button"
                style="--cpd-avatar-size: 230.39999999999998px;"
              >
                u
              </button>
            </div>
          </div>
        </div>
        <div
          class="mx_UserInfo_container mx_UserInfo_separator"
        >
          <div
            class="mx_UserInfo_profile"
          >
            <div>
              <h2>
                <span
                  aria-label="@user:example.com"
                  dir="auto"
                  title="@user:example.com"
                >
                  @user:example.com
                </span>
              </h2>
            </div>
            <div
              class="mx_UserInfo_profile_mxid"
            >
              customUserIdentifier
            </div>
            <div
              class="mx_UserInfo_profileStatus"
            >
              <div
                class="mx_PresenceLabel"
              >
                Unknown
              </div>
            </div>
          </div>
        </div>
        <div
          class="mx_UserInfo_container"

Check warning on line 531 in test/components/views/right_panel/UserInfo-test.tsx

View workflow job for this annotation

GitHub Actions / Jest (1)

RETRY 2: <UserInfo /> › with crypto enabled › device dehydration › shows an unverified dehydrated device 

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "dehydrated device"

Here are the accessible roles:

  button:

  Name "":
  <div
    class="mx_AccessibleButton mx_BaseCard_close"
    data-state="closed"
    data-testid="base-card-close-button"
    role="button"
    tabindex="0"
  />

  Name "Profile picture":
  <button
    aria-label="Profile picture"
    aria-live="off"
    class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
    data-color="3"
    data-testid="avatar-img"
    data-type="round"
    role="button"
    style="--cpd-avatar-size: 230.39999999999998px;"
  />

  Name "my device Not trusted":
  <div
    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
    data-state="closed"
    role="button"
    tabindex="0"
  />

  Name "dehydrated device Not trusted":
  <div
    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
    data-state="closed"
    role="button"
    tabindex="0"
  />

  Name "Message":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  Name "Share Link to User":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  Name "Ignore":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  --------------------------------------------------
  heading:

  Name "@user:example.com":
  <h2 />

  Name "Security":
  <h3 />

  Name "Options":
  <h3 />

  --------------------------------------------------
  paragraph:

  Name "":
  <p />

  --------------------------------------------------

Ignored nodes: comments, script, style
<body>
  <div
    id="mx_Dialog_Container"
  />
  <div
    id="mx_Dialog_StaticContainer"
  />
  <div>
    <div
      class="mx_BaseCard mx_UserInfo"
    >
      <div
        class="mx_BaseCard_header"
      >
        <div
          class="mx_AccessibleButton mx_BaseCard_close"
          data-state="closed"
          data-testid="base-card-close-button"
          role="button"
          tabindex="0"
        />
        <div
          class="mx_BaseCard_headerProp"
        />
      </div>
      <div
        class="mx_AutoHideScrollbar"
        tabindex="-1"
      >
        <div
          class="mx_UserInfo_avatar"
        >
          <div
            class="mx_UserInfo_avatar_transition"
          >
            <div
              class="mx_UserInfo_avatar_transition_child"
            >
              <button
                aria-label="Profile picture"
                aria-live="off"
                class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
                data-color="3"
                data-testid="avatar-img"
                data-type="round"
                role="button"
                style="--cpd-avatar-size: 230.39999999999998px;"
              >
                u
              </button>
            </div>
          </div>
        </div>
        <div
          class="mx_UserInfo_container mx_UserInfo_separator"
        >
          <div
            class="mx_UserInfo_profile"
          >
            <div>
              <h2>
                <span
                  aria-label="@user:example.com"
                  dir="auto"
                  title="@user:example.com"
                >
                  @user:example.com
                </span>
              </h2>
            </div>
            <div
              class="mx_UserInfo_profile_mxid"
            >
              customUserIdentifier
            </div>
            <div
              class="mx_UserInfo_profileStatus"
            >
              <div
                class="mx_PresenceLabel"
              >
                Unknown
              </div>
            </div>
          </div>
        </div>
        <div
          class="mx_UserInfo_container"

Check failure on line 531 in test/components/views/right_panel/UserInfo-test.tsx

View workflow job for this annotation

GitHub Actions / Jest (1)

<UserInfo /> › with crypto enabled › device dehydration › shows an unverified dehydrated device 

TestingLibraryElementError: Unable to find an accessible element with the role "button" and name "dehydrated device"

Here are the accessible roles:

  button:

  Name "":
  <div
    class="mx_AccessibleButton mx_BaseCard_close"
    data-state="closed"
    data-testid="base-card-close-button"
    role="button"
    tabindex="0"
  />

  Name "Profile picture":
  <button
    aria-label="Profile picture"
    aria-live="off"
    class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
    data-color="3"
    data-testid="avatar-img"
    data-type="round"
    role="button"
    style="--cpd-avatar-size: 230.39999999999998px;"
  />

  Name "my device Not trusted":
  <div
    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
    data-state="closed"
    role="button"
    tabindex="0"
  />

  Name "dehydrated device Not trusted":
  <div
    class="mx_AccessibleButton mx_UserInfo_device mx_UserInfo_device_unverified"
    data-state="closed"
    role="button"
    tabindex="0"
  />

  Name "Message":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  Name "Share Link to User":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  Name "Ignore":
  <div
    class="mx_AccessibleButton mx_UserInfo_field mx_UserInfo_destructive mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link"
    role="button"
    tabindex="0"
  />

  --------------------------------------------------
  heading:

  Name "@user:example.com":
  <h2 />

  Name "Security":
  <h3 />

  Name "Options":
  <h3 />

  --------------------------------------------------
  paragraph:

  Name "":
  <p />

  --------------------------------------------------

Ignored nodes: comments, script, style
<body>
  <div
    id="mx_Dialog_Container"
  />
  <div
    id="mx_Dialog_StaticContainer"
  />
  <div>
    <div
      class="mx_BaseCard mx_UserInfo"
    >
      <div
        class="mx_BaseCard_header"
      >
        <div
          class="mx_AccessibleButton mx_BaseCard_close"
          data-state="closed"
          data-testid="base-card-close-button"
          role="button"
          tabindex="0"
        />
        <div
          class="mx_BaseCard_headerProp"
        />
      </div>
      <div
        class="mx_AutoHideScrollbar"
        tabindex="-1"
      >
        <div
          class="mx_UserInfo_avatar"
        >
          <div
            class="mx_UserInfo_avatar_transition"
          >
            <div
              class="mx_UserInfo_avatar_transition_child"
            >
              <button
                aria-label="Profile picture"
                aria-live="off"
                class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
                data-color="3"
                data-testid="avatar-img"
                data-type="round"
                role="button"
                style="--cpd-avatar-size: 230.39999999999998px;"
              >
                u
              </button>
            </div>
          </div>
        </div>
        <div
          class="mx_UserInfo_container mx_UserInfo_separator"
        >
          <div
            class="mx_UserInfo_profile"
          >
            <div>
              <h2>
                <span
                  aria-label="@user:example.com"
                  dir="auto"
                  title="@user:example.com"
                >
                  @user:example.com
                </span>
              </h2>
            </div>
            <div
              class="mx_UserInfo_profile_mxid"
            >
              customUserIdentifier
            </div>
            <div
              class="mx_UserInfo_profileStatus"
            >
              <div
                class="mx_PresenceLabel"
              >
                Unknown
              </div>
            </div>
          </div>
        </div>
        <div
          class="mx_UserInfo_container"

// ... which should contain the device name
expect(within(deviceButton).getByText("dehydrated device")).toBeInTheDocument();
Expand Down Expand Up @@ -571,12 +571,12 @@ describe("<UserInfo />", () => {

// the dehydrated devices should be shown as an unverified device, which means
// there should now be a button with the first dehydrated device id ...
const device1Button = screen.getByRole("button", { description: "d1" });
const device1Button = screen.getByRole("button", { name: "dehydrated device 1" });

// ... which should contain the device name
expect(within(device1Button).getByText("dehydrated device 1")).toBeInTheDocument();
// and a button with the second dehydrated device id ...
const device2Button = screen.getByRole("button", { description: "d2" });
const device2Button = screen.getByRole("button", { name: "dehydrated device 2" });

// ... which should contain the device name
expect(within(device2Button).getByText("dehydrated device 2")).toBeInTheDocument();
Expand Down
4 changes: 2 additions & 2 deletions test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
aria-haspopup="true"
aria-label="User menu"
class="mx_AccessibleButton mx_UserMenu_contextMenuButton"
data-state="closed"
role="button"
tabindex="0"
title="User menu"
>
<div
class="mx_UserMenu_userAvatar"
Expand All @@ -34,8 +34,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
</div>
</div>
<div
aria-label="Expand"
class="mx_AccessibleButton mx_SpacePanel_toggleCollapse"
data-state="closed"
role="button"
tabindex="0"
/>
Expand Down

0 comments on commit 1d249a2

Please sign in to comment.