배너 공지사항 조회 / 공지사항 목록 조회 / 공지사항 상세 조회 / 공지사항 수정 / 공지사항 삭제 / 공지사항 생성 api 구현 및 query hook 구현

frontend/__test__/api/notice.test.ts

@@ -0,0 +1,71 @@
+import {
+ createNotice,
+ deleteNotice,
+ getBannerNotice,
+ getNoticeDetail,
+ getNoticeList,
+ modifyNotice,
+} from '@api/notice';
+
+import { MOCK_TRANSFORM_NOTICE, MOCK_TRANSFORM_NOTICE_LIST } from '@mocks/mockData/notice';
+import { MOCK_NOTICE_TEST } from '@mocks/notice';
+
+describe('서버와 통신하여 공지사항 관련된 api를 통신할 수 있어야 한다. ', () => {
+ test('공지사항을 생성한다.', async () => {
+ const data = {
+ title: '갤럭시',
+ content: '공지사항입니다',
+ deadline: '2023-10-12 15:13',
+ bannerTitle: '아이폰',
+ bannerSubtitle: '공지사항입니다',
+ };
+
+ await createNotice(data);
+
+ const result = MOCK_NOTICE_TEST;
+
+ expect(result).toBe(data.title);
+ });
+
+ test('배너 공지 사항을 조회한다.', async () => {
+ const result = await getBannerNotice();
+
+ expect(result).toEqual(MOCK_TRANSFORM_NOTICE);
+ });
+
+ test('공지 사항 목록을 조회한다.', async () => {
+ const result = await getNoticeList(0);
+
+ expect(result).toEqual(MOCK_TRANSFORM_NOTICE_LIST);
+ });
+
+ test('공지 사항의 상세 내용을 조회한다.', async () => {
+ const result = await getNoticeDetail(1);
+
+ expect(result).toEqual(MOCK_TRANSFORM_NOTICE);
+ });
+
+ test('공지 사항을 수정한다.', async () => {
+ const data = {
+ title: '아이폰입니다',
+ content: '공지사항입니다',
+ deadline: '2023-10-12 15:13',
+ bannerTitle: '아이폰',
+ bannerSubtitle: '공지사항입니다',
+ };
+
+ await modifyNotice({ noticeId: 0, notice: data });
+
+ const result = MOCK_NOTICE_TEST;
+
+ expect(result).toBe(data.title);
+ });
+
+ test('공지 사항을 삭제한다.', async () => {
+ await deleteNotice(1);
+
+ const result = MOCK_NOTICE_TEST;
+
+ expect(result).toBe('삭제된 공지사항');
+ });
+});

frontend/__test__/hooks/query/notice/useBannerNotice.test.tsx

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useBannerNotice } from '@hooks';
+
+import { MOCK_TRANSFORM_NOTICE } from '@mocks/mockData/notice';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('배너 공지사항을 불러오는지 확인한다.', () => {
+ test('배너 공지사항을 확인한다', async () => {
+ const { result } = renderHook(() => useBannerNotice(), {
+ wrapper,
+ });
+
+ await waitFor(() => expect(result.current.data).toEqual(MOCK_TRANSFORM_NOTICE));
+ });
+});

frontend/__test__/hooks/query/notice/useCreateNotice.test.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useCreateNotice } from '@hooks';
+
+import { MOCK_NOTICE_TEST } from '@mocks/notice';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('공지 사항을 생성하는 지 확인한다.', () => {
+ test('공지 사항을 생성한다.', async () => {
+ const data = {
+ title: '갤럭시',
+ content: '공지사항입니다',
+ deadline: '2023-10-12 15:13',
+ bannerTitle: '아이폰',
+ bannerSubtitle: '공지사항입니다',
+ };
+
+ const { result } = renderHook(() => useCreateNotice(), {
+ wrapper,
+ });
+
+ const { mutate } = result.current;
+
+ await waitFor(() => {
+ mutate(data);
+
+ expect(MOCK_NOTICE_TEST).toBe(data.title);
+ });
+ });
+});

frontend/__test__/hooks/query/notice/useDeleteNotice.test.tsx

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useDeleteNotice } from '@hooks';
+
+import { MOCK_NOTICE_TEST } from '@mocks/notice';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('요청을 통해 공지 사항을 삭제하는 지 확인한다.', () => {
+ test('공지 사항을 삭제한다.', async () => {
+ const { result } = renderHook(() => useDeleteNotice(), {
+ wrapper,
+ });
+
+ const { mutate } = result.current;
+
+ await waitFor(() => {
+ mutate(1);
+
+ expect(MOCK_NOTICE_TEST).toBe('삭제된 공지사항');
+ });
+ });
+});

frontend/__test__/hooks/query/notice/useModifyNotice.test.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useModifyNotice } from '@hooks';
+
+import { MOCK_NOTICE_TEST } from '@mocks/notice';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('요청을 통해 공지 사항을 수정하는 지 확인한다.', () => {
+ test('공지 사항을 생성한다.', async () => {
+ const data = {
+ title: '아이폰입니다',
+ content: '공지사항입니다',
+ deadline: '2023-10-12 15:13',
+ bannerTitle: '아이폰',
+ bannerSubtitle: '공지사항입니다',
+ };
+
+ const { result } = renderHook(() => useModifyNotice(), {
+ wrapper,
+ });
+
+ const { mutate } = result.current;
+
+ await waitFor(() => {
+ mutate({ notice: data, noticeId: 1 });
+
+ expect(MOCK_NOTICE_TEST).toEqual(data.title);
+ });
+ });
+});

