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

Improved a11y for Field feedback and Secure Phrase input (#10320)

Browse source 
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Sebbones 2023-03-08 12:32:50 +01:00 • committed by GitHub
parent f60f7a19af
commit 0c1c3f1cde
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 78 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

59
test/components/views/elements/Field-test.tsx
View file

@ -15,7 +15,7 @@ limitations under the License.
*/
import React from "react";
import { render, screen } from "@testing-library/react";
import { act, fireEvent, render, screen } from "@testing-library/react";
import Field from "../../../../src/components/views/elements/Field";
@ -51,4 +51,61 @@ describe("Field", () => {
expect(screen.getByRole("textbox")).not.toHaveAttribute("placeholder", "my placeholder");
});
});
describe("Feedback", () => {
it("Should mark the feedback as alert if invalid", async () => {
render(
<Field
value=""
validateOnFocus
onValidate={() => Promise.resolve({ valid: false, feedback: "Invalid" })}
/>,
);
// When invalid
await act(async () => {
fireEvent.focus(screen.getByRole("textbox"));
});
// Expect 'alert' role
expect(screen.queryByRole("alert")).toBeInTheDocument();
});
it("Should mark the feedback as status if valid", async () => {
render(
<Field
value=""
validateOnFocus
onValidate={() => Promise.resolve({ valid: true, feedback: "Valid" })}
/>,
);
// When valid
await act(async () => {
fireEvent.focus(screen.getByRole("textbox"));
});
// Expect 'status' role
expect(screen.queryByRole("status")).toBeInTheDocument();
});
it("Should mark the feedback as tooltip if custom tooltip set", async () => {
render(
<Field
value=""
validateOnFocus
onValidate={() => Promise.resolve({ valid: true, feedback: "Valid" })}
tooltipContent="Tooltip"
/>,
);
// When valid or invalid and 'tooltipContent' set
await act(async () => {
fireEvent.focus(screen.getByRole("textbox"));
});
// Expect 'tooltip' role
expect(screen.queryByRole("tooltip")).toBeInTheDocument();
});
});
});