窗口：‘TypeError’不是函数(计算'angular.element(window).width()')

Question

嗨，我有一个非常复杂的应用程序，我一直在为它编写Karma单元测试。我有很多测试都写得很成功，运行也很成功，但后来我在应用程序中更改了一些东西，现在我收到了大量的错误。我盯着它看了好几个小时都搞不明白。

我收到以下错误：

TypeError: 'undefined' is not a function (evaluating 'angular.element(window).width()')
    at /Users/Desktop/app/scripts/app.js:9
    at invoke (/Users/Desktop/app/bower_components/angular/angular.js:3869)
    at /Users/Desktop/app/bower_components/angular/angular.js:3715

我的配置文件如下所示

// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html

module.exports = function(config) {
  config.set({
    // base path, that will be used to resolve files and exclude
    basePath: '',

    // testing framework to use (jasmine/mocha/qunit/...)
    frameworks: ['jasmine'],

    // list of files / patterns to load in the browser
    files: [
  '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-bootstrap/*.js',
  'app/bower_components/angular-ui-date/src/date.js',
  'app/bower_components/angular-ui-sortable/*.js',
  'app/bower_components/angular-ui-router/src/*.js',
  'app/bower_components/d3/*.js',
  'app/bower_components/nvd3/*.js',
  'app/bower_components/angularjs-nvd3-directives/src/directives/*.js',
  'app/bower_components/jquery/dist/*.js',
  'app/bower_components/ng-grid/*.js',
  'app/bower_components/ng-grid/build/*.js',
  'app/bower_components/ng-grid/plugins/*.js',
  'app/scripts/app.js',
  'app/bower_components/angular',
  'app/scripts/*.js',
  'app/scripts/**/*.js',
  'app/scripts/***/**/*.js',
  'test/client/spec/**/*.js'
    ],

// list of files / patterns to exclude
exclude: [
'app/bower_components/*/angular-scenario.js', 
'app/bower_components/angular-ui-router/src/compat.js',
'app/bower_components/angularjs-nvd3-directives/src/directives/intro.js',
'app/bower_components/angularjs-nvd3-directives/src/directives/outro.js'
],

// web server port
port: 8080,

// level of logging
logLevel: config.LOG_INFO,


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


// Start this browser
browsers: ['PhantomJS'],

//Coverage Options
preprocessors: {
  'app/scripts/**.js': 'coverage'
},
reporters: ['dots', 'coverage']

});
};

我正在测试的控制器：

angular.module("vizApp").controller("BasicSearchCtrl", function ($rootScope, $scope, SearchService) {
    "use strict";

    $scope.searchContent = null;

    $scope.$watch("searchContent", function (newVal, oldVal, scope) {
    SearchService.setBasicSearch($scope.searchContent);
    });

});

我要写的测试是：

describe("Controller: BasicSearchCtrl", function () {
    "use strict";
    var scope, BasicSearchController, httpBackend, searchSerivce;

    //load the controller"s module
    beforeEach(module("vizApp"));

    beforeEach(function () {
        angular.mock.inject(function ($injector) {
        httpBackend = $injector.get("$httpBackend");
        });
    });

//initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope, $injector) {

    // create a new child scope
    scope = $rootScope.$new();

    scope.SearchService = $injector.get("SearchService");

    //create a new instance of basic search controller
    BasicSearchController = $controller("BasicSearchCtrl", { $scope: scope });

}));

//check the initial state of the search content
it("very basic search", function () {

    expect(scope.searchContent).toBeUndefined;
    expect(scope.SearchService.basicSearch).toBeUndefined;

});

但是我一直在app.js上得到这个神秘的error...about代码行9，但是app.js看起来像这样，所以我不明白。

angular.module('vizApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.bootstrap',
'ui.router',
'nvd3ChartDirectives',
'ngGrid',
'ui.sortable',
'ui.date'
]).config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {

'use strict';

// For any unmatched url, redirect to /
$urlRouterProvider.otherwise('/');

Answer 1

width()不受angular支持，angular在内部依赖于jqLite https://docs.angularjs.org/api/ng/function/angular.element。

您必须包含jquery并使用jquery的width()函数，或者更好的做法是注入Angular的$window服务并使用$window.innerWidth、$window.offsetWidth或$window.clientWidth。

Answer 2

如果你真的想使用jquery而不是jqlite，那么你的模拟配置就是问题所在：

只需将jquery.js移动到文件列表中的第一个位置。如果jquery是在angular.js之后，你只会得到一个没有视窗方法的jqlite对象。