Files
euchre_camp/src/__tests__/EditTournamentForm.test.tsx
T
david 24db43eb7f
Test / unit-tests (push) Failing after 1m54s
Pull Request / unit-tests (pull_request) Failing after 1m41s
Pull Request / acceptance-tests (pull_request) Has been skipped
Pull Request / analyze-bump-type (pull_request) Has been skipped
feat: migrate from npm to Bun
- Install Bun via mise
- Update package.json scripts to use Bun
- Migrate unit tests from Vitest to Bun test runner
- Migrate component tests from Vitest to Bun test runner
- Configure Bun with DOM environment for React Testing Library
- Keep Playwright for E2E tests (as planned)
- 93/100 tests passing (7 flaky tests when running all together, pass individually)
2026-04-01 00:13:15 -07:00

136 lines
4.0 KiB
TypeScript

import { describe, it, expect, mock, beforeEach, MockedFunction } from 'bun:test'
import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import EditTournamentForm from '@/components/EditTournamentForm'
// Mock next/navigation
mock.module('next/navigation', () => ({
useRouter: () => ({
push: mock(() => {}),
}),
}))
// Mock next/link
mock.module('next/link', () => ({
default: ({ children, href }: { children: React.ReactNode; href: string }) => (
<a href={href}>{children}</a>
),
}))
// Mock fetch
const mockFetch = mock(() => {})
global.fetch = mockFetch as MockedFunction<typeof global.fetch>
const mockTournament = {
id: 1,
event_id: null,
name: 'Test Tournament',
description: 'A test tournament',
eventDate: new Date('2024-01-15'),
eventType: 'tournament',
format: 'round_robin',
status: 'planned',
maxParticipants: 16,
ownerId: null,
targetScore: null,
allowTies: false,
createdAt: new Date(),
updatedAt: new Date(),
}
describe('EditTournamentForm', () => {
beforeEach(() => {
mock.clearAllMocks()
})
it('renders form with initial values', () => {
render(<EditTournamentForm tournament={mockTournament} />)
expect(screen.getByLabelText('Tournament Name')).toHaveValue('Test Tournament')
expect(screen.getByLabelText('Description')).toHaveValue('A test tournament')
expect(screen.getByLabelText('Date')).toHaveValue('2024-01-15')
expect(screen.getByLabelText('Event Type')).toHaveValue('tournament')
expect(screen.getByLabelText('Format')).toHaveValue('round_robin')
expect(screen.getByLabelText('Status')).toHaveValue('planned')
expect(screen.getByLabelText('Max Participants (optional)')).toHaveValue(16)
})
it('updates form values on change', async () => {
const user = userEvent.setup()
render(<EditTournamentForm tournament={mockTournament} />)
const nameInput = screen.getByLabelText('Tournament Name')
await user.clear(nameInput)
await user.type(nameInput, 'Updated Tournament')
expect(nameInput).toHaveValue('Updated Tournament')
})
it('submits form with updated data', async () => {
const user = userEvent.setup()
mockFetch.mockResolvedValueOnce({
ok: true,
json: async () => ({ success: true }),
} as Response)
render(<EditTournamentForm tournament={mockTournament} />)
const nameInput = screen.getByLabelText('Tournament Name')
await user.clear(nameInput)
await user.type(nameInput, 'Updated Tournament')
const submitButton = screen.getByText('Save Changes')
await user.click(submitButton)
await waitFor(() => {
expect(mockFetch).toHaveBeenCalledWith(
'/api/tournaments/1',
expect.objectContaining({
method: 'PUT',
body: expect.stringContaining('Updated Tournament'),
})
)
})
})
it('shows error message on failed submission', async () => {
const user = userEvent.setup()
mockFetch.mockResolvedValueOnce({
ok: false,
json: async () => ({ error: 'Failed to update tournament' }),
} as Response)
render(<EditTournamentForm tournament={mockTournament} />)
const submitButton = screen.getByText('Save Changes')
await user.click(submitButton)
await waitFor(() => {
expect(screen.getByText('Failed to update tournament')).toBeInTheDocument()
})
})
it('disables submit button while loading', async () => {
const user = userEvent.setup()
mockFetch.mockImplementation(
() =>
new Promise((resolve) => {
setTimeout(() => {
resolve({
ok: true,
json: async () => ({ success: true }),
} as Response)
}, 100)
})
)
render(<EditTournamentForm tournament={mockTournament} />)
const submitButton = screen.getByText('Save Changes')
await user.click(submitButton)
expect(submitButton).toBeDisabled()
expect(submitButton).toHaveTextContent('Saving...')
})
})