프로젝트 구성

[anpaul0615]

• [x] cra + typescript + redux-toolkit 기반 프로젝트 구성

  src/
  components/
    Grid.tsx
    LoadingCircle.tsx
  containers/
    GirdContainer.tsx
  services/
    grid.ts
    index.ts
  store/
    modules/
      grid.ts
      index.ts
    types/
      grid.ts
      index.ts
    configure.ts
  App.tsx
  index.tsx

• [x] components/* 테스트 작성
• [x] services/* 테스트 작성
• [x] store/modules/* 테스트 작성
• [x] containers/* 테스트 작성

[anpaul0615]

프로젝트 코드베이스 구성과 각 컴포넌트별 기본적인 테스트 작성까지 완료.

[anpaul0615]

• 테스트 커버리지가 100% 가 아님

  --------------------|----------|----------|----------|----------|-------------------|
  File                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
  --------------------|----------|----------|----------|----------|-------------------|
  All files           |    81.63 |       80 |    78.57 |       80 |                   |
  components         |      100 |      100 |      100 |      100 |                   |
  Grid.tsx          |      100 |      100 |      100 |      100 |                   |
  LoadingCircle.tsx |      100 |      100 |      100 |      100 |                   |
  containers         |      100 |      100 |      100 |      100 |                   |
  GridContainer.tsx |      100 |      100 |      100 |      100 |                   |
  services           |      100 |      100 |      100 |      100 |                   |
  grid.ts           |      100 |      100 |      100 |      100 |                   |
  store/__fixtures__ |      100 |      100 |      100 |      100 |                   |
  grid-option.ts    |      100 |      100 |      100 |      100 |                   |
  store/modules      |     62.5 |    66.67 |       50 |    60.87 |                   |
  grid.ts           |     62.5 |    66.67 |       50 |    60.87 |... 59,60,62,63,64 |
  --------------------|----------|----------|----------|----------|-------------------|

• store/modules/grid 에서의 Uncovered Lines 는 아마도 async action 에 대한 extraReducers 부분으로 예상됨

• createSlice 에 대한 테스트 수정 필요

[anpaul0615]

• components/Grid 에 대한 렌더링 여부 검증이 지저분함

  // component
  const Grid: React.FC<Props> = ({ option }) => {
  return (
    <div>
      {JSON.stringify(option)}
    </div>
  );
  };
  
  // test
  const { getByText } = renderComponent(option);
  expect(getByText(JSON.stringify(option))).not.toBeNull();

• 무엇을 점검해야할까?

  • 일단 옵션을 전달받으면 렌더링 자체가 되는가
  • 전달받은 옵션의 값이 렌더링 결과 안에 반영되어 있는가
  • etc..

• 점검 목적에 따른 렌더링 테스트 수정 필요