使用EJS指数进行Angma Karma-Jasmine单元测试

Question

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

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

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

我尝试使用karma-ejs-preprocessor模块（这里： https ： cdn在我的测试中实例化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"];
      }
    });

  }]);

})();

Repo在这里展示了问题： https://github.com/superveetz/Loopback-Tests.git ： https://github.com/superveetz/Loopback-Tests.git

npm install从base npm install 。
bower install从/client/src bower install
karma start karma.conf.js从base karma start karma.conf.js 。
node . 从基地看cdn通常是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

有关详细信息，请在此处查看

编辑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所以它不会停止你的测试脚本

使用EJS指数进行Angma Karma-Jasmine单元测试

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-03-12 12:27:21

使用EJS指数进行Angma Karma-Jasmine单元测试

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-03-12 12:27:21

解决方案1
1 已采纳 2016-03-12 12:27:21