frontend/__test__/hooks/query/notice/useNoticeDetail.test.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+
+import { useNoticeDetail } from '@hooks';
+
+import { MOCK_TRANSFORM_NOTICE } from '@mocks/mockData/notice';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('공지 사항 상세 정보를 불러오는 지 확인한다.', () => {
+ test('공지 사항 상세 정보를 불러온다.', async () => {
+ const { result } = renderHook(() => useNoticeDetail(1), {
+ wrapper,
+ });
+
+ await waitFor(() => {
+ expect(result.current.data).toEqual(MOCK_TRANSFORM_NOTICE);
+ });
+ });
+});

frontend/__test__/hooks/query/notice/usePagedNoticeList.test.tsx

@@ -0,0 +1,139 @@
+import React, { ReactNode } from 'react';
+
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { renderHook, waitFor } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+
+import { usePagedNoticeList } from '@hooks';
+
+import { MOCK_TRANSFORM_NOTICE_LIST } from '@mocks/mockData/notice';
+
+const queryClient = new QueryClient();
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+);
+
+describe('페이지 버튼을 눌러 공지 사항 리스트를 불러오는 지 확인한다.', () => {
+ test('초기 설정으로는 0 페이지를 불러온다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(), {
+ wrapper,
+ });
+
+ waitFor(() => {
+ expect(result.current.page).toEqual(0);
+ });
+ });
+
+ test('초기 페이지를 인자를 넣어 설정할 수 있다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(5), {
+ wrapper,
+ });
+
+ waitFor(() => {
+ expect(result.current.page).toEqual(5);
+ });
+ });
+
+ test('현재 페이지를 3으로 설정했을 때 3페이지를 데이터만 불러온다. 클라이언트 측에서 3으로 설정했어도 서버로는 2를 보내야 하기 때문에 현재 페이지는 2로 설정된다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(), {
+ wrapper,
+ });
+
+ act(() => {
+ result.current.setPage(3);
+ });
+
+ waitFor(() => {
+ expect(result.current.page).toEqual(2);
+ });
+ });
+
+ test('현재 페이지가 0이고, 다음 페이지를 불러올 때 현재 페이지 + 1을 하여 불러온다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(), {
+ wrapper,
+ });
+
+ const currentPage = result.current.page;
+
+ act(() => {
+ result.current.fetchNextPage();
+ });
+
+ waitFor(() => {
+ expect(result.current.page).toEqual(currentPage + 1);
+ });
+ });
+
+ test('현재 페이지가 5이고, 이전의 페이지를 불러올 때 현재 페이지 - 1을 하여 불러온다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(5), {
+ wrapper,
+ });
+
+ waitFor(() => {
+ result.current.fetchPrevPage();
+
+ expect(result.current.page).toEqual(3);
+ });
+ });
+
+ test('총 페이지보다 현재 페이지가 작다면 다음 페이지 여부를 반환하는 변수가 true로 동작한다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(), {
+ wrapper,
+ });
+
+ const totalPage = MOCK_TRANSFORM_NOTICE_LIST.totalPageNumber;
+
+ const currentPage = result.current.page;
+
+ act(() => {
+ result.current.setPage(totalPage + 1);
+ });
+
+ waitFor(() => {
+ expect(totalPage > currentPage).toBe(true);
+ expect(result.current.hasNextPage).toBe(true);
+ });
+ });
+
+ test('총 페이지와 현재 페이지가 같다면 다음 페이지 여부를 반환하는 변수가 false로 동작한다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(), {
+ wrapper,
+ });
+
+ const totalPage = MOCK_TRANSFORM_NOTICE_LIST.totalPageNumber;
+
+ const currentPage = result.current.page;
+
+ act(() => {
+ result.current.setPage(totalPage + 1);
+ });
+
+ waitFor(() => {
+ expect(totalPage === currentPage).toBe(true);
+ expect(result.current.hasNextPage).toBe(false);
+ });
+ });
+
+ test('공지 사항 목록 0 페이지를 불러온다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(), {
+ wrapper,
+ });
+
+ await waitFor(() => {
+ expect(result.current.data).toEqual(MOCK_TRANSFORM_NOTICE_LIST);
+ });
+ });
+
+ test('공지 사항 목록 0 페이지를 불러오고 페이지 설정을 통해 3페이지를 불러온다. 페이지 설정 버튼을 누른다면 해당 페이지의 데이터 1개를 배열로 보내준다.', async () => {
+ const { result } = renderHook(() => usePagedNoticeList(), {
+ wrapper,
+ });
+
+ result.current.setPage(3);
+
+ act(() => {
+ expect(result.current.data).toEqual(MOCK_TRANSFORM_NOTICE_LIST);
+ });
+ });
+});