114 lines
2.9 KiB
TypeScript
114 lines
2.9 KiB
TypeScript
|
|
// @vitest-environment jsdom
|
|
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
|
|
import { vi, describe, it, expect, beforeEach } from 'vitest';
|
|
import { Contact } from '../Contact';
|
|
import emailjs from '@emailjs/browser';
|
|
|
|
// Mock dependencies
|
|
vi.mock('@emailjs/browser', () => ({
|
|
default: {
|
|
send: vi.fn().mockResolvedValue({ status: 200, text: 'OK' }),
|
|
},
|
|
}));
|
|
|
|
vi.mock('../../i18n', () => ({
|
|
useTranslation: () => ({
|
|
t: {
|
|
contact: {
|
|
title: 'Contact Us',
|
|
subtitle: 'Get in touch',
|
|
intro: 'Send us a message',
|
|
form: {
|
|
name: 'Name',
|
|
namePlaceholder: 'Your Name',
|
|
email: 'Email',
|
|
emailPlaceholder: 'Your Email',
|
|
subject: 'Subject',
|
|
subjectPlaceholder: 'Message Subject',
|
|
message: 'Message',
|
|
messagePlaceholder: 'Your Message',
|
|
submit: 'Send Message',
|
|
sending: 'Sending...',
|
|
success: 'Message sent successfully!',
|
|
error: 'Failed to send message.',
|
|
},
|
|
info: {
|
|
title: 'Contact Info',
|
|
email: 'Email Us',
|
|
github: 'GitHub',
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
}));
|
|
|
|
// Mock config
|
|
vi.mock('../../config', () => ({
|
|
config: {
|
|
emailJs: {
|
|
serviceId: 'mock_service_id',
|
|
templateIdAdmin: 'mock_template_admin',
|
|
templateIdUser: 'mock_template_user',
|
|
publicKey: 'mock_public_key',
|
|
},
|
|
},
|
|
}));
|
|
|
|
describe('Contact Page', () => {
|
|
beforeEach(() => {
|
|
vi.clearAllMocks();
|
|
});
|
|
|
|
it('submits the form with correct parameters', async () => {
|
|
render(<Contact />);
|
|
|
|
// Fill out the form
|
|
fireEvent.change(screen.getByLabelText('Name'), { target: { value: 'John Doe' } });
|
|
fireEvent.change(screen.getByLabelText('Email'), { target: { value: 'john@example.com' } });
|
|
fireEvent.change(screen.getByLabelText('Subject'), { target: { value: 'Test Subject' } });
|
|
fireEvent.change(screen.getByLabelText('Message'), { target: { value: 'Hello world' } });
|
|
|
|
// Submit
|
|
fireEvent.click(screen.getByRole('button', { name: 'Send Message' }));
|
|
|
|
// Wait for submission
|
|
await waitFor(() => {
|
|
expect(emailjs.send).toHaveBeenCalledTimes(2);
|
|
});
|
|
|
|
const expectedParams = {
|
|
name: 'John Doe',
|
|
email: 'john@example.com',
|
|
title: 'Test Subject',
|
|
message: 'Hello world',
|
|
};
|
|
|
|
const expectedOptions = {
|
|
publicKey: 'mock_public_key'
|
|
};
|
|
|
|
// Check first call (Admin)
|
|
expect(emailjs.send).toHaveBeenNthCalledWith(
|
|
1,
|
|
'mock_service_id',
|
|
'mock_template_admin',
|
|
expectedParams,
|
|
expectedOptions
|
|
);
|
|
|
|
// Check second call (User)
|
|
expect(emailjs.send).toHaveBeenNthCalledWith(
|
|
2,
|
|
'mock_service_id',
|
|
'mock_template_user',
|
|
expectedParams,
|
|
expectedOptions
|
|
);
|
|
|
|
// Verify success message
|
|
const successMessage = await screen.findByText('Message sent successfully!');
|
|
expect(successMessage).toBeTruthy();
|
|
});
|
|
});
|