일반 Jasmine 테스트 및 CI 구축 가이드

. 작성일 : 2016.04.21

. 제목 : Jasmine 테스트 및 CI 구축 가이드 

 

;;; PPT본에 대한 텍스트 버전입니다;;

(파일 첨부가 안 되는 환경인지라...)

 

 

[ 목차 ]

1. 개요

2. Jasmine 기본내용

3. Jasmine 설치 및 실행

4. Jasmine 프로젝트 수행 가이드

5. Karma를 이용한 자동화 환경 구축

6. 자바스크립트 단위테스트 팁(예정)

?

 

1. 개요

[ 자바 스크립트 ]
 HTML 문서의 정적이고 단조로운 한계를 극복하기 위해 넷스케이프(Netscape)사가 만든 livescript가

그 이름을 달리 한 것으로서 브라우저 자체에 내장된 해석기능을 이용한 클라이언트(client) 기반의 일종의

스크립트 언어이다. 작고도 빠르기 때문에 웹문서를 동적으로 꾸밀 때 가장 널리 쓰인다

  -  [네이버 지식백과] 자바스크립트 (NEW 경제용어사전, 2006. 4. 7., 미래와경영) 

 

 

[ 자바스크립트 단위테스트? ]
 자바스크립트 각 함수(function) 들이 원래 목적한 대로 잘 동작하는지 확인하는 테스트.
테스트의 관심이 함수 자체에 있기 때문에 가능하면 다음 의존성들로부터 독립적으로 테스트하려고 합니다.
 (1) Browser의 API
 (2) js framework의 API
 (3) 프로그램에서 동작하기 위해서 생성한 API
※ 원하는 테스트를 할 수 있다면 1, 2, 3의 코드를 그대로 사용하고, 그렇지 않은 경우에는 Mock 또는 Stub을

   만들어서 테스트를 합니다
