115 lines
3.1 KiB
JavaScript
115 lines
3.1 KiB
JavaScript
import { it, expect, describe, afterEach } from 'vitest';
|
|
import { render, screen, cleanup } from '@testing-library/react';
|
|
import '@testing-library/jest-dom/vitest';
|
|
import userEvent from '@testing-library/user-event';
|
|
|
|
import ActivityInfo from '../../src/steps/ActivityInfo';
|
|
import { validate } from '../../src/utils/validation';
|
|
|
|
describe('ActivityInfo Component', () => {
|
|
afterEach(cleanup);
|
|
|
|
const step = 2;
|
|
|
|
it('renders all form fields', () => {
|
|
render(<ActivityInfo handleChange={() => {}} errors={{}} />);
|
|
|
|
expect(
|
|
screen.getByLabelText(/How often do you exercise\?/i)
|
|
).toBeInTheDocument();
|
|
expect(
|
|
screen.getByLabelText(
|
|
/How would you describe your average energy level\?/i
|
|
)
|
|
).toBeInTheDocument();
|
|
});
|
|
|
|
it('displays validation errors for invalid data', () => {
|
|
const formData = {
|
|
fullName: 'John Doe',
|
|
email: 'john@example.com',
|
|
password: 'password123',
|
|
activityLevel: '',
|
|
energyLevel: '',
|
|
goals: [],
|
|
timeCommitment: '15',
|
|
};
|
|
const errors = validate(formData, step);
|
|
|
|
render(<ActivityInfo handleChange={() => {}} errors={errors} />);
|
|
|
|
expect(screen.getByText(/Activity Level is required/i)).toBeInTheDocument();
|
|
expect(screen.getByText(/Energy Level is required/i)).toBeInTheDocument();
|
|
});
|
|
|
|
it('displays no validation errors for valid data', () => {
|
|
const formData = {
|
|
fullName: 'John Doe',
|
|
email: 'john@example.com',
|
|
password: 'password123',
|
|
activityLevel: 'moderate',
|
|
energyLevel: 'high',
|
|
goals: [],
|
|
timeCommitment: '15',
|
|
};
|
|
const errors = validate(formData, step);
|
|
|
|
render(<ActivityInfo handleChange={() => {}} errors={errors} />);
|
|
|
|
expect(screen.queryByText(/is required/i)).not.toBeInTheDocument();
|
|
});
|
|
|
|
it('calls handleChange and updates error messages dynamically', async () => {
|
|
let formData = {
|
|
fullName: 'John Doe',
|
|
email: 'john@example.com',
|
|
password: 'password123',
|
|
activityLevel: '',
|
|
energyLevel: '',
|
|
goals: [],
|
|
timeCommitment: '15',
|
|
};
|
|
let errors = validate(formData, step);
|
|
|
|
const handleChangeTest = (field, value) => {
|
|
formData = { ...formData, [field]: value };
|
|
errors = validate(formData, step);
|
|
};
|
|
|
|
const { rerender } = render(
|
|
<ActivityInfo
|
|
handleChange={({ target }) =>
|
|
handleChangeTest(target.name, target.value)
|
|
}
|
|
errors={errors}
|
|
/>
|
|
);
|
|
|
|
const activitySelect = screen.getByLabelText(
|
|
/How often do you exercise\?/i
|
|
);
|
|
const energySelect = screen.getByLabelText(
|
|
/How would you describe your average energy level\?/i
|
|
);
|
|
|
|
await userEvent.selectOptions(activitySelect, '3+ times a week');
|
|
await userEvent.selectOptions(energySelect, 'medium');
|
|
|
|
rerender(
|
|
<ActivityInfo
|
|
handleChange={({ target }) =>
|
|
handleChangeTest(target.name, target.value)
|
|
}
|
|
errors={errors}
|
|
/>
|
|
);
|
|
|
|
expect(
|
|
screen.queryByText(/Activity Level is required/i)
|
|
).not.toBeInTheDocument();
|
|
expect(
|
|
screen.queryByText(/Energy Level is required/i)
|
|
).not.toBeInTheDocument();
|
|
});
|
|
});
|