[NEXTLEVEL 클린코드 리액트 조성륜] 장바구니 미션 Step1 #5
Conversation
joel-jo-querypie
changed the title
| beforeEach(() => { | ||
| handleClickItem.mockClear(); | ||
| handleClickCart.mockClear(); | ||
| }); |
There was a problem hiding this comment.
오 mockClear는 이렇게 습관적으로 해주는게 좋은건가요? 조금 찾아보니까 모든 테케가 독립적으로 실행되게 하기 위해서는 mock을 정리하는게 좋다고 하네요. .mockClear, mockReset, .mockRestore 미묘한 차이가 있나보네용. https://jestjs.io/docs/mock-function-api#mockfnmockclear
| it('Click card item, call handleClickItem', () => { | ||
| const { getByRole } = render( | ||
| <ProductCard | ||
| item={{ id: 1, name: 'item', imageUrl: '', price: 1000 }} | ||
| onClickItem={handleClickItem} | ||
| onClickCart={handleClickCart} | ||
| /> | ||
| ); |
There was a problem hiding this comment.
유저 이벤트를 이렇게 테스트 할 수도 있네요. 미팅때 공유해주신 내용 이렇게 코드로 보니까 좀 더 이해가 잘 되는군욬ㅋㅋ
| height = 24, | ||
| fill = 'current', | ||
| }: { | ||
| // eslint-disable-next-line react/require-default-props |
| <ProductCard | ||
| item={item} | ||
| onClickItem={handleClickItem} | ||
| onClickCart={handleClickCart} | ||
| /> |
There was a problem hiding this comment.
클릭 후 어떤 작업을 하는지 명시해주는 네이밍이면 좋지 않을까요?
| <ProductCard | |
| item={item} | |
| onClickItem={handleClickItem} | |
| onClickCart={handleClickCart} | |
| /> | |
| <ProductCard | |
| item={item} | |
| onClickItem={아이템상세보기로이동한다} | |
| onClickCart={장바구니에추가한다} | |
| /> |
저는 이런 식으로 되면 좀 더 사용하는쪽에서 ProductCard 가 어떤 놈인지 파악하기 좋은 것 같아요!
| import ky from 'ky'; | ||
| import { Product } from '../types/dto'; | ||
|
|
||
| const api = ky.create({ prefixUrl: 'http://localhost:3003/' }); |
There was a problem hiding this comment.
prefixUrl 같은 경우는 상수로 관리하거나 환경 변수로 관리되면 어떨까용? 실수도 종종하고, 다른 곳에서 종종 쓸 때가 있어 따로 상수로 관리해두면 어떨까 제안해봅니당
| @@ -0,0 +1,27 @@ | |||
| import React from 'react'; | |||
|
|
|||
| export function IconCart({ | |||
There was a problem hiding this comment.
Icon 컴포넌트로 조금 더 재활용 할 수 있는 구조로 만들 수 있지 않을까요? props 로 path 값을 받는 등의 방법으로 만들어도 괜찮을 것 같습니다! 다른 아이콘이 또 추가될 경우를 고려해서요!
| "tailwindcss-debug-screens": "^2.2.1", | ||
| "ts-jest": "^27.1.3", | ||
| "ts-node": "^10.5.0", | ||
| "vite": "^2.8.0" |
There was a problem hiding this comment.
vite!! 나중에 후기 공유해주세요~~~
| it('render', () => { | ||
| const { container } = render( | ||
| <ProductCard | ||
| item={{ id: 1, name: 'item', imageUrl: '', price: 1000 }} |
There was a problem hiding this comment.
계속 사용되는 item 같은 경우는 fixture로 빼도 될 것 같긴한데 이렇게 하는게 더 명시적인 것 같아 좋은 것 같기도 하고 모르겠네요 ㅎㅎ
| /> | ||
| ); | ||
|
|
||
| userEvent.click(getByRole('listitem')); |
There was a problem hiding this comment.
listitem role도 있군요. getByRole 를 조금 더 학습해봐야겠네요
There was a problem hiding this comment.
fireEvent, useEvent 구분하지 않고 막 썼는데 userEvent 사용을 권장하네용
step2 를 진행하면서 기타 여러 기능들을 구현해보도록 하겠습니다!
vite + jest 환경 셋팅에 시간을 많이 사용한 것 같아 step2 를 하면서 기능에 초점을 맞춰보도록 하겠습니다 :)
필수 요구사항
React Testing Library&Jest를 활용해 자유로운 단위의 테스트를 진행한다.GNB
로고를 누르면 상품목록 페이지로 이동한다.장바구니버튼을 누르면 장바구니 페이지로 이동한다.주문목록버튼을 누르면 주문목록 페이지로 이동한다.상품목록
심화 요구사항
User Flow Diagram혹은Flow Chart작성Edge Case대응