프로젝트 준비 12일차

윤건호·2022년 9월 13일
0

TDD / Jest

목록 보기
4/4

유닛 테스트

어제 했던 유닛 테스트를 이어서 오늘은 mock 처리 했던 부분을 Stub 을 사용해봤다.

앞서 말하지만 mock , Stub 둘 중 어떤게 더 좋고 나쁘고 할게 아니라

상황에 따라 사용한다고 했다.

mock

const ProductClient = require("./product_client");

class ProductService {
constructor() {
this.productClient = new ProductClient();
}

fetchAvailableItems() {
return this.productClient
.fetchItems()
.then((items) => items.filter((item) => item.available));
}
}

전에는 이 부분을 전부 컴포넌트 , 함수 mock 처리를 통해 결과에 지장이 없고,

무시되게끔 사용했다.

mock,stub 둘 다 가상의 것을 만들어 사용하는건 맞지만 그 애매한 경계선에

Stub은 실제로 존재하는 데이터를 사용한다는 차이가 있다.

Stub

class ProductService {
constructor(productClient) {
this.productClient = productClient;

fetchAvailableItems() {
return this.productClient
.fetchItems()
.then((items) => items.filter((item) => item.available));
}
}

필요한걸 내부에서 직접 만들어서 사용하는것이 아니고 외부에서 받아와서 사용하는거임

이렇게 받아와서 사용하는데 테스트할때는 테스트용 productClient를 사용하고

실제로는 실제의 productClient를 주입해서 사용하면 됨

이걸 의존성 역전 이라고 얘기한다

위의 경우에는 mock보다는 Stub이 좀 더 적합해보인다.

기존에 느끼지 못했던 내부에서 가지고 있다는것에 불편함을 느꼈다.

Stack TDD

Js로 stack 을 구현해봤다.

초기값을 설정하는 뜻으로 매번 stack을 비워주는

beforeEach는 요즘 많이 사용하는 메서드이다.

처음 테스트 코드를 실행하면 당연히 만들어놓은게 없기때문에 에러가 나온다.

여기서 내가 느낀 걸 말해보자면.

아닐수도 있지만,

테스트 코드를 먼저 작성한다는 전제하에

에러 메시지가 '메서드가 없어서 동작을 못한다는 메시지'가 아니라면 뭔가 잘못된거다.

이유는 어떠한 동작이 존재할때 어떤 값을 기대한다는게 테스트 코드인데,

그 동작을 넣어주지 않았기에 그 없는 부분에서의 에러만 기대해야 된다는 것이다.

그럼 그 외에 무슨 에러가 또 나오냐 하면 나 같은 경우는 오타를 남발했어서

쌩뚱맞은 내가 테스트하지도 않은 코드에서 에러가 나왔다.

또는 기존에 통과됐던 코드도 건드린 적이 있다.

Stack 구현

내가 구현을 하면서 든 첫번째 생각은

Stack을 구현하려면 Stack이 뭔지 알아야 한다는 것이다

내가 하고자하는게 어떤 원리로 동작을 하고 어떤 메서드가 존재하는지에 대해

이미 알고 만들어야한다는 것이다.

너무 당연한 얘기지만 그 당연한걸 난 놓치고 있었다.

적어도 그 강의 내용을 이해하기 위해서 Stack 자체를 이해하고 있어야했다.

Stack에 대해 공부하기 시작했고 오랜 시간 투자해 깊게 파고 든다기보다
내가 필요한 정보만 공부를 했다.

그 결과 이해가 훨씬 잘됐다.

기존에 Stack을 구현함에 있어 배열을 사용해서 배열이 가진 메서드로 코드를 완성했다.

굳이 배열을 사용할 필요가 없다면 얼마든지 없이도 구현이 가능했다.

class Stack {
constructor() {
this._size = 0;
this.head = null;

pop() {
if (this.head === null) {
throw new Error("Stack is empty");
const node = this.head;
this.head = node.next;
this._size--;
return node.item;
}
}

**pop : 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환

그 중 pop의 코드를 소개하며 내가 깨우쳤던 부분은

배열을 사용하며 그 많은 로직들이 결국 head를 기준으로 정리가 된다는 것이었다.

너무 간단했다.

이해가 될듯말듯 하다가 한번에 혈이 뚫린 느낌이었다.

이런게 하나씩 쌓이면서 고수가 되나 싶다.

profile
더 배우고 싶은 프론트엔드 개발자 윤건호입니다.

0개의 댓글