@progressiveui/react 1.22.0

package/src/components/Accordion/__tests__/components/AccordionItem.test.tsx.new

@@ -0,0 +1,353 @@
+import { screen, fireEvent, act } from '@testing-library/react';
+import { TransitionState } from 'react-transition-state';
+import { render, getAccordion } from '../utils.tsx.new';
+import { AccordionItem, AccordionItemProps, ItemState } from '../..';
+
+describe('AccordionItem', () => {
+  test('should throw when rendered without provider', () => {
+    const spy = jest.spyOn(console, 'error').mockImplementation();
+    expect(() => {
+      render(<AccordionItem header="header">item</AccordionItem>);
+    }).toThrow();
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
+  });
+
+  test('should forward props and ref to item', () => {
+    const ref = jest.fn();
+    render(
+      getAccordion({
+        item1Props: { 'data-testid': 'item1', className: 'item-1' },
+        item1Ref: ref,
+      })
+    );
+    expect(screen.getByTestId('item1')).toHaveClass(
+      'szh-accordion__item szh-accordion__item--status-exited item-1'
+    );
+    expect(ref).toHaveBeenCalled();
+  });
+
+  test('should forward props and ref to heading', () => {
+    const ref = jest.fn();
+    render(
+      getAccordion({
+        item1Props: {
+          headingProps: {
+            ref,
+            'data-testid': 'heading1',
+            className: 'heading-1',
+            style: { color: 'green' },
+          },
+        },
+      })
+    );
+    const heading = screen.getByRole('heading', { name: 'header 1', level: 3 });
+    expect(heading).toHaveClass('szh-accordion__item-heading heading-1');
+    expect(heading).toHaveAttribute('data-testid', 'heading1');
+    expect(heading).toHaveStyle({ color: 'green', margin: 0 });
+    expect(ref).toHaveBeenCalled();
+  });
+
+  test('should forward props and ref to button', () => {
+    const ref = jest.fn();
+    render(
+      getAccordion({
+        item1Props: {
+          buttonProps: {
+            ref,
+            'data-testid': 'button1',
+            className: 'button-1',
+            style: { color: 'blue' },
+          },
+        },
+      })
+    );
+    const button = screen.getByRole('button', { name: 'header 1' });
+    expect(button).toHaveClass('szh-accordion__item-btn button-1');
+    expect(button).toHaveAttribute('data-testid', 'button1');
+    expect(button).toHaveStyle({ color: 'blue' });
+    expect(button).toHaveTextContent('header 1');
+    expect(ref).toHaveBeenCalled();
+  });
+
+  test('should forward props and ref to content', () => {
+    const ref = jest.fn();
+    render(
+      getAccordion({
+        item2Props: {
+          contentProps: {
+            ref,
+            'data-testid': 'content2',
+            className: 'content-2',
+            style: { color: 'green' },
+          },
+        },
+      })
+    );
+    const content = screen.getByTestId('content2');
+    expect(content).toHaveClass('szh-accordion__item-content content-2');
+    expect(content).toHaveStyle({ color: 'green' });
+    expect(ref).toHaveBeenCalled();
+  });
+
+  test('should forward props and ref to panel', () => {
+    const ref = jest.fn();
+    render(
+      getAccordion({
+        item2Props: {
+          panelProps: {
+            ref,
+            'data-testid': 'panel2',
+            className: 'panel-2',
+            style: { color: 'green' },
+          },
+        },
+      })
+    );
+    const panel = screen.getByTestId('panel2');
+    expect(panel).toHaveClass('szh-accordion__item-panel panel-2');
+    expect(panel).toHaveStyle({ color: 'green' });
+    expect(panel).toHaveTextContent('item 2');
+    expect(ref).toHaveBeenCalled();
+  });
+});
+
+describe('className function', () => {
+  const className = jest.fn();
+  test.each([
+    [{ className }],
+    [{ headingProps: { className } }],
+    [{ buttonProps: { className } }],
+    [{ contentProps: { className } }],
+    [{ panelProps: { className } }],
+  ])('should receive modifier params %#', (item1Props: AccordionItemProps) => {
+    render(
+      getAccordion({
+        item1Props,
+      })
+    );
+    const params = expect.objectContaining<TransitionState>({
+      status: 'exited',
+      isEnter: false,
+      isMounted: true,
+      isResolved: true,
+    }) as TransitionState;
+    expect(className).toHaveBeenNthCalledWith(1, params);
+    expect(className).toHaveBeenLastCalledWith(params);
+    fireEvent.click(screen.getByRole('button', { name: 'header 1' }));
+    expect(className).toHaveBeenLastCalledWith(
+      expect.objectContaining<TransitionState>({
+        status: 'entered',
+        isEnter: true,
+        isMounted: true,
+        isResolved: true,
+      })
+    );
+  });
+});
+
+describe('Header and children render prop', () => {
+  const getRenderPropParam = (state: Partial<ItemState['state']>) => ({
+    state: expect.objectContaining(state) as ItemState['state'],
+    toggle: expect.any(Function) as ItemState['toggle'],
+  });
+
+  let toggle!: ItemState['toggle'];
+  const header = jest
+    .fn()
+    .mockImplementation(({ toggle: _toggle }: ItemState) => {
+      toggle = _toggle;
+      return 'custom header';
+    });
+  const children = jest.fn().mockReturnValue('custom children');
+
+  test.each([
+    {
+      props: {},
+      item1Props: { header, children },
+      expectedState1: {
+        status: 'exited',
+        isEnter: false,
+        isMounted: true,
+        isResolved: true,
+      },
+      expectedState2: { status: 'entered' },
+    },
+    {
+      props: {},
+      item1Props: { header, children, initialEntered: true },
+      expectedState1: {
+        status: 'entered',
+        isEnter: true,
+        isMounted: true,
+        isResolved: true,
+      },
+      expectedState2: { status: 'exited' },
+    },
+    {
+      props: { initialEntered: true },
+      item1Props: { header, children },
+      expectedState1: {
+        status: 'entered',
+        isEnter: true,
+        isMounted: true,
+        isResolved: true,
+      },
+      expectedState2: { status: 'exited' },
+    },
+    {
+      props: { initialEntered: true },
+      item1Props: { header, children, initialEntered: false },
+      expectedState1: {
+        status: 'exited',
+        isEnter: false,
+        isMounted: true,
+        isResolved: true,
+      },
+      expectedState2: { status: 'entered' },
+    },
+    {
+      props: { mountOnEnter: true },
+      item1Props: { header, children },
+      expectedState1: {
+        status: 'unmounted',
+        isEnter: false,
+        isMounted: false,
+        isResolved: true,
+      },
+      expectedState2: { status: 'entered' },
+    },
+  ] as const)(
+    'scenario %#',
+    ({ props, item1Props, expectedState1, expectedState2 }) => {
+      render(
+        getAccordion({
+          props,
+          item1Props,
+        })
+      );
+      screen.getByRole('button', { name: 'custom header' });
+      const params = getRenderPropParam(expectedState1);
+      expect(header).toHaveBeenNthCalledWith(1, params);
+      expect(header).toHaveBeenLastCalledWith(params);
+
+      const prevToggle = toggle;
+      act(() => {
+        toggle();
+      });
+      expect(header).toHaveBeenLastCalledWith(
+        getRenderPropParam(expectedState2)
+      );
+      expect(children).toHaveBeenLastCalledWith(
+        getRenderPropParam(expectedState2)
+      );
+      expect(
+        screen.getByRole('region', { name: 'custom header', hidden: true })
+      ).toHaveTextContent('custom children');
+      expect(toggle).toBe(prevToggle);
+    }
+  );
+});
+
+test('AccordionItem should set DOM attributes', () => {
+  const onClick = jest.fn();
+  render(
+    getAccordion({
+      item1Props: {
+        buttonProps: { 'data-testid': 'button', onClick },
+        panelProps: { 'data-testid': 'panel' },
+      },
+      item2Props: {
+        disabled: true,
+      },
+    })
+  );
+
+  const button = screen.getByTestId('button');
+  const panel = screen.getByTestId('panel');
+  expect(button).toHaveAttribute('aria-controls', panel.id);
+  expect(button).toHaveAttribute('aria-expanded', 'false');
+  expect(panel).toHaveAttribute('aria-labelledby', button.id);
+  expect(panel).toHaveAttribute('role', 'region');
+
+  fireEvent.click(button);
+  expect(button).toHaveAttribute('aria-expanded', 'true');
+  expect(onClick).toHaveBeenCalled();
+
+  expect(screen.getByRole('button', { name: 'header 2' })).toBeDisabled();
+});
+
+test('Heading level can be customised', () => {
+  render(
+    getAccordion({
+      item1Props: {
+        headingTag: 'h1',
+      },
+      item2Props: {
+        headingTag: 'h2',
+      },
+    })
+  );
+
+  expect(
+    screen.getByRole('heading', { level: 1, name: 'header 1' })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole('heading', { level: 2, name: 'header 2' })
+  ).toBeInTheDocument();
+  expect(
+    screen.getByRole('heading', { level: 3, name: 'header 3' })
+  ).toBeInTheDocument();
+});
+
+test('AccordionItem should lazily mount content when mountOnEnter is true', () => {
+  render(
+    getAccordion({
+      props: { mountOnEnter: true },
+      item1Props: {
+        'data-testid': 'item',
+        contentProps: { 'data-testid': 'content' },
+      },
+    })
+  );
+
+  expect(screen.getByTestId('item')).toHaveClass(
+    'szh-accordion__item--status-unmounted'
+  );
+  expect(screen.queryByTestId('content')).not.toBeInTheDocument();
+
+  fireEvent.click(screen.getByRole('button', { name: 'header 1' }));
+  expect(screen.getByTestId('item')).toHaveClass(
+    'szh-accordion__item--status-entered'
+  );
+  expect(screen.getByTestId('content')).toBeInTheDocument();
+});
+
+test('AccordionItem should not render when the state of other items is updated', () => {
+  const children1 = jest.fn();
+  const children2 = jest.fn();
+  render(
+    getAccordion({
+      props: { allowMultiple: true },
+      item1Props: {
+        children: children1,
+      },
+      item2Props: {
+        children: children2,
+      },
+    })
+  );
+
+  expect(children1).toHaveBeenCalled();
+  expect(children2).toHaveBeenCalled();
+
+  jest.clearAllMocks();
+  fireEvent.click(screen.getByRole('button', { name: 'header 1' }));
+  expect(children1).toHaveBeenCalled();
+  expect(children2).not.toHaveBeenCalled();
+
+  jest.clearAllMocks();
+  fireEvent.click(screen.getByRole('button', { name: 'header 2' }));
+  expect(children1).not.toHaveBeenCalled();
+  expect(children2).toHaveBeenCalled();
+});

