test(react-tags): add hook regression tests for Tag family base + styled hooks

Author: mainframev

packages/react-components/react-tags/library/src/components/InteractionTag/useInteractionTag.test.tsx

@@ -0,0 +1,96 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as React from 'react';
+
+import { TagGroupContextProvider } from '../../contexts/tagGroupContext';
+import { useInteractionTag_unstable, useInteractionTagBase_unstable } from './useInteractionTag';
+
+const wrap = (
+  contextOverrides: Parameters<typeof TagGroupContextProvider>[0]['value'] = {
+    handleTagDismiss: () => ({}),
+    size: 'medium',
+  },
+): React.FC<{ children?: React.ReactNode }> => {
+  const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+    <TagGroupContextProvider value={contextOverrides}>{children}</TagGroupContextProvider>
+  );
+  return Wrapper;
+};
+
+describe('useInteractionTag_unstable', () => {
+  it('should add design-only fields (appearance, shape, size) on top of the base state', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(
+      () => useInteractionTag_unstable({ appearance: 'outline', shape: 'circular', size: 'small' }, ref),
+      {
+        wrapper: wrap(),
+      },
+    );
+
+    expect(result.current.appearance).toBe('outline');
+    expect(result.current.shape).toBe('circular');
+    expect(result.current.size).toBe('small');
+  });
+
+  it('should default appearance to filled and shape to rounded', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useInteractionTag_unstable({}, ref), { wrapper: wrap() });
+
+    expect(result.current.appearance).toBe('filled');
+    expect(result.current.shape).toBe('rounded');
+  });
+
+  it('should inherit appearance and size from TagGroupContext when not set on props', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useInteractionTag_unstable({}, ref), {
+      wrapper: wrap({ handleTagDismiss: () => ({}), size: 'extra-small', appearance: 'brand' }),
+    });
+
+    expect(result.current.appearance).toBe('brand');
+    expect(result.current.size).toBe('extra-small');
+  });
+});
+
+describe('useInteractionTagBase_unstable', () => {
+  it('should NOT expose design-only fields (appearance/shape/size) on base state', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useInteractionTagBase_unstable({}, ref), { wrapper: wrap() });
+
+    expect((result.current as unknown as { appearance?: unknown }).appearance).toBeUndefined();
+    expect((result.current as unknown as { shape?: unknown }).shape).toBeUndefined();
+    expect((result.current as unknown as { size?: unknown }).size).toBeUndefined();
+  });
+
+  it('should force disabled when TagGroupContext.disabled is true regardless of props', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useInteractionTagBase_unstable({ disabled: false }, ref), {
+      wrapper: wrap({ handleTagDismiss: () => ({}), size: 'medium', disabled: true }),
+    });
+    expect(result.current.disabled).toBe(true);
+  });
+
+  it('should derive selected from props OR context.selectedValues containing the tag value', () => {
+    const ref = React.createRef<HTMLDivElement>();
+
+    const propSelected = renderHook(() => useInteractionTagBase_unstable({ selected: true, value: 'a' }, ref), {
+      wrapper: wrap(),
+    });
+    expect(propSelected.result.current.selected).toBe(true);
+
+    const contextSelected = renderHook(() => useInteractionTagBase_unstable({ value: 'a' }, ref), {
+      wrapper: wrap({ handleTagDismiss: () => ({}), size: 'medium', selectedValues: ['a'] }),
+    });
+    expect(contextSelected.result.current.selected).toBe(true);
+
+    const notSelected = renderHook(() => useInteractionTagBase_unstable({ value: 'b' }, ref), {
+      wrapper: wrap({ handleTagDismiss: () => ({}), size: 'medium', selectedValues: ['a'] }),
+    });
+    expect(notSelected.result.current.selected).toBe(false);
+  });
+
+  it('should generate interactionTagPrimaryId for use by aria-labelledby', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    const { result } = renderHook(() => useInteractionTagBase_unstable({}, ref), { wrapper: wrap() });
+
+    expect(result.current.interactionTagPrimaryId).toEqual(expect.stringMatching(/^fui-InteractionTagPrimary-/));
+  });
+});

packages/react-components/react-tags/library/src/components/InteractionTagPrimary/useInteractionTagPrimary.test.tsx

