Jest - TDD를 Jest로 직접 해보자 (7)

서론

이제 목표하는 기능은 대부분 만들었다.
두개의 게시물에 거쳐서 컨트롤러 레이어를 완성하고 이 프로젝트는 마무리하도록 하겠다.

1단계 : 기능의 요구사항 및 스팩

오늘 만들어볼 기능은 날씨 관련 기능의 컨트롤러들이다.
이 기능의 요구사항 및 스팩은 아래와 같다.

1. 서비스레이어의 'getWeatherInfo' 를 호출하는 'getWeatherInfo' 메소드를 구현해야한다.

2. 'getWeatherInfo' 메소드는 SelectWeatherDto 형태의 매개변수를 받고 WeatherEntity 형태의 데이터를 반환한다.

3. 서비스 레이어의 'getAllWeatherInfo' 를 호출하는 'getAllWeatherInfo' 메소드를 구현해야한다.

4. 'getAllWeatherInfo' 메소드는 SelectAllWeatherDto 형태의 매개변수를 받고 WeatherEntity[] 형태의 데이터를 반환한다.

2단계 : 테스트 코드 작성

위의 요구사항 및 스팩을 만족하기 위한 요소로는 아래가 필요하다.

우선 'getWeathInfo' 은 아래와 같다.

1. SelectWeatherDto 형태의 clientData

2. WeatherEntity 형태의 반환값

3. 반환값이 올바르게 반환되었는지 테스트

4. 서비스레이어의 'getWeatherInfo' 가 호출되었는지 테스트

typescript
복사
1  describe('getWeatherInfo', () => {
2    it('should return weather information', async () => {
3      const clientData: SelectWeatherDto = {
4        area: 11,
5        date: '20230302',
6        time: 15,
7      };
8      const returnWeatherInfo: WeatherEntity =
9      {
10        id: 1,
11        area: clientData.area,
12        time: clientData.time,
13        date: clientData.date,
14        temperature: 12,
15        precipitation: 0,
16        precipitationPattern: 0,
17        windSpeed: 0.2,
18        windDirection: 340,
19        humidity: 40,
20      };
21      jest.spyOn(service, 'getWeatherInfo').mockResolvedValue(returnWeatherInfo);
22
23      const WeatherInfo = await controller.getWeatherInfo(clientData);
24
25      expect(WeatherInfo).toEqual(returnWeatherInfo);
26      expect(service.getWeatherInfo).toHaveBeenCalled();
27    })
28  });

SelectWeatherDto 형태의 clientData를 임의로 만든다.
그리고 WeatherEntity 형태의 반환값을 임의로 만든다.
서비스레이어의 'getWeatherInfo' 메소드가 'returnWeaherINfo' 값을 반환하도록 Mock 한다.
'returnWeatherInfo' 값이 제대로 반환되는지 테스트하고 서비스레어의 'getWeatherInfo' 값이 제대로 호출되었는지 또한 테스트한다.

이제 'getAllWeatherInfo' 메소드의 테스트 코드를 만들어보자.

1. SelectAllWeatherDto 형태를 가진 clientData

2. WeatherEntity[] 형태를 가진 returnWeatherInfo

3. returnWeatherInfo 값이 제대로 반환되었는지 테스트

4. 서비스레이어의 getAllWeatherInfo 가 호출되었는지 테스트

typescript
복사
1  describe('getAllWeatherInfo', () => {
2    it('should return weather information', async () => {
3      const clientData: SelectAllWeatherDto = {
4        date: '20230302',
5        time: 15,
6      };
7      const returnWeatherInfo: WeatherEntity[] = [
8        {
9          id: 1,
10          area: 1,
11          time: clientData.time,
12          date: clientData.date,
13          temperature: 12,
14          precipitation: 0,
15          precipitationPattern: 0,
16          windSpeed: 0.2,
17          windDirection: 340,
18          humidity: 40,
19        },
20        {
21          id: 2,
22          area: 2,
23          time: clientData.time,
24          date: clientData.date,
25          temperature: 15,
26          precipitation: 0,
27          precipitationPattern: 0,
28          windSpeed: 1.4,
29          windDirection: 150,
30          humidity: 35,
31        },
32        {
33          id: 3,
34          area: 3,
35          time: clientData.time,
36          date: clientData.date,
37          temperature: 7,
38          precipitation: 50,
39          precipitationPattern: 3,
40          windSpeed: 2.3,
41          windDirection: 280,
42          humidity: 60,
43        }
44      ]
45      jest.spyOn(service, 'getAllWeatherInfo').mockResolvedValue(returnWeatherInfo);
46
47      const WeatherInfo = await controller.getAllWeatherInfo(clientData);
48
49      expect(WeatherInfo).toEqual(returnWeatherInfo);
50      expect(service.getAllWeatherInfo).toHaveBeenCalled();
51    })
52  });

SelectAllWeatherDto 형태를 가진 임의의 값 clientData를 만든다.
WeatherEntity[] 형태를 가진 임의의 값 retrunWeatherInfo 를 만든다.
returnWeatherInfo 값이 제대로 반환되었는지 테스트한다.
서비스레이어의 getAllWeatherInfo 메소드가 제대로 호출되었는지 테스트한다.

3단계 : 테스트 실패 확인

실제 코드가 없으니 테스트는 실패한다.

4단계 : 코드 작성

테스트 코드를 기반으로 실제 코드를 만들어보자.

typescript
복사
1  @Post()
2  @UsePipes(ValidationPipe)
3  async getWeatherInfo(
4    @Body() selectWeatherDto: SelectWeatherDto,
5  ): Promise<WeatherEntity> {
6    const weatherInfo: WeatherEntity = await this.weatherService.getWeatherInfo(selectWeatherDto);
7    return weatherInfo;
8  }

위는 'getWeatherInfo' 메소드를 실제 코드로 작성해본 것이다.
우선 Dto를 사용하기때문에 UsePipes를 이용해 클라이언트로부터 받은 값이 Dto의 형태를 갖추었는지 확인한다.
매개변수로 Body 값을 Dto 형태의 객체로 받는다.
서비스레이어의 getWeatherInfo의 매개변수로 Dto를 넘긴 뒤 반환 된 값을 weatherInfo에 할당한다.
사용자에게 weatherInfo를 반환한다.

typescript
복사
1  @Post('/all')
2  @UsePipes(ValidationPipe)
3  async getAllWeatherInfo(
4    @Body() selectWeatherDto: SelectAllWeatherDto,
5  ): Promise<WeatherEntity[]> {
6    const weatherInfo: WeatherEntity[] = await this.weatherService.getAllWeatherInfo(selectWeatherDto);
7    return weatherInfo;
8  }

위는 'getAllWeatherInfo' 메소드이다.
똑같이 Dto를 사용하기 위해 UserPipes 를 사용한다.
그리고 Body 값을 Dto 형태로 받는다.
서비스레이어의 'getAllWeatherInfo' 메소드를 매개변수로 Dto를 넘기고 값을 반환받아 weatherInfo에 할당한다.
사용자에게 weatherInfo를 반환한다.

5단계 : 테스트 통과 확인

image

테스트를 통과했다.

6단계 : 리팩토링

리팩토링할 부분이 발견되지 않아 6단계는 패스한다.

7단계 : 2~6단계 반복

기능의 요구사항 및 스팩을 모두 만족했기때문에 7단계는 패스한다.