ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update project

Browse Source
This commit is contained in:
Philippe Torrel
2026-09-01 08:47:49 +02:00
parent 0bdbf245ee
commit 2aef8b91bd
10 changed files with 491 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
06_js-debug/projects/debugging-multi-step-form-template/package-lock.json generated
View File

@@ -15,16 +15,16 @@
"@eslint/js": "^10.0.1",
"@tailwindcss/forms": "^0.5.11",
"@testing-library/jest-dom": "^7.0.1",
"@testing-library/react": "^16.3.2",
"@testing-library/react": "^16.3.3",
"@testing-library/user-event": "^14.6.6",
"@types/react": "^19.2.18",
"@types/react-dom": "^19.2.5",
"@vitejs/plugin-react": "^6.1.0",
"@vitejs/plugin-react": "^6.1.1",
"@vitest/ui": "^4.1.11",
"autoprefixer": "^10.5.4",
"eslint": "^10.9.0",
"eslint": "^10.9.1",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.4",
"eslint-plugin-react-refresh": "^0.5.5",
"globals": "^17.11.0",
"jsdom": "^30.0.1",
"postcss": "^8.5.26",
@@ -1223,9 +1223,9 @@
"license": "MIT"
},
"node_modules/@testing-library/react": {
"version": "16.3.2",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.2.tgz",
"integrity": "sha512-XU5/SytQM+ykqMnAnvB2umaJNIOsLF3PVv//1Ew4CTcpz0/BRyy/af40qqrt7SjKpDdT1saBMc42CUok5gaw+g==",
"version": "16.3.3",
"resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.3.tgz",
"integrity": "sha512-Uo193NgQbPMz6lrrhtRQQFcMC6Re/ELLFbbuVL30WDlZxlpZf9/lMHTAVxPRLw1q1iu9OJmR1c2BLiENRstdBg==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -1332,9 +1332,9 @@
}
},
"node_modules/@vitejs/plugin-react": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.0.tgz",
"integrity": "sha512-qd2BzUBehkov86WFhg0JkEFEYyCLG9uPCe6qWTY/kRlss9OvJrOF2UbIWT7p+8IzZHkEu0DNGHc4HSv+JdDLsw==",
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.1.1.tgz",
"integrity": "sha512-yxLaQV9gkhS8ezJqCM6+ndU7mDY6gqAg75NQ+0IjwEI8IYOmQCgkRwHKVSfWXW076DsqMo0Dk+0FK1U+M5RgFw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2058,9 +2058,9 @@
}
},
"node_modules/eslint": {
"version": "10.9.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-10.9.0.tgz",
"integrity": "sha512-5KeEOJZBfEVA47boFiBsf+6MmmJpffM7qEBg4pLla2e4nlKgdKlqCW0oSLOGsT8Wl5uCGJptLV1bkaiShj90Gw==",
"version": "10.9.1",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-10.9.1.tgz",
"integrity": "sha512-9VaAkDURekixUQJy0oJYl2DcN6oKMfxay7XzaGYAWQwsb6qfKf+x76R2k1L8kb1boc+FyCAaTA9GmiKaaiaF+A==",
"dev": true,
"license": "MIT",
"workspaces": [
@@ -2137,9 +2137,9 @@
}
},
"node_modules/eslint-plugin-react-refresh": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.4.tgz",
"integrity": "sha512-7bqTKz7T0r+HKWFarNXByDE9/5+73wI2ru+M3zuqGbR7s/b/5/pQJXZoufWlrngqGqoZto73ZkGumCdLxk+4rw==",
"version": "0.5.5",
"resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.5.5.tgz",
"integrity": "sha512-vG7yLURXNvCHy0FBdbZRwIu0BLPJMlUUJS2Ep7ud9w1YCLftFZtuEjyjhym0Qq9yuZ6LJUitNlu/hMk0gakXAw==",
"dev": true,
"license": "MIT",
"peerDependencies": {

8
06_js-debug/projects/debugging-multi-step-form-template/package.json
View File

@@ -19,16 +19,16 @@
"@eslint/js": "^10.0.1",
"@tailwindcss/forms": "^0.5.11",
"@testing-library/jest-dom": "^7.0.1",
"@testing-library/react": "^16.3.2",
"@testing-library/react": "^16.3.3",
"@testing-library/user-event": "^14.6.6",
"@types/react": "^19.2.18",
"@types/react-dom": "^19.2.5",
"@vitejs/plugin-react": "^6.1.0",
"@vitejs/plugin-react": "^6.1.1",
"@vitest/ui": "^4.1.11",
"autoprefixer": "^10.5.4",
"eslint": "^10.9.0",
"eslint": "^10.9.1",
"eslint-plugin-react-hooks": "^7.1.1",
"eslint-plugin-react-refresh": "^0.5.4",
"eslint-plugin-react-refresh": "^0.5.5",
"globals": "^17.11.0",
"jsdom": "^30.0.1",
"postcss": "^8.5.26",

72
06_js-debug/projects/debugging-multi-step-form-template/tests/validation/step3.test.jsx
View File

@@ -18,17 +18,13 @@ describe('GoalSetting Component', () => {
handleChange={() => {}}
handleCheckboxChange={() => {}}
errors={{}}
/>
/>,
);
// Use getByRole to target the fieldset for "What are your goals?"
expect(
screen.getByRole('group', { name: /What are your goals\?/i })
).toBeInTheDocument();
expect(screen.getByRole('group', { name: /What are your goals\?/i })).toBeInTheDocument();
expect(
screen.getByLabelText(/How much time can you commit each day\?/i)
).toBeInTheDocument();
expect(screen.getByLabelText(/How much time can you commit each day\?/i)).toBeInTheDocument();
});
it('displays validation errors for empty fields', () => {
@@ -38,21 +34,10 @@ describe('GoalSetting Component', () => {
};
const errors = validate(formData, step);
render(
<GoalSetting
formData={formData}
handleChange={() => {}}
handleCheckboxChange={() => {}}
errors={errors}
/>
);
render(<GoalSetting formData={formData} handleChange={() => {}} handleCheckboxChange={() => {}} errors={errors} />);
expect(
screen.getByText(/At least one goal is required/i)
).toBeInTheDocument();
expect(
screen.getByText(/Time Commitment is required/i)
).toBeInTheDocument();
expect(screen.getByText(/At least one goal is required/i)).toBeInTheDocument();
expect(screen.getByText(/Time Commitment is required/i)).toBeInTheDocument();
});
it('displays no validation errors for valid data', () => {
@@ -62,14 +47,7 @@ describe('GoalSetting Component', () => {
};
const errors = validate(formData, step);
render(
<GoalSetting
formData={formData}
handleChange={() => {}}
handleCheckboxChange={() => {}}
errors={errors}
/>
);
render(<GoalSetting formData={formData} handleChange={() => {}} handleCheckboxChange={() => {}} errors={errors} />);
expect(screen.queryByText(/is required/i)).not.toBeInTheDocument();
});
@@ -79,9 +57,7 @@ describe('GoalSetting Component', () => {
let errors = validate(formData, step);
const handleCheckboxChangeTest = (field, id, isChecked) => {
const updatedGoals = isChecked
? [...formData[field], id]
: formData[field].filter((goal) => goal !== id);
const updatedGoals = isChecked ? [...formData[field], id] : formData[field].filter((goal) => goal !== id);
formData = { ...formData, [field]: updatedGoals };
errors = validate(formData, step);
@@ -93,7 +69,7 @@ describe('GoalSetting Component', () => {
handleChange={() => {}}
handleCheckboxChange={handleCheckboxChangeTest}
errors={errors}
/>
/>,
);
const weightLossCheckbox = screen.getByLabelText(/Weight Loss/i);
@@ -106,13 +82,11 @@ describe('GoalSetting Component', () => {
handleChange={() => {}}
handleCheckboxChange={handleCheckboxChangeTest}
errors={errors}
/>
/>,
);
expect(weightLossCheckbox).toBeChecked();
expect(
screen.queryByText(/At least one goal is required/i)
).not.toBeInTheDocument();
expect(screen.queryByText(/At least one goal is required/i)).not.toBeInTheDocument();
await userEvent.click(muscleGainCheckbox);
rerender(
@@ -121,7 +95,7 @@ describe('GoalSetting Component', () => {
handleChange={() => {}}
handleCheckboxChange={handleCheckboxChangeTest}
errors={errors}
/>
/>,
);
expect(muscleGainCheckbox).toBeChecked();
@@ -141,33 +115,25 @@ describe('GoalSetting Component', () => {
const { rerender } = render(
<GoalSetting
formData={formData}
handleChange={({ target }) =>
handleChangeTest(target.name, target.value)
}
handleChange={({ target }) => handleChangeTest(target.name, target.value)}
handleCheckboxChange={() => {}}
errors={errors}
/>
/>,
);
const timeCommitmentSelect = screen.getByLabelText(
/How much time can you commit each day\?/i
);
await userEvent.selectOptions(timeCommitmentSelect, '45');
const timeCommitmentSelect = screen.getByLabelText(/How much time can you commit each day\?/i);
await userEvent.selectOptions(timeCommitmentSelect, '30');
rerender(
<GoalSetting
formData={formData}
handleChange={({ target }) =>
handleChangeTest(target.name, target.value)
}
handleChange={({ target }) => handleChangeTest(target.name, target.value)}
handleCheckboxChange={() => {}}
errors={errors}
/>
/>,
);
expect(timeCommitmentSelect).toHaveValue('30');
expect(
screen.queryByText(/Time Commitment is required/i)
).not.toBeInTheDocument();
expect(screen.queryByText(/Time Commitment is required/i)).not.toBeInTheDocument();
});
});