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();
    }
}

Fyi，我正在使用控制器作为语法。

对于我的测试，我尝试了一些不同的东西。

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进行过单元测试，但从未在我的生活中编写量角器测试，因为这是由我们的测试团队完成的！玩得开心吧！

请让我知道这是有益还是没有！感谢

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

1 个答案: