[TIL-014] 20.08.06

1. Summary(3 Line)

프리코스 9일차(3줄 요약)

- 테스트 프레임워크는 우리가 작성한 코드에 문제가 있는지 확인하기 위한 툴이다.

- console.log를 이용한 디버깅도 중요하다.

- mocha 와 chai 를 잘 숙지하자

 

---

2. Today's Todo

• Debugging (디버깅) 
  1) 문법 에러
  2) 로직 에러
  3) 유닛 테스트 / 테스트 주도 개발
  4) 테스트 주도 개발 실전
• 유닛테스트
• 유닛테스트 구성

#1 Debugging (디버깅)

: 디버깅은 "버그를 잡는다는 의미" 다 . 그리고 예상치 못한 프로그램의 행동들에 원인을 분석하기 위한 기술이다.

코딩을 하다가 보면 이상한 결과가 나왔을 때가 있다. 그럴때는 문제를 인지하고 단서 확보와 단서에 대한 분석이 필요하다.

1) 문법 에러

2) 로직 에러

 

 

1) 문법 에러

function foo() {
  for(let i = 0; i < 10; i++) {
    console.log(i);
  }
}
}

위의 코드를 실행하면 Uncaught SyntaxError: Unexpected token }          VM350:6 이렇게 에러 메시지 즉, 단서를 준다.  

단서 : Uncaught SyntaxError: Unexpected token }가 뭐지? // 에러 메시지의 의미는 뭘까? // 몇번째 줄에서 발생한 에러지? 

분석 : Uncaught SyntaxError: Unexpected token } : 문법오류( } ) // 에러 발생 위치 : 6번째 줄

 

누구나 한 번쯤은 띄워본 JavaScript 에러 TOP 10.

2) 로직 에러

: 문제가 발생했을 것이라고 생각되는 부분을 선정(가설 선정)하고, 가설이 맞는지 테스트(가설 검증)

it("getLengthOfLongestElement 함수는 가장 긴 글자의 길이를 리턴해야 합니다", function() {
    let output = getLengthOfLongestElement(['one', 'two', 'three']);
    expect(output).toEqual(5);
});

 

 

 3) 유닛 테스트 / 테스트 주도 개발

 

- 경우의 수를 정리

- 경우의 수에 대해 하나씩 기대값과 실제값 비교

 

4) 테스트 주도 개발 실전

getLengthOfLongestElement 함수를 작성하세요.

배열이 주어졌을때, getLengthOfLongestElement 함수는 주어진 배열에서 가장 긴 문자열의 길이를 반환

Notes: 만약 배열이 비어있다면, 0을 반환해야 합니다.

let output = getLengthOfLongestElement(['one', 'two', 'three']); 
console.log(output); // --> 5

 

 

• 숫자를 리턴하지 않는 부분이 있지는 않나요?                    => 반드시 number 타입을 리턴
• 배열 중 가장 긴 길이를 리턴하고 있는 것이 맞나요?        => 배열 안의 가장 긴 element의 길이를 리턴
• 동일한 길이를 만나도 잘 처리하고 있나요?  
  • ​예를 들어 ['one', 'two'] => 3                                    => 길이가 동일한 경우에도 결과가 잘 나와야 한다.
• 빈 배열이 들어갔을 때 0을 리턴하고 있나요?                  => 빈 배열의 경우 0을 리턴

it("반드시 number 타입으로 리턴해야 합니다", function() { 
  expect(typeof getLengthOfLongestElement(["one", "two", "three"])).to.be.equal("number");
}); 
it("배열 안의 가장 긴 element의 길이를 리턴해야 합니다", function() { 
  expect(getLengthOfLongestElement(["one", "two", "three"])).to.be.equal(5);
}); 
it("길이가 동일한 경우에도 결과가 잘 나와야 합니다", function() { 
  expect(getLengthOfLongestElement(["one", "two", "no"])).to.be.equal(3);
}); 
it("빈 배열의 경우 0을 리턴해야 합니다", function() {
  expect(getLengthOfLongestElement([])).to.be.equal(0); 
});

 

 

 

#2 유닛테스트

: 작은 기능 검사하기

  1) 어디에 유닛 테스트를 해야 하는가?

  - 사소한 함수를 제외한 모든 함수에 유닛 테스트를 해야 한다.

  2) 유닛 테스트를 만들고 나서...

  Ex) 웹앱 테스트 예시

  - 입력창에 특정 값을 넣고

  - 어떤 버튼을 클릭해서

  - 특정 결과가 나오면 성공

 

  Ex) 웹앱 유닛 테스트 ( should )

  - 입력창에 알파벳을 넣을 수 있어야 한다. ('abc')

  - 버튼을 클릭할 수 있어야 한다.

  - 버튼 클릭시 입력창의 내용이 서버로 전송되어야 한다.

  - 서버로부터 대문자로 변경된 내용을 응답 받아야 한다 'ABC'

 

  - 위의 예시 처럼 유닛 테스트가 잘 작성 됬다면, 이를 기반으로 자동화 테스트를 진행할 수 있다.

 

 

#3 유닛 테스트의 구성 요소

1) 주장 (Assertions)

: 유닛 테스트는 개발자가 생각하기에 "코드는 이렇게 짜야해"라는 Assertion(주장) 코드를 작성

 

function square(x) {
  return x * x;
}

console.log(square(5) === 25);

var output = square(5);
expect(output).to.equal(25);

 

2) Matcher 

: 뒷 부분 to.equal을 Matcher라고 부른다.

expect(output).to.equal(25);

 

Expect / Should - Chai

 

3) 테스트 작성 

Ex) 제곱을 구하는 square 함수에 대한 구체적인 assertion

1. input : -5  => output : 25
2. input :  0  => output : 0
3. input : 5  => output : 25
4. input : 0.25 =>  output : 0.0625

square(제곱)의 특징

1. 음수를 제곱하면 양수
2. 0을 제곱하면 0
3. 숫자의 제곱은 그 숫자 자신을 곱
4. 분수를 곱하면 그 숫자는 더 작은 분수 반환

범주적 추론(Categorical Reasoning)을 통해 작성하고자 하는 코드가 기능을 충실히 이행할 수 있도록 모든 범주를 찾는다