Merge pull request #332 from boostcamp-2020/dev

12/16 배포

README.md

@@ -22,7 +22,10 @@
 
 ## 배포 Link :exclamation:
 
-- [http://moa.r-e.kr/](http://moa.r-e.kr/)
+[http://moa.r-e.kr/](http://moa.r-e.kr/)
+> - Chrome을 사용해주세요.
+> 
+> - 현재 네이버 로그인은 서비스 검수 요청 중에 있습니다. 카카오 로그인을 사용해주세요.
 
 <br><br><br>
 
@@ -40,7 +43,7 @@
 > 선정 이유가 궁금하다면 [**여기**](https://www.notion.so/158a594255e243d396b841adeb329c35)로!
 
 <div align="center">
-  <img src="https://i.imgur.com/kdvp91a.png"/>
+  <img src="https://i.imgur.com/udWMf33.png"/>
 </div>
 <br><br><br>
 

client/package.json

@@ -3,21 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.6",
-    "@testing-library/react": "^11.2.0",
-    "@testing-library/user-event": "^12.2.2",
-    "@types/jest": "^26.0.15",
     "@types/node": "^12.19.9",
     "@types/react": "^16.9.56",
     "@types/react-dom": "^16.9.9",
     "@types/react-router-dom": "^5.1.6",
     "@types/socket.io-client": "^1.4.34",
     "@types/styled-components": "^5.1.4",
     "axios": "^0.21.0",
-    "md5": "^2.3.0",
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.5",
-    "msw": "^0.24.1",
     "query-string": "^6.13.7",
     "react": "^17.0.1",
     "react-csv": "^2.0.3",
@@ -66,8 +60,14 @@
     "@storybook/node-logger": "^6.1.0",
     "@storybook/preset-create-react-app": "^3.1.5",
     "@storybook/react": "^6.1.0",
+    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "^11.2.0",
+    "@testing-library/user-event": "^12.2.2",
+    "@types/jest": "^26.0.15",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-prettier": "^3.1.4",
+    "jest-localstorage-mock": "^2.4.3",
+    "msw": "^0.24.1",
     "prettier": "^2.2.0",
     "typescript": "^4.0.5"
   }

client/src/__tests__/service/transactionCache.test.ts

@@ -0,0 +1,43 @@
+import transactionService, { createGetTransactionQuery } from '../../services/transaction';
+import { getFirstDateOfNextMonth, getFirstDateOfPreviousMonth } from '../../utils/date';
+
+describe('Transaction 테스트', () => {
+  let accountbookId;
+  let startDate;
+  let endDate;
+  let beforeStartDate;
+  let afterEndDate;
+  let g;
+  beforeEach(() => {
+    accountbookId = 1;
+    startDate = new Date();
+    endDate = getFirstDateOfNextMonth(startDate);
+    beforeStartDate = getFirstDateOfPreviousMonth(startDate);
+    afterEndDate = getFirstDateOfNextMonth(endDate);
+    g = transactionService.getTransactions(accountbookId, startDate, endDate, beforeStartDate, afterEndDate);
+  });
+  test('현재 요청을 보낸후 이를 세션에 캐싱하였는가', async () => {
+    await g.next();
+    await g.next();
+    const query = createGetTransactionQuery(accountbookId, startDate, endDate);
+    const get = window.sessionStorage.getItem(query);
+    expect(get).not.toBeNull();
+    expect(get).not.toBeUndefined();
+  });
+  test('요청을 보낸후 이전 날짜를 요청을 세션에 캐싱하였는가', async () => {
+    await g.next();
+    await g.next();
+    const query = createGetTransactionQuery(accountbookId, beforeStartDate, startDate);
+    const get = window.sessionStorage.getItem(query);
+    expect(get).not.toBeNull();
+    expect(get).not.toBeUndefined();
+  });
+  test('요청을 보낸 후 다음 날짜를 세션에 캐싱 하였는가', async () => {
+    await g.next();
+    await g.next();
+    const query = createGetTransactionQuery(accountbookId, endDate, afterEndDate);
+    const get = window.sessionStorage.getItem(query);
+    expect(get).not.toBeNull();
+    expect(get).not.toBeUndefined();
+  });
+});

client/src/__tests__/store/category.test.ts

@@ -1,3 +1,4 @@
+import { waitFor } from '@testing-library/react';
 import CategoryStore from '../../store/CategoryStore';
 import RootStore from '../../store/RootStore';
 import dummyExpenditure from '../../__dummy-data__/api/category/getExpenditure';
@@ -15,6 +16,7 @@ describe('카테고리 스토어 테스트', () => {
     result.forEach((item) => {
       expect(dummyIncome.sort()).toContainEqual(item);
     });
+
   });
   test('server을 통해 expenditure category data를 받을 수 있다.', async () => {
     const id = 1;

client/src/__tests__/store/pieGraphStore.test.ts

@@ -1,18 +1,15 @@
-import { waitFor } from '@testing-library/react';
 import datePeriod from '../../constants/datePeriod';
 import PieGraphPageStore from '../../store/PieGraphPageStore';
 import RootStore from '../../store/RootStore';
 
 describe('PieGraphStore Test', () => {
   let container: PieGraphPageStore;
   beforeEach(() => {
+    jest.useFakeTimers();
     const rootStore = new RootStore();
     const { pieGraphPageStore } = rootStore;
+    pieGraphPageStore.dateChange = jest.fn();
     container = pieGraphPageStore;
-    jest.useFakeTimers();
-  });
-  afterEach(() => {
-    jest.clearAllTimers();
   });
   test('초기 선택된 값은 한달이다.', () => {
     const now = new Date();
@@ -24,80 +21,62 @@ describe('PieGraphStore Test', () => {
     expect(container.startDate.toDateString()).toBe(prev.toDateString());
   });
   describe('selectedDate가 변경되면 사이드 이펙트로 startDate도 변경된다.', () => {
-    test('selectedDate가 LAST_ONE_WEEK으로 변경되었다.', async () => {
+    test('selectedDate가 LAST_ONE_WEEK으로 변경되었다.', () => {
       container.changeSelectedDate(datePeriod.LAST_ONE_WEEK, 1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(1));
-      jest.runAllTimers();
       const now = new Date();
       const prev = new Date();
       now.setDate(now.getDate() + 1);
       prev.setDate(now.getDate() - 8);
       expect(container.endDate.toDateString()).toBe(now.toDateString());
       expect(container.startDate.toDateString()).toBe(prev.toDateString());
     });
-    test('selectedDate가 LAST_THREE_MONTH로 변경되면 월단위로 startDate도 변경된다.', async () => {
+    test('selectedDate가 LAST_THREE_MONTH로 변경되면 월단위로 startDate도 변경된다.', () => {
       container.changeSelectedDate(datePeriod.LAST_THREE_MONTH, 1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(1));
-      jest.runAllTimers();
       const now = new Date();
       const prev = new Date();
       now.setDate(now.getDate() + 1);
       prev.setMonth(now.getMonth() - 3);
       expect(container.endDate.toDateString()).toBe(now.toDateString());
       expect(container.startDate.toDateString()).toBe(prev.toDateString());
     });
-    test('selectedDate가 LAST_ONE_YEAR으로 변경되면 년단위로 변경된다.', async () => {
+    test('selectedDate가 LAST_ONE_YEAR으로 변경되면 년단위로 변경된다.', () => {
       container.changeSelectedDate(datePeriod.LAST_ONE_YEAR, 1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(1));
-      jest.runAllTimers();
       const now = new Date();
       const prev = new Date();
       now.setDate(now.getDate() + 1);
       prev.setFullYear(now.getFullYear() - 1);
       expect(container.endDate.toDateString()).toBe(now.toDateString());
       expect(container.startDate.toDateString()).toBe(prev.toDateString());
     });
-    test('selectedDate가 ALL으로 변경되면 endDate는 현재 시점이고, startDate는 1970년이다.', async () => {
+    test('selectedDate가 ALL으로 변경되면 endDate는 현재 시점이고, startDate는 1970년이다.', () => {
       container.changeSelectedDate(datePeriod.ALL, 1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(2));
-      jest.runAllTimers();
       const now = new Date();
-      now.setDate(now.getDate());
+      now.setDate(now.getDate() + 1);
       const prev = new Date(0);
       expect(container.endDate.toDateString()).toBe(now.toDateString());
       expect(container.startDate.toDateString()).toBe(prev.toDateString());
     });
   });
   describe('endDate,startDate 를 변경할때에는 항상 selectedDate를 기준으로 움직인다.', () => {
-    test('LAST_ONE_WEEK에서 이전일로 이동', async () => {
+    test('LAST_ONE_WEEK에서 이전일로 이동', () => {
       container.changeSelectedDate(datePeriod.LAST_ONE_WEEK, 1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(1));
-      jest.runAllTimers();
       const current = new Date();
       const now = new Date();
       const prev = new Date();
       now.setDate(current.getDate() - 7);
       prev.setDate(now.getDate() - 8);
       container.moveToPrev(1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(2));
-      jest.runAllTimers();
       expect(container.endDate.toDateString()).toBe(now.toDateString());
       expect(container.startDate.toDateString()).toBe(prev.toDateString());
     });
-    test('LAST_ONE_WEEK에서 다음일로 이동', async () => {
+    test('LAST_ONE_WEEK에서 다음일로 이동', () => {
       container.changeSelectedDate(datePeriod.LAST_ONE_WEEK, 1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(1));
-      jest.runAllTimers();
       const now = new Date();
       const prev = new Date();
       now.setDate(now.getDate() + 1);
       prev.setDate(now.getDate() - 8);
       container.moveToPrev(1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(2));
-      jest.runAllTimers();
       container.moveToNext(1);
-      await waitFor(() => expect(setTimeout).toHaveBeenCalledTimes(3));
-      jest.runAllTimers();
       expect(container.endDate.toDateString()).toBe(now.toDateString());
       expect(container.startDate.toDateString()).toBe(prev.toDateString());
     });

client/src/__tests__/utils/getMonth.ts

@@ -0,0 +1,16 @@
+import { getFirstDateOfNextMonth, getFirstDateOfPreviousMonth } from '../../utils/date';
+
+describe('getXDateOfMonth 테스트', () => {
+  test('현재 객체의 이전달의 첫번째 요일을 가진 Date객체가 반환 되는가', () => {
+    const currentDate = new Date();
+    const beforeDate = getFirstDateOfPreviousMonth(currentDate);
+    expect(currentDate.getMonth()).toBe((beforeDate.getMonth() + 1) % 12);
+    expect(beforeDate.getDate()).toBe(1);
+  });
+  test('현재 객체의 다음달의 첫번째 요일을 가진 Date 객체가 반환 되는가?', () => {
+    const currentDate = new Date();
+    const nextDate = getFirstDateOfNextMonth(currentDate);
+    expect(currentDate.getMonth()).toBe((nextDate.getMonth() + 11) % 12);
+    expect(nextDate.getDate()).toBe(1);
+  });
+});

client/src/components/accountbook-selection-page/accountbook-card/AccountbookCard.tsx

@@ -45,6 +45,10 @@ const TitleWrapper = styled.div`
   padding-bottom: 10px;
 `;
 
+const Description = styled.div`
+  height: 25px;
+`;
+
 const AccountbookCard = (accountbook: Accountbook): JSX.Element => {
   const { userStore } = useStore().rootStore;
   const {
@@ -81,7 +85,7 @@ const AccountbookCard = (accountbook: Accountbook): JSX.Element => {
         </ElementWrapper>
       </HeaderWrapper>
       <TitleWrapper>{accountbook.title}</TitleWrapper>
-      {accountbook.description}
+      <Description>{accountbook.description}</Description>
     </AccountbookWrapper>
   );
 };

client/src/components/accountbook-social-page/add-button/AddButton.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { LIGHT_GREEN } from '../../../constants/color';
 
 interface Props {

client/src/components/accountbook-social-page/admin-setting-button/AdminSettingButton.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import AdminSettingButton from './AdmingSettingButton';
+import AdminSettingButton from './AdminSettingButton';
 import styled from 'styled-components';
 
 export default {

client/src/components/accountbook-social-page/admin-setting-button/AdmingSettingButton.tsx → client/src/components/accountbook-social-page/admin-setting-button/AdminSettingButton.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import styled from 'styled-components';
 import { BLUE } from '../../../constants/color';
 
 interface Props {