|
| 1 | +/** @vitest-environment jsdom */ |
| 2 | +import { act, createRef, type ReactNode } from 'react' |
| 3 | +import { BulkActionButton, Button, DropdownMenu, DropdownMenuTrigger, Tooltip } from '@sim/emcn' |
| 4 | +import { createRoot, type Root } from 'react-dom/client' |
| 5 | +import { afterEach, describe, expect, it, vi } from 'vitest' |
| 6 | + |
| 7 | +let root: Root | null = null |
| 8 | +let container: HTMLDivElement | null = null |
| 9 | + |
| 10 | +function mount(children: ReactNode) { |
| 11 | + ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true |
| 12 | + container = document.createElement('div') |
| 13 | + document.body.appendChild(container) |
| 14 | + root = createRoot(container) |
| 15 | + act(() => root?.render(children)) |
| 16 | + return container |
| 17 | +} |
| 18 | + |
| 19 | +function button() { |
| 20 | + const element = container?.querySelector('button') |
| 21 | + if (!element) throw new Error('Button did not render') |
| 22 | + return element |
| 23 | +} |
| 24 | + |
| 25 | +afterEach(() => { |
| 26 | + if (root) act(() => root?.unmount()) |
| 27 | + container?.remove() |
| 28 | + root = null |
| 29 | + container = null |
| 30 | + vi.useRealTimers() |
| 31 | +}) |
| 32 | + |
| 33 | +/** Exact class inputs used by the action bars before migrating into EMCN. */ |
| 34 | +const PREVIOUS_GEOMETRY = |
| 35 | + 'hover-hover:text-[var(--text-inverse)]! size-[28px] rounded-lg p-0 hover-hover:bg-[var(--brand-secondary)]' |
| 36 | + |
| 37 | +describe('BulkActionButton', () => { |
| 38 | + for (const surface of [undefined, 'adaptive', 'uniform'] as const) { |
| 39 | + for (const disabled of [false, true]) { |
| 40 | + it(`preserves the previous button markup for ${surface ?? 'default'} / disabled=${disabled}`, () => { |
| 41 | + const previousFill = |
| 42 | + surface === 'uniform' |
| 43 | + ? 'bg-[var(--surface-5)]' |
| 44 | + : 'bg-[var(--surface-5)] dark:bg-[var(--surface-4)]' |
| 45 | + const view = mount( |
| 46 | + <> |
| 47 | + <Button |
| 48 | + variant='ghost' |
| 49 | + aria-label='Delete' |
| 50 | + disabled={disabled} |
| 51 | + className={`${previousFill} ${PREVIOUS_GEOMETRY}`} |
| 52 | + > |
| 53 | + <svg className='size-[12px]' aria-hidden='true' /> |
| 54 | + </Button> |
| 55 | + <BulkActionButton aria-label='Delete' surface={surface} disabled={disabled}> |
| 56 | + <svg className='size-[12px]' aria-hidden='true' /> |
| 57 | + </BulkActionButton> |
| 58 | + </> |
| 59 | + ) |
| 60 | + const [previous, current] = view.querySelectorAll('button') |
| 61 | + /** Class order changes when composing recipes; the resolved utility set must not. */ |
| 62 | + previous.className = previous.className.split(/\s+/).sort().join(' ') |
| 63 | + current.className = current.className.split(/\s+/).sort().join(' ') |
| 64 | + expect(current.outerHTML).toBe(previous.outerHTML) |
| 65 | + }) |
| 66 | + } |
| 67 | + } |
| 68 | + |
| 69 | + it('forwards the native ref, attributes and original events', () => { |
| 70 | + const ref = createRef<HTMLButtonElement>() |
| 71 | + const onClick = vi.fn() |
| 72 | + const onKeyDown = vi.fn() |
| 73 | + mount( |
| 74 | + <BulkActionButton |
| 75 | + ref={ref} |
| 76 | + aria-label='Download' |
| 77 | + data-action='download' |
| 78 | + onClick={onClick} |
| 79 | + onKeyDown={onKeyDown} |
| 80 | + /> |
| 81 | + ) |
| 82 | + expect(ref.current).toBe(button()) |
| 83 | + expect(button().dataset.action).toBe('download') |
| 84 | + act(() => button().focus()) |
| 85 | + expect(document.activeElement).toBe(button()) |
| 86 | + const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }) |
| 87 | + act(() => button().dispatchEvent(keyEvent)) |
| 88 | + expect(onKeyDown).toHaveBeenCalledTimes(1) |
| 89 | + expect(onKeyDown.mock.calls[0][0].nativeEvent).toBe(keyEvent) |
| 90 | + act(() => button().click()) |
| 91 | + expect(onClick).toHaveBeenCalledTimes(1) |
| 92 | + }) |
| 93 | + |
| 94 | + it('does not invoke disabled actions', () => { |
| 95 | + const onClick = vi.fn() |
| 96 | + mount(<BulkActionButton aria-label='Delete' onClick={onClick} disabled />) |
| 97 | + act(() => button().click()) |
| 98 | + expect(button().disabled).toBe(true) |
| 99 | + expect(onClick).not.toHaveBeenCalled() |
| 100 | + }) |
| 101 | + |
| 102 | + for (const type of [undefined, 'button', 'submit'] as const) { |
| 103 | + it(`preserves native form behavior for type=${type ?? 'omitted'}`, () => { |
| 104 | + const onSubmit = vi.fn((event) => event.preventDefault()) |
| 105 | + mount( |
| 106 | + <form onSubmit={onSubmit}> |
| 107 | + <BulkActionButton aria-label='Run' type={type} /> |
| 108 | + </form> |
| 109 | + ) |
| 110 | + act(() => button().click()) |
| 111 | + expect(onSubmit).toHaveBeenCalledTimes(type === 'button' ? 0 : 1) |
| 112 | + }) |
| 113 | + } |
| 114 | + |
| 115 | + it('composes with the tooltip and menu triggers used by Move', () => { |
| 116 | + const onOpenChange = vi.fn() |
| 117 | + const onKeyDown = vi.fn() |
| 118 | + const ref = createRef<HTMLButtonElement>() |
| 119 | + mount( |
| 120 | + <DropdownMenu open={false} onOpenChange={onOpenChange}> |
| 121 | + <Tooltip.Root> |
| 122 | + <Tooltip.Trigger asChild> |
| 123 | + <DropdownMenuTrigger asChild> |
| 124 | + <BulkActionButton ref={ref} aria-label='Move' onKeyDown={onKeyDown} /> |
| 125 | + </DropdownMenuTrigger> |
| 126 | + </Tooltip.Trigger> |
| 127 | + <Tooltip.Content>Move</Tooltip.Content> |
| 128 | + </Tooltip.Root> |
| 129 | + </DropdownMenu> |
| 130 | + ) |
| 131 | + expect(container?.querySelectorAll('button')).toHaveLength(1) |
| 132 | + expect(ref.current).toBe(button()) |
| 133 | + expect(button().getAttribute('aria-haspopup')).toBe('menu') |
| 134 | + act(() => |
| 135 | + button().dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true })) |
| 136 | + ) |
| 137 | + expect(onKeyDown).toHaveBeenCalledTimes(1) |
| 138 | + expect(onOpenChange).toHaveBeenCalledExactlyOnceWith(true) |
| 139 | + }) |
| 140 | + |
| 141 | + it('retains the tooltip and accessible name on a direct action', () => { |
| 142 | + vi.useFakeTimers() |
| 143 | + mount( |
| 144 | + <Tooltip.Root> |
| 145 | + <Tooltip.Trigger asChild> |
| 146 | + <BulkActionButton aria-label='Download' /> |
| 147 | + </Tooltip.Trigger> |
| 148 | + <Tooltip.Content>Download selected files</Tooltip.Content> |
| 149 | + </Tooltip.Root> |
| 150 | + ) |
| 151 | + act(() => |
| 152 | + button().dispatchEvent( |
| 153 | + new MouseEvent('pointerover', { bubbles: true, clientX: 200, clientY: 200 }) |
| 154 | + ) |
| 155 | + ) |
| 156 | + expect(document.querySelector('[role="tooltip"]')?.textContent).toBe('Download selected files') |
| 157 | + expect(button().getAttribute('aria-label')).toBe('Download') |
| 158 | + }) |
| 159 | +}) |
0 commit comments