※ 단위테스트는 한계가 있습니다. 단위테스트는 작성된 기능에 대해서만 테스트하는 것이며 복합적으로

   동작되어서 발생하는 에러(integration error)나 시스템 레벨의 에러에 대해서 답을 주지는 않습니다
   (발췌 : http://okjungsoo.tistory.com/7954104)

 

[ ※ 자바 스크립트 단위테스트는 필요할까? ]
  이런 질문과 대답을 한다면 누군가는 굉장히 뒤떨어진 사람이라고 나무랄 것이다.

왜냐하면 이미 자바스크립트는 기존의 영역을 뛰어넘어 다양한 용도, 어떤 경우는 주 개발언어로 자리매김을

했기 때문이다
 - 하지만 전통적인 HTML+자바스크립트 환경이라면 No라고 답할 수도 있다. 
  “스프링프레임워크에서 Controller에 대한 단위테스트는 필요한가?” 라는 질문과 유사할 수도 있다. 
  테스트를 할 수 있는 것과 해야 하는가는 다른 질문과 답변이다
 - 전통적인 HTML+자바스크립트 환경이어도 특정 용도의 자바스크립트 함수에 대해서는 Yes이다. 
  공통으로 사용되는 자바 스크립트, 웹 리소스에 의존성이 없이 로직이 주요 내용인 자바스크립트 함수에

  대해서는 단위테스트가 필요하다. 예를 들어 생각해보라 특정 비밀번호 패턴을 체크하는 공통 자바스크립트가

  있는데 이를 각 사이트의 상황에 따라 사람이 머리로 생각해서 테스트한다면 많은 결함이 잠재되어 있을 것이다
 - 클라이언트 영역은 AJAX처럼 기존의 단순한 html+javascript에서 더 나아가 더 복잡해진 클라이언트를

  갖기 때문에 서버사이드 또한 NodeJS처럼 Javascript로 개발하는 경우도 있기 때문에 자바스크립트에 대한

  테스트 방법의 필요성도 커졌다

 

 - https://blog.outsider.ne.kr/673"

  "자바스크립트에서의 유닛테스트는 여러 번 시도하기는 했었는데 잘 되지 않았습니다. 기본적으로 UI랑

  의존성이 크기 때문에 테스트하기 어려웠기 때문인데 node.js를 하면서 서버사이드이기 때문에 다시

  유닛테스트를 하고 있습니다” 

 

 

[ 클라이언트 영역, 서버 영역에 대한 자바 스크립트 테스트 ]
 - 클라이언트 : 기존에 단순하게 구성되던 웹 UI가 Ajax처럼 서버와 많은 통신 없이 클라이언트 사이드에서만

  다양한 흐름을 갖게 됨
 (single-page application (SPA) is a web application or web site that fits on a single web page

  with the goal of providing a more fluid user experience similar to a desktop application)

?

 - 서버 사이드 : NodeJS와 같이 Server-Side 영역도 JavaScript (SSJS)를 통해 구현되기도 한다

 

[ 자바 스크립트 테스트 툴 (Jasmine vs Mocha) ]
"Jasmine 은 전체가 한 패키지로 되어 있어 처음 시작하기가 쉽다.
Mocha 는 다른 다양한 모듈들과 통합이 가능하다는 점에서 굉장히 유연하다"

?

(표 )

**** 비교항목 **** 

설명
히스토리
라이선스
웹사이트
최신버전
문법
Assertions
Mocking
Asynchronous
Faking Server

 

**** Jasmine ****
BDD를 지원하는 자바스크립트 테스트 프레임워크
기존의 JSUnit을 보완하여 2010년 만들어진 툴(Pivotal Labs)
오픈소스(MIT License)
http://jasmine.github.io
2.4(2015년12월)
BDD 포멧
should, expect and assert 제공
Spy 형태 제공
지원
별도 확장모듈 지원

**** Mocha ****
simple, flexible, fun javascript test framework for node.js & the browser
기존의 Expresso를 기반으로 2011년 만들어진 툴
오픈소스(MIT License)
https://mochajs.org/
2.4.5 (2016년 1월)
BDD, TDD 등의 포멧 지원
Chai 와 같은 assertion library 활용
Sinon(Spies, stubs and mocks) 활용
지원
지원

 

[ Jasmine ]
BDD를 지원하는 오픈소스 자바스크립트 단위 테스트 프레임워크
 Jasmine is an open source testing framework for JavaScript. It aims to run on any JavaScript-enabled platform,

to not intrude on the application nor the IDE, and to have easy-to-read syntax. It is heavily influenced by other

unit testing frameworks, such as ScrewUnit, JSSpec, JSpec, and Rspec (https://en.wikipedia.org)

(도식)
 src / aa.js            --->    test / aaSpec.js      ---> 브라우저에서 Runner.html 로딩
: 노래재생 플레이어             테스트

 

2. Jasmine 기본내용
[ Jasmine 기본 문법 ]
 ※ BDD(Behavior Driven Development): 이 클래스는 어떤 행위를 해야 한다(should do something)" 라는

  형태의 문장으로 작성하여 상세 구현보다는 행위를 위한 테스트에 집중하게 하는 접근법
?

?

* 문법 소개 : http://jasmine.github.io/2.3/introduction.html

일부.
1) describe

 하나의 테스트 suite은 Jasmine 예약어인 describe와 2가지 파라미터를 사용합니다. 첫번째는 suite의 이름으로 보통 테스트 대상을 적습니다 describe 는 어떤 단계에서든 중첩(가지치기)될 수 있습니다.

. xdescribe : 특정 Suite을 테스트에서 제외하고 싶을 때는 앞에 x을 붙입니다.

 

2) it

 it()함수를 가지고 있는데 이것을 Spec이라고 부릅니다. 당신의 프로그램의 일부가 무엇을 해야하는지를 말해주는 자바스크립트 함수입니다. Suite안에는 많은 수의 Spec(it)을 가질 수 있습니다.
