잊지 않겠습니다.

jasmine-node를 이용한 nodejs test

설치

다음 npm package를 설치해서 처리한다.

sudo npm install -g jasmine-node

Application의 구성

기본적으로 yo에서 제공되는 application 구조를 그대로 가지고 가는 것이 좋다. (express application을 기준)

.
├── Gruntfile.js
├── app
│   └── lib
├── app.js
├── npm-debug.log
├── package.json
└── test
    └── calculator-spec.js

test code의 실행

일반적으로 root directory에서 다음 명령어를 이용해서 처리하면 된다.

jasmine-node --test-dir test --autotest --watch app test --color

simple test code

target이 되는 file의 위치가 app/lib/testservice.js 라고 할때, export되는 객체는 다음과 같이 구성될 수 있다.

exports.method1 = function() {
  return true;
};

exports.method2 = function() {
  return false;
};

javascript는 method 단위의 구성을 주목할 필요가 있다.

이때, 이 method1, method2를 test하는 code는 다음과 같이 작성가능하다.

var testservice = require('../app/lib/testservice.js');
describe('test testservice', function() {
  it('method1 called', function() {
    expect(testservice.method1()).toBe(true);
  });

  it('method2 called', function() {
    expect(testservice.method2()).toBe(false);
  });
});

simple test code 2

만약에 db를 접속해서 만들어지는 BL이 존재한다면 다음과 같이 구성한다. yo express-generator에서는 db connection이 app.js에서 구성되는데, 이를 따로 뽑아서 사용하면 db에 대한 service code test가 쉽다.
mongoDb에 접근하는 코드는 다음과 같다.

var mongoose = require('mongoose'),
    glob = require('glob'),
    path = require('path'),
    rootPath = path.normalize(__dirname + '/..');

var init = function() {
  mongoose.connect('mongodb://localhost/sadari');
  var db = mongoose.connection;
  db.on('error', function() {
    throw new Error('unable connect to database');
  });

  //glob.sync는 absolute directory를 기준으로 검색하기 때문에 반드시 path에 대한 정보가 필요하다.
  var models = glob.sync(rootPath + '/models/*.js');
  models.forEach(function(model) {
    require(model);
  });
};

exports.init = init;

위와 같은 db connection을 이용하는 간단한 CRUD service를 작성할 때, code는 다음과 같이 구성될 수 있다.

var mongoose = require('mongoose');
var Player = mongoose.model('Player');
var ObjectId = mongoose.Types.ObjectId;

var findAll = function(func) {
  return Player.find(function(err, players) {
    if(func) {
      func(players);
    }
  });
};

var save = function(name, defaultAmount) {
  var player = new Player({
    name: name,
    defaultAmount: defaultAmount
  });
  return player.save(function(err) {
    throw new Exception(err);
  });
};

var findOne = function(id, func) {
  var objectId = mongoose.Types.ObjectId(id);
  Player.findById(objectId, func);
};

var find = function(query, func) {
  Player.find(query, func);
};

var update = function(id, name, defaultAmount, func) {
  var objectId = mongoose.Types.ObjectId(id);
  Player.update(
    {_id: objectId},
    {
      $set: {
        name: name,
        defaultAmount: defaultAmount
      }
    }, { upsert: false, multi: true }, func);
};

exports.update = update;
exports.findOne = findOne;
exports.findAll = findAll;
exports.save = save;
exports.find = find;

이에 대한 test code는 다음과 같다.

var dbConnection = require('../app/lib/db-connect.js');
dbConnection.init();
var playerService = require('../app/lib/playerservice.js');

describe('mongoDb test', function() {
  it('playerService.findAll', function(done) {
    var conn = playerService.findAll(function(players) {
      expect(players.length).not.toBe(0);
      players.forEach(function(player) {
        expect(player.defaultAmount).not.toBe(0);
      });
      done();
    });
    expect(!!conn).toBe(true);
  });

  it('playerService.save', function() {
    var result = playerService.save('playerName', 10);
    expect(result).not.toBe(null);
  });

  it('playerService.find', function(done) {
    playerService.find({}, function(err, players) {
      expect(players.length).toBe(1);
      players.forEach(function(player) {
        console.log(player.name);
      });
      done();
    });
  });

  it('playerService.findOne', function(done) {
    var id = "5469751de83eaf6e34434c5e";
    playerService.findOne(id, function(err, player) {
      console.log(err);
      expect(!!err).toBe(false);
      expect(player).not.toBe(null);
      console.log(player);
      console.log(player.name);

      done();
    });
  });

  it('playerService.update', function(done) {
    var id = "5469751ae83eaf6e34434c55";
    playerService.update(id, "changedName2", 100, function(err, model) {
      expect(!!err).toBe(false);
      done();
    });
  });

  it('players list', function(done) {
    var mongoose = require('mongoose');
    var Player = mongoose.model('Player');
    var playersResult = null;
    Player.find(function(err, players) {
      expect(players.length).not.toBe(0);
      players.forEach(function(p) {
        expect(p.defaultAmount).not.toBe(0);
      });
      done();
    });
  });
});


