refactor: add option type to Selector

Room-Fit · Nov 21, 2024 · d40ac13 · d40ac13
1 parent b96eef5
commit d40ac13
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git a/src/components/forms/SelectorWithLabelForm.tsx b/src/components/forms/SelectorWithLabelForm.tsx
@@ -29,11 +29,11 @@ export const SelectorWithLabelForm = ({
                 {questionText}
             </label>
             <Select
-                value={formState[questionText] as string}
-                onValueChange={(value) =>
+                value={formState[questionText][0].value}
+                onValueChange={(option) =>
                     setFormState({
                         ...formState,
-                        [questionText]: [value],
+                        [questionText]: [{ value: option }],
                     })
                 }
             >
@@ -45,10 +45,10 @@ export const SelectorWithLabelForm = ({
                         return (
                             <SelectItem
                                 key={index}
-                                value={option as string}
-                                data-testid={`select-options_${option}`}
+                                value={option.value as string}
+                                data-testid={`select-options_${index + 1}`}
                             >
-                                {option as string}
+                                {option.label as string}
                             </SelectItem>
                         );
                     })}

diff --git a/src/components/forms/__test__/SelectorWithLabelForm.test.tsx b/src/components/forms/__test__/SelectorWithLabelForm.test.tsx
@@ -3,15 +3,17 @@ import { fireEvent, render, screen } from "@testing-library/react";
 
 describe("<SelectorWithLabelForm/>", () => {
     const formState = {
-        "test-question-selector": [],
+        "test-question-selector": [{ value: "" }],
     };
     const setFormState = jest.fn();
 
+    const options = [{ label: "option__label", value: "option__value" }];
+
     beforeEach(() => {
         render(
             <SelectorWithLabelForm
                 questionText="test-question-selector"
-                options={["options1", "options2", "options3"]}
+                options={options}
                 formState={formState}
                 setFormState={setFormState}
             />,
@@ -27,19 +29,17 @@ describe("<SelectorWithLabelForm/>", () => {
     });
 
     test("should call setFormState with appropriate values", () => {
-        fireEvent.click(screen.getByRole("combobox"));
-        fireEvent.click(screen.getByTestId("select-options_options1"));
-
-        const options = ["options1", "options2", "options3"];
+        fireEvent.click(screen.getByText("옵션을 선택해주세요"));
 
         options.forEach((option) => {
-            fireEvent.click(screen.getByRole("combobox"));
-            fireEvent.click(screen.getByTestId(`select-options_${option}`));
+            fireEvent.click(screen.getByText(`option__label`));
 
             expect(setFormState).toHaveBeenCalledWith({
                 ...formState,
-                "test-question-selector": [option],
+                "test-question-selector": [{ value: option.value }],
             });
+
+            jest.clearAllMocks();
         });
     });
 });