BDD 테스팅 소개와 도입2017.01.12

2

목차1. BDD ?

2. BDD 테스팅 도구 (JS)

3. 도입 예제4. Karma(test runner) 연동5. 참고 ( 자동화 )

3

1. BDD ?TDD 와 유사 . 집중하는 대상의 차이 .

테스트 주도 개발 (Test Driven Development) * 메소드에 중점을 두고 진행행위 주도 개발 (Behavior Driven Development)

* 비즈니스 로직에 중점을 두고 진행

TDD & BDD: * 코드 작성전에 테스트를 먼저 작성 * “Red – Green – Refactor” Cycle

* Acceptance test: spec 이 만족되었는지 확인하는 테스트

비즈니스 로직을 기준으로 테스팅이 진행되므로 , 프로젝트에 관련된 모두 (stakeholders) 가 참여하는게 바람직

4

1. BDD ?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 ?비즈니스 로직을 기준으로 TDD 를 수행한다 .

특정 메소드가 아닌 특정 기능이 어떻게 동작하는지 테스트

6

2. BDD 테스팅 도구 (JS)1. Mocha2. Jasmine

공통점 : 테스트 작성 구조차이점 : assertion, mocking 등 사용 시 외부 library 필요 여부

Mocha:“chai” libraryto.beto.equalshould.be….

Jasmine:toBetoEqual….

Mocha:“sinon” librarysinon.spysinon.stub

Jasmine:spyOn

describe(“ 대상” , it(“ 무엇을 하는지“ , expect() // 무슨 결과를 예상하는지 ))

7

3. 도입 예제Jasmine 은 로컬에서 결과를 확인할 수 있다 .

1. Jasmine 다운로드

3. 결과를 페이지에 보여주는 것을 도와줄 파일 로드

4. 테스트 대상 코드 및 테스트 코드를 로드

2. 테스트 / 코드 작성 cycle

8

3. 도입 예제Jasmine 은 로컬에서 결과를 확인할 수 있다 .

1. Jasmine 다운로드2. 테스트 / 코드 작성 cycle

RED

테스트를 통과할 최소의 코드 작성TWMap.test.js

3. 도입 예제

9

RED

GREEN

REFACTOR

테스트 통과 코드 작성

TWMap.js

TWMap.test.js

3. 도입 예제

10

GREEN

위 과정을 반복 TWMap.js

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

4. Karma(test runner) 연동

12

2. config 에 테스트를 위한 코드 및 브라우저 정보 입력

실행할 코드 목록 (html load 순서 )

테스트 시 실행할 브라우저 목록

4. Karma(test runner) 연동

13

3. Karma 실행$ karma start

4. Karma(test runner) 연동

14

3. Karma 실행

4. Karma(test runner) 연동

15

3. Karma 실행 ( 에러 발생 )

최종 에러 갯수

4. Karma(test runner) 연동

16

3. Karma 실행 (debug 버튼 클릭 시 )

에러 정보

5. 참고 ( 자동화 )

17

Jasmine – Testing Library: 테스트 코드 작성 Karma – Test Runner

: 여러브라우저에서 자동으로 테스트 Jenkins – CI tool: 자동화 빌드 및 테스트

Jenkins 소개1Jenkins 소개2

Karma 소개1Karma 소개2 - nhnent

Jasmine 소개1Jasmine 소개2 - nhnent