@usefui/components 1.5.1

package/src/__tests__/Dropdown.test.tsx

@@ -0,0 +1,159 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { DropdownMenu } from "../../src/dropdown";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const DropdownDefault = (args: { defaultOpen?: boolean }) => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger onClick={onClickCallback}>
+        Trigger
+      </DropdownMenu.Trigger>
+      <DropdownMenu>
+        <DropdownMenu.Content
+          defaultOpen={args.defaultOpen}
+          aria-label="test-menu"
+        >
+          <DropdownMenu.Item aria-label="toggle-item" onClick={onClickCallback}>
+            Toggle Item
+          </DropdownMenu.Item>
+          <DropdownMenu.Item
+            radio
+            aria-label="static-item"
+            onClick={onClickCallback}
+          >
+            Static Item
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu>
+    </DropdownMenu.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Dropdown", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<DropdownDefault defaultOpen />);
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<DropdownDefault />);
+    const Trigger = screen.getByRole("button");
+
+    expect(Trigger.getAttribute("data-state")).toBe("closed");
+    expect(Trigger.getAttribute("aria-haspopup")).toBe("menu");
+    expect(Trigger.getAttribute("id")).toBeDefined();
+
+    fireEvent.click(Trigger);
+    await waitFor(() => {
+      const Content = screen.getByLabelText("test-menu");
+
+      expect(Content.getAttribute("data-state")).toBe("open");
+      expect(Content.getAttribute("data-side")).toBeDefined();
+      expect(Content.getAttribute("data-align")).toBeDefined();
+      expect(Content.getAttribute("aria-labelledby")).toBeDefined();
+    });
+  });
+  test("Fires the defined callback function and toggle the content when the trigger is clicked", async () => {
+    render(<DropdownDefault />);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(screen.getByLabelText("test-menu")).toBeDefined();
+    });
+  });
+  test("Fires the defined callback function and toggle the content when the item is clicked", async () => {
+    render(<DropdownDefault />);
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(screen.getByLabelText("test-menu")).toBeDefined();
+      expect(screen.getByLabelText("toggle-item")).toBeDefined();
+      expect(screen.getByLabelText("static-item")).toBeDefined();
+    });
+
+    fireEvent.click(screen.getByLabelText("toggle-item"));
+    await waitFor(() => {
+      expect(() => screen.getByLabelText("test-menu")).toThrow();
+    });
+  });
+  test("Fires the defined callback function without toggling the content when the item is clicked", async () => {
+    render(<DropdownDefault defaultOpen />);
+
+    await waitFor(() =>
+      expect(screen.getByLabelText("test-menu")).toBeDefined()
+    );
+
+    fireEvent.click(screen.getByLabelText("static-item"));
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(screen.getByLabelText("test-menu")).toBeDefined();
+    });
+  });
+  test("Fires the defined callback function if an inner item is focused and a keypress is detected", async () => {
+    render(<DropdownDefault defaultOpen />);
+    await waitFor(() =>
+      expect(screen.getByLabelText("test-menu")).toBeDefined()
+    );
+
+    screen.getByLabelText("toggle-item").focus();
+    fireEvent.keyDown(screen.getByLabelText("toggle-item"), {
+      key: "Enter",
+      code: "Enter",
+    });
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(() => screen.getByLabelText("toggle-item")).toThrow();
+    });
+
+    fireEvent.click(screen.getByRole("button"));
+    await waitFor(() =>
+      expect(screen.getByLabelText("test-menu")).toBeDefined()
+    );
+    screen.getByLabelText("toggle-item").focus();
+    fireEvent.keyDown(screen.getByLabelText("static-item"), {
+      key: "Space",
+      code: "Space",
+    });
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(screen.getByLabelText("static-item")).toBeDefined();
+    });
+  });
+  test("Renders the component by default if open is defined", async () => {
+    render(<DropdownDefault defaultOpen />);
+    await waitFor(() =>
+      expect(screen.getByLabelText("test-menu")).toBeDefined()
+    );
+  });
+  test("Close the component on click outside", async () => {
+    render(<DropdownDefault defaultOpen />);
+    await waitFor(() =>
+      expect(screen.getByLabelText("test-menu")).toBeDefined()
+    );
+
+    fireEvent.mouseDown(document.body);
+    await waitFor(() => {
+      expect(() => screen.getByLabelText("toggle-item")).toThrow();
+    });
+  });
+});

