diff --git a/src/app/workbook/workbookpage.test.tsx b/src/app/workbook/workbookpage.test.tsx
index 52ac2159..1da3b660 100644
--- a/src/app/workbook/workbookpage.test.tsx
+++ b/src/app/workbook/workbookpage.test.tsx
@@ -1,11 +1,22 @@
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { render, screen, waitFor, renderHook } from '@testing-library/react';
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
import { HttpResponse, http } from 'msw';
import { apiRoutes } from '@shared/constants/apiRoutes';
-import { expect, vi, describe, it, beforeAll, afterEach, afterAll } from 'vitest';
+import { expect, vi, describe, it, beforeAll, afterEach, afterAll, beforeEach } from 'vitest';
import { server } from '@mocks/server';
import WorkbookPage from './[id]/page';
-import { JSX, ClassAttributes, ImgHTMLAttributes } from 'react';
+import { JSX, ClassAttributes, ImgHTMLAttributes, ReactNode } from 'react';
+import response from '@mocks/response';
+import { getWorkbookQueryOptions, useWorkbook } from '@workbook/remotes/getWorkbookQueryOptions';
+
+export const createQueryProviderWrapper = () => {
+ const queryClient = new QueryClient();
+ return ({ children }: { children: ReactNode }) => (
+
+ {children}
+
+ );
+};
// TBD: 필요하면 vitest.setup.ts 에 빼놓기
vi.mock('next/navigation', () => ({
@@ -15,7 +26,7 @@ vi.mock('next/navigation', () => ({
return null;
},
}),
- usePathname: () => '/workbook/1',
+ usePathname: () => '/workbooks/1',
}));
vi.mock('next/image', () => ({
@@ -25,50 +36,53 @@ vi.mock('next/image', () => ({
},
}));
-vi.mock('/public/assets/icon36/share_36.svg', () => ({ __esModule: true, default: '' }));
-vi.mock('/public/assets/icon36/*', () => ({ __esModule: true, default: '' }));
-vi.mock('/public/assets/*', () => ({ __esModule: true, default: '' }));
-const queryClient = new QueryClient();
+describe('워크북 페이지 테스트', () => {
+ it('workbook page 랜딩 시 react-query 테스트', async () => {
+ const { result } = renderHook(() => useWorkbook(1), {
+ wrapper: createQueryProviderWrapper(),
+ });
-beforeAll(() => server.listen());
-afterEach(() => server.resetHandlers());
-afterAll(() => server.close());
+ await waitFor(() => {
+ expect(result.current.data?.title).toBe('재태크, 투자 필수 용어 모음집');
+ expect(result.current.data?.mainImageUrl).toBe('/main_img.png');
+ expect(result.current.data?.description).toBe('사회 초년생부터, 직장인, 은퇴자까지 모두가 알아야 할 기본적인 재태크, 투자 필수 용어 모음집 입니다.');
+ expect(result.current.data?.category).toBe('경제');
+ })
+ });
-describe('워크북 페이지 테스트', () => {
it('데이터와 함께 워크북 페이지를 로딩한다', async () => {
- await waitFor(async () => {
- render(
-
-
- );
- });
+ const queryClient = new QueryClient();
+ render(
+
+
+ );
- // await waitFor(() => {
- // expect(screen.getByText('재태크, 투자 필수 용어 모음집')).toBeInTheDocument();
- // expect(screen.getByText('사회 초년생부터, 직장인, 은퇴자까지 모두가 알아야 할 기본적인 재태크, 투자 필수 용어 모음집 입니다.')).toBeInTheDocument();
- // expect(screen.getByText('ISA(개인종합자산관리계좌)란?')).toBeInTheDocument();
- // });
+ await waitFor(() => {
+ expect(screen.getByText('재태크, 투자 필수 용어 모음집')).toBeInTheDocument();
+ expect(screen.getByAltText('Workbook landing image')).toHaveAttribute('src', '/main_img.png');
+ expect(screen.getByText('사회 초년생부터, 직장인, 은퇴자까지 모두가 알아야 할 기본적인 재태크, 투자 필수 용어 모음집 입니다.')).toBeInTheDocument();
+ });
});
- it('데이터 패칭에 실패 했을 때 에러 메시지를 보여준다', async () => {
- // server.use(
- // http.get(apiRoutes.workbook.replace(':workbookId', '1'), ({ request }) => {
- // return new HttpResponse(null, { status: 404 });
- // })
- // );
+ /** 데이터가 잘 불러와지고 있는 듯? */
+ // it('데이터 패칭에 실패 했을 때 에러 메시지를 보여준다', async () => {
+ // const queryClient = new QueryClient();
+ // server.use(
+ // http.get(apiRoutes.workbook.replace(':workbookId', '1'), ({ request }) => {
+ // return new HttpResponse(null, { status: 500 });
+ // })
+ // );
- // await waitFor(async () => {
- // render(
- //
- //
- // );
- // });
+ // render(
+ //
+ //
+ // );
- // await waitFor(() => {
- // expect(screen.getByText(/Error/)).toBeInTheDocument();
- // });
- });
+ // await waitFor(() => {
+ // expect(screen.getByText('Error loading workbook')).toBeInTheDocument();
+ // });
+ // });
});
diff --git a/src/workbook/remotes/getWorkbookQueryOptions.ts b/src/workbook/remotes/getWorkbookQueryOptions.ts
index c32ec83d..9803ac4d 100644
--- a/src/workbook/remotes/getWorkbookQueryOptions.ts
+++ b/src/workbook/remotes/getWorkbookQueryOptions.ts
@@ -1,4 +1,4 @@
-import { UseQueryOptions } from "@tanstack/react-query";
+import { UseQueryOptions, useQuery } from "@tanstack/react-query";
import { ApiResponse, axiosRequest } from "@api/api-config";
@@ -27,3 +27,15 @@ export const getWorkbookQueryOptions = (
select: (data) => data.data,
};
};
+
+export const useWorkbook = (workbookId: number) => {
+ return useQuery({
+ queryKey: ['workbook', workbookId],
+ queryFn: async () => {
+ console.log('Fetching workbook data...');
+ const response = await axiosRequest>("get", apiRoutes.workbook.replace(':workbookId', workbookId.toString()));
+ console.log('Fetched data:', response.data);
+ return response.data;
+ },
+ });
+};;
diff --git a/vitest.config.ts b/vitest.config.ts
index 864920c5..a83d5db5 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -6,7 +6,17 @@ const resolve = (path: string) => pathResolve(__dirname, path);
import svgr from 'vite-plugin-svgr';
export default defineConfig({
- plugins: [react(), svgr()],
+ plugins: [
+ react(),
+ svgr({
+ svgrOptions: {
+ ref: true,
+ svgo: false,
+ titleProp: true,
+ },
+ include: "**/*.svg",
+ }),
+ ],
test: {
globals: true,
environment: "jsdom",