레벨 테스트 작업 로그 #9 (22.12.07 TIL)

회원가입 백엔드 작업. 최대한 컨트롤러에서는 로직을 보이지 않게 하기위해 서비스를 호출해서 레포지토리를 조회 후 그걸 dto 로 변환해주었다. 조건이 추가되고 규모가 커질수록 서비스 로직이 점점 비대해질 것 같다.

//UserController.java

    @PostMapping
    @ResponseStatus(HttpStatus.CREATED)
    public UserCreateDto signup(
            @Valid @RequestBody UserRegisterDto userRegisterDto
    ) {
        User user = createUserService.create(userRegisterDto);

        return user.toCreateDto();
    }

//createUserService.java

  public User create(UserRegisterDto userRegisterDto) {
        String name = userRegisterDto.getName();
        String username = userRegisterDto.getUsername();
        String password = userRegisterDto.getPassword();
        String passwordCheck = userRegisterDto.getPasswordCheck();

        if (userRepository.findByUsername(username).isPresent()) {
            throw new UsernameAlreadyTaken(username);
        }

        if (!password.equals(passwordCheck)) {
            throw new PasswordNotMatch();
        }

        User user = new User(name, username);

        user.setInitialAmount();

        user.changePassword(password, passwordEncoder);

        userRepository.save(user);

        return user;
    }

그리고 ProductItem 이라는 상품 목록을 id 값에 따라 반환하는 컴포넌트 테스트 코드를 짜는 도중 만난 오류.

describe('ProductItem', async () => {
  await productStore.fetchProduct();

  it('상품을 반환한다', async () => {
    render(
      <MemoryRouter>
        <ThemeProvider theme={defaultTheme}>
          <ProductItem
            product={productStore.products[0]}
          />
        </ThemeProvider>
      </MemoryRouter>,
    );

    await waitFor(() => {
      screen.getByRole('heading', { name: '테스트용 게시물 1' });
    });
  });
});

describe 에서는 비동기처리를 하지 못한다고 한다. 그래서 describe 에 있는 async 를 없애주고 it 문 안쪽으로 옮겨주었다.

describe('ProductItem', () => {
  it('상품을 반환한다', async () => {
    await productStore.fetchProduct();

    render(...생략...);
});

그랬더니 이번에는 에러코드 400을 반환했다.

 AxiosError: Request failed with status code 400

이유인 즉슨, 내가 이 코드에서 요청한 것은 'products 라는 리스트에서 0번째 데이터를 알려줘!' 라는 것이었고, fetchProduct() 로 한 개의 상품 목록을 불러왔었다. 그런데 정작 가짜 데이터를 만든 testServer 에서는 개별 상품 목록을 products/1 이라는 상품의 id값을 조회해서 데이터를 가져오게 만든 것이다. fetchProduct() 로 상품을 불러올거면 id 값을 파라미터로 넣어서 해당 상품만 가져오게 하거나, 전체 상품 목록을 반환하게 하는 fetchProducts() 를 사용해야 한다. 간단하게 fetchProducts() 를 사용하니까 테스트가 통과되었다.