package/src/__tests__/Field.test.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Field } from "../../src/field";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const onChangeCallback = vi.fn();
+const FieldDefault = (args: { error?: string; hint?: string }) => {
+  return (
+    <Field.Root>
+      <Field.Wrapper>
+        <Field.Label>Test Input</Field.Label>
+        <Field
+          name="test"
+          value="test"
+          placeholder="test-placeholder"
+          onChange={onChangeCallback}
+          onClick={onClickCallback}
+          {...args}
+        />
+      </Field.Wrapper>
+    </Field.Root>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Field", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<FieldDefault />);
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<FieldDefault />);
+    const FieldComponent = screen.getByPlaceholderText("test-placeholder");
+
+    expect(FieldComponent.getAttribute("aria-invalid")).toBe("false");
+    expect(FieldComponent.getAttribute("aria-describedby")).toBeDefined();
+    expect(FieldComponent.getAttribute("aria-errormessage")).toBe(null);
+    expect(FieldComponent.getAttribute("data-error")).toBe("false");
+  });
+  test("Update the content on change and fires the defined callback function", async () => {
+    render(<FieldDefault />);
+    const FieldComponent = screen.getByPlaceholderText("test-placeholder");
+
+    fireEvent.click(FieldComponent);
+    fireEvent.change(FieldComponent, { target: { value: "updated" } });
+    await waitFor(() => {
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(onChangeCallback).toHaveBeenCalled();
+    });
+  });
+  test("Renders a meta component on error", async () => {
+    render(<FieldDefault error="error-message" />);
+    const FieldComponent = screen.getByPlaceholderText("test-placeholder");
+
+    await waitFor(() => {
+      expect(screen.getByText("error-message")).toBeDefined();
+      expect(FieldComponent.getAttribute("aria-invalid")).toBe("true");
+      expect(FieldComponent.getAttribute("aria-errormessage")).toBe(
+        "error-message"
+      );
+      expect(FieldComponent.getAttribute("data-error")).toBe("true");
+    });
+  });
+  test("Renders a meta component as hint", async () => {
+    render(<FieldDefault hint="hint-message" />);
+    const FieldComponent = screen.getByPlaceholderText("test-placeholder");
+
+    await waitFor(() => {
+      expect(screen.getByText("hint-message")).toBeDefined();
+      expect(FieldComponent.getAttribute("aria-invalid")).toBe("false");
+      expect(FieldComponent.getAttribute("aria-errormessage")).toBe(null);
+      expect(FieldComponent.getAttribute("data-error")).toBe("false");
+    });
+  });
+  test("Hides the hint component to display the error when they're both defined at the same time", async () => {
+    render(<FieldDefault error="error-message" hint="hint-message" />);
+
+    await waitFor(() => {
+      expect(screen.getByText("error-message")).toBeDefined();
+      expect(() => screen.getByText("hint-message")).toThrow();
+    });
+  });
+});

package/src/__tests__/OTPField.test.tsx

