AngularJS의 테스트툴로 Testacular를 사용하는데 명칭이 Karma로 바뀌었다. WebStorm에 설정하고 사용하는 방법을 알아보자
1) Karma 설치하기
- 홈페이지 : http://karma-runner.github.io/0.8/index.html
- 선조건 : WebStorm 설치 및 Node.js 설치
- Karma를 global로 설치 : npm install -g karma
2) Yeoman을 통한 Karma 환경설정
- 일반적으로 Yeoman을 통하여 스케폴딩 코드를 만들어 사용하는 것이 좋다 : Yeoman 홈페이지
- yeoman 설치 : npm install -g yo grunt-cli bower
- angular 프로젝트 만들기 : yo angular 또는 yo angular:app
<자동 생성된 파일 및 디렉토리 구조>
- 자동 생성된 karma 테스트 환경파일 : karma.conf.js
/ Karma configuration
// base path, that will be used to resolve files and exclude
basePath = '';
// list of files / patterns to load in the browser
files = [
JASMINE,
JASMINE_ADAPTER,
'app/components/angular/angular.js',
'app/components/angular-mocks/angular-mocks.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
];
// list of files to exclude
exclude = [];
// test results reporter to use
// possible values: dots || progress || growl
reporters = ['progress'];
// web server port
port = 8080;
// cli runner port
runnerPort = 9100;
// enable / disable colors in the output (reporters and logs)
colors = true;
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel = LOG_INFO;
// enable / disable watching file and executing tests whenever any file changes
autoWatch = false;
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers = ['Chrome'];
// If browser does not capture in given timeout [ms], kill it
captureTimeout = 5000;
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun = false;
3) WebStorm 환경설정
- Server 설정하기
+ 웹스톰 상단의 메뉴에서 Edit Configurations... 클릭
+ Node.js로 "Karma Server" 생성 : node.js, karma 설치 위치와 프로젝트 위치, 파라미터로 start 입력
카르마의 테스트 서버 역할을 수행
+ Karma Run 생성 : 파라미터로 run 입력, 테스트를 수행한다
+ Karma Debug : JavaScript Debug의 Remote로 생성
Remote URL 로 "http://localhost:8080/" 입력
4) 테스트 수행하기
- Karma Server 시작하기
+ Karma Server 선택하고 > 시작 버튼 클릭
+ 하단에 localhost:8080 으로 Listen하는 서버 구동됨
+ 브라우져가 자동 실행 : 자동 실행안되면 브라우져 띄워서 8080 호출
- Karma Run 테스트 하기
+ 테스트 수행하기
+ 테스트가 정상 수행되면 SUCCESS가 나온다. 비정상이면 FAILED 메세지
- Karma Debug
+ 소스 코드에 Break point를 만들고 디버그 수행
+ 테스트 해본 결과 잘 안되는데 향후 다시 한번 체크해 봐야 겠다
5) 테스트 코드
- BDD 방식의 테스트 코드를 짠다
//////////////
// 업무 코드
'use strict';
var app = angular.module('eggheadioApp');
app.controller('MainCtrl', function ($scope) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'
];
}) ;
app.factory('Data', function() {
return {message: 'shared data'}
});
app.filter('reverse', function(Data) {
return function(text) {
return text.split("").reverse().join("");
}
});
//////////////////////////
// 필터에 대한 테스트 코드
describe('filter', function() {
beforeEach(module('eggheadioApp'));
describe('reverse', function() {
it('should reverse a string', inject(function(reverseFilter){ //reverse라는 Filte 파라미터
expect(reverseFilter('ABCD')).toEqual('DCBA');
}))
})
})
<참조>
- 원본 : 유튜브 동영상
Webstorm-Dracular-Dowon-Setting_Full.jar
