test: add InlineEdit test file
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
76
src/design-system/primitives/InlineEdit/InlineEdit.test.tsx
Normal file
76
src/design-system/primitives/InlineEdit/InlineEdit.test.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import { InlineEdit } from './InlineEdit'
|
||||
|
||||
describe('InlineEdit', () => {
|
||||
it('renders value in display mode', () => {
|
||||
render(<InlineEdit value="Alice" onSave={vi.fn()} />)
|
||||
expect(screen.getByText('Alice')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows placeholder when value is empty', () => {
|
||||
render(<InlineEdit value="" onSave={vi.fn()} placeholder="Enter name" />)
|
||||
expect(screen.getByText('Enter name')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('enters edit mode on click', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<InlineEdit value="Alice" onSave={vi.fn()} />)
|
||||
await user.click(screen.getByText('Alice'))
|
||||
expect(screen.getByRole('textbox')).toHaveValue('Alice')
|
||||
})
|
||||
|
||||
it('saves on Enter', async () => {
|
||||
const onSave = vi.fn()
|
||||
const user = userEvent.setup()
|
||||
render(<InlineEdit value="Alice" onSave={onSave} />)
|
||||
await user.click(screen.getByText('Alice'))
|
||||
await user.clear(screen.getByRole('textbox'))
|
||||
await user.type(screen.getByRole('textbox'), 'Bob')
|
||||
await user.keyboard('{Enter}')
|
||||
expect(onSave).toHaveBeenCalledWith('Bob')
|
||||
})
|
||||
|
||||
it('cancels on Escape', async () => {
|
||||
const onSave = vi.fn()
|
||||
const user = userEvent.setup()
|
||||
render(<InlineEdit value="Alice" onSave={onSave} />)
|
||||
await user.click(screen.getByText('Alice'))
|
||||
await user.clear(screen.getByRole('textbox'))
|
||||
await user.type(screen.getByRole('textbox'), 'Bob')
|
||||
await user.keyboard('{Escape}')
|
||||
expect(onSave).not.toHaveBeenCalled()
|
||||
expect(screen.getByText('Alice')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('cancels on blur', async () => {
|
||||
const onSave = vi.fn()
|
||||
const user = userEvent.setup()
|
||||
render(<InlineEdit value="Alice" onSave={onSave} />)
|
||||
await user.click(screen.getByText('Alice'))
|
||||
await user.clear(screen.getByRole('textbox'))
|
||||
await user.type(screen.getByRole('textbox'), 'Bob')
|
||||
await user.tab()
|
||||
expect(onSave).not.toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('does not enter edit mode when disabled', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<InlineEdit value="Alice" onSave={vi.fn()} disabled />)
|
||||
await user.click(screen.getByText('Alice'))
|
||||
expect(screen.queryByRole('textbox')).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('shows edit icon button', () => {
|
||||
render(<InlineEdit value="Alice" onSave={vi.fn()} />)
|
||||
expect(screen.getByRole('button', { name: 'Edit' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('enters edit mode when edit button is clicked', async () => {
|
||||
const user = userEvent.setup()
|
||||
render(<InlineEdit value="Alice" onSave={vi.fn()} />)
|
||||
await user.click(screen.getByRole('button', { name: 'Edit' }))
|
||||
expect(screen.getByRole('textbox')).toHaveValue('Alice')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user