Tooltip: migrate remaining tooltips from AccessibleTooltipButton to AccessibleButton (#12522)

* Use `AccessibleButton` in `RovingAccessibleTooltipButton` * Update snapshots * Update @vector-im/compound-web * Update composer * Update formating buttons * Update snapshots * Update `ContextMenuTooltipButton.tsx` * Fix placement * Update tests * Remove placement * Update space panel snapshot * Remove default placement * Update snapshots * Update snapshots * Use kbd * Update ``@vector-im/compound-web` * Migrate remaining files * Remove `AccessibleTooltipButton.tsx` * Add test to `InteractiveAuthEntryComponents` * Add test to `InteractiveAuthEntryComponents` * Back to old RoomList-test.tsx * Improve `InteractiveAuthEntryComponent` tests * Review changes
2024-05-17 16:11:07 +02:00 · 2024-05-17 16:11:07 +02:00 · 75562b1d1b
commit 75562b1d1b
parent 8f3c8b3515
6 changed files with 114 additions and 139 deletions
--- a/test/components/views/auth/InteractiveAuthEntryComponents-test.tsx
+++ b/test/components/views/auth/InteractiveAuthEntryComponents-test.tsx
@ -0,0 +1,65 @@
+/*
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react";
+import { render, screen, waitFor, act } from "@testing-library/react";
+import { AuthType } from "matrix-js-sdk/src/interactive-auth";
+import userEvent from "@testing-library/user-event";
+
+import { EmailIdentityAuthEntry } from "../../../../src/components/views/auth/InteractiveAuthEntryComponents";
+import { createTestClient } from "../../../test-utils";
+
+describe("<EmailIdentityAuthEntry/>", () => {
+    const renderIdentityAuth = () => {
+        const matrixClient = createTestClient();
+
+        return render(
+            <EmailIdentityAuthEntry
+                matrixClient={matrixClient}
+                loginType={AuthType.Email}
+                onPhaseChange={jest.fn()}
+                submitAuthDict={jest.fn()}
+                fail={jest.fn()}
+                clientSecret="my secret"
+                showContinue={true}
+                inputs={{ emailAddress: "alice@example.xyz" }}
+            />,
+        );
+    };
+
+    test("should render", () => {
+        const { container } = renderIdentityAuth();
+        expect(container).toMatchSnapshot();
+    });
+
+    test("should clear the requested state when the button tooltip is hidden", async () => {
+        renderIdentityAuth();
+
+        // After a click on the resend button, the button should display the resent label
+        screen.getByRole("button", { name: "Resend" }).click();
+        await waitFor(() => expect(screen.queryByRole("button", { name: "Resent!" })).toBeInTheDocument());
+        expect(screen.queryByRole("button", { name: "Resend" })).toBeNull();
+
+        const resentButton = screen.getByRole("button", { name: "Resent!" });
+        // Hover briefly the button and wait for the tooltip to be displayed
+        await userEvent.hover(resentButton);
+        await waitFor(() => expect(screen.getByRole("tooltip", { name: "Resent!" })).toBeInTheDocument());
+
+        // On unhover, it should display again the resend button
+        await act(() => userEvent.unhover(resentButton));
+        await waitFor(() => expect(screen.queryByRole("button", { name: "Resend" })).toBeInTheDocument());
+    });
+});
--- a/test/components/views/auth/snapshots/InteractiveAuthEntryComponents-test.tsx.snap
+++ b/test/components/views/auth/snapshots/InteractiveAuthEntryComponents-test.tsx.snap
@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EmailIdentityAuthEntry/> should render 1`] = `
+<div>
+  <div
+    class="mx_InteractiveAuthEntryComponents_emailWrapper"
+  >
+    <p>
+      <span>
+        To create your account, open the link in the email we just sent to 
+        <b>
+          alice@example.xyz
+        </b>
+        .
+      </span>
+    </p>
+    <p
+      class="secondary"
+    >
+      <span>
+        Did not receive it? 
+        <div
+          aria-label="Resend"
+          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+          role="button"
+          tabindex="0"
+        >
+          Resend it
+        </div>
+      </span>
+    </p>
+  </div>
+</div>
+`;