package/src/components/Accordion/__tests__/components/AccordionMock.test.tsx.new

@@ -0,0 +1,18 @@
+import { render } from '../utils.tsx.new';
+import { Accordion, AccordionProps, useAccordionProvider } from '../..';
+
+jest.mock('../../hooks/useAccordionProvider');
+
+test('Accordion should forward props to useAccordionProvider', () => {
+  const props: AccordionProps = {
+    allowMultiple: true,
+    initialEntered: true,
+    mountOnEnter: false,
+    unmountOnExit: false,
+    transition: true,
+    transitionTimeout: 300,
+    onStateChange: jest.fn(),
+  };
+  render(<Accordion {...props}>Accordion</Accordion>);
+  expect(useAccordionProvider).toHaveBeenCalledWith(props);
+});

package/src/components/Accordion/__tests__/components/ControlledAccordion.test.tsx.new

@@ -0,0 +1,38 @@
+import { useRef } from 'react';
+import { screen, fireEvent } from '@testing-library/react';
+import { render } from '../utils.tsx.new';
+import {
+  ControlledAccordion,
+  AccordionItem,
+  useAccordionProvider,
+} from '../..';
+
+const Accordion = () => {
+  const value = useAccordionProvider();
+  const ref = useRef<HTMLDivElement>(null);
+  return (
+    <div>
+      <button onClick={() => value.toggle(ref.current!)}>Toggle</button>
+
+      <ControlledAccordion providerValue={value}>
+        <AccordionItem header="header 1" ref={ref}>
+          item 1
+        </AccordionItem>
+        <AccordionItem header="header 2" initialEntered>
+          item 2
+        </AccordionItem>
+        <AccordionItem header="header 3">item 3</AccordionItem>
+      </ControlledAccordion>
+    </div>
+  );
+};
+
+test('ControlledAccordion', () => {
+  render(<Accordion />);
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeVisible();
+
+  fireEvent.click(screen.getByRole('button', { name: 'Toggle' }));
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeVisible();
+});

