[FE] test: LandingPage에서 사용하는 API에 대한 테스트 작성 (#251)

* chore: 불필요한 Fragment 제거

* test: LandingPage에서 사용하는 api 테스트 추가

frontend/src/pages/LandingPage/components/ReviewAccessForm/index.tsx

@@ -13,10 +13,10 @@ import * as S from './styles';
 const DEBOUNCE_TIME = 300;
 
 // NOTE: groupAccessCode가 유효한지를 확인하는 API 호출은 fetch로 고정!
-// 1. 요청을 통해 단순히 true, false 정도의 데이터를 단발적으로 가져오는 API이므로 
+// 1. 요청을 통해 단순히 true, false 정도의 데이터를 단발적으로 가져오는 API이므로
 // 리액트 쿼리를 사용할 만큼 서버 상태를 정교하게 가지고 있을 필요 없음
-// 2. 리액트 쿼리를 도입했을 때 Errorboundary로 Form을 감싸지 않았고, useQuery를 사용했음에도 불구하고 
-// error fallback이 뜨는 버그 존재 
+// 2. 리액트 쿼리를 도입했을 때 Errorboundary로 Form을 감싸지 않았고, useQuery를 사용했음에도 불구하고
+// error fallback이 뜨는 버그 존재
 const ReviewAccessForm = () => {
   const [groupAccessCode, setGroupAccessCode] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
@@ -59,30 +59,28 @@ const ReviewAccessForm = () => {
   }, DEBOUNCE_TIME);
 
   return (
-    <>
-      <FormLayout title="팀원이 작성한 리뷰를 확인해보세요!" direction="row">
-        <S.ReviewAccessFormContent>
-          <S.ReviewAccessFormBody>
-            <Input
-              value={groupAccessCode}
-              onChange={handleGroupAccessCodeInputChange}
-              type="text"
-              placeholder="확인 코드를 입력해주세요."
-              $style={{ width: '18rem' }}
-            />
-            <Button
-              type="button"
-              styleType={groupAccessCode ? 'primary' : 'disabled'}
-              onClick={handleAccessReviewButtonClick}
-              disabled={!groupAccessCode}
-            >
-              리뷰 확인하기
-            </Button>
-          </S.ReviewAccessFormBody>
-          {errorMessage && <S.ErrorMessage>{errorMessage}</S.ErrorMessage>}
-        </S.ReviewAccessFormContent>
-      </FormLayout>
-    </>
+    <FormLayout title="팀원이 작성한 리뷰를 확인해보세요!" direction="row">
+      <S.ReviewAccessFormContent>
+        <S.ReviewAccessFormBody>
+          <Input
+            value={groupAccessCode}
+            onChange={handleGroupAccessCodeInputChange}
+            type="text"
+            placeholder="확인 코드를 입력해주세요."
+            $style={{ width: '18rem' }}
+          />
+          <Button
+            type="button"
+            styleType={groupAccessCode ? 'primary' : 'disabled'}
+            onClick={handleAccessReviewButtonClick}
+            disabled={!groupAccessCode}
+          >
+            리뷰 확인하기
+          </Button>
+        </S.ReviewAccessFormBody>
+        {errorMessage && <S.ErrorMessage>{errorMessage}</S.ErrorMessage>}
+      </S.ReviewAccessFormContent>
+    </FormLayout>
   );
 };
 

frontend/src/pages/LandingPage/components/ReviewAccessForm/reviewAccessForm.test.tsx

@@ -0,0 +1,11 @@
+import { getIsValidGroupAccessCodeApi } from '@/apis/group';
+
+describe('getIsValidGroupAccessCodeApi', () => {
+  it('유효한 확인 코드인 경우 유효성 여부를 참으로 반환한다', async () => {
+    const validGroupAccessCode = 'group20';
+
+    const isValid = await getIsValidGroupAccessCodeApi(validGroupAccessCode);
+
+    expect(isValid).toBe(true);
+  });
+});

frontend/src/pages/LandingPage/queries/usePostDataForURL.test.tsx

@@ -0,0 +1,28 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+
+import QueryClientWrapper from '@/queryTestSetup/QueryClientWrapper';
+
+import { CREATED_GROUP_DATA } from './../../../mocks/mockData/group';
+import usePostDataForURL from './usePostDataForURL';
+
+describe('usePostDataForURL', () => {
+  it('URL 및 확인 코드를 발급받을 수 있다.', async () => {
+    // given
+    const dataForURL = {
+      revieweeName: 'ollie',
+      projectName: 'review-me',
+    };
+
+    const { result } = renderHook(() => usePostDataForURL(), { wrapper: QueryClientWrapper });
+
+    // when
+    act(() => {
+      result.current.mutate(dataForURL);
+    });
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+
+    // then
+    expect(result.current.data).toEqual(CREATED_GROUP_DATA);
+  });
+});

frontend/src/pages/LandingPage/queries/usePostDataForURL.ts

@@ -6,7 +6,7 @@ import { GROUP_QUERY_KEY } from '@/constants';
 const usePostDataForURL = () => {
   const queryClient = useQueryClient();
 
-  const { mutate } = useMutation({
+  const { mutate, isSuccess, data } = useMutation({
     mutationFn: (dataForURL: DataForURL) => postDataForURLApi(dataForURL),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [GROUP_QUERY_KEY.dataForURL] });
@@ -18,6 +18,8 @@ const usePostDataForURL = () => {
 
   return {
     mutate,
+    isSuccess,
+    data,
   };
 };