[FE] fix: 프론트엔드 스토리북 & cypress 테스트 깨지는 부분 수정 #607 (#608)

* fix: storybook에 queryClient Provider 추가 * refactor: 스토리별 카테고리 설정 * fix: 명칭 변경으로 인해 깨지던 cypress 테스트 정상화
woowacourse-teams · Nov 19, 2023 · ec151ad · ec151ad
1 parent 41ebe43
commit ec151ad
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 27 deletions.
diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx
@@ -9,6 +9,8 @@ import GlobalStyle from '../src/styles/GlobalStyle';
 import { theme } from '../src/styles/theme';
 import ToastProvider from '../src/contexts/ToastProvider';
 import ToastContainer from '../src/components/@common/Toast/ToastContainer';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { queryClient } from '../src/App';
 
 // msw init
 initialize();
@@ -33,13 +35,15 @@ export default preview;
 
 export const decorators = [
   (Story) => (
-    <ThemeProvider theme={theme}>
-      <GlobalStyle />
-      <ToastProvider>
-        <Story />
-        <ToastContainer />
-      </ToastProvider>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider theme={theme}>
+        <GlobalStyle />
+        <ToastProvider>
+          <Story />
+          <ToastContainer />
+        </ToastProvider>
+      </ThemeProvider>
+    </QueryClientProvider>
   ),
   withRouter,
 ];
diff --git a/frontend/cypress/e2e/main-page.cy.ts b/frontend/cypress/e2e/main-page.cy.ts
@@ -6,7 +6,7 @@ describe('메인 페이지', () => {
 
   describe('로그인 성공 테스트', () => {
     it('로그인 하기 버튼을 누르면 로그인 모달 창이 열린다.', () => {
-      cy.findByText('로그인하기').click();
+      cy.findByText('로그인').click();
 
       cy.findByText('간편 로그인').should('be.visible');
     });

diff --git a/frontend/cypress/e2e/trashcan-page.cy.ts b/frontend/cypress/e2e/trashcan-page.cy.ts
@@ -43,14 +43,14 @@ describe('휴지통 페이지', () => {
   describe('글 복구 테스트', () => {
     it('글을 복구 한다.', () => {
       cy.findByLabelText('휴지통 글 너 버려진거야2 선택').click();
-      cy.findByText('글 복구').click().wait(1000);
+      cy.findByText('복구').click().wait(1000);
 
       cy.findByText('너 버려진거야2').should('not.exist');
     });
 
     it('글 복구 시 "글이 복구되었습니다." toast가 보인다.', () => {
       cy.findByLabelText('휴지통 글 너 버려진거야2 선택').click();
-      cy.findByText('글 복구').click().wait(1000);
+      cy.findByText('복구').click().wait(1000);
 
       cy.findByText('글이 복구되었습니다.').should('be.visible');
     });
@@ -59,7 +59,7 @@ describe('휴지통 페이지', () => {
       cy.findByLabelText('기본 카테고리 왼쪽 사이드바에서 열기').click().wait(1000);
 
       cy.findByLabelText('휴지통 글 너 버려진거야2 선택').click();
-      cy.findByText('글 복구').click().wait(1000);
+      cy.findByText('복구').click().wait(1000);
 
       cy.findByText('복구된 글 2').should('be.visible');
     });

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import { Outlet } from 'react-router-dom';
 import ErrorPage from 'pages/ErrorPage/ErrorPage';
 import { useMediaQuery } from 'hooks/@common/useMediaQuery';
 
-const queryClient = new QueryClient({
+export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       useErrorBoundary: true,

diff --git a/frontend/src/components/Category/Category/Category.stories.tsx b/frontend/src/components/Category/Category/Category.stories.tsx
@@ -3,7 +3,7 @@ import Category from './Category';
 import { StoryContainer, StoryItemContainer } from 'styles/storybook';
 
 const meta: Meta<typeof Category> = {
-  title: 'Category',
+  title: 'category/Category',
   component: Category,
   args: {
     categoryName: '프로젝트 기록',

diff --git a/frontend/src/components/Category/Section/Section.stories.tsx b/frontend/src/components/Category/Section/Section.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Section from './Section';
 
 const meta: Meta<typeof Section> = {
-  title: 'Section',
+  title: 'category/Section',
   component: Section,
 };
 

diff --git a/frontend/src/components/Category/WritingList/WritingList.stories.tsx b/frontend/src/components/Category/WritingList/WritingList.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import WritingList from './WritingList';
 
 const meta: Meta<typeof WritingList> = {
-  title: 'WritingList',
+  title: 'writing/WritingList',
   component: WritingList,
   args: {
     categoryId: 1,

diff --git a/frontend/src/components/WritingTable/WritingTable.stories.tsx b/frontend/src/components/WritingTable/WritingTable.stories.tsx
@@ -9,7 +9,7 @@ import {
 import { writingTable } from 'mocks/data/writingTablePage';
 
 const meta = {
-  title: 'WritingTable',
+  title: 'writing/WritingTable',
   component: WritingTable,
   args: {
     writings: writingTable.writings,

diff --git a/frontend/src/components/WritingViewer/WritingViewer.stories.tsx b/frontend/src/components/WritingViewer/WritingViewer.stories.tsx
@@ -11,7 +11,7 @@ import { GetWritingResponse } from 'types/apis/writings';
 import WritingViewer from './WritingViewer';
 
 const meta = {
-  title: 'WritingViewer',
+  title: 'writing/WritingViewer',
   component: WritingViewer,
   args: {
     writingId: 200,
@@ -31,25 +31,23 @@ type Story = StoryObj<typeof meta>;
 export const Success: Story = {
   render: ({ writingId, categoryId }) => {
     return (
-      <StoryContainer>
-        <StoryItemContainer>
-          <StoryItemTitle>글 가져오기 성공</StoryItemTitle>
-          <WritingViewer categoryId={categoryId} writingId={writingId}></WritingViewer>
-        </StoryItemContainer>
-      </StoryContainer>
+      <>
+        <StoryItemTitle>글 가져오기 성공</StoryItemTitle>
+        <WritingViewer categoryId={categoryId} writingId={writingId}></WritingViewer>
+      </>
     );
   },
 };
 
 export const Failure: Story = {
   render: () => {
     return (
-      <StoryContainer>
-        <StoryItemContainer>
+      <>
+        <>
           <StoryItemTitle>글 가져오기 실패</StoryItemTitle>
           <WritingViewer categoryId={1} writingId={404}></WritingViewer>
-        </StoryItemContainer>
-      </StoryContainer>
+        </>
+      </>
     );
   },
 };