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的第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

angular不支持width（），它內部依賴於jqLit​​e https://docs.angularjs.org/api/ng/function/angular.element 。

您將必須包含jquery並使用jquery的width（）函數，或者更好地注入Angular的$ window服務並使用$ window [0] .innerWidth或$ window [0] .offsetWidth或$ window [0] .clientWidth。

Answer 2

如果您真的想使用jquery而不是jqlite，那么您的模擬配置就是問題所在：

只需將jquery.js移動到文件列表中的第一位置即可。 如果jquery在angular.js之后，則只會得到一個沒有視口方法的jqlite對象。