저작자 표시 동일 조건 변경 허락
신고
Posted by xyzlast Y2K

밤새 '민물장어의 꿈'을 계속 들으면서 출근을 했다.


중/고등학교때 음악을 많이 듣는 편은 아니였지만, 나를 힘들게 하던 여러 일들을 잠시 잊게 하고, 나아가는 힘을 주었던것들은 지금 생각해보면 책과 음악, 친구들이였던것 같다. 그 중에서 음악은 015B, NEXT 이정도가 가장 기억에 남는다. (전람회는 015B에서 나중에 파생되는 거나 다름 없으니까....)


그 중 하나가 갔다. 이렇게 갑자기. 그리고 이렇게 허무하게.


나이가 들면서, 그의 음악을 잘 안듣고 있던 것은 사실이지만...' 해에게서 소년에게'와 '먼 훗날 언젠가'는 노래방에서의 단골 주제가가 되었고, 힘들때 다시 한번씩 들어본던 음악이였는데...


잘가요 마왕. 고마웠어요 좋은 음악을 나에게 들려줘서.

그리고 앞으로도 고마울거에요. 당신이 이 음악들을 남겨줘서.


바이바이. R.I.P




저작자 표시 동일 조건 변경 허락
신고
Posted by xyzlast Y2K
directive는 test하기에 가장 어려운 객체입니다. VIEW의 html element이 특정 HTML로 변경되는 process를 통과해야지 되며, 이 HTML에 event가 발생했을 때의 동작을 모두 테스트해야지 되기 때문입니다. 다음과 같은 directive code를 sample로 한번 알아보도록 하겠습니다.
angular.module('fmsmobilewebApp').directive('codeDropdown', function (ClassificationService, $timeout) {
  return {
    template: '<select class="ds-select" ng-model=ngModel ng-options="o.id as o.name for o in optionData" ></select> <button ng-click="load()">로드</button>',
    restrict: 'E',
    scope: {
      ngModel: '=',
      codeType: '@',
      parentCodeId: '@',
      styleValue: '@',
      emptyData:'@'
    },
    link: function postLink(scope, element, attrs) {
      scope.optionData = [];

      var init = function() {
        ClassificationService.getList(scope.codeType, scope.parentCodeId, listup);
      };

      scope.load = function() {
        init();
      };

      var listup = function(codes) {
        var items = [];
        if(scope.emptyData) {
          items.push({ text: scope.emptyData, value: ''});
        }
        for(var i = 0 ; i < codes.length ; i++) {
          items.push(codes[i]);
        }
        if(scope.ngModel == null || scope.ngModel == '') {
          scope.ngModel = items[0].value;
        }
        if(scope.styleValue != null && scope.styleValue != '') {
          $(element).find('select').attr('style', scope.styleValue);
        }
        scope.optionData = items;
        $timeout(function() {
          scope.$apply();
        });
      };
    }
  };
});

위 directive는 comboBox과 button을 표시하는 directive입니다. button을 click하면 load method가 호출되는 구조로 되어 있습니다.
scope의 형태를 한번 봐주시길 바랍니다.

이 directive는 다음과 같은 특징을 가지고 있습니다.

* Service에 대한 dependency를 갖는다.
* VIEW(html) 요소를 directive의 template으로 치환한다.
* controller의 scope의 value에 대한 bi-direction을 갖는 scope variable이 존재한다. (ng-model)
* button에 대한 외부 event가 존재한다.
  <button ng-click="load()">로드</button>

이와 같은 directive를 테스트 하기 위한 방법에 대해서 알아보도록 하겠습니다.

Service에 대한 dependency

