57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
|
|
import Contact from '@/app/components/Contact';
|
|
import '@testing-library/jest-dom';
|
|
|
|
// Mock the fetch function
|
|
global.fetch = jest.fn(() =>
|
|
Promise.resolve({
|
|
json: () => Promise.resolve({ message: 'Email sent' }),
|
|
})
|
|
) as jest.Mock;
|
|
|
|
describe('Contact', () => {
|
|
beforeAll(() => {
|
|
jest.useFakeTimers('modern');
|
|
});
|
|
|
|
afterAll(() => {
|
|
jest.useRealTimers();
|
|
});
|
|
|
|
it('renders the contact form', () => {
|
|
render(<Contact />);
|
|
expect(screen.getByPlaceholderText('Your Name')).toBeInTheDocument();
|
|
expect(screen.getByPlaceholderText('you@example.com')).toBeInTheDocument();
|
|
expect(screen.getByPlaceholderText('Your Message...')).toBeInTheDocument();
|
|
expect(screen.getByLabelText('I accept the privacy policy.')).toBeInTheDocument();
|
|
});
|
|
|
|
it('submits the form', async () => {
|
|
render(<Contact />);
|
|
|
|
// Wrap timer advancement in act
|
|
await act(async () => {
|
|
jest.advanceTimersByTime(3000);
|
|
});
|
|
|
|
// Fire events inside act if needed
|
|
act(() => {
|
|
fireEvent.change(screen.getByPlaceholderText('Your Name'), {
|
|
target: { value: 'John Doe' },
|
|
});
|
|
fireEvent.change(screen.getByPlaceholderText('you@example.com'), {
|
|
target: { value: 'john@example.com' },
|
|
});
|
|
fireEvent.change(screen.getByPlaceholderText('Your Message...'), {
|
|
target: { value: 'Hello!' },
|
|
});
|
|
fireEvent.click(screen.getByLabelText('I accept the privacy policy.'));
|
|
fireEvent.click(screen.getByText('Send Message'));
|
|
});
|
|
|
|
// Wait for the result
|
|
await waitFor(() =>
|
|
expect(screen.getByText('Email sent')).toBeInTheDocument()
|
|
);
|
|
});
|
|
}); |