package/src/components/Accordion/__tests__/hooks/useAccordionProvider.test.ts

@@ -0,0 +1,56 @@
+import { renderHook } from '@testing-library/react';
+import { useTransitionMap } from 'react-transition-state';
+import { useAccordionProvider } from '../../';
+
+jest.mock('react-transition-state', () => ({
+  useTransitionMap: jest.fn().mockReturnValue({ mock: true })
+}));
+
+describe('useAccordionProvider', () => {
+  test('can be called without params', () => {
+    const { result } = renderHook(() => useAccordionProvider());
+    expect(result.current).toEqual({ mock: true, mountOnEnter: false, initialEntered: false });
+    expect(useTransitionMap).toHaveBeenCalledWith({
+      enter: false,
+      exit: false,
+      preEnter: false,
+      preExit: false
+    });
+  });
+
+  test('should forward options', () => {
+    const { result } = renderHook(() =>
+      useAccordionProvider({
+        mountOnEnter: true,
+        initialEntered: true,
+        transition: true,
+        transitionTimeout: 300
+      })
+    );
+    expect(result.current).toEqual({ mock: true, mountOnEnter: true, initialEntered: true });
+    expect(useTransitionMap).toHaveBeenCalledWith({
+      mountOnEnter: true,
+      initialEntered: true,
+      enter: true,
+      exit: true,
+      preEnter: true,
+      preExit: true,
+      timeout: 300
+    });
+  });
+
+  test('should accept individual transition flag', () => {
+    const { result } = renderHook(() =>
+      useAccordionProvider({
+        transition: { enter: true, preExit: true }
+      })
+    );
+    expect(result.current).toEqual({ mock: true, mountOnEnter: false, initialEntered: false });
+    expect(useTransitionMap).toHaveBeenCalledWith({
+      enter: true,
+      exit: false,
+      preEnter: false,
+      preExit: true
+    });
+  });
+});