directive는 생성되는 시점이 controller나 service와는 조금 다릅니다. controller는 URL의 호출시에 controller를 생성시키지만, directive의 경우에는 page의 loading이 다 마쳐진 이후에 $compile 과정을 통해서 directive가 생성되게 됩니다. 따라서, directive를 사용하기 위해서 필요한 html element, css의 선언이전에 dependency를 inject를 해야지 됩니다.

따라서, beforeEach에서 provider를 얻어내, service를 재정의해서 inject할 필요가 있습니다. 다음은 위 directive의 ClassificationService를 재정의하는 code입니다.

  beforeEach(module('fmsmobilewebApp', function($provide) {
    var classificationService = {
        getList: function(codeType, parentCodeId, func) {
          var codes = [];
          for(var i = 0 ; i < 20 ; i++) {
            codes.push({ id: 'id' + i.toString(), name: 'name-' + i.toString() });
          }
          if(func) {
            func(codes);
          }
          return true;
        }
      };
    $provide.value('ClassificationService', classificationService);
  }));

provider에 사용되는 ClassificationService를 setting해주는 형태입니다. 기본적으로 unit test는 whitebox test기법이기 때문에, 우리가 사용하는 service와 그 method에 대한 정보는 아는 것으로 가정하기 때문에 최소한으로 필요한 service code만을 재정의해서 만들어주는 것이 좋습니다.

VIEW(html)의 치환

