Question

这对你来说似乎很愚蠢，但是我担心过去几天，因为我对angularjs和jasmine也很陌生

我在这里从https://github.com/angular/angular-seed下载了angular-seed-master 目录结构是：

enter image description here

在我的app / js文件夹中，我有一个名为controllers.js的文件，其代码为

'use strict';

/* Controllers */

angular.module('myApp.controllers', []).controller('MyCtrl1', ["$scope",function($scope) {

    $scope.name = 'Hello World!'; 

  }]);

在同一文件夹中创建名为home.tests.js的文件，其代码如

'use strict';

describe('MyCtrl1', function () {
            var scope, $httpBackend; //we'll use these in our tests

            //mock Application to allow us to inject our own dependencies
            beforeEach(angular.mock.module('myApp'));
            //mock the controller for the same reason and include $rootScope and $controller
            beforeEach(angular.mock.inject(function ($rootScope) {
                    //create an empty scope
                    scope = $rootScope.$new();
                    //declare the controller and inject our empty scope
                    $controller('MyCtrl1', {
                        $scope: scope
                    });
                }));
                // tests start here
                it('should have variable text = "Hello World!"', function () {
                    expect(scope.text).toBe('Hello World!');
                });
            });

我的业力档案就像：

// Karma configuration
// Generated on Tue Jul 15 2014 14:30:06 GMT+0530 (India 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: [
    'app/bower_components/angular/angular.js',
    'app/bower_components/angular-route/angular-route.js',
    'app/bower_components/angular-mocks/angular-mocks.js',
    'app/js/*.js'
    ],


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


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
    },


    // 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
  });
};

已将该文件包含在index.html中：

我的index.html文件：

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="utf-8">
  <title>My AngularJS App</title>
  <link rel="stylesheet" href="css/app.css"/>
</head>
<body>
  <ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul>

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <link data-require="jasmine" data-semver="2.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.css" />
    <script data-require="json2" data-semver="0.0.2012100-8" src="//cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>
    <script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine.js"></script>
    <script data-require="jasmine" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/jasmine-html.js"></script>
    <script data-require="jasmine@*" data-semver="2.0.0" src="//cdn.jsdelivr.net/jasmine/2.0.0/boot.js"></script>
    <script data-require="angular.js" data-semver="1.2.16" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script data-require="angular-mocks" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular-mocks.js"></script>    

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular/angular-route.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script> <!--Controller file-->
  <script src="js/home.tests.js"></script> <!--Testing file-->
</body>
</html>

因此，当我使用我的域http://local.collective.net/#/view1

运行文件时

错误看起来像： enter image description here

请让我知道，问题是什么。

提前致谢

Answer 1

有几个错误：

angular.mock.module（或别名为module）的作用是将模块加载到测试中。

您正在尝试加载myApp模块以测试不在该模块中但myApp.controllers的控制器。那里的点没有任何类型的关系或继承，它只是一个名称，所以如果你在那个确切的模块上有控制器，你需要加载它。

另一方面，在测试中，您使用的是$controller，但是您还没有注入它，而且当您想说scope.text时，您还期望scope.name。

看到它正常工作here

如何测试单元测试文件angularjs

1 个答案: