diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/menu/test-menu.js b/dev/tests/js/JsTestDriver/testsuite/mage/menu/test-menu.js
deleted file mode 100644
index 0e1c4a3682b890bdd9593836303a62c51d2dd1dc..0000000000000000000000000000000000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/menu/test-menu.js
+++ /dev/null
@@ -1,112 +0,0 @@
-/**
- * @category mage.js
- * @package test
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
-
- /*
- Set key logger to check key press event
- */
- function KeyLogger( target ) {
- if ( !(this instanceof KeyLogger) ) {
- return new KeyLogger( target );
- }
- this.target = target;
- this.log = [];
-
- var self = this;
-
- this.target.off( 'keydown' ).on( 'keydown', function( event ) {
- self.log.push( event.keyCode );
- });
-}
-/*
- testing if menu get expanded class when option set to true
- */
-test( 'Menu Expanded', function() {
- expect(1);
- var menu = $('#menu');
- var menuItems = menu.find('li');
- var submenu = menuItems.find('ul');
- menu.menu({
- expanded: true
- });
- ok(submenu.hasClass('expanded'), 'Expanded Class added');
-});
-/*
- testing if down arrow is pressed
- */
-test( 'Down Arrow', function() {
- expect(1);
- var event,
- menu = $('#menu'),
- keys = KeyLogger(menu);
- event = $.Event('keydown');
- event.keyCode = $.ui.keyCode.DOWN;
- menu.trigger( event );
- equal( keys.log[ 0 ], 40, 'Down Arrow Was Pressed' );
-});
-/*
- testing if up arrow is pressed
- */
-test( 'Up Arrow', function() {
- expect(1);
- var event,
- menu = $('#menu'),
- keys = KeyLogger(menu);
- event = $.Event('keydown');
- event.keyCode = $.ui.keyCode.UP;
- menu.trigger( event );
- equal( keys.log[ 0 ], 38, 'Up Arrow Was Pressed' );
-});
-/*
- testing if left arrow is pressed
- */
-test( 'Left Arrow', function() {
- expect(1);
- var event,
- menu = $('#menu'),
- keys = KeyLogger(menu);
- event = $.Event('keydown');
- event.keyCode = $.ui.keyCode.LEFT;
- menu.trigger( event );
- equal( keys.log[ 0 ], 37, 'Left Arrow Was Pressed' );
-});
-/*
- testing if right arrow is pressed
- */
-test( 'Right Arrow', function() {
- expect(1);
- var event,
- menu = $('#menu'),
- keys = KeyLogger(menu);
- event = $.Event('keydown');
- event.keyCode = $.ui.keyCode.RIGHT;
- menu.trigger( event );
- equal( keys.log[ 0 ], 39, 'Right Arrow Was Pressed' );
-});
-/*
- testing if max limit being set
- */
-test( 'Max Limit', function() {
- expect(1);
- var menu = $('#menu');
- menu.navigation({
- maxItems: 3
- });
- var menuItems = menu.find('> li:visible');
- equal(menuItems.length, 4, 'Max Limit Reach');
-});
-/*
- testing if responsive menu is set
- */
-test( 'Responsive: More Menu', function() {
- expect(1);
- var menu = $('#menu');
- menu.navigation({
- responsive: 'onResize'
- });
- ok($('body').find('.ui-menu.more'), 'More Menu Created');
-});
-
diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/menu/index.html b/dev/tests/js/jasmine/assets/lib/web/mage/menu.html
similarity index 50%
rename from dev/tests/js/JsTestDriver/testsuite/mage/menu/index.html
rename to dev/tests/js/jasmine/assets/lib/web/mage/menu.html
index d0a3b9b873801e700378bfc6b3588c2ac4b8e794..03c673a7dac5fbc69fee9d2e38edf78bdc66d9ab 100644
--- a/dev/tests/js/JsTestDriver/testsuite/mage/menu/index.html
+++ b/dev/tests/js/jasmine/assets/lib/web/mage/menu.html
@@ -1,36 +1,10 @@
-<!--
-/**
- * @category mage.menu
- * @package test
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
--->
-
-<!DOCTYPE html>
-<html>
-<head>
- <title>Unit test</title>
- <base href="../../../"/>
- <link type="text/css" rel="stylesheet" href="framework/qunit/qunit-1.14.0.css"/>
- <script type="text/javascript" src="framework/qunit/qunit-1.14.0.js"></script>
- <script src="../../../pub/lib/jquery.js"></script>
- <script src="../../../pub/lib/jquery/jquery-ui.js"></script>
- <script type="text/javascript" src="../../../pub/lib/mage/mage.js"></script>
- <script type="text/javascript" src="../../../pub/lib/mage/menu.js"></script>
- <script type="text/javascript" src="../../../pub/lib/mage/bootstrap.js"></script>
- <script type="text/javascript" src="testsuite/mage/menu/test-menu.js"></script>
-
-</head>
-<body>
-<div id="qunit"></div>
-<div id="qunit-fixture">
<ul id="menu">
<li class="foo">Aberdeen</li>
<li class="foo">Ada</li>
<li class="foo">Adamsville</li>
<li class="foo"><span class="ui-icon ui-icon-print"></span>Addyston</li>
- <li>Delphi
+ <li class="test-menu-item">
+ <a>Delphi</a>
<ul>
<li class="foo">Ada</li>
<li class="foo">Saarland</li>
@@ -38,7 +12,8 @@
</ul>
</li>
<li class="foo">Saarland</li>
- <li>Salzburg
+ <li>
+ <a>Salzburg</a>
<ul>
<li>Delphi
<ul>
@@ -60,7 +35,4 @@
<li class="foo">Perch</li>
</ul>
</li>
-</ul>
-</div>
-</body>
-</html>
+</ul>
\ No newline at end of file
diff --git a/dev/tests/js/jasmine/tests/lib/mage/menu.test.js b/dev/tests/js/jasmine/tests/lib/mage/menu.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..a2b7e98425969c2a2b1a4987d6361feea181995e
--- /dev/null
+++ b/dev/tests/js/jasmine/tests/lib/mage/menu.test.js
@@ -0,0 +1,110 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+ 'jquery',
+ 'mage/menu',
+ 'text!tests/assets/lib/web/mage/menu.html'
+], function ($, menu, menuTmpl) {
+ 'use strict';
+
+ describe('mage/menu', function () {
+ describe('Menu expanded', function () {
+ var menuSelector = '#menu';
+
+ beforeEach(function () {
+ var $menu = $(menuTmpl);
+
+ $('body').append($menu);
+ });
+
+ afterEach(function () {
+ $(menuSelector).remove();
+ });
+
+ it('Check that menu expanded', function () {
+ var $menu = $(menuSelector),
+ $menuItems = $menu.find('li'),
+ $submenu = $menuItems.find('ul');
+
+ $menu.menu({
+ expanded: true
+ });
+ expect($submenu.hasClass('expanded')).toBe(true);
+ });
+ });
+
+ describe('Menu hover event', function () {
+ var menuSelector = '#menu',
+ $menu;
+
+ beforeEach(function () {
+ var $menuObject = $(menuTmpl);
+
+ $('body').append($menuObject);
+ $menu = $(menuSelector).menu({
+ delay: 0,
+ showDelay: 0,
+ hideDelay: 0
+ });
+ });
+
+ afterEach(function () {
+ $(menuSelector).remove();
+ });
+
+ it('Check that menu expanded', function (done) {
+ var $menuItem = $menu.find('li.test-menu-item'),
+ $submenu = $menuItem.find('ul');
+
+ $menuItem.trigger('mouseover');
+ setTimeout(function () {
+ expect($submenu.attr('aria-expanded')).toBe('true');
+ $menuItem.trigger('mouseout');
+ setTimeout(function () {
+ expect($submenu.attr('aria-expanded')).toBe('false');
+ done();
+ }, 300);
+ }, 300);
+ });
+ });
+
+ describe('Menu navigation', function () {
+ var menuSelector = '#menu',
+ $menu;
+
+ beforeEach(function () {
+ var $menuObject = $(menuTmpl);
+
+ $('body').append($menuObject);
+ $menu = $(menuSelector).menu();
+ });
+
+ afterEach(function () {
+ $(menuSelector).remove();
+ });
+
+ it('Check max item limit', function () {
+ var $menuItems;
+
+ $menu.navigation({
+ maxItems: 3
+ });
+ $menuItems = $menu.find('li:visible');
+
+ expect($menuItems.length).toBe(4);
+ });
+
+ it('Check that More Menu item will be added', function () {
+ $menu.navigation({
+ responsive: 'onResize'
+ });
+
+ expect($('body').find('.ui-menu-more').length).toBeGreaterThan(0);
+ });
+ });
+ });
+});