지도 API 개발에서의 BDD 적용 및 Karma 를 도입한 테스팅 방법

1. BDD 테스팅 소개와 도입
2017.01.12

2. 목차
2
1. BDD ?
2. BDD 테스팅 도구(JS)
3. 도입 예제
4. Karma(test runner) 연동
5. 참고(자동화)

3. 1. BDD ?
3
TDD와 유사. 집중하는 대상의 차이.
테스트 주도 개발(Test Driven Development)
* 메소드에 중점을 두고 진행
행위 주도 개발(Behavior Driven Development)
* 비즈니스 로직에 중점을 두고 진행
TDD & BDD:
* 코드 작성전에 테스트를 먼저 작성
* “Red – Green – Refactor” Cycle
* Acceptance test: spec 이 만족되었는지 확인하는 테스트
비즈니스 로직을 기준으로 테스
팅이 진행되므로, 프로젝트에 관
련된 모두(stakeholders)가 참여
하는게 바람직

4. 1. BDD ?
4
TDD 과정:
# the test
describe "User", ->
it "성과 이름을 제공합니다", ->
user = new User
1. RED: fail 테스트 작성 후 테스트에서 fail 을 확인.
#the code
class User
2. Green: 테스트를 통과하는 최소의 코드 작성.
3. Refactor:
코드 정리 후 1번으로 돌아가 다음 기능 테스트 작성
# the test
describe "User", ->
it "성과 이름을 제공합니다", ->
user = new User
user.setFullName "seulgi choi"
#the code
class User
setFullName: (fullName) ->

5. 1. BDD ?
5
비즈니스 로직을 기준으로 TDD 를 수행한다.
특정 메소드가 아닌 특정 기능이 어떻게 동작하는지 테스트

6. 2. BDD 테스팅 도구(JS)
6
1. Mocha
2. Jasmine
공통점:
테스트 작성 구조
차이점:
assertion, mocking 등 사용 시 외부 library 필요 여부
Mocha:
“chai” library
to.be
to.equal
should.be
….
Jasmine:
toBe
toEqual
….
Mocha:
“sinon” library
sinon.spy
sinon.stub
Jasmine:
spyOn
describe(“대상”,
it(“무엇을 하는지“,
expect() // 무슨 결과를 예상하는지
)
)

7. 3. 도입 예제
7
Jasmine 은 로컬에서 결과를 확인할 수 있다.
1. Jasmine 다운로드
3. 결과를 페이지에 보여주는 것을 도와줄 파일 로드
4. 테스트 대상 코드 및 테스트 코드를 로드
2. 테스트/코드 작성 cycle

8. 3. 도입 예제
8
Jasmine 은 로컬에서 결과를 확인할 수 있다.
1. Jasmine 다운로드
2. 테스트/코드 작성 cycle
RED
테스트를 통과할 최소의 코드 작성TWMap.test.js

9. 3. 도입 예제
9
RED
GREEN
REFACTOR
테스트 통과 코드 작성
TWMap.js
TWMap.test.js

10. 3. 도입 예제
10
GREEN
위 과정을 반복
TWMap.js

11. 4. Karma(test runner) 연동
11
테스트 코드를 실행시키는데 도움을 주는 툴
1. Karma 설치
2. config 에 테스트를 위한 코드 및 브라우저 정보 입력
Node.js 에서 실행되기 때문에 node.js 를 먼저 다운/설치 후 다음 명령어를 통해 Karma 설치를 진행한다
# Install Karma: Karma 설치
$ npm install karma –save-dev
# Install plugins that your project needs: 프로젝트에 필요한 플러그인 설치(Jasmine, Chrome launcher 등)
$ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev
# windows 에서 nodejs prompt 로 실행 시 에러나므로, 다음 명령어를 통해 karma-cli 설치가 필요함
$ npm install -g karma-cli
# karma.conf.js 생성. 대화형으로 config 설정을 진행할 수 있음
$ karma init

12. 4. Karma(test runner) 연동
12
2. config 에 테스트를 위한 코드 및 브라우저 정보 입력
실행할 코드 목록(html load 순서)
테스트 시 실행할 브라우저 목록

13. 4. Karma(test runner) 연동
13
3. Karma 실행
$ karma start

14. 4. Karma(test runner) 연동
14
3. Karma 실행

15. 4. Karma(test runner) 연동
15
3. Karma 실행(에러 발생)
최종 에러 갯수

16. 4. Karma(test runner) 연동
16
3. Karma 실행(debug 버튼 클릭 시)
에러 정보

17. 5. 참고(자동화)
17
Jasmine – Testing Library
: 테스트 코드 작성
Karma – Test Runner
: 여러브라우저에서 자동으로 테스트
Jenkins – CI tool
: 자동화 빌드 및 테스트
Jenkins 소개1
Jenkins 소개2
Karma 소개1
Karma 소개2 - nhnent
Jasmine 소개1
Jasmine 소개2 - nhnent