. 특정 it을 보류하려면 앞에 x를 붙여줍니다

 

3) Expectations

확인하는 부분을 Matcher라고 부르고 자스민에는 내장된 많은 수의 Matcher가 있고 필요하다면 자신만의 Matcher를 만들 수 있습니다

expect(a).toBe(true);
expect(a).toBe(b);
expect(a).not.toBe(null);
expect(a).toEqual(12);

?

var message = "foo bar baz";

expect(message).toMatch(/bar/);

expect(message).toMatch("bar");

expect(message).not.toMatch(/quux/);

expect(pi).toBeGreaterThan(e);
expect(foo).toBeTruthy();
expect(a).toBeFalsy();
expect(foo).toThrowError(TypeError, "foo bar baz");

 

4) Setup and Teardown

 beforeEach, afterEach, beforeAll, and afterAll functions
모든 스펙이 실행되기 이전에 변수를 설정하거나 함수를 정의하는 등 어떤 동작이 필요하다면 beforeEach()안에

이러한 코드를 둬서 모든 스펙 이전에 실행되게 할 수 있습니다. 모든 스펙 이후에 무언가 실행되기를 원한다면 afterEach()안에 코드를 작성하면 됩니다.

?

 ※ this로 값 공유하기
: to share variables between a beforeEach, it, and afterEach is through the this keyword

 

5) Spy

 - 함수의 리턴 값 조작하기 (returnValue)
   beforeEach에서 미리 ?spyOn(foo, "getBar").and.returnValue(745);
   으로 745를 리턴하도록 설정하고 테스트 수행

?

  - 아예 다른 함수 실행하게 바꿔치기(callFake)
    beforeEach에서 미리
    spyOn(foo, "getBar").and.callFake(function() { return 1001; });

?

 - 임의의 에러 던지도록 하기 (throwError)
   beforeEach에서 미리 
   spyOn(foo, "setBar").and.throwError("quux");

6) 비동기 지원

 - 특정함수(done())이 호출될 때까지 기다리기

 

 

 

3.  Jasmine 설치 및 실행

[ Jasmine standalone 설치 ]

(도식), 설치 url

 

 

[ 브라우저에서 SpecRunner 파일을 열어서 실행 ]

(도식)

 

[ 커맨드 라인 실행 스크립트(로컬) 예 ]

 

 

[ 프로젝트, 폴더 구성 (예) ]

(도식)

 

 

[ 네이밍 (예) ]

(표)

(접근방식)          (폴더, 파일명)         (Describe)            (Nested Describe)            ( it     )
(BDD 방식)
(시나리오방식)

 

 

[ 로컬 수행 vs 자동화 환경(Jenkins) 개념 ] 

(도식)

로컬 - 브라우저와 Runner.html 오픈으로 실행

자동화 환경 - Karma 설치 후 실행 스크립트를 브라우저 연동하여 실행 (예에서는 가상 브라우저 phantomjs로 수행)

 

?

[ Jenkins 서버에 Jasmine, Karma 설치 및 설정 방법 ]

* 블로그 내 기존 설정 글 참조.

( http://genycho.blog.me/220393949440 )

 

 

[ 테스트 자동화 구축 예 ]

(도식)

Jenkins에서 테스트 결과, 커버리지 결과 등이 표시되는 도식 

 

 

[ Javascript 단위 테스트 Tip. ]

계속 업데이트 ...  

 

   - 각각의 테스트는 독립적으로 구동되어야 한다
   - 반복적인 테스트가 가능하도록 테스트 수행 전, 후 상태 초기화를 고려하여야 한다

   - 각 테스트 케이스는 대상에 대해 다음을 테스트 한다
  . normal 케이스 작성(필수)
  . 정의된 에러 상황(필수 값 체크 등) 테스트
 . 기타 업무 로직상 발생할 수 있는 오류 테스트 를 커버하도록 작성한다