test: 수정 버튼을 누르는 경우 form 데이터와 함께 수행되는 로직에 대한 테스트코드 작성

jhLim97 · Feb 5, 2022 · ae169da · ae169da
1 parent ef628bc
commit ae169da
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/frontend/src/components/TransactionUpdateForm/index.jsx b/frontend/src/components/TransactionUpdateForm/index.jsx
@@ -4,8 +4,26 @@ import back from '../../../public/assets/back-button.svg';
 import { Wrapper, Element, BackImg, Input, ButtonContainer, DecisionButton } from './style';
 
 const TransactionUpdateForm = ({ transaction, onUpdate, onDelete, onCancle }) => {
+    const shapedForm = (elements) => {
+        const data = {};
+        Array.from(elements).forEach((element) => {
+            if (element.value) {
+                data[element.id] = element.value;
+            }
+        });
+        return data;
+    };
+
+    const handleUpdateSubmit = (e) => {
+        e.preventDefault();
+
+        const form = e.target;
+        const data = shapedForm(form.elements);
+        onUpdate(data);
+    };
+
     return (
-        <Wrapper aria-label="transactionUpdate">
+        <Wrapper aria-label="transactionUpdate" onSubmit={handleUpdateSubmit}>
             <Element>
                 <button type="button" aria-label="back" onClick={onCancle}>
                     <BackImg src={back} />
@@ -62,10 +80,10 @@ const TransactionUpdateForm = ({ transaction, onUpdate, onDelete, onCancle }) =>
                 />
             </Element>
             <ButtonContainer>
-                <DecisionButton type="submit" action="delete" onClick={onDelete}>
+                <DecisionButton type="button" action="delete" onClick={onDelete}>
                     삭제
                 </DecisionButton>
-                <DecisionButton type="submit" action="update" onClick={onUpdate}>
+                <DecisionButton type="submit" action="update">
                     수정
                 </DecisionButton>
             </ButtonContainer>

diff --git a/frontend/src/components/TransactionUpdateForm/test.js b/frontend/src/components/TransactionUpdateForm/test.js
@@ -5,10 +5,8 @@ import TransactionUpdateForm from '.';
 
 const TEST_DATA = {
     category: '카페/간식',
-    color: '#D092E2',
     content: '녹차 스무디',
     method: '현금',
-    sign: '-',
     cost: '5700',
     date: '2022-01-28',
 };
@@ -74,4 +72,20 @@ describe('TransactionUpateForm 테스트', () => {
         fireEvent.click(deleteButton);
         expect(onDelete).toHaveBeenCalled();
     });
+
+    it('수정 버튼을 누르면 form 데이터를 기반으로 onUpdate 함수가 호출된다.', () => {
+        const onUpdate = jest.fn();
+        render(
+            <TransactionUpdateForm
+                transaction={TEST_DATA}
+                onUpdate={onUpdate}
+                onDelete={null}
+                onCancle={null}
+            />,
+        );
+
+        const updateButton = screen.getByRole('button', { name: '수정' });
+        fireEvent.click(updateButton);
+        expect(onUpdate).toHaveBeenCalledWith(TEST_DATA);
+    });
 });