|
| 1 | +/** @vitest-environment jsdom */ |
| 2 | +import { act, createRef, type ReactNode } from 'react' |
| 3 | +import { Button, ComposerActionButton } 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 | +}) |
| 31 | + |
| 32 | +/** Exact pre-migration class inputs from the organization composer and workflow chat. */ |
| 33 | +const PREVIOUS = { |
| 34 | + md: { |
| 35 | + base: 'size-[28px] rounded-full border-0 p-0', |
| 36 | + active: 'bg-[#383838] hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover:bg-[#CFCFCF]', |
| 37 | + }, |
| 38 | + sm: { |
| 39 | + base: 'size-[22px] rounded-full p-0', |
| 40 | + active: 'bg-[#383838] hover-hover:bg-[#575757] dark:bg-[#E0E0E0] dark:hover-hover:bg-[#CFCFCF]', |
| 41 | + }, |
| 42 | +} as const |
| 43 | + |
| 44 | +describe('ComposerActionButton', () => { |
| 45 | + for (const size of ['md', 'sm'] as const) { |
| 46 | + for (const active of [true, false]) { |
| 47 | + it(`preserves the previous ${size} markup with active=${active}`, () => { |
| 48 | + const previous = PREVIOUS[size] |
| 49 | + const view = mount( |
| 50 | + <> |
| 51 | + <Button |
| 52 | + variant='ghost' |
| 53 | + aria-label='Send' |
| 54 | + className={`${previous.base} ${active ? previous.active : 'bg-[#808080] dark:bg-[#808080]'} shrink-0`} |
| 55 | + > |
| 56 | + <svg className='size-[16px] text-white dark:text-black' aria-hidden='true' /> |
| 57 | + </Button> |
| 58 | + <ComposerActionButton |
| 59 | + aria-label='Send' |
| 60 | + size={size === 'md' ? undefined : size} |
| 61 | + active={active ? undefined : false} |
| 62 | + className='shrink-0' |
| 63 | + > |
| 64 | + <svg className='size-[16px] text-white dark:text-black' aria-hidden='true' /> |
| 65 | + </ComposerActionButton> |
| 66 | + </> |
| 67 | + ) |
| 68 | + const [before, after] = view.querySelectorAll('button') |
| 69 | + before.className = before.className.split(/\s+/).sort().join(' ') |
| 70 | + after.className = after.className.split(/\s+/).sort().join(' ') |
| 71 | + expect(after.outerHTML).toBe(before.outerHTML) |
| 72 | + }) |
| 73 | + } |
| 74 | + } |
| 75 | + |
| 76 | + it('forwards refs and events while keeping active appearance independent of disabled', () => { |
| 77 | + const ref = createRef<HTMLButtonElement>() |
| 78 | + const onClick = vi.fn() |
| 79 | + const onKeyDown = vi.fn() |
| 80 | + const action = (disabled: boolean) => ( |
| 81 | + <ComposerActionButton |
| 82 | + ref={ref} |
| 83 | + aria-label='Send message' |
| 84 | + data-action='send' |
| 85 | + active |
| 86 | + disabled={disabled} |
| 87 | + onClick={onClick} |
| 88 | + onKeyDown={onKeyDown} |
| 89 | + /> |
| 90 | + ) |
| 91 | + mount(action(false)) |
| 92 | + expect(ref.current).toBe(button()) |
| 93 | + expect(button().dataset.action).toBe('send') |
| 94 | + act(() => button().focus()) |
| 95 | + expect(document.activeElement).toBe(button()) |
| 96 | + const keyEvent = new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }) |
| 97 | + act(() => button().dispatchEvent(keyEvent)) |
| 98 | + expect(onKeyDown).toHaveBeenCalledTimes(1) |
| 99 | + expect(onKeyDown.mock.calls[0][0].nativeEvent).toBe(keyEvent) |
| 100 | + act(() => button().click()) |
| 101 | + expect(onClick).toHaveBeenCalledTimes(1) |
| 102 | + const activeClasses = button().className |
| 103 | + act(() => root?.render(action(true))) |
| 104 | + expect(button().disabled).toBe(true) |
| 105 | + expect(button().className).toBe(activeClasses) |
| 106 | + act(() => button().click()) |
| 107 | + expect(onClick).toHaveBeenCalledTimes(1) |
| 108 | + }) |
| 109 | + |
| 110 | + for (const type of [undefined, 'button'] as const) { |
| 111 | + it(`preserves native form behavior for type=${type ?? 'omitted'}`, () => { |
| 112 | + const onSubmit = vi.fn((event) => event.preventDefault()) |
| 113 | + mount( |
| 114 | + <form onSubmit={onSubmit}> |
| 115 | + <ComposerActionButton aria-label='Search' type={type} /> |
| 116 | + </form> |
| 117 | + ) |
| 118 | + act(() => button().click()) |
| 119 | + expect(onSubmit).toHaveBeenCalledTimes(type === 'button' ? 0 : 1) |
| 120 | + }) |
| 121 | + } |
| 122 | +}) |
0 commit comments