@@ -0,0 +1,199 @@
+import React from "react";
+import { expect, test, vi, beforeEach, afterEach, describe } from "vitest";
+import {
+  render,
+  screen,
+  cleanup,
+  fireEvent,
+  waitFor,
+} from "@testing-library/react";
+
+import { OTPField } from "../";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+beforeEach(async () => {
+  vi.clearAllMocks();
+});
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const Component = ({
+  length,
+  onComplete,
+}: {
+  length?: number;
+  onComplete?: (value: string) => void;
+}) => {
+  return (
+    <OTPField length={length} onComplete={onComplete}>
+      <OTPField.Group aria-label="otp-field-group">
+        {Array.from({ length: length ?? 6 }).map((_, index) => (
+          <OTPField.Slot key={index} index={index} />
+        ))}
+      </OTPField.Group>
+    </OTPField>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("One Tiime Password Field Component", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<Component />);
+
+    const ComponentContainer = await axe(container);
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Render OTP Field components", async () => {
+    render(<Component length={1} />);
+
+    expect(
+      screen.getByTestId("otp-field-slot").getAttribute("autoComplete")
+    ).toEqual("one-time-code");
+  });
+  test("Does not render OTP Field Slot if OTP Field context isn't set", async () => {
+    render(
+      <OTPField.Group aria-label="otp-field-group">
+        <OTPField.Slot index={0} />
+      </OTPField.Group>
+    );
+
+    expect(() => screen.getByTestId("otp-field-slot")).toThrow();
+  });
+  test("Render OTP Slots based on length", async () => {
+    render(<Component length={10} />);
+
+    expect(screen.getAllByTestId("otp-field-slot").length).toEqual(10);
+  });
+  test("Render OTP Field with 6 Slots if length is not defined", async () => {
+    render(<Component />);
+
+    expect(screen.getAllByTestId("otp-field-slot").length).toEqual(6);
+  });
+  test("Update slot value onChange", async () => {
+    render(<Component length={1} />);
+
+    const field = screen.getByTestId("otp-field-slot");
+    fireEvent.change(field, { target: { value: "1" } });
+
+    expect(field.getAttribute("value")).toEqual("1");
+  });
+  test("Fire onComplete when every slots are filled", async () => {
+    const onComplete = vi.fn();
+    render(<Component length={1} onComplete={onComplete} />);
+
+    fireEvent.change(screen.getByTestId("otp-field-slot"), {
+      target: { value: "1" },
+    });
+    expect(onComplete).toHaveBeenCalled();
+  });
+  test("Does not focus next slot when current slot is not filled", async () => {
+    render(<Component length={2} />);
+
+    fireEvent.focus(screen.getAllByTestId("otp-field-slot")[0]!);
+    fireEvent.keyDown(screen.getAllByTestId("otp-field-slot")[0]!, {
+      key: "Tab",
+    });
+
+    expect(
+      screen.getAllByTestId("otp-field-slot")[1]!.getAttribute("data-active")
+    ).toEqual("false");
+  });
+  test("Focus next slot when current slot is filled", async () => {
+    render(<Component length={2} />);
+
+    fireEvent.focus(screen.getAllByTestId("otp-field-slot")[0]!);
+    fireEvent.change(screen.getAllByTestId("otp-field-slot")[0]!, {
+      target: { value: "1" },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId("otp-field-slot")[1]!.getAttribute("data-active")
+      ).toEqual("true");
+    });
+  });
+  test("Disable behavior when ArrowLeft || ArrowRight || Home || End key is pressed", async () => {
+    render(<Component length={2} />);
+    const slot1 = screen.getAllByTestId("otp-field-slot")[0]!;
+    const slot2 = screen.getAllByTestId("otp-field-slot")[1]!;
+
+    fireEvent.focus(slot1);
+    fireEvent.keyDown(slot1, {
+      key: "ArrowRight",
+    });
+    expect(slot2.getAttribute("data-active")).toEqual("false");
+    fireEvent.keyDown(slot1, {
+      key: "End",
+    });
+    expect(slot2.getAttribute("data-active")).toEqual("false");
+
+    fireEvent.change(slot1, {
+      target: { value: "1" },
+    });
+    fireEvent.keyDown(slot1, {
+      key: "ArrowLeft",
+    });
+    expect(slot1.getAttribute("data-active")).toEqual("false");
+    fireEvent.keyDown(slot1, {
+      key: "Home",
+    });
+    expect(slot1.getAttribute("data-active")).toEqual("false");
+  });
+  test("Remove value from current slot and focus previous slot when Backspace || Delete key is pressed", async () => {
+    render(<Component length={3} />);
+
+    fireEvent.focus(screen.getAllByTestId("otp-field-slot")[0]!);
+    fireEvent.change(screen.getAllByTestId("otp-field-slot")[0]!, {
+      target: { value: "1" },
+    });
+
+    fireEvent.change(screen.getAllByTestId("otp-field-slot")[1]!, {
+      target: { value: "2" },
+    });
+    fireEvent.keyDown(screen.getAllByTestId("otp-field-slot")[1]!, {
+      key: "Backspace",
+    });
+    fireEvent.keyDown(screen.getAllByTestId("otp-field-slot")[1]!, {
+      key: "Delete",
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getAllByTestId("otp-field-slot")[0]!.getAttribute("data-active")
+      ).toEqual("true");
+    });
+  });
+  test("Fill every Slots when a value is pasted", async () => {
+    render(<Component length={2} />);
+
+    fireEvent.focus(screen.getAllByTestId("otp-field-slot")[0]!);
+    fireEvent.paste(screen.getAllByTestId("otp-field-slot")[0]!, {
+      clipboardData: {
+        getData: () => "123456",
+      },
+    });
+
+    expect(
+      screen.getAllByTestId("otp-field-slot")[0]!.getAttribute("value")
+    ).toEqual("1");
+    expect(
+      screen.getAllByTestId("otp-field-slot")[1]!.getAttribute("value")
+    ).toEqual("2");
+  });
+  test("Focus the next slot to fill on click", async () => {
+    render(<Component length={3} />);
+    const slot1 = screen.getAllByTestId("otp-field-slot")[0]!;
+    const slot2 = screen.getAllByTestId("otp-field-slot")[1]!;
+    const slot3 = screen.getAllByTestId("otp-field-slot")[2]!;
+
+    fireEvent.change(slot1, { target: { value: "1" } });
+    fireEvent.click(slot3);
+    fireEvent.mouseDown(slot3);
+
+    expect(slot2.getAttribute("data-active")).toEqual("true");
+  });
+});

