Angular 使用 EJS 索引的 Karma-Jasmine 单元测试

Question

我正在尝试在 Angular 项目上实施前端单元测试，该项目使用服务器端模板引擎来呈现 index.ejs 或 index.dust。此文件还包含一个全局变量 var cdn = "http://s3.amazon.com";，它在整个 angular 应用程序中使用。

当我运行start karma karma.config.js时，我收到ReferenceError: cdn is not defined: app.js L20。

当我使用 Node 运行我的应用程序时，cdn var 可用，但是当我尝试运行在我的 Angular Ctrls 上进行单元测试时，我收到上面的错误。

我尝试使用 karma-ejs-preprocessor 模块（此处：https://www.npmjs.com/package/karma-ejs-preprocessor）在我的测试中实例化 cdn，但出现新错误：No provider for "framework: jasmine"。

index.ejs

<!doctype html>
<html lang="en" ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>Test</title>

    <script src="./bower_components/angular/angular.js"></script>
    <script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="./bower_components/angular-mocks/angular-mocks.js"></script>
    <script src="./bower_components/angular-resource/angular-resource.js"></script>

    <script src="./app.js"></script>

  </head>
  <body>
    <h1>Angular Unit Testing</h1>

    <script>
      var cdn = "./";
    </script>

    <main>
      <div ui-view></div>
    </main>
  </body>
</html>

karma.conf.js

    // Karma configuration
// Generated on Sat Mar 12 2016 02:53:19 GMT-0800 (Pacific Standard Time)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      'client/src/bower_components/angular/angular.js',
      'client/src/bower_components/angular-ui-router/release/angular-ui-router.js',
      'client/src/bower_components/angular-mocks/angular-mocks.js',
      'client/src/bower_components/angular-resource/angular-resource.js',
      'client/src/app.js',
      'tests/test.js'
    ],


    // list of files to exclude
    exclude: [
    ],

    plugins: [
      'karma-qunit',
      'karma-ejs-preprocessor',
      'karma-jasmine',
      'karma-chrome-launcher'
    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      'server/_views/index.ejs': ['ejs']
    },

    ejsOptions: {
      parentPath: './server/_views/index.ejs'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

test.js

describe('State1Ctrl', function () {
  var $rootScope,
      $scope,
      controller;

  beforeEach(function () {
    module('app', 'ui.router');

    inject(function ($injector) {
      $rootScope = $injector.get('$rootScope');
      $scope = $rootScope.$new();
      controller = $injector.get('$controller')('State1Ctrl', { $scope: $scope } );
    });
  });

  describe('Init', function () {
    it('should be init', function () {
      expect($scope.test).toBeTruthy();
    });
  });
});

app.js

(function() {
  'use strict';

  angular.module('app', [
    'ui.router'
  ])

  .controller('State1Ctrl', ['$scope', function($scope) {
    console.log('cdn2', cdn);
    $scope.test = 'hi';
    console.log($scope.test);
  }])

  .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
     // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/state1");

  // cdn is available here
  console.log("cdn: ", cdn);

  // Now set up the states
  $stateProvider
    .state('state1', {
      url: "/state1",
      templateUrl: cdn + "views/state1.html",
      controller: 'State1Ctrl'
    })
    .state('state1.list', {
      url: "/list",
      templateUrl: "views/state1.list.html",
      controller: function($scope) {
        $scope.items = ["A", "List", "Of", "Items"];
      }
    })
    .state('state2', {
      url: "/state2",
      templateUrl: "views/state2.html"
    })
    .state('state2.list', {
      url: "/list",
      templateUrl: "views/state2.list.html",
      controller: function($scope) {
        $scope.things = ["A", "Set", "Of", "Things"];
      }
    });

  }]);

})();

此处的回购演示问题：https://github.com/superveetz/Loopback-Tests.git

npm install 来自基地。
bower install 来自 /client/src
karma start karma.conf.js 来自基地。
node .从基地看到cdn正常可用

Answer 1

请在 karma.config 中更新您的插件部分。

plugins: [
  'karma-qunit',
  'karma-ejs-preprocessor',
  'karma-jasmine',
  'karma-chrome-launcher'
],

和运行这些命令。

npm install karma-jasmine --save-dev

npm install karma-chrome-launcher --save-dev

更多详情请查看here

编辑 1：

请进行更改。

inject(function ($injector) {
      $rootScope = $injector.get('$rootScope');
      $scope = $rootScope.$new();
      controller = $injector.get('$controller')('State1Ctrl', { $scope: $scope } );
    });

而不是 $rootScope.new() 使用 $rootScope.$new()

定义 cdn console.log('cdn2', cdn) 你的 cdn，这样它就不会停止你的测试脚本

Angular 使用 EJS 索引的 Karma-Jasmine 单元测试

Angular Karma-Jasmine Unit Testing with EJS index

javascript

unit-testing

ejs

angularjs

karma-jasmine