Tooltip: Use AccessibleButton
in reusable elements (#12461)
* Update reusable elements * Update tests * Make right as default tooltip placement * Add tests
This commit is contained in:
parent
d5bf1022e9
commit
44e2a6d070
14 changed files with 160 additions and 30 deletions
|
@ -45,6 +45,7 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
|
|||
<div
|
||||
aria-label="Copy"
|
||||
class="mx_AccessibleButton mx_CopyableText_copyButton"
|
||||
data-state="closed"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
/>
|
||||
|
|
|
@ -15,7 +15,8 @@ limitations under the License.
|
|||
*/
|
||||
|
||||
import React from "react";
|
||||
import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import LabsUserSettingsTab from "../../../../../../src/components/views/settings/tabs/user/LabsUserSettingsTab";
|
||||
import SettingsStore from "../../../../../../src/settings/SettingsStore";
|
||||
|
@ -113,12 +114,14 @@ describe("<LabsUserSettingsTab />", () => {
|
|||
expect(toggle.getAttribute("aria-checked")).toEqual("true");
|
||||
|
||||
// Hover over the toggle to make it show the tooltip
|
||||
fireEvent.mouseOver(toggle);
|
||||
await userEvent.hover(toggle);
|
||||
|
||||
const tooltip = rendered.getByRole("tooltip");
|
||||
expect(tooltip).toHaveTextContent(
|
||||
"Once enabled, Rust cryptography can only be disabled by logging out and in again",
|
||||
);
|
||||
await waitFor(() => {
|
||||
const tooltip = screen.getByRole("tooltip");
|
||||
expect(tooltip).toHaveTextContent(
|
||||
"Once enabled, Rust cryptography can only be disabled by logging out and in again",
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
@ -150,12 +153,14 @@ describe("<LabsUserSettingsTab />", () => {
|
|||
expect(toggle.getAttribute("aria-checked")).toEqual("true");
|
||||
|
||||
// Hover over the toggle to make it show the tooltip
|
||||
fireEvent.mouseOver(toggle);
|
||||
await userEvent.hover(toggle);
|
||||
|
||||
const tooltip = rendered.getByRole("tooltip");
|
||||
expect(tooltip).toHaveTextContent(
|
||||
"Rust cryptography cannot be disabled on this deployment of BrandedClient",
|
||||
);
|
||||
await waitFor(() => {
|
||||
const tooltip = rendered.getByRole("tooltip");
|
||||
expect(tooltip).toHaveTextContent(
|
||||
"Rust cryptography cannot be disabled on this deployment of BrandedClient",
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -289,6 +289,7 @@ exports[`PreferencesUserSettingsTab should render 1`] = `
|
|||
aria-disabled="true"
|
||||
aria-label="Send read receipts"
|
||||
class="mx_AccessibleButton mx_ToggleSwitch mx_ToggleSwitch_on"
|
||||
data-state="closed"
|
||||
id="mx_SettingsFlag_GQvdMWe954DV"
|
||||
role="switch"
|
||||
tabindex="0"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue