| sitelink1 | http://genycho.blog.me/220706542138 |
|---|---|
| sitelink2 | |
| sitelink3 | |
| sitelink4 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
. 작성일 : 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 케이스 작성(필수)
. 정의된 에러 상황(필수 값 체크 등) 테스트
. 기타 업무 로직상 발생할 수 있는 오류 테스트 를 커버하도록 작성한다
