제가 가진 TDD에 대한 관심과 열정은 아직 식지 않았습니다.
미국 현지 프로젝트를 통해서 constructor를 통한 dependency injection pattern을 숱하게 보면서 느낀 점도 많았고요, 아직 갈 길이 멀더라도 TDD는 선택이 아닌 당면한 과제가 된 것
같다는 인상을 받습니다.
다만, 계속 아쉬웠던 것은 사실상 현재 주로 작업하는 front-end, javascript에 대해서 (정확하게는 Angular)에 대한 TDD를 시도하지 못하고 있다는 점이었습니다.
1여년전에 도전했다가 angular
및 node.js에 대한 이해 부족으로 미뤄왔던 것을, 이번
ionic2, eletron project를 통해서 node.js(정확하게는
npm)에 대한 경험이 쌓여 다시 시도해 보았습니다.
다행히 전보다는 쉽게 따라갈 수 있었고, 부족하지만 해당 내용을 공유하고자
합니다.
도구의 선택
Angular를 테스트하기 위한 최적의 옵션 중 하나는 karma & jasmine입니다.
Karma는 javascript code를 다양한 browser에서 테스트해 볼 수 있도록 도와주는 tool입니다.
Jasmine은 TDD가
아닌 BDD(Behavior driven development) framework로써 자세한 내용은
다음 설명을 참고하세요.
Test-Driven Development : 비교적 새로운 소프트웨어
개발 기술로써, 프로세스는 아래와 같습니다.
개발된 코드의 특정 부분을 위한 시험(tests)을 작성합니다. 만약 계산기를 예로 들자면 양수, 음수 정수 등등을 더하는 시험을
작성합니다. 하지만 아직 실제 코드가 작성된 게 아니기 때문에, 테스트를
진행한다면 실패(fail)가 될 것입니다.
이제 시험에 연관된 개발코드를 작성합니다. 이 코드는 테스트를 성공(pass)하기 위한 것입니다.
테스트에서 성공하였다면 이제 작성한 코드를 제 위치에 리팩토링하며 집어넣습니다.
TDD는 개발자들이 개발의 명세(Specification)에
대해 개발을 직접 세밀하게 진행보기 전에, 보다 선명하게 생각할 수 있게 해줍니다. 또한 한번 작성된 시험은 언제나 유용합니다
Behavior-Driven Development : BDD는 명세를
작고 쉽게 작성합니다. 기본적으로 BDD는 아래 2개의 중심부분이 있습니다
테스트는 반드시 작고 한가지를 테스트해야합니다. 어플레키에션 전체를
테스트하는 대신, 작지만 많은 수의 시험(tests)을 작성합니다. 계산기를 예로 들자면 하나의 테스트는 '1더하기', 하나의 테스트는 '0더하기0',
또 다른 테스트는 '-5더하기6', 그리고 '1.2더하기3.1' 등을 작성하게 됩니다.
시험은 문장이어야 합니다. 자스민프레임워크와 계산기를 예로들면, 문장은 "Calculator adds two positive
integers"와 같아야합니다. 그러면 테스팅프레임워크가 자동으로 테스트를 진행할
것 입니다.
출처: http://webframeworks.kr/getstarted/jasmine/
전 아직 위의 두 가지가 정확히 뭐가 다른
지 잘 모르겠네요.
Installing
우선 Node.js가 필요합니다.
https://nodejs.org/en/
에 접속하여 LTS / Current version 중 LTS를
다운로드 하여 설치합니다.
npm을 통해서 karma를
설치합니다.
콘솔창에서 다음 커맨드를 실행합니다.
Npm install karma --save-dev
--save-dev 옵션은 package.json을
자동으로 갱신하도록 합니다. 이를 통해서 package.json 파일의
devDependencies에 해당 module이 등록되는
것을 확인할 수 있습니다.
기본적인 준비는 마무리 되었습니다.
Test
code 작성
describe('calculator', function () {
beforeEach(module('myApp'));
var $controller;
beforeEach(inject(function (_$controller_) {
$controller = _$controller_;
}));
describe('mainController test', function () {
it('sample test', function () {
var $scope = {};
var controller = $controller('mainController', { $scope: $scope });
expect($scope.greeting).toBe('Hello world');
expect($scope.fnTest()).toBe(2);
});
});
});
Inject를 통해서 controller의
instance를 가져옵니다.
이 부분은 학습이 더 필요한 영역으로 경험치가 아직 없습니다만, jasmine BDD framework는 문서화가 잘되어 있으므로 손쉽게 따라할 수 있을 것으로 생각합니다.
다만, 위의 코드를 통해서 우리는 특정 controller의 instance를 가져올 수 있습니다.
그리고, 해당 controller의 property나 function을 테스트할 수 있게 되죠.
테스트 대상이 되는 controller는 다음과 같습니다.
var myApp = angular.module('myApp', []);
myApp.controller('mainController', ['$scope', function ($scope) {
$scope.greeting = 'Hello world';
$scope.fnTest = function () {
return 2;
};
}]);
Configuration
for test runner
Karma를 통해서 자동 테스트를 수행하기 위해서, test에 대한 설정 파일을 생성해야 합니다.
Karma init karma.conf.js
Test framework > jasmine
Use require.js > no
Browser > Chrome
Location of test code > {test.js 파일의
path} 예를 들면 ‘test/*.js’
Run
test
테스트를 위해서는 angular / angular-mocks /
jasmine-core 등이 필요합니다. 아래의 devDependencies
항목을 package.json 파일에 붙여넣기를 한 후 저장합니다.
{
"name": "tddtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test
specified\" && exit 1"
},
"author": "Ethan",
"license": "ISC",
"devDependencies": {
"angular": "^1.6.4",
"angular-mocks": "^1.6.4",
"jasmine-core": "^2.6.2",
"karma": "^1.7.0",
"karma-chrome-launcher": "^2.1.1",
"karma-jasmine": "^1.1.0"
}
}
Npm install을 수행하면
package.json에 선언한 module중 필요한 것을 자동으로 다운로드합니다.
거의 모든 준비가 완료되었습니다.
마지막으로 실제로 test간 사용할 파일의 karma config값을 수정해야 합니다.
// list of files / patterns to load in
the browser
files: [
'node_modules/angular/angular.min.js',
'node_modules/angular-mocks/angular-mocks.js',
'app/*.js',
'tests/*.js'
],
files array에 angular,
angular-mock, source file 그리고 test file을 순서대로 작성합니다.
Karma start karma.conf.js를 수행합니다.
마지막 인자는 테스트 환경을 설정 파일을 지정합니다.
테스트 코드의 수행 결과가 출력됩니다.
Karma.conf.js 파일의 autoWatch
값을 true로 설정한 경우 Source code,
test code 가 변경된 경우 자동으로 탐지하여 테스트 결과를 화면에 출력하여 줍니다.
References
https://www.youtube.com/watch?v=shqptAMZ_NM
https://www.youtube.com/watch?v=YRzr27Bpx_g
http://webframeworks.kr/getstarted/jasmine/
http://www.bradoncode.com/blog/2015/05/19/karma-angularjs-testing/
chrome.exe
