AngularJS模拟bootstraps uibModal

时间:2016-05-23 05:01:00

标签: angularjs coffeescript mocking jasmine angular-ui-bootstrap

我正在使用带有AngularJS 1.5的bootstrap UI 1.3.2,我正在尝试正确地模拟引导模式上的按钮。我有一个旧版本的bootstrap UI,但是因为我升级了bootstrap已经发生了很大的变化。

 describe "when answering yes to load timesheets", ->
        beforeEach(inject ($uibModal) ->
          # Mock out total function
          @scope.common.total = -> {}

          # Mock the modal
          fakeModal =
            result:
              then: (confirmCallback, cancelCallback) ->
                # Store the callbacks for later when the user clicks on 
                # the OK or Cancel button of the dialog
                this.confirmCallBack = confirmCallback
                this.cancelCallback = cancelCallback
            ,
            close: (item) ->
              # The user clicked OK on the modal dialog, call the stored 
              # confirm callback with the selected item
              this.result.confirmCallBack( item )
            ,
            dismiss: (type) ->
              # The user clicked cancel on the modal dialog, call the 
              # stored cancel callback
              this.result.cancelCallback( type )

          # Mock model.open and return with Fake Modal so we can control 
          # the result.
          # spyOn(@modal, 'open').andReturn(fakeModal)
          spyOn($uibModal, 'open').andReturn(fakeModal)

          # Setup test debtor
          @scope.invoice.debtor = {id: 1, name: 'Fingerfood Company'}
        )

        describe "invoices has no timesheets", ->
          it "adds timesheets to the invoice", ->
            # arrange
            @httpBackend.whenGET('/timesheets?debtor_id=1').respond(200, [{description: "Programming"}])

            # act
            @scope.change_debtor()       # Call the function we are testing.
            @scope.modalInstance.close() # User clicks OK button

            # assertions
            # Sets to a new transaction number.
            @httpBackend.flush()
            expect(@scope.invoice.timesheets_attributes).toEqual([{description: "Programming"}])

这就是我创建模态的方法,首先检查债务人是否有任何时间表,然后询问我是否要加载它们。

  # Part of Angularjs-ui-bootstrap
  $scope.change_debtor = ->
    # Get timesheets for the selected debtor
    $http.get('/timesheets?debtor_id=' + $scope.invoice.debtor.id).then (
      (response) ->

        # Check if we already have a modalInstance running
        unless $scope.modalInstance

          # If not, then display one
          $scope.modalInstance = $uibModal.open({
            templateUrl: 'assets/invoices/load_timesheets.html',
            controller: ModalTimesheetsController,
            resolve: {
              debtor_name: ->
                return $scope.invoice.debtor.name
            }
          })

          # Once the dialogue box is closed then run this command
          $scope.modalInstance.result.then( -> # OK
            # Add timesheets to scope
            $scope.invoice.timesheets_attributes = response.data
            $scope.invoice_service.total($scope.invoice)
          )
    )

代码本身正在运行,而不是在我的JS单元测试中。

我收到了错误

Chrome 49.0.2623 (Linux 0.0.0) InvoicesController Controller: invoices_controller create when answering yes to load timesheets invoices has no timesheets adds timesheets to the invoice FAILED
    TypeError: Cannot read property 'close' of undefined
        at .<anonymous> (/home/map7/code/pais/spec/javascripts/unit/invoice_controller_spec.js.js:166:37)
Chrome 49.0.2623 (Linux 0.0.0): Executed 211 of 211 (1 FAILED) (4.941 secs / 4.91 secs)

0 个答案:

没有答案