1import type { ReactNode } from "react";
2import { renderToStaticMarkup } from "react-dom/server";
3import { describe, expect, it, vi } from "vite-plus/test";
4
5vi.mock("react-native", () => ({
6 View: ({ children }: { children: ReactNode }) => <div>{children}</div>,
7}));
8vi.mock("../../components/AppText", () => ({
9 AppText: ({
10 accessibilityElementsHidden,
11 importantForAccessibility,
12 children,
13 }: {
14 accessibilityElementsHidden?: boolean;
15 importantForAccessibility?: string;
16 children: ReactNode;
17 }) => (
18 <span
19 aria-hidden={
20 accessibilityElementsHidden || importantForAccessibility === "no-hide-descendants"
21 }
22 >
23 {children}
24 </span>
25 ),
26 AppTextInput: ({ accessibilityLabel }: { accessibilityLabel?: string }) => (
27 <input aria-label={accessibilityLabel} />
28 ),
29}));
30
31import { ConnectionFormField } from "./ConnectionFormField";
32
33describe("ConnectionFormField accessibility", () => {
34 it.each(["Host", "Pairing code"])("exposes %s once as the input name", (label) => {
35 const markup = renderToStaticMarkup(
36 <ConnectionFormField label={label} placeholder="Not an accessible name" />,
37 );
38
39 expect(markup).toContain(`<span aria-hidden="true">${label}</span>`);
40 expect(markup).toContain(`<input aria-label="${label}"/>`);
41 });
42});