지금까지 모든 angularJS의 unit test는 test 대상이 되는 객체를 얻어와서 test를 진행했습니다. 그렇지만 directive의 경우에는 좀 다릅니다. directive의 생성은 html이 있어야지 됩니다. html을 치환하는 과정을 compile이라고 합니다. 다음은 compile을 진행하는 과정을 test code에서 나타냅니다.

  it('code dropdown test code', inject(function ($compile) {
    element = angular.element('<code-dropdown ng-model="ngModel" code-type="system" parent-code-id="0801"></code-dropdown>');
    element = $compile(element)(scope);
    // display directive's compiled html
    console.log(element.html());
  });

눈으로 html을 보게 되면, 정상적인 test code라고 할 수 없습니다. 다음과 같이 만들어져야지 되는 html element의 숫자를 확인하는 것이 좋습니다.

    element = angular.element('<code-dropdown ng-model="ngModel" code-type="system" parent-code-id="0801"></code-dropdown>');
    element = $compile(element)(scope);
    //sync parent scope and directive scope
    scope.$digest();
    expect(directiveScope.optionData.length).not.toBe(0);
    expect(element.find('option').length).toBe(20);

scope의 binding

directive의 scope의 value는 크게 두가지 type이 있습니다. bi-direction으로 동작하는 scope의 property와 내부에서만 사용되는 isolateScope가 바로 그것입니다. 기본적으로 directive는 scope의 type이 =으로 지정된 경우를 제외하고 isolateScope를 생성하게 됩니다. directive내부의 scope를 접근하기 위해서는 기존 test code에서 사용한 scope로는 접근이 불가능합니다. 이 부분이 기존의 controller code와의 가장 큰 차이가 됩니다.

directive의 scope를 얻어내는 test code는 다음과 같습니다.

    element = angular.element('<code-dropdown ng-model="ngModel" code-type="system" parent-code-id="0801"></code-dropdown>');
    element = $compile(element)(scope);
    //sync parent scope and directive scope
    scope.$digest();

    //access directive scope
    expect(element.isolateScope).toBeDefined();
    expect(element.isolateScope()).not.toBeNull();

    var directiveScope = element.isolateScope();
    expect(directiveScope.ngModel).toBe('id0');

    //change parent scope value
    scope.ngModel = 'id2';
    scope.$digest();
    expect(directiveScope.ngModel).toBe('id2');

    directiveScope.ngModel = 'id1';
    directiveScope.$digest();
    expect(scope.ngModel).toBe('id1');

마지막 6 line을 주의깊게 볼 필요가 있습니다. parent scope value와 bi-direction 되어 있기 때문에 parent scope의 값을 변경하거나, directive의 scope 값을 변경하는 것 모두 양쪽에 영향을 주고 있는 것을 볼 수 있습니다.

button과 같은 event가 binding 되어 있는 경우

button과 같은 사용자의 event가 binding이 되어 있는 경우에는 event에 대한 처리를 code로 구성할 수 있습니다.
다음 test code를 보는 것이 설명이 더 빠릅니다.

    //Click Event
    element.find('button')[0].click();
    expect(directiveScope.optionData.length).not.toBe(0);
    expect(element.find('option').length).toBe(20);

element에서 event를 handling시킬 button을 찾아낸 후, click event를 전달할 수 있습니다.

추가: 외부 html을 template으로 사용하는 경우

directive를 작성할 때, template을 html 파일로 따로 관리하는 경우가 많습니다. directive의 크기가 너무 크거나, html로 관리하는 것이 관리 focus상 유리할 때 종종 이런 방법을 택하지요. 외부 html을 사용하는 경우, directive code는 다음과 같이 구성됩니다.

angular.module('fmsmobilewebApp').directive('loading', function () {
  return {
    templateUrl:'templates/loading.html',
    restrict: 'E',
    require: '^ngModel',
    transclude: true,
    scope: {
      ngModel: '='
    }

  };
});

여기서 문제가 되는 것은 templateUrl의 위치는 yo기준으로 app folder위치의 상대값입니다. 그렇지만 우리가 grunt test를 통해서 테스트를 실행하는 path는 ../app 이 됩니다. 따라서, 저 url은 절대로 로드할 수 없는 위치가 됩니다. 이 경우, 다음과 같은 karma.conf.js 수정이 필요합니다.

먼저, loading 해야지 되는 html을 files에 추가합니다.

    files: [
      // bower components
      'app/bower_components/jquery/dist/jquery.js',
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      'app/bower_components/angular-resource/angular-resource.js',
      'app/bower_components/angular-cookies/angular-cookies.js',
      'app/bower_components/angular-sanitize/angular-sanitize.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/bower_components/angular-touch/angular-touch.min.js',
      'app/bower_components/lodash/dist/lodash.min.js',
      'app/bower_components/mobile-angular-ui/dist/js/mobile-angular-ui.min.js',
      'app/bower_components/restangular/dist/restangular.min.js',
      'app/bower_components/angular-local-storage/angular-local-storage.min.js',
      // 3rd party library
      'app/library/kendo/js/kendo.all.min.js',
      // Test target
      'app/scripts/*.js',
      'app/scripts/**/*.js',
      // Test code
      'test/mock/**/*.js',
      'test/spec/**/*.js',
      // Template Files
      'app/templates/*.html'
    ],

다음에, preprocessor 단계에서 html로 로딩된 항목을 javascript로 변경시켜, cache에 저장합니다.

    preprocessors: {
      'app/templates/*.html': 'html2js'
    },

이제 저장된 html은 $templateCache를 통해서 얻어올 수 있게 됩니다. test code의 beforeEach에서 다음과 같이 처리해줍니다.

  beforeEach(inject(function($templateCache) {
    template = $templateCache.get('app/templates/loading.html');
    expect(template).not.toBeNull();
    $templateCache.put('templates/loading.html', template);
  }));

$templateCache에서 먼저 로딩된 template을 읽어주고, directive에서 사용하는 templateUrl 값에 그 값을 넣어주면, directive가 $compile될 때 templateCache값을 참고해서 처리하게 됩니다.

Summary

지금까지 angularJS를 이용한 web application의 unit test 방법에 대해서 알아봤습니다. 약간의 정리를 하자면, 다음 원칙을 지켜가면서 test code를 작성하면 좋습니다. 이는 개발 code 작성도 비슷한 느낌이 될 수 있을것입니다.

  1. filter, non HTTP service 부터 test 및 code를 작성합니다.
  2. HTTP service의 경우, 호출되는 URL과 parameter에 대한 test를 작성합니다.
  3. HTTP service의 경우, input이 json type인 경우에는 input data에 대한 validator를 따로 작성해서 test하는 것이 좋습니다.
  4. Controller는 사용자 scenario를 정해서 TDD(test driven development)로 작성하는 것이 좋습니다.

제일 중요한 것은 unit test는 white box test입니다. 개발자가 내용을 다 안다는 것을 가정하고 있습니다. 최종적인 UI에 대한 test는 반드시 하는 것이 좋습니다. unit test는 UI에 대한 통합 테스트를 진행하기 쉽게 좀더 신경쓸 내용들을 줄이는 용도로 사용하는 것이지, UI에 대한 통합 테스트를 대치할 수는 없습니다.

모두들 Happy coding 하세요.


저작자 표시 동일 조건 변경 허락
신고
Posted by xyzlast Y2K


티스토리 툴바