test(01-02): add failing tests for InlineEditCell

- renders formatted currency in display mode
- enters edit mode on click
- calls onSave with parsed number on blur/Enter
- does not call onSave when value unchanged
This commit is contained in:
2026-03-11 20:56:04 +01:00
parent d9cb292ef1
commit bb36aeb272

View File

@@ -0,0 +1,106 @@
import { render, screen, fireEvent } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { InlineEditCell } from './InlineEditCell'
// Wrap in a table/row to satisfy semantic HTML for TableCell
function Wrapper({ children }: { children: React.ReactNode }) {
return (
<table>
<tbody>
<tr>{children}</tr>
</tbody>
</table>
)
}
describe('InlineEditCell', () => {
const defaultProps = {
value: 42.5,
currency: 'EUR',
onSave: vi.fn().mockResolvedValue(undefined),
}
beforeEach(() => {
vi.clearAllMocks()
})
it('renders formatted currency value in display mode', () => {
render(
<Wrapper>
<InlineEditCell {...defaultProps} />
</Wrapper>
)
// Should show formatted value (42.5 in EUR → some formatted string containing 42)
expect(screen.getByText(/42/)).toBeInTheDocument()
})
it('enters edit mode on click', async () => {
const user = userEvent.setup()
render(
<Wrapper>
<InlineEditCell {...defaultProps} />
</Wrapper>
)
const span = screen.getByText(/42/)
await user.click(span)
// After click, an input should be visible
expect(screen.getByRole('spinbutton')).toBeInTheDocument()
})
it('calls onSave with parsed number on blur', async () => {
const user = userEvent.setup()
const onSave = vi.fn().mockResolvedValue(undefined)
render(
<Wrapper>
<InlineEditCell {...defaultProps} onSave={onSave} />
</Wrapper>
)
const span = screen.getByText(/42/)
await user.click(span)
const input = screen.getByRole('spinbutton')
await user.clear(input)
await user.type(input, '100')
fireEvent.blur(input)
expect(onSave).toHaveBeenCalledWith(100)
})
it('does not call onSave when value unchanged', async () => {
const user = userEvent.setup()
const onSave = vi.fn().mockResolvedValue(undefined)
render(
<Wrapper>
<InlineEditCell {...defaultProps} onSave={onSave} />
</Wrapper>
)
const span = screen.getByText(/42/)
await user.click(span)
// Don't change the value, just blur
const input = screen.getByRole('spinbutton')
fireEvent.blur(input)
expect(onSave).not.toHaveBeenCalled()
})
it('calls onSave on Enter key', async () => {
const user = userEvent.setup()
const onSave = vi.fn().mockResolvedValue(undefined)
render(
<Wrapper>
<InlineEditCell {...defaultProps} onSave={onSave} />
</Wrapper>
)
const span = screen.getByText(/42/)
await user.click(span)
const input = screen.getByRole('spinbutton')
await user.clear(input)
await user.type(input, '99')
await user.keyboard('{Enter}')
expect(onSave).toHaveBeenCalledWith(99)
})
})