@open-mercato/ui 0.6.1-develop.3256.1.fe3dec2464 → 0.6.1-develop.3260.1.dc719cac84

package/src/primitives/__tests__/tag-input.test.tsx

@@ -0,0 +1,198 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { TagInput } from '../tag-input'
+
+function Harness({
+  initial,
+  ...rest
+}: {
+  initial?: string[]
+} & Omit<React.ComponentProps<typeof TagInput>, 'value' | 'onChange'>) {
+  const [value, setValue] = React.useState<string[]>(initial ?? [])
+  return <TagInput value={value} onChange={setValue} {...rest} />
+}
+
+function getInput(): HTMLInputElement {
+  return screen.getByRole('textbox') as HTMLInputElement
+}
+
+describe('TagInput primitive', () => {
+  it('adds a tag on Enter', () => {
+    render(<Harness aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'alpha' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(screen.getByText('alpha')).toBeInTheDocument()
+    expect(input.value).toBe('')
+  })
+
+  it('adds a tag when separator (",") is typed', () => {
+    render(<Harness aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'beta,' } })
+    expect(screen.getByText('beta')).toBeInTheDocument()
+    expect(input.value).toBe('')
+  })
+
+  it('splits multiple tags on bulk paste with separator', () => {
+    render(<Harness aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'a,b,c,' } })
+    expect(screen.getByText('a')).toBeInTheDocument()
+    expect(screen.getByText('b')).toBeInTheDocument()
+    expect(screen.getByText('c')).toBeInTheDocument()
+    expect(input.value).toBe('')
+  })
+
+  it('removes the last tag on Backspace when input is empty', () => {
+    render(<Harness initial={['x', 'y']} aria-label="tags" />)
+    const input = getInput()
+    expect(screen.getByText('y')).toBeInTheDocument()
+    fireEvent.keyDown(input, { key: 'Backspace' })
+    expect(screen.queryByText('y')).not.toBeInTheDocument()
+    expect(screen.getByText('x')).toBeInTheDocument()
+  })
+
+  it('does not remove a tag on Backspace when input has content', () => {
+    render(<Harness initial={['keep']} aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'typing' } })
+    fireEvent.keyDown(input, { key: 'Backspace' })
+    expect(screen.getByText('keep')).toBeInTheDocument()
+  })
+
+  it('removes a tag when its × button is clicked', () => {
+    render(<Harness initial={['removeMe', 'stay']} aria-label="tags" />)
+    fireEvent.click(screen.getByRole('button', { name: 'Remove removeMe' }))
+    expect(screen.queryByText('removeMe')).not.toBeInTheDocument()
+    expect(screen.getByText('stay')).toBeInTheDocument()
+  })
+
+  it('blocks further additions when maxTags is reached', () => {
+    render(<Harness initial={['a', 'b']} maxTags={2} aria-label="tags" />)
+    const input = getInput()
+    expect(input).toBeDisabled()
+    fireEvent.change(input, { target: { value: 'c' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(screen.queryByText('c')).not.toBeInTheDocument()
+  })
+
+  it('rejects silently when validate returns false', () => {
+    const validate = (tag: string) => tag !== 'bad'
+    render(<Harness validate={validate} aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'bad' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(screen.queryByText('bad')).not.toBeInTheDocument()
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('shows error message when validate returns a string', () => {
+    const validate = (tag: string) =>
+      tag.length < 3 ? 'Tag must be at least 3 characters' : true
+    render(<Harness validate={validate} aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'ab' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(screen.queryByText('ab')).not.toBeInTheDocument()
+    expect(screen.getByRole('alert')).toHaveTextContent('Tag must be at least 3 characters')
+  })
+
+  it('clears error after typing again', () => {
+    const validate = (tag: string) =>
+      tag.length < 3 ? 'Too short' : true
+    render(<Harness validate={validate} aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'ab' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    fireEvent.change(input, { target: { value: 'abc' } })
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('skips duplicate tags silently when allowDuplicates is false', () => {
+    render(<Harness initial={['dup']} aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'dup' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    const matches = screen.getAllByText('dup')
+    expect(matches.length).toBe(1)
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+  })
+
+  it('allows duplicates when allowDuplicates is true', () => {
+    render(<Harness initial={['dup']} allowDuplicates aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'dup' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(screen.getAllByText('dup').length).toBe(2)
+  })
+
+  it('supports a custom RegExp separator', () => {
+    render(<Harness separator={/[,\s]/} aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'a b,' } })
+    expect(screen.getByText('a')).toBeInTheDocument()
+    expect(screen.getByText('b')).toBeInTheDocument()
+    expect(input.value).toBe('')
+  })
+
+  it('renders placeholder when empty', () => {
+    render(<Harness placeholder="Add tag..." aria-label="tags" />)
+    expect(getInput()).toHaveAttribute('placeholder', 'Add tag...')
+  })
+
+  it('keeps placeholder visible even with existing tags (Figma two-row layout)', () => {
+    render(<Harness initial={['one']} placeholder="Add tag..." aria-label="tags" />)
+    expect(getInput()).toHaveAttribute('placeholder', 'Add tag...')
+  })
+
+  it('renders chips below the input row (two-row layout)', () => {
+    const { container } = render(<Harness initial={['a', 'b']} aria-label="tags" />)
+    const root = container.querySelector('[data-slot="tag-input"]')
+    expect(root).not.toBeNull()
+    const inputField = root!.querySelector('[data-slot="tag-input-field"]')
+    const chips = root!.querySelector('[data-slot="tag-input-chips"]')
+    expect(inputField).not.toBeNull()
+    expect(chips).not.toBeNull()
+    const inputIndex = Array.from(root!.children).indexOf(inputField!.closest('[data-slot="input-wrapper"]')!)
+    const chipsIndex = Array.from(root!.children).indexOf(chips!)
+    expect(inputIndex).toBeLessThan(chipsIndex)
+  })
+
+  it('renders chips with shape="square" (Figma rectangular tag)', () => {
+    const { container } = render(<Harness initial={['x']} aria-label="tags" />)
+    const chip = container.querySelector('[data-slot="tag"][data-shape="square"]')
+    expect(chip).not.toBeNull()
+  })
+
+  it('supports lg size matching Figma Medium (40)', () => {
+    render(<Harness size="lg" aria-label="tags" />)
+    expect(getInput().closest('[data-slot="input-wrapper"]')!.className).toContain('h-10')
+  })
+
+  it('forwards id and name to underlying input', () => {
+    render(<Harness id="tags-field" name="tags[]" aria-label="tags" />)
+    const input = getInput()
+    expect(input).toHaveAttribute('id', 'tags-field')
+    expect(input).toHaveAttribute('name', 'tags[]')
+  })
+
+  it('disables input and remove buttons when disabled prop is true', () => {
+    render(<Harness initial={['locked']} disabled aria-label="tags" />)
+    expect(getInput()).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Remove locked' })).toBeDisabled()
+  })
+
+  it('works in uncontrolled mode (no value/onChange props)', () => {
+    render(<TagInput aria-label="tags" />)
+    const input = getInput()
+    fireEvent.change(input, { target: { value: 'standalone' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(screen.getByText('standalone')).toBeInTheDocument()
+  })
+})

package/src/primitives/__tests__/tag.test.tsx

@@ -0,0 +1,123 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import * as React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Tag } from '../tag'
+
+describe('Tag primitive', () => {
+  it('renders default pill variant when no shape prop is given', () => {
+    render(<Tag>Hello</Tag>)
+    const root = screen.getByText('Hello').closest('[data-slot="tag"]')
+    expect(root).not.toBeNull()
+    expect(root!.className).toContain('rounded-full')
+    expect(root!.className).toContain('border-border')
+    expect(root).toHaveAttribute('data-shape', 'pill')
+  })
+
+  it('renders square shape with rounded-md when shape="square"', () => {
+    render(<Tag shape="square">Berlin</Tag>)
+    const root = screen.getByText('Berlin').closest('[data-slot="tag"]')
+    expect(root!.className).toContain('rounded-md')
+    expect(root!.className).not.toContain('rounded-full')
+    expect(root).toHaveAttribute('data-shape', 'square')
+  })
+
+  it('applies status colour variants', () => {
+    render(<Tag variant="success">OK</Tag>)
+    const root = screen.getByText('OK').closest('[data-slot="tag"]')
+    expect(root!.className).toContain('text-status-success-text')
+  })
+
+  it('renders a leading dot when dot=true', () => {
+    render(
+      <Tag variant="error" dot>
+        Live
+      </Tag>,
+    )
+    const root = screen.getByText('Live').closest('[data-slot="tag"]')
+    const dotSpan = root!.querySelector('[aria-hidden="true"]')
+    expect(dotSpan).not.toBeNull()
+    expect(dotSpan!.className).toContain('bg-status-error-icon')
+  })
+
+  it('renders no remove button by default', () => {
+    render(<Tag>Plain</Tag>)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
+
+  it('renders a remove button when onRemove is provided', () => {
+    const onRemove = jest.fn()
+    render(<Tag onRemove={onRemove}>Closeable</Tag>)
+    const button = screen.getByRole('button', { name: 'Remove' })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('uses custom removeAriaLabel when provided', () => {
+    const onRemove = jest.fn()
+    render(
+      <Tag onRemove={onRemove} removeAriaLabel="Remove Berlin">
+        Berlin
+      </Tag>,
+    )
+    expect(screen.getByRole('button', { name: 'Remove Berlin' })).toBeInTheDocument()
+  })
+
+  it('fires onRemove and stops propagation when close button is clicked', () => {
+    const onRemove = jest.fn()
+    const onClick = jest.fn()
+    render(
+      <Tag onRemove={onRemove} onClick={onClick}>
+        ClickMe
+      </Tag>,
+    )
+    fireEvent.click(screen.getByRole('button', { name: 'Remove' }))
+    expect(onRemove).toHaveBeenCalledTimes(1)
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('disables the close button and fades the chip when disabled is true', () => {
+    const onRemove = jest.fn()
+    render(
+      <Tag onRemove={onRemove} disabled>
+        Locked
+      </Tag>,
+    )
+    const root = screen.getByText('Locked').closest('[data-slot="tag"]')
+    expect(root!.className).toContain('opacity-60')
+    expect(root).toHaveAttribute('aria-disabled', 'true')
+    const button = screen.getByRole('button', { name: 'Remove' })
+    expect(button).toBeDisabled()
+  })
+
+  it('forwards arbitrary HTMLSpan props (id, data-*, className)', () => {
+    render(
+      <Tag id="tag-1" data-testid="leading-tag" className="ml-2">
+        Forwarded
+      </Tag>,
+    )
+    const root = document.getElementById('tag-1')
+    expect(root).not.toBeNull()
+    expect(root).toHaveAttribute('data-testid', 'leading-tag')
+    expect(root!.className).toContain('ml-2')
+  })
+
+  it('uses smaller close icon for pill shape and larger for square shape', () => {
+    const { rerender, container } = render(
+      <Tag shape="pill" onRemove={() => {}}>
+        Pill
+      </Tag>,
+    )
+    let svg = container.querySelector('button svg')
+    expect(svg!.getAttribute('class')).toContain('size-2.5')
+
+    rerender(
+      <Tag shape="square" onRemove={() => {}}>
+        Square
+      </Tag>,
+    )
+    svg = container.querySelector('button svg')
+    expect(svg!.getAttribute('class')).toContain('size-3.5')
+  })
+})