package/src/__tests__/Overlay.test.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Overlay } from "../../src/overlay";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const OverlayDefault = (args: {
+  visible?: boolean;
+  closeOnInteract?: boolean;
+}) => {
+  return (
+    <Overlay
+      visible={args.visible}
+      closeOnInteract={Boolean(args.closeOnInteract)}
+      onClick={onClickCallback}
+      aria-label="test-overlay"
+    >
+      overlay
+    </Overlay>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Overlay", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<OverlayDefault visible />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Renders with accessibility definition", async () => {
+    render(<OverlayDefault visible />);
+    const OverlayComponent = screen.getByLabelText("test-overlay");
+
+    expect(OverlayComponent.getAttribute("tabIndex")).toBe("-1");
+    expect(OverlayComponent.getAttribute("aria-hidden")).toBe("true");
+  });
+  test("Does not render by default is visible is falsy", async () => {
+    render(<OverlayDefault visible={false} />);
+    expect(() => screen.getByLabelText("test-overlay")).toThrow();
+  });
+  test("Update the component state on click and fires the defined callback function", async () => {
+    render(<OverlayDefault visible closeOnInteract />);
+    const OverlayComponent = screen.getByLabelText("test-overlay");
+
+    expect(OverlayComponent).toBeDefined();
+    fireEvent.click(OverlayComponent);
+
+    await waitFor(() => {
+      expect(() => screen.getByLabelText("test-overlay")).toThrow();
+      expect(onClickCallback).toHaveBeenCalled();
+      expect(onClickCallback).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/__tests__/Page.test.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import {
+  screen,
+  render,
+  cleanup,
+  waitFor,
+  fireEvent,
+} from "@testing-library/react";
+import { axe, toHaveNoViolations } from "jest-axe";
+
+import { Page } from "../../src/page";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const onClickCallback = vi.fn();
+const PageDefault = () => {
+  return (
+    <Page>
+      <Page.Tools
+        aria-label="page-tools"
+        shortcut
+        hotkey="a"
+        side="left"
+        sizing="small"
+        onClick={onClickCallback}
+      >
+        tool item
+      </Page.Tools>
+      <Page.Navigation aria-label="page-nav">nav item</Page.Navigation>
+      <Page.Menu aria-label="page-menu">menu item</Page.Menu>
+
+      <Page.Content aria-label="page-content">content item</Page.Content>
+
+      <Page.Panel
+        shortcut
+        hotkey="b"
+        side="bottom"
+        sizing="large"
+        aria-label="page-panel"
+        onClick={onClickCallback}
+      >
+        panel item
+      </Page.Panel>
+    </Page>
+  );
+};
+
+expect.extend(toHaveNoViolations);
+describe("Page", () => {
+  test("Renders without accessibility violation", async () => {
+    const { container } = render(<PageDefault />);
+    const ComponentContainer = await axe(container);
+
+    expect(ComponentContainer).toHaveNoViolations();
+  });
+  test("Render every compound components", async () => {
+    render(<PageDefault />);
+    const ToolComponent = screen.getByLabelText("page-tools");
+    const PanelComponent = screen.getByLabelText("page-panel");
+    const NavComponent = screen.getByLabelText("page-nav");
+    const MenuComponent = screen.getByLabelText("page-menu");
+    const ContentComponent = screen.getByLabelText("page-content");
+
+    // Accesibility criterias are tested in the components used page Page [Toolbar]
+    expect(ToolComponent).toBeDefined();
+    expect(PanelComponent).toBeDefined();
+    expect(NavComponent).toBeDefined();
+    expect(MenuComponent).toBeDefined();
+    expect(ContentComponent).toBeDefined();
+  });
+  test("Open tool and panel components on click and when the shortcuts are triggered", async () => {
+    const { container } = render(<PageDefault />);
+
+    expect(() => screen.getByText("tool item")).toThrow();
+    expect(() => screen.getByText("panel item")).toThrow();
+
+    fireEvent.keyDown(container, { key: "b", code: "KeyB", ctrlKey: true });
+    fireEvent.keyDown(container, { key: "a", code: "KeyA", ctrlKey: true });
+    await waitFor(() => {
+      expect(screen.getByText("tool item")).toBeDefined();
+      expect(screen.getByText("panel item")).toBeDefined();
+    });
+
+    fireEvent.click(screen.getByTitle("ctrl + a"));
+    fireEvent.click(screen.getByTitle("ctrl + b"));
+    await waitFor(() => {
+      expect(() => screen.getByText("tool item")).toThrow();
+      expect(() => screen.getByText("panel item")).toThrow();
+      expect(onClickCallback).toHaveBeenCalled();
+    });
+  });
+});

package/src/__tests__/Portal.test.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { test, vi, afterEach, describe, expect } from "vitest";
+import { screen, render, cleanup } from "@testing-library/react";
+import { Portal } from "../../src/portal";
+
+afterEach(async () => {
+  vi.clearAllMocks();
+  vi.resetModules();
+  cleanup();
+});
+
+const PortalDefault = () => {
+  return (
+    <React.Fragment>
+      <Portal container="portal">portal-content</Portal>
+      <div aria-label="test-portal" id="portal" />
+    </React.Fragment>
+  );
+};
+
+describe("Portal", () => {
+  test("Renders in the dedicated container", async () => {
+    render(<PortalDefault />);
+    expect(screen.getByLabelText("test-portal")).toBeDefined();
+    expect(screen.getByText("portal-content")).toBeDefined();
+  });
+});