Testing AngularJs + Require.js with Karma + Jasmine

requirejs.config({
    //다른 상대경로들의 베이스가 될 경로. 
    //'js' 디렉토리 안에 js파일들이 다 들어있으므로 'js'로 설정.
    baseUrl: "js",

    //사용할 모듈들
    //이름 : 상대 경로
    paths: {
        app         : "app",
        angular     : "./lib/angular/angular",
        jquery      : "./lib/jquery/dist/jquery",
        "angular-ui-router" : "./lib/angular-ui-router/release/angular-ui-router"
    },
    packages: [],

    //AMD를 따르지 않는 모듈들을 AMD 형식으로 노멀라이징 해준다.
    shim: {
        angular: {
            exports: "angular" //파라메터에 주입될 객체나 변수
        },
        jquery :{
            exports: "jQuery"   
        },
        "angular-ui-router": {
            deps: ["angular"] //해당 모듈의 의존성
        },
    }
});

//ui-route를 사용할 것이므로 main.js에서 미리 정의해둔 'angular-ui-router'를 의존성에 추가해준다.
define([
    'angular',             //의존성 모듈 목록
    'angular-ui-router'
], function(angular){      //팩토리 함수. 의존성 모듈을 파라키터로 순서대로 받는다.
    return angular.module('app',['ui.router']); //외부에 노출될 모듈을 리턴한다.
});

define(['app'],function(app){   
    function Controller($scope){
        $scope.name = "World";
    }

    app.controller('SampleController', ['$scope', Controller]);
})

define(['app'],function(app){

    //ui-route 관련 설정
    app.config(function($urlRouterProvider, $locationProvider, $stateProvider) {

        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });

        $urlRouterProvider.otherwise('/');
        
        $stateProvider
        .state('main', {
            url: '/',
            templateUrl: 'partials/main.html', //`ui-view`에 들어갈 html 템플릿. 템플릿 파일은 뒤에서 작성한다.
            controller: 'SampleController' 
            //여기서 controller를 지정하려면, SampleController가 app에 등록되어 있어야 한다. 이 다음에 나오는 SampleController.js에서 등록한다.
        });
    });
})

angular.bootstrap(document, ['app']);

requirejs([
    'angular',
    'app',
    'route',
    './controllers/SampleController'
], function (angular) {
    angular.bootstrap(document, ['app']);
});

/*main.js*/
requirejs.config({
    baseUrl: "js",
    paths: {
        app         : "app",
        route       : "route",
        angular     : "./lib/angular/angular",
        jquery      : "./lib/jquery/dist/jquery",
        "angular-ui-router" : "./lib/angular-ui-router/release/angular-ui-router"
    },
    packages: [],
    shim: {
        angular: {
            exports: "angular"
        },
        jquery :{
            exports: "jQuery"   
        },
        "angular-ui-router": {
            deps: ["angular"]
        },
    }
});

requirejs([
    'angular',
    'app',
    'route',
    './controllers/SampleController'
], function (angular) {
    angular.bootstrap(document, ['app']);
});

module.exports = function(config) {
  config.set({
    basePath: 'js', //모든 설정의 상대경로 기준이 될 경로이다.
    frameworks: ['jasmine', 'requirejs'],
    files: [
      'test-main.js', //테스트에 직접 사용될 파일
      {pattern: '**/*.js', included: false} //서버에서 제공만 할 파일
    ],
    exclude: [],
    preprocessors: {},
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['PhantomJS'],
    singleRun: false
  })
}

//앞부분은 테스트 파일을 모두 가져와서 allTestFiles라는 배열에 넣는 부분이다.
//TEST_REGEXP를 보면 **/*spec.js, **/*test.js 파일들을 로딩하게 되어 있다.

var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i; //다른 형식을 원하면 이 부분의 정규표현식을 변경하면 된다.

Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
    allTestFiles.push(normalizedTestModule);
  }
});