@@ -0,0 +1,82 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as React from 'react';
+
+import { InteractionTagContextProvider } from '../../contexts/interactionTagContext';
+import { useInteractionTagPrimary_unstable, useInteractionTagPrimaryBase_unstable } from './useInteractionTagPrimary';
+
+const baseContext = {
+  appearance: 'filled' as const,
+  disabled: false,
+  handleTagDismiss: () => ({}),
+  interactionTagPrimaryId: 'fui-InteractionTagPrimary-_test_',
+  selected: false,
+  selectedValues: [],
+  shape: 'rounded' as const,
+  size: 'medium' as const,
+  value: 'test',
+};
+
+const wrap = (
+  overrides: Partial<Parameters<typeof InteractionTagContextProvider>[0]['value']> = {},
+): React.FC<{ children?: React.ReactNode }> => {
+  const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+    <InteractionTagContextProvider value={{ ...baseContext, ...overrides }}>{children}</InteractionTagContextProvider>
+  );
+  return Wrapper;
+};
+
+describe('useInteractionTagPrimary_unstable', () => {
+  it('should add design-only fields (appearance, shape, size, avatar*) on top of the base state', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagPrimary_unstable({}, ref), {
+      wrapper: wrap({ appearance: 'brand', shape: 'circular', size: 'small' }),
+    });
+
+    expect(result.current.appearance).toBe('brand');
+    expect(result.current.shape).toBe('circular');
+    expect(result.current.size).toBe('small');
+    expect(result.current.avatarShape).toBe('circular');
+    expect(result.current.avatarSize).toBe(20);
+  });
+});
+
+describe('useInteractionTagPrimaryBase_unstable', () => {
+  it('should render root with the interactionTagPrimaryId from context', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.root.id).toBe('fui-InteractionTagPrimary-_test_');
+  });
+
+  it('should NOT expose design-only fields (appearance/shape/size/avatar*) on base state', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), { wrapper: wrap() });
+
+    expect((result.current as unknown as { appearance?: unknown }).appearance).toBeUndefined();
+    expect((result.current as unknown as { shape?: unknown }).shape).toBeUndefined();
+    expect((result.current as unknown as { size?: unknown }).size).toBeUndefined();
+    expect((result.current as unknown as { avatarShape?: unknown }).avatarShape).toBeUndefined();
+    expect((result.current as unknown as { avatarSize?: unknown }).avatarSize).toBeUndefined();
+  });
+
+  it('should set aria-pressed when context has handleTagSelect (selectable group)', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), {
+      wrapper: wrap({ selected: true, handleTagSelect: () => ({}) }),
+    });
+    expect(result.current.root['aria-pressed']).toBe(true);
+  });
+
+  it('should NOT set aria-pressed when context has no handleTagSelect', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), {
+      wrapper: wrap({ selected: true, handleTagSelect: undefined }),
+    });
+    expect(result.current.root['aria-pressed']).toBeUndefined();
+  });
+
+  it('should default hasSecondaryAction to false', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagPrimaryBase_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.hasSecondaryAction).toBe(false);
+  });
+});

packages/react-components/react-tags/library/src/components/InteractionTagSecondary/useInteractionTagSecondary.test.tsx

@@ -0,0 +1,105 @@
+import { renderHook } from '@testing-library/react-hooks';
+import * as React from 'react';
+
+import { InteractionTagContextProvider } from '../../contexts/interactionTagContext';
+import {
+  useInteractionTagSecondary_unstable,
+  useInteractionTagSecondaryBase_unstable,
+} from './useInteractionTagSecondary';
+
+const baseContext = {
+  appearance: 'filled' as const,
+  disabled: false,
+  handleTagDismiss: () => ({}),
+  interactionTagPrimaryId: 'fui-InteractionTagPrimary-_test_',
+  selected: false,
+  selectedValues: [],
+  shape: 'rounded' as const,
+  size: 'medium' as const,
+  value: 'test',
+};
+
+const wrap = (
+  overrides: Partial<Parameters<typeof InteractionTagContextProvider>[0]['value']> = {},
+): React.FC<{ children?: React.ReactNode }> => {
+  const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
+    <InteractionTagContextProvider value={{ ...baseContext, ...overrides }}>{children}</InteractionTagContextProvider>
+  );
+  return Wrapper;
+};
+
+describe('useInteractionTagSecondary_unstable', () => {
+  it('should inject DismissRegular as default root children', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondary_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.root.children).toBeDefined();
+  });
+
+  it('should preserve user-provided children instead of the default DismissRegular', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondary_unstable({ children: 'X' }, ref), {
+      wrapper: wrap(),
+    });
+    expect(result.current.root.children).toBe('X');
+  });
+
+  it('should inherit appearance/shape/size from context', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondary_unstable({}, ref), {
+      wrapper: wrap({ appearance: 'outline', shape: 'circular', size: 'small' }),
+    });
+    expect(result.current.appearance).toBe('outline');
+    expect(result.current.shape).toBe('circular');
+    expect(result.current.size).toBe('small');
+  });
+});
+
+describe('useInteractionTagSecondaryBase_unstable', () => {
+  it('should render root with type="button"', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.root.type).toBe('button');
+  });
+
+  it('should NOT inject DismissRegular children by default (icon injection lives in the styled hook)', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.root.children).toBeUndefined();
+  });
+
+  it('should attach onClick and onKeyDown handlers', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.root.onClick).toBeDefined();
+    expect(result.current.root.onKeyDown).toBeDefined();
+  });
+
+  it('should build aria-labelledby from interactionTagPrimaryId and own id', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
+    expect(result.current.root['aria-labelledby']).toEqual(
+      expect.stringMatching(/^fui-InteractionTagPrimary-_test_ fui-InteractionTagSecondary-/),
+    );
+  });
+
+  it('should NOT expose design-only fields (appearance/shape/size)', () => {
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), { wrapper: wrap() });
+    expect((result.current as unknown as { appearance?: unknown }).appearance).toBeUndefined();
+    expect((result.current as unknown as { shape?: unknown }).shape).toBeUndefined();
+    expect((result.current as unknown as { size?: unknown }).size).toBeUndefined();
+  });
+
+  it('should call handleTagDismiss on Delete/Backspace keyDown via context', () => {
+    const handleTagDismiss = jest.fn();
+    const ref = React.createRef<HTMLButtonElement>();
+    const { result } = renderHook(() => useInteractionTagSecondaryBase_unstable({}, ref), {
+      wrapper: wrap({ handleTagDismiss, value: 'val' }),
+    });
+
+    const event = { key: 'Delete', defaultPrevented: false } as unknown as React.KeyboardEvent<HTMLButtonElement>;
+    result.current.root.onKeyDown?.(event);
+
+    expect(handleTagDismiss).toHaveBeenCalledWith(event, { value: 'val' });
+  });
+});