06_js-debug/projects/debugging-multi-step-form-template/tests/validation/step2.test.jsx

@@ -0,0 +1,114 @@
+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();
+  });
+});