개발항해일지 22년/7월/5주 :: 테스트 코드, 3D 게임 기획

일지 2022년 7월 5주차

 

 

이번주는?

• 3D 게임 만들기
• 테스트 코드

 

 

3D 게임을 만들자

이번에도 JS13kb에 참가한다.

주말 프로젝트가 될 것이고, 3D 게임을 도전한다.

이번 대회에서 해보고 싶은 것들은 이렇다

작년까지 목표는 결과물을 만드는 것이었다면, 이번에는 티셔츠를 받는 것이 목표

 

- 3D 스무스 렌더링

- webpack 초기 설정

- 저용량 3D 게임 엔진 사용

 

중요한 것은 부드러운 움직임!

 

 

테스트 코드

현재 맡는 프로젝트가 TDD 방식으로 만들어졌다고 한다

거의 모든 컴포넌트, 페이지, 파일에 테스트 코드가 작성되어 있고,

테스트 커버리지도 70으로 되어있다(이 밑으로 내려가면 빌드 안된다)

 

요구사항에 맞춰서, 기능 기능 추가/변경을 하는데 시간을 쓰고,

그에 따라 바뀌는 테스트 코드를 수정하는데 많은 시간을 사용한다

그 시간을 줄이기 위해 조금씩 정리해보자

 

 

작동 재현하는 fireEvent

fireEvent는 마우스 클릭, input 변경, select 옵션 변경 등

이벤트를 트리거 하는 역할을 한다

테스트를 하는 것이니 재현을 한다고 생각하면 될 듯

 

fireEvent 예시

const field = screen.getByLabelText('Fruit') as HTMLInputElement;

fireEvent.mouseDown(field);
fireEvent.click(screen.getByRole('option', { name: 'Apple' }));

 

위의 예시는 Fruit 레이블이 붙은 field에 mouse down,

그럼 셀렉트 option들이 나오는데 그 중에 Applie 이름이 담긴 녀석을 선택

이 뒤로는 이로 인한 영향을 expect로 작성해서 테스트를 한다

 

 

몇 번 호출했을 때 결과가 뭐야?

toHaveBeenNthCalledWith는 함수혹은 dispatch와 쓰이는 걸 봤다

함수가 n번째(Nth) 호출 되었을 때(Have been called with)

값을 비교한다

 

toHaveBeenNthCalledWith 예시

expect(dispatch).toHaveBeenNthCalledWith(
  2,
  setFilter({
    fruit: 'APPLE',
    soldOut: true,
  }),
);

 

setFilter 2번 실행되었을 때 dispatch 상태가,

뒤에 적어준 객체처럼 상태가 변경되어 있으면 테스트가 패스된다 

 

 

DOM을 주무르는 screen

screen 이해가기 편하다 마치 querySelector 같은데,

렌더링된 화면에서 태그, id 뿐만 아니라 텍스트, placeholder 등 잡을 수 있다

screen으로 잡아서 테스트하는데 도움을 얻는다

 

screen 예시

const button = screen.getByRole('button', { name: /Sign in/ });
expect(screen.queryByText(/Create/)).toBeNull();
expect(screen.getByText(/Create/)).toBeInTheDocument();

 

 

3D 게임을 만들자!

작년에 이어 이번에도 js13KGames 참가할거고,

이번에는 3D 게임을 만들려고 한다

만드는 과정 따로 정리 시작!

https://forgottenknowledge.tistory.com/entry/JavaSciprt로-3D-게임을-만들어보자-1

JavaSciprt로 3D 게임을 만들어보자 (1/?)

 

 

참고 링크

Git Rebase vs Git Merge: Which is Better?

=> https://www.edureka.co/blog/git-rebase-vs-merge/

 

Firing Events

=> https://testing-library.com/docs/dom-testing-library/api-events/

 

.toHaveBeenNthCalledWith(nthCall, arg1, arg2, ....)

=> https://jestjs.io/docs/expect#tohavebeennthcalledwithnthcall-arg1-arg2-

 

screen - Testing Library

=> https://testing-library.com/docs/queries/about/#screen

 

<MemoryRouter>

=> https://v5.reactrouter.com/web/api/MemoryRouter

 

Ant Design - PageHeader

=> https://ant.design/components/page-header/

 

Wrapping Ant Design components with Styled Components

=> https://gist.github.com/newswim/fa916c66477ddd5952f7d6548e6a0605

 

How to fix the "Element implicitly has an ‘any’ type because expression of type ‘string’ can’t be used to index type" error with TypeScript?

=> https://thewebdev.info/2022/03/21/how-to-fix-the-element-implicitly-has-an-any-type-because-expression-of-type-string-cant-be-used-to-index-type-error-with-typescript/

 

 

sail by Harold Mendoza @unsplash