测试 class 已添加或删除 angularjs 应用的 karma

Question

我正在尝试使用 karma/jasmine 为 angularjs 应用编写一些单元测试。

我挂断的部分是测试 class 是否成功 added/removed。

我要测试的功能：

vm.toggleMenu = function toggleMenu(prev) {
  if(angular.element('menu').hasClass('hide')) {
    if(prev) {
      angular.element('#view').removeClass('col-md-8').addClass('col-md-12');
    } else {
      angular.element('menu').removeClass('hide');
      angular.element('#view').removeClass('col-md-12').addClass('col-md-8');
    }
  } else {
    if(prev) {
      angular.element('#view').removeClass('col-md-12').addClass('col-md-8');
    } else {
      angular.element('menu').addClass('hide');
      angular.element('#view').removeClass('col-md-8').addClass('col-md-12');
    }
  }
};

html:

<div id="view" class="col-md-12" ng-view=""></div>
<menu class="col-md-4"></menu>

menu 是自定义指令。

我的测试：

describe('Ctrl spec', function() {
 var controller, vm, scope, menu, compile, view;



 beforeEach(function(){

  module('app');
  module('templates');

  inject(function($controller, $rootScope, $compile) {
    controller = $controller;
    scope = $rootScope;
    compile = $compile;
    vm = controller('Ctrl', {$scope: scope});
    menu = angular.element('<menu></menu>');
    view = angular.element('<div id="view" class="col-md-12"></div>');
    compile(menu)(scope);

    spyOn(vm, 'toggleMenu');
  })
});

describe('function', function() {

 it('view should have class col-md-8', function() {

   vm.toggleMenu();

   expect(view.hasClass('col-md-8')).toBe(true);
 });
});

当我 console.log 查看时，我得到

LOG: {0: <div id="view" class="col-md-12 ng-scope"></div>, length: 1}

我也试过将 class ng-hide 添加到菜单中，就像在我的测试中一样-spec.js:

menu = angular.element('<menu class="hide"></menu>');

并且始终将其作为输出：

Expected false to be true.
Error: Expected false to be true.

任何有关如何正确测试 class 的帮助 added/removed 都将不胜感激！！

Answer 1

我还是放不下，只好再玩玩。我发现了我的错误。

这一行：menu = angular.element('<menu></menu>');被错误使用。

需要menu = angular.element('menu');。

Angular.element 并不意味着与完整标签一起使用，而是与类、ID 或元素本身的名称一起使用。

测试 class 已添加或删除 angularjs 应用的 karma

Testing a class was added or removed with karma for an angularjs app

jasmine

angularjs

karma-runner