-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[ Feature/quiz 30 ] 문제풀이 단위 컴포넌트 및 테스트 코드 개발 #45
Conversation
- Q, Quarterly processing of correct and incorrect answers
…ct answer guidance branch processing
…m-1-FE into feature/quiz-30
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
저도 이거 따로 함수로 파서 했었는데 이거 사용하면 될 것 같습니다
|
||
const isMockingMode = process.env.NEXT_PUBLIC_API_MOCKING === "enable"; | ||
|
||
export default function MSWProviders({ children }: PropsWithChildren) { | ||
const [mswReady, setMSWReady] = useState(() => !isMockingMode); | ||
const isMockingModeRef = useRef(!isMockingMode); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 Ref 는 왜 필요한가용??
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
state가 업데이트 되기전에 init이 두번호출되어서 렌더링 업데이트보다 먼저 값을 업데이트 할 수 있는 ref를 만들었습니다.
import { getProblemQueryOptions } from "@problem/remotes/getProblemQueryOptions"; | ||
import { render, renderHook, screen, waitFor } from "@testing-library/react"; | ||
|
||
vi.mock("next/navigation", () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useRouter, useParams 모킹 부분은 setup 쪽으로 빼면 어떨까용?!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
params 인자가 다른데 setup으로 빼도 되는건가요?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아 그렇네요..! 인자가 달라서 일단 테스트별로 써야겠네용
...getProblemQueryOptions({ problemId: problemIdNumber }), | ||
}); | ||
|
||
if (!problemInfo) return <div>error</div>; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 에러뷰.. 저도 아직 처리 안했는데 조만간 컴포넌트로 만들죵!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
svg 아이콘들을 크기별로 관리하지 말고 그냥 이렇게 컴포넌트로 관리할까용?
크기 조정 + 색 조정 가능하도록...?
https://velog.io/@juno7803/React-React%EC%97%90%EC%84%9C-SVG-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0#react%EC%97%90%EC%84%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@soomin9106 지금 이미 저렇게 사용가능하긴한데,.,, 저건 fill 속성이 svg 태그 내부에 들어가야해서 어쩔수없이 만든거야..!
사이즈 조정되니 크기별로 분리안해도 괜찮을것같기두!
🔥 Related Issues
resolve #30
close #30
💜 작업 내용
✅ PR Point
ProblemContextInfo
정답 선택지와 답을 관리하는 context 구현..!
params test
아래처럼 모킹을 했습니다..!
query 를 불러오고 데이터가 잘 컴포넌트에 렌더링 되는지 테스트
AnswerChoiceButton.tsx + ChoiceFillCircleSvg
이에 대한 className이 달라지기에 svg fill 속성을 업데이트 하기 위해 state로 관리했습니다.
test코드는 4가지 경우로 나눠서 작업했습니다.
😡 Trouble Shooting
👀 스크린샷 / GIF / 링크
📚 Reference