Skip to content

Commit

Permalink
refactor: add option type to CheckBox
Browse files Browse the repository at this point in the history
  • Loading branch information
toothlessdev committed Nov 21, 2024
1 parent d40ac13 commit 92111e2
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 13 deletions.
23 changes: 12 additions & 11 deletions src/components/forms/CheckBoxWithLabelForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,33 @@ export const CheckBoxWithLabelForm = ({
return (
<div key={index} className="flex items-center gap-1">
<Checkbox
data-testid={`checkbox_${option}`}
id={`checkbox_${option}`}
data-testid={`checkbox_${option.label}`}
id={`checkbox_${option.label}`}
className="block w-5 h-5"
checked={(formState[questionText] as Array<string>).includes(
option as string,
)}
checked={formState[questionText]
.map((state) => state.value)
.includes(option.value)}
onCheckedChange={(isChecked) => {
if (isChecked) {
setFormState({
...formState,
[questionText]: [
...(formState[questionText] as Array<string>),
option,
...formState[questionText],
{ value: true },
],
});
} else {
setFormState({
...formState,
[questionText]: (
formState[questionText] as Array<string>
).filter((item) => item !== option),
[questionText]: [
...formState[questionText],
{ value: false },
],
});
}
}}
/>
<label htmlFor={`checkbox_${option}`}>{option as string}</label>
<label htmlFor={`checkbox_${option}`}>{option.label}</label>
</div>
);
})}
Expand Down
10 changes: 8 additions & 2 deletions src/components/forms/__test__/CheckBoxWithLabelForm.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,21 @@ import { screen, render, fireEvent } from "@testing-library/react";

describe("<CheckBoxWithLabelForm/>", () => {
const formState = {
"test-question-text": [],
"test-question-text": [{ value: "" }],
};
const setFormState = jest.fn();

const options = [
{ label: "options1", value: "options1" },
{ label: "options2", value: "options2" },
{ label: "options3", value: "options3" },
];

beforeEach(() => {
render(
<CheckBoxWithLabelForm
questionText={"test-question-text"}
options={["options1", "options2", "options3"]}
options={options}
formState={formState}
setFormState={setFormState}
/>,
Expand Down

0 comments on commit 92111e2

Please sign in to comment.