如何在 Jasmine 中测试悬停菜单（Angular Material 组件）

Question

我正在尝试在 Jasmine 中测试悬停菜单。我要测试的元素是其中之一：https://material.angularjs.org/0.11.2/#/demo/material.components.menu

菜单/按钮本身的HTML代码如下：

<md-menu id="site-menu-container">
    <md-button class="md-icon-button" ng-mouseenter="Navbar.openMenu($mdOpenMenu)> {icon here} </md-button>

    <md-menu-content id="site-menu">
        .... Menu items go here
    </md-menu-content>
</md-menu>

我的精简控制器看起来像：

angular.module('myApp.navbar').controller('NavbarController', NavbarController);

function NavbarController() {
    this.openMenu = function($mdOpenMenu) {
        $mdOpenMenu();
    }
}

仅供参考，我使用控制器作为语法。

对于我的测试，我尝试了一些不同的方法。

it('should open menu on mouseover', function() {
    $('#site-menu-container .md-icon-button').trigger('mouseover');
    expect($('#site-menu').length).toBe(1);
}

这不起作用。我在我的控制台中测试了代码，它可以工作，但我想它在 Jasmine 中不是这样工作的。 Karma 说长度是 0，而不是我期望的 1。

我也试过

var Navbar;

beforeEach(inject(function($controller) {
    Navbar = $controller('NavbarController', {});
    spyOn(Navbar, 'openMenu').and.callThrough();
}));

it('should call openMenu on mouseover', function() {
    $('#site-menu-container .md-icon-button').trigger('mouseover');
    expect(Navbar.openMenu).toHaveBeenCalled();
}

这也不起作用。我什至不确定这是否适合使用间谍。

我在这里采取了错误的方法吗？我需要模拟$mdOpenMenu吗？

Answer 1

Karma 是测试运行器 - 很好 :) 为了测试控制器和服务代码，您使用 Jasmine。 要测试 UI 交互（在 Angular 世界中称为 E2E 测试），您可以使用 protactor。

我之前使用 Jasmine 进行过单元测试，但我一生中从未编写过量角器测试，因为这是由我们的测试团队完成的！ 学习愉快！

请让我知道这是否有益！谢谢