package/src/components/Accordion/__tests__/hooks/useAccordionState.test.tsx.new

@@ -0,0 +1,54 @@
+import { screen, fireEvent } from '@testing-library/react';
+import { render, getAccordion } from '../utils';
+import { useAccordionState } from '../../';
+
+const MyComponent = ({ itemKey }: { itemKey: string }) => {
+  const { getItemState, toggle, toggleAll } = useAccordionState();
+  return (
+    <>
+      <div data-testid="item-state">{getItemState(itemKey).status}</div>
+      <button data-testid="toggle-item" onClick={() => toggle(itemKey)}>
+        Toggle
+      </button>
+      <button data-testid="toggle-all" onClick={() => toggleAll()}>
+        Toggle All
+      </button>
+    </>
+  );
+};
+
+test('useAccordionState toggle item', () => {
+  render(
+    getAccordion({
+      item1Props: {
+        itemKey: 'item1',
+        children: <MyComponent itemKey="item1" />
+      }
+    })
+  );
+  expect(screen.getByTestId('item-state')).toHaveTextContent('exited');
+  fireEvent.click(screen.getByTestId('toggle-item'));
+  expect(screen.getByTestId('item-state')).toHaveTextContent('entered');
+});
+
+test('useAccordionState toggle all', () => {
+  render(
+    getAccordion({
+      props: {
+        allowMultiple: true
+      },
+      item2Props: {
+        initialEntered: true,
+        children: <MyComponent itemKey="item2" />
+      }
+    })
+  );
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeVisible();
+  expect(screen.queryByRole('region', { name: 'header 3' })).toBeNull();
+
+  fireEvent.click(screen.getByTestId('toggle-all'));
+  expect(screen.queryByRole('region', { name: 'header 1' })).toBeVisible();
+  expect(screen.queryByRole('region', { name: 'header 2' })).toBeNull();
+  expect(screen.queryByRole('region', { name: 'header 3' })).toBeVisible();
+});

package/src/components/Accordion/__tests__/hooks/useId.test.ts

