Pouzor
df3b7a8cb0
Silent return when label was empty made the Add button appear broken. Native browser required tooltip doesn't render in Radix Dialog portals. Now shows inline red error message and highlights the field.
66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { describe, it, expect, vi } from 'vitest'
|
|
import { render, screen, fireEvent } from '@testing-library/react'
|
|
import { NodeModal } from '../NodeModal'
|
|
|
|
describe('NodeModal', () => {
|
|
it('renders nothing when closed', () => {
|
|
const { container } = render(
|
|
<NodeModal open={false} onClose={vi.fn()} onSubmit={vi.fn()} />
|
|
)
|
|
expect(container.querySelector('[role="dialog"]')).toBeNull()
|
|
})
|
|
|
|
it('renders form fields when open', () => {
|
|
render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
|
|
expect(screen.getByPlaceholderText('My Server')).toBeDefined()
|
|
expect(screen.getByText('Add Node')).toBeDefined()
|
|
})
|
|
|
|
it('does not call onSubmit when label is empty and shows error', () => {
|
|
const onSubmit = vi.fn()
|
|
render(<NodeModal open onClose={vi.fn()} onSubmit={onSubmit} />)
|
|
fireEvent.click(screen.getByText('Add'))
|
|
expect(onSubmit).not.toHaveBeenCalled()
|
|
expect(screen.getByText('Label is required')).toBeDefined()
|
|
})
|
|
|
|
it('calls onSubmit with form data when label is filled', () => {
|
|
const onSubmit = vi.fn()
|
|
const onClose = vi.fn()
|
|
render(<NodeModal open onClose={onClose} onSubmit={onSubmit} />)
|
|
fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'My NAS' } })
|
|
fireEvent.click(screen.getByText('Add'))
|
|
expect(onSubmit).toHaveBeenCalledOnce()
|
|
expect(onSubmit.mock.calls[0][0].label).toBe('My NAS')
|
|
expect(onClose).toHaveBeenCalledOnce()
|
|
})
|
|
|
|
it('clears label error when user starts typing', () => {
|
|
render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
|
|
fireEvent.click(screen.getByText('Add'))
|
|
expect(screen.getByText('Label is required')).toBeDefined()
|
|
fireEvent.change(screen.getByPlaceholderText('My Server'), { target: { value: 'x' } })
|
|
expect(screen.queryByText('Label is required')).toBeNull()
|
|
})
|
|
|
|
it('pre-fills form from initial prop', () => {
|
|
render(
|
|
<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} initial={{ label: 'Pre-filled', ip: '10.0.0.1' }} />
|
|
)
|
|
const input = screen.getByPlaceholderText('My Server') as HTMLInputElement
|
|
expect(input.value).toBe('Pre-filled')
|
|
})
|
|
|
|
it('shows Save button text when title is Edit Node', () => {
|
|
render(<NodeModal open onClose={vi.fn()} onSubmit={vi.fn()} title="Edit Node" />)
|
|
expect(screen.getByText('Save')).toBeDefined()
|
|
})
|
|
|
|
it('calls onClose when Cancel is clicked', () => {
|
|
const onClose = vi.fn()
|
|
render(<NodeModal open onClose={onClose} onSubmit={vi.fn()} />)
|
|
fireEvent.click(screen.getByText('Cancel'))
|
|
expect(onClose).toHaveBeenCalledOnce()
|
|
})
|
|
})
|