98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
|
|
import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
|
|
import Contact from '../app/kontakt/page'
|
|
|
|
// Mock fetch
|
|
const fetchMock = vi.fn()
|
|
global.fetch = fetchMock
|
|
|
|
// Mock alert
|
|
const alertMock = vi.fn()
|
|
global.alert = alertMock
|
|
|
|
describe('Contact Page', () => {
|
|
beforeEach(() => {
|
|
fetchMock.mockClear()
|
|
alertMock.mockClear()
|
|
})
|
|
|
|
it('renders the contact form correctly', () => {
|
|
render(<Contact />)
|
|
|
|
expect(screen.getByLabelText(/Name \*/i)).toBeInTheDocument()
|
|
expect(screen.getByLabelText(/Firma/i)).toBeInTheDocument()
|
|
expect(screen.getByLabelText(/E-Mail \*/i)).toBeInTheDocument()
|
|
expect(screen.getByLabelText(/Nachricht \*/i)).toBeInTheDocument()
|
|
expect(screen.getByRole('button', { name: /Nachricht senden/i })).toBeInTheDocument()
|
|
})
|
|
|
|
it('submits the form successfully', async () => {
|
|
fetchMock.mockResolvedValueOnce({
|
|
ok: true,
|
|
json: async () => ({ success: true }),
|
|
})
|
|
|
|
render(<Contact />)
|
|
|
|
fireEvent.change(screen.getByLabelText(/Name \*/i), { target: { value: 'John Doe' } })
|
|
fireEvent.change(screen.getByLabelText(/Firma/i), { target: { value: 'Acme Corp' } })
|
|
fireEvent.change(screen.getByLabelText(/E-Mail \*/i), { target: { value: 'john@example.com' } })
|
|
fireEvent.change(screen.getByLabelText(/Nachricht \*/i), { target: { value: 'This is a test message that is long enough.' } })
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /Nachricht senden/i }))
|
|
|
|
await waitFor(() => {
|
|
expect(fetchMock).toHaveBeenCalledTimes(1)
|
|
expect(fetchMock).toHaveBeenCalledWith('/api/contact', expect.objectContaining({
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
name: 'John Doe',
|
|
company: 'Acme Corp',
|
|
email: 'john@example.com',
|
|
message: 'This is a test message that is long enough.',
|
|
website: ''
|
|
}),
|
|
}))
|
|
})
|
|
|
|
expect(screen.getByText(/Nachricht gesendet/i)).toBeInTheDocument()
|
|
expect(screen.getByText(/Vielen Dank für Ihre Anfrage/i)).toBeInTheDocument()
|
|
})
|
|
|
|
it('handles submission errors', async () => {
|
|
fetchMock.mockResolvedValueOnce({
|
|
ok: false,
|
|
json: async () => ({ error: 'Server error' }),
|
|
})
|
|
|
|
render(<Contact />)
|
|
|
|
fireEvent.change(screen.getByLabelText(/Name \*/i), { target: { value: 'John Doe' } })
|
|
fireEvent.change(screen.getByLabelText(/E-Mail \*/i), { target: { value: 'john@example.com' } })
|
|
fireEvent.change(screen.getByLabelText(/Nachricht \*/i), { target: { value: 'This is a test message that is long enough.' } })
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /Nachricht senden/i }))
|
|
|
|
await waitFor(() => {
|
|
expect(alertMock).toHaveBeenCalledWith('Fehler: Server error')
|
|
})
|
|
})
|
|
|
|
it('handles network errors', async () => {
|
|
fetchMock.mockRejectedValueOnce(new Error('Network error'))
|
|
|
|
render(<Contact />)
|
|
|
|
fireEvent.change(screen.getByLabelText(/Name \*/i), { target: { value: 'John Doe' } })
|
|
fireEvent.change(screen.getByLabelText(/E-Mail \*/i), { target: { value: 'john@example.com' } })
|
|
fireEvent.change(screen.getByLabelText(/Nachricht \*/i), { target: { value: 'This is a test message that is long enough.' } })
|
|
|
|
fireEvent.click(screen.getByRole('button', { name: /Nachricht senden/i }))
|
|
|
|
await waitFor(() => {
|
|
expect(alertMock).toHaveBeenCalledWith('Es gab einen Fehler beim Senden Ihrer Nachricht.')
|
|
})
|
|
})
|
|
})
|