@@ -0,0 +1,19 @@
+import { renderHook } from "@testing-library/react";
+import { useId } from "../../../../hooks/useId";
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-return
+jest.mock("react", () => ({
+  ...jest.requireActual("react"),
+  useId: undefined,
+}));
+
+test("useId", () => {
+  const id1 = renderHook(() => useId());
+  const id2 = renderHook(() => useId());
+  expect(id1.result.current).toBe("szh-adn-1");
+  expect(id2.result.current).toBe("szh-adn-2");
+  id1.rerender();
+  id2.rerender();
+  expect(id1.result.current).toBe("szh-adn-1");
+  expect(id2.result.current).toBe("szh-adn-2");
+});

package/src/components/Accordion/__tests__/ssr.test.ts

@@ -0,0 +1,32 @@
+/**
+ * @jest-environment node
+ */
+
+import { renderToString } from "react-dom/server";
+import { getAccordion } from "./utils";
+
+describe("Server rendering", () => {
+  test("defalut state", () => {
+    const htmlString = renderToString(getAccordion());
+    expect(htmlString).toContain("szh-accordion__item--status-exited");
+    expect(htmlString).toContain("item 1");
+  });
+
+  test("mountOnEnter", () => {
+    const htmlString = renderToString(
+      getAccordion({ props: { mountOnEnter: true } })
+    );
+    expect(htmlString).toContain("szh-accordion__item--status-unmounted");
+    expect(htmlString).not.toContain("szh-accordion__item--status-exited");
+    expect(htmlString).not.toContain("item 1");
+  });
+
+  test("initialEntered", () => {
+    const htmlString = renderToString(
+      getAccordion({ props: { initialEntered: true } })
+    );
+    expect(htmlString).toContain("szh-accordion__item--status-entered");
+    expect(htmlString).not.toContain("szh-accordion__item--status-exited");
+    expect(htmlString).toContain("item 1");
+  });
+});

package/src/components/Accordion/__tests__/utils.tsx

@@ -0,0 +1,48 @@
+import React, { Ref, ReactElement, StrictMode } from "react";
+import {
+  render as nonStrictRender,
+  RenderOptions,
+  RenderResult,
+} from "@testing-library/react";
+import {
+  Accordion,
+  AccordionProps,
+  AccordionItem,
+  AccordionItemProps,
+} from "..";
+
+export { nonStrictRender };
+
+export const render: (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, "queries">
+) => RenderResult = (ui, options) =>
+  nonStrictRender(ui, { wrapper: StrictMode, ...options });
+
+export const getAccordion = ({
+  ref,
+  item1Ref,
+  props,
+  item1Props,
+  item2Props,
+}: {
+  ref?: Ref<HTMLDivElement>;
+  item1Ref?: Ref<HTMLDivElement>;
+  props?: AccordionProps;
+  item1Props?: AccordionItemProps;
+  item2Props?: AccordionItemProps;
+} = {}) => (
+  <Accordion {...props} ref={ref}>
+    <AccordionItem
+      {...item1Props}
+      header={item1Props?.header || "header 1"}
+      ref={item1Ref}
+    >
+      {item1Props?.children || "item 1"}
+    </AccordionItem>
+    <AccordionItem {...item2Props} header={item2Props?.header || "header 2"}>
+      {item2Props?.children || "item 2"}
+    </AccordionItem>
+    <AccordionItem header="header 3">item 3</AccordionItem>
+  </Accordion>
+);

package/src/components/Accordion/components/Accordion.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { AccordionProviderOptions } from "../utils/constants";
+import { useAccordionProvider } from "../hooks/useAccordionProvider";
+import {
+  ControlledAccordion,
+  ControlledAccordionProps,
+} from "./ControlledAccordion";
+
+interface AccordionProps
+  extends AccordionProviderOptions,
+    Omit<ControlledAccordionProps, "providerValue"> {}
+
+const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  (
+    {
+      allowMultiple,
+      initialEntered,
+      mountOnEnter,
+      unmountOnExit,
+      transition,
+      transitionTimeout,
+      onStateChange,
+      ...rest
+    },
+    ref
+  ) => {
+    const providerValue = useAccordionProvider({
+      allowMultiple,
+      initialEntered,
+      mountOnEnter,
+      unmountOnExit,
+      transition,
+      transitionTimeout,
+      onStateChange,
+    });
+    return (
+      <ControlledAccordion {...rest} ref={ref} providerValue={providerValue} />
+    );
+  }
+);
+
+Accordion.displayName = "Accordion";
+
+export { Accordion, AccordionProps };