Angularjs 控制器的 $scope 未定义而单元测试和使用谷歌闭包库答案

【问题标题】：Angularjs controller's $scope undefined whille unit testing and using Google Closure LibraryAngularjs 控制器的 $scope 未定义而单元测试和使用谷歌闭包库
【发布时间】：2013-06-18 17:45:53
【问题描述】：

我的问题很简单但很难回答...如何使用谷歌闭包工具将 $scope 注入到正在测试的 AngularJs 控制器。

控制器很简单，基本上就是通过_getOrganisations函数向服务器发起http请求

这里是实际控制人：

goog.provide 'MyModule.controllers.Menu'

MyModule.controllers.Menu = ($scope, $http, $location, SomeService) ->
  _getOrganisations = () ->

    $http({SomeRequestOptions})
      .success(_handleGetOrganisationsSuccessCallback)
      .error(_handleGetOrganisationsErrorCallback)

  _handleGetOrganisationsSuccessCallback = (result, status) ->
    $scope.organisations = result

  _handleGetOrganisationsErrorCallback = (err, status) ->
    [...]

  $scope.toggleMenu = () ->
    angular.element('.nav-collapse').collapse('toggle')

  _getOrganisations()

这是我尝试测试控制器的方法

describe 'menu controller', () =>

    result=
        org1 : ''
        org2 : ''
        org3 : ''

    beforeEach () ->
        goog.require 'MyModule.controllers.Menu'

        inject ($rootScope, $controller, $http, $httpBackend) ->
            scope = $rootScope.$new()
            httpBackend = $httpBackend
            httpBackend.whenGET({SomeRequestOptions}).respond result
            menuController = $controller new MyModule.controllers.Menu(), {$scope : scope, $http : $http}

    it 'should get organisations properly', () ->
        expect(scope.organisations).toEqual(result)

当我尝试将我的实际控制器分配给 menuController 时，$scope 未定义...我在这里缺少什么？

【问题讨论】：

标签： angularjs jasmine google-closure-compiler google-closure-library

【解决方案1】：

我发现您的测试中的代码存在范围问题。我直接在代码中注释了。

describe 'menu controller', () =>

    result=
        org1 : ''
        org2 : ''
        org3 : ''

    beforeEach () ->
        goog.require 'MyModule.controllers.Menu'

        inject ($rootScope, $controller, $http, $httpBackend) ->
            # here you define a variable inside a function...
            scope = $rootScope.$new()
            httpBackend = $httpBackend
            httpBackend.whenGET({SomeRequestOptions}).respond result
            menuController = $controller new MyModule.controllers.Menu(), {$scope : scope, $http : $http}

    it 'should get organisations properly', () ->
        # here you try to access the variable from outside the function
        expect(scope.organisations).toEqual(result)

我还没有测试过代码，但我很确定这样的事情会解决它。根据这个帖子。 http://odetocode.com/blogs/scott/archive/2013/06/10/simple-unit-tests-with-angularjs.aspx

describe 'menu controller', () =>
    scope = null
    result=
        org1 : ''
        org2 : ''
        org3 : ''

    beforeEach () ->
        goog.require 'MyModule.controllers.Menu'

        inject ($rootScope, $controller, $http, $httpBackend) =>
            scope = $rootScope.$new()
            httpBackend = $httpBackend
            httpBackend.whenGET({SomeRequestOptions}).respond result
            menuController = $controller new MyModule.controllers.Menu(), {$scope : scope, $http : $http}

    it 'should get organisations properly', () ->
        expect(scope.organisations).toEqual(result)

【讨论】：