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

@@ -0,0 +1,125 @@
+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 AccountInfo from '../../src/steps/AccountInfo';
+import { validate } from '../../src/utils/validation';
+
+describe('AccountInfo Component', () => {
+  afterEach(cleanup);
+
+  const step = 1;
+
+  it('renders all form fields', () => {
+    render(
+      <AccountInfo
+        formData={{ fullName: '', email: '', password: '' }}
+        handleChange={() => {}}
+        errors={{}}
+      />
+    );
+
+    expect(screen.getByLabelText(/Full Name/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/Password/i)).toBeInTheDocument();
+  });
+
+  it('displays validation errors for invalid data', () => {
+    const formData = { fullName: '', email: '', password: '' };
+    const errors = validate(formData, step);
+
+    render(
+      <AccountInfo
+        formData={formData}
+        handleChange={() => {}}
+        errors={errors}
+      />
+    );
+
+    expect(screen.getByText(/Full Name is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/Email is required/i)).toBeInTheDocument();
+    expect(screen.getByText(/Password is required/i)).toBeInTheDocument();
+  });
+
+  it('displays no validation errors for valid data', () => {
+    const formData = {
+      fullName: 'John Doe',
+      email: 'john.doe@example.com',
+      password: 'securepassword',
+    };
+    const errors = validate(formData, step);
+
+    render(
+      <AccountInfo
+        formData={formData}
+        handleChange={() => {}}
+        errors={errors}
+      />
+    );
+
+    expect(screen.queryByText(/is required/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/invalid/i)).not.toBeInTheDocument();
+    expect(
+      screen.queryByText(/must be at least 6 characters/i)
+    ).not.toBeInTheDocument();
+  });
+
+  it('calls handleChange and updates error messages dynamically', async () => {
+    let formData = { fullName: '', email: '', password: '' };
+    let errors = validate(formData, step);
+
+    const handleChangeTest = (field, value) => {
+      formData = { ...formData, [field]: value };
+      errors = validate(formData, step);
+    };
+
+    const { rerender } = render(
+      <AccountInfo
+        formData={formData}
+        handleChange={({ target }) =>
+          handleChangeTest(target.name, target.value)
+        }
+        errors={errors}
+      />
+    );
+
+    const fullNameInput = screen.getByLabelText(/Full Name/i);
+    await userEvent.type(fullNameInput, 'John');
+
+    rerender(
+      <AccountInfo
+        formData={formData}
+        handleChange={({ target }) =>
+          handleChangeTest(target.name, target.value)
+        }
+        errors={errors}
+      />
+    );
+
+    expect(
+      screen.getByText(/Full Name must contain at least two words/i)
+    ).toBeInTheDocument();
+  });
+
+  it('retains user input in form fields', () => {
+    const formData = {
+      fullName: 'Jane Doe',
+      email: 'jane.doe@example.com',
+      password: 'securepassword',
+    };
+    const errors = validate(formData, step);
+
+    render(
+      <AccountInfo
+        formData={formData}
+        handleChange={() => {}}
+        errors={errors}
+      />
+    );
+
+    expect(screen.getByLabelText(/Full Name/i)).toHaveValue('Jane Doe');
+    expect(screen.getByLabelText(/Email/i)).toHaveValue('jane.doe@example.com');
+    expect(screen.getByLabelText(/Password/i)).toHaveValue('securepassword');
+  });
+});