paris 0.19.0 → 0.20.0

package/src/stories/utility/Utility.test.tsx

@@ -0,0 +1,96 @@
+import { render, screen } from '../../test/render';
+import { RemoveFromDOM } from './RemoveFromDOM';
+import { TextWhenString } from './TextWhenString';
+import { VisuallyHidden } from './VisuallyHidden';
+
+describe('RemoveFromDOM', () => {
+    it('renders children when `when` is false', () => {
+        render(
+            <RemoveFromDOM when={false}>
+                <span>visible child</span>
+            </RemoveFromDOM>,
+        );
+        expect(screen.getByText('visible child')).toBeInTheDocument();
+    });
+
+    it('removes children from the DOM when `when` is true', () => {
+        render(
+            <RemoveFromDOM when={true}>
+                <span>hidden child</span>
+            </RemoveFromDOM>,
+        );
+        expect(screen.queryByText('hidden child')).not.toBeInTheDocument();
+    });
+
+    it('toggles visibility when `when` prop changes', () => {
+        const { rerender } = render(
+            <RemoveFromDOM when={false}>
+                <span>toggle me</span>
+            </RemoveFromDOM>,
+        );
+        expect(screen.getByText('toggle me')).toBeInTheDocument();
+
+        rerender(
+            <RemoveFromDOM when={true}>
+                <span>toggle me</span>
+            </RemoveFromDOM>,
+        );
+        expect(screen.queryByText('toggle me')).not.toBeInTheDocument();
+    });
+});
+
+describe('TextWhenString', () => {
+    it('wraps string children in a Text component', () => {
+        render(<TextWhenString as="span">hello world</TextWhenString>);
+        const el = screen.getByText('hello world');
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe('SPAN');
+    });
+
+    it('wraps numeric children in a Text component', () => {
+        render(<TextWhenString as="span">{42}</TextWhenString>);
+        expect(screen.getByText('42')).toBeInTheDocument();
+    });
+
+    it('passes ReactNode children through without wrapping', () => {
+        render(
+            <TextWhenString as="span">
+                <div data-testid="passthrough">node child</div>
+            </TextWhenString>,
+        );
+        const el = screen.getByTestId('passthrough');
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe('DIV');
+    });
+});
+
+describe('VisuallyHidden', () => {
+    it('visually hides children when `when` is true (default)', () => {
+        render(
+            <VisuallyHidden>
+                <span>hidden text</span>
+            </VisuallyHidden>,
+        );
+        expect(screen.getByText('hidden text')).toBeInTheDocument();
+    });
+
+    it('renders children normally when `when` is false', () => {
+        render(
+            <VisuallyHidden when={false}>
+                <span data-testid="normal">visible text</span>
+            </VisuallyHidden>,
+        );
+        const el = screen.getByTestId('normal');
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe('SPAN');
+    });
+
+    it('visually hides children when `when` is explicitly true', () => {
+        render(
+            <VisuallyHidden when={true}>
+                <span>explicitly hidden</span>
+            </VisuallyHidden>,
+        );
+        expect(screen.getByText('explicitly hidden')).toBeInTheDocument();
+    });
+});

package/src/test/render.tsx

@@ -0,0 +1,20 @@
+import { type RenderOptions, render as rtlRender } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import type { ReactElement } from 'react';
+
+export function render(ui: ReactElement, options?: RenderOptions) {
+    return {
+        user: userEvent.setup(),
+        ...rtlRender(ui, options),
+    };
+}
+
+export { act, screen, waitFor, within } from '@testing-library/react';
+
+/**
+ * Queries the close button rendered by the Paris Button component with shape="circle".
+ * Circle-shaped buttons render children as `aria-details` instead of visible text.
+ */
+export function getCloseButton() {
+    return document.querySelector('[aria-details="Close dialog"]');
+}

package/src/test/setup.ts

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom/vitest';
+
+// Mock ResizeObserver (used by Tilt component)
+class ResizeObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+}
+globalThis.ResizeObserver = ResizeObserverMock as any;
+
+// Mock matchMedia (used by @headlessui/react)
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+    })),
+});
+
+// Mock IntersectionObserver
+class IntersectionObserverMock {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+}
+globalThis.IntersectionObserver = IntersectionObserverMock as any;