//앞서 main.js에서 했던 설정과 유사하게 require.js 설정을 수행한다.
require.config({
  
  baseUrl: '/base', //karma.conf.js에서 basePath로 설정한 Path의, 서버에서의 주소이다.
  deps: allTestFiles, //앞에서 만든 allTestFiles 를 로딩하는 부분
  callback: window.__karma__.start,

  //테스트에서 사용할 의존성을 설정한다.
  paths: {
    angular: "lib/angular/angular",
    "angular-mocks": "lib/angular-mocks/angular-mocks",
  },
  shim: {
    angular: { exports: 'angular' },
    jquery: { exports: 'jQuery' },
    "angular-mocks": { deps: ['angular'] }
  }
});

//필요한 "AMD"의존성을 주입받는다.
define(['./SampleController', 'angular', 'angular-mocks'],
  function(SampleController) {

    //test code 시작
    describe('SampleController', function () {
      var ctrl, scope;
      
      //각각 테스트를 시작하기 전에 필요한 "angular모듈"들을 주입받는다.
      beforeEach(inject(function($controller, $rootScope) {
        scope = $rootScope.$new(); //매번 새로운 scope에서 깔끔하게 테스트
        ctrl = $controller(SampleController, {$scope: scope}); //방금 생성한 scope 기반으로 controller를 mocking한다.
      }));

      it('has default name "World"', function() {
        expect(scope.name).toBe("World"); //beforeEach에서 생성한 scope에 대해서 controller가 제대로 작동했는지 test.
      });
    });
  });

/*js/directives/SampleDirective.js*/
define(['app'],function(app){
  function sampleDirective(){
    return {};
  }

  app.directive('sampleDirective', sampleDirective);
  
  return sampleDirective;
});

/*js/directives/SampleDirective.spec.js*/

//directive와 필요한 AMD를 로드
define(['./sampleDirective', 'angular', 'angular-mocks'],
function(sampleDirective) {

  describe('sampleDirective', function () {
    //테스트에 사용할 전역변수
    var $compile, $rootScope, element;
    var name = 'World';

    //directive를 테스트하기 위해서는 html을 compile해야 하므로 module이 필요하다.
    //app.js는 test-main.js에 등록이 되어있고, SampleDirective에 의존성으로 설정했으므로  
    //이미 로드되어있다. ng-mock.module로 mocking할 수 있다.
    beforeEach(module("app")); 

    //inject로 angular 모듈을 주입받을 때, 나중에 집어넣을 변수이름을 짓기 용이하게 하기 위해서
    //앞뒤로 _를 붙여서 주입받을 수 있다.(자동으로 _를 제거해서 모듈을 주입해준다.)
    beforeEach(inject( function(_$compile_, _$rootScope_) {
      //따라서 아래와 같이 저장할 변수명을 좀더 편하게 지정할 수 있다.
      $compile = _$compile_;
      $rootScope = _$rootScope_;

      //매 테스트 하기 전마다 html을 compile하고 scope를 digest해준다.
      element = $compile('<sample-directive name="'+name+'"></sample-directive>')($rootScope);
      $rootScope.$digest();
    }));

    //directive가 잘 작동하는지 테스트한다.
    it('gets attr value', function() {
      expect($rootScope.name).toBe(name);
    });

    it('compile template correctly', function() {
      expect(element.html()).toContain("Hello, "+name);
    });
  });
});

(function(){
  'use strict';
  define(['app'],function(app){
    function sampleDirective(){
      return {
        restrict: 'E', //element directive
        template: 'Hello, {​{name}}!', //scope의 name에게 인사하는 내용을 집어넣는다.
        link: function (scope, element, attr){
          scope.name = attr.name; // name attr을 받아서 scope에 넣는다.
        }
      };
      
    }

    app.directive('sampleDirective', sampleDirective);
    
    return sampleDirective;
  });
})();