wanted-preonboarding-team-8 / pre-onboarding-9th-4-8 Goto Github PK

• 기본 정렬은 ID 기준 오름차순으로 구현해주세요
• 표에서 주문번호, 거래일 & 거래시간 버튼을 누르면 각각 내림차순 정렬이 되도록 해주세요
• 주문 처리 상태에 따라 filtering 기능을 구현해주세요
• 고객이름을 검색할 수 있도록 해주세요

주어진 데이터를 이용하여 주문 목록 페이지를 구현해주세요

• 주문 목록 페이지에는 주문에 대한 모든 정보를 표 형태로 확인할 수 있어야 합니다.
• 주문 목록은 페이지네이션이 구현되어야 합니다(한 페이지에 50건의 주문이 보여야 합니다)
• 데이터 중에서 오늘의 거래건만 보여지도록 해주세요 (여기서 오늘은 2023-03-08일을 의미합니다.)

서버에 들어온 주문을 5초마다 최신화 해주세요

• 서버 API는 구현되어 있지 않지만, 구현되어 있다는 가정 하에 요구사항을 충족해주세요

과제 이후 fork한 개인 레포의 리드미에 커버리지 뱃지를 만들어 보며 추가로 알아본 내용입니다.

이번 과제에서 테스트를 처음 경험하여 많이 어려움을 가졌던걸로 기억합니다. 저 또한 테스트가 처음이라 상당히 어려웠습니다. 그래서 과제 이후에 알게 된 내용을 공유하고자 합니다

Test Coverager 란??

테스트 커버리지(test coverage)는 코드 커버리지(code coverage)라고도 합니다. 쉽게 말해 코드가 얼만큼 테스트되고 있는지를 나타내는 소프트웨어의 품질 지표입니다. 테스트 커버리지가 높은 소프트웨어는 버그가 발생할 확률이 적기 때문에 사용자가 좀 더 신뢰하고 사용할 수 있습니다. 당연히 반대로 테스트 커버리지가 낮은 소프트웨어는 믿고 사용하기가 좀 어렵습니다.

커버리지 항목은 다음과 같습니다.

• Statements (구문 비율)
• Branches (if문 등의 분기점 비율)
• Functions (함수 비율)
• Lines (코드 줄 수 비율)

과제 제출 이후 커버리지

Summary

Statements	Branches	Functions	Lines

Detail

커버리지가 상당히 낮게 잡혀 있습니다. 세부 항목을 살펴보니 일부 폴더에서 낮게 잡혀 있습니다. 그런데 모든 종류의 커버리지를 100%로 맞추는게 유의미한 행동이 아닙니다. 모든 커버리지를 100% 맞추기보다 테스트가 무의미한 코드는 커버리지에서 제외하는 것이 좋습니다. 커버리지에서 제외처리는 간단합니다. 아래와 같이 불필요한 부분에 제외처리 해주면 됩니다. 제외의 기준은 각자의 판단에 맡기면 됩니다.

// jest.config.js

module.exports = {
  ...
  "coveragePathIgnorePatterns": [
    "/node_modules/", 
    "/src/__test__",  // 테스트 코드를 위한 테스트는 필요 없어보입니다.
    "/src/mocks", // Mock Backend API 코드 또한 마찬가지입니다.
    "/src/constants",  // 정적인 상수 콘텐츠도 필요없습니다.
    "/src/api", // 백엔드 api에 요청을 보내는 함수는 테스트가 무의미해보입니다. 프론트엔드는 fetch후 컴포넌트에 적절히 보여주는지를 테스트해야합니다. 그렇기에 테스트에서 mock api를 사용하는 것 입니다. 
  ]
};

커버리지 범위 설정 이후

Summary

Statements	Branches	Functions	Lines

Detail

결론

불필요한 커버리지를 제외한 이후 커버리지는 당연히 높아졌습니다. 불필요한 폴더를 제외하니 좀더 객관적으로 테스트의 품질을 높여야 하는 부분이 눈에 잘 보입니다. 컴포넌트 폴더의 경우 분기에 따른 커버리지가 조금 떨어집니다. 만약 테스트를 보완한다면 어디를 보완할지 파악하기 쉬워졌습니다. 이 부분은 각자에게 맡기겠습니다. ㅎㅎ

참고자료

• 프론트엔드 테스트 팁
• 리드미에 커버리지 뱃지 다는 법

• 컴포넌트에 대한 테스트 코드를 구현해주세요

테스트 과정 중 생긴 문제상황, 원인, 해결방안, 레퍼런스를 Comment로 남겨주세요🙆‍♂️🙆‍♀️