带有茉莉花的Angular 1.5测试组件

Question

我尝试使用 Jasmine 和 Angular-mock 测试我的组件，但我不知道这是怎么做的。

这是我的组件

var angular = require('angular');
'use strict';
module.exports = angular
    .module('app.login.component.login', [])
    .component('login', {
      templateUrl: '/app/js/login/components/login.template.html',
      controller: LoginController
    });

LoginController.$inject = ['$state', 'Auth', 'messages'];
function LoginController($state, Auth, messages) {
  var ctrl = this;
  ctrl.failMessage = messages.NO_AUTH;
  ctrl.failResponse = false;
  ctrl.login = login;

  function login(user){
    ctrl.errors = {};
    Auth.login(user)
      .success(function(result){
        $state.go('profile');
      })
      .error(function(response) {
        ctrl.failResponse = true;
    })
  };
}

我写了这个测试，但他不工作。 请解释一下我做错了什么并展示一些如何测试组件的模式

describe('Component: login', function() {
  beforeEach(angular.mock.module(require('angular-ui-router')));
  beforeEach(angular.mock.module(loginComponent.name));

  var scope;
  beforeEach(inject(function($rootScope, $compile){
    scope = $rootScope.$new();
  }));

   var controller;
   beforeEach(inject(function($componentController, Auth) {
     ctrl = $componentController('login', {

      $scope:scope});
   }));

   it('df', function() {
     expect(ctrl.login).toBeDefined();
   });
});

Answer 1

你使用$componentController。

beforeEach(inject(function($rootScope, $componentController){
  scope = $rootScope.$new();
  controller = $componentController('myComponent', {$scope: scope});
}));