diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/dropdown/index.html b/dev/tests/js/JsTestDriver/testsuite/mage/dropdown/index.html
deleted file mode 100644
index 3d6ed5a7c1d2824f3d404cb885c54e2823559654..0000000000000000000000000000000000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/dropdown/index.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!--
-/**
- * @category mage.dropdown
- * @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="../../../lib/web/jquery.js"></script>
- <script src="../../../lib/web/jquery/jquery-ui.js"></script>
- <script type="text/javascript" src="../../../lib/web/mage/mage.js"></script>
- <script type="text/javascript" src="../../../lib/web/mage/dropdown.js"></script>
- <script type="text/javascript" src="../../../lib/web/mage/bootstrap.js"></script>
- <script type="text/javascript" src="testsuite/mage/dropdown/test-dropdown.js"></script>
-
-</head>
-<body>
-<div id="qunit"></div>
-<div id="qunit-fixture">
-</div>
-</body>
-</html>
diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/dropdown/test-dropdown.js b/dev/tests/js/JsTestDriver/testsuite/mage/dropdown/test-dropdown.js
deleted file mode 100644
index e67c92b3d4018ce5e2a7bc5160d89ebd49aee967..0000000000000000000000000000000000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/dropdown/test-dropdown.js
+++ /dev/null
@@ -1,270 +0,0 @@
-/**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
-
-/*
- testing if dialog opens when the triggerEvent is triggered
- */
-test( "triggerEvent", function() {
- expect(2);
- var opener = $('<div></div>');
- var dialog = $('<div></div>');
- dialog.dropdownDialog({"triggerEvent":"click", "triggerTarget":opener});
- opener.trigger("click");
- equal(dialog.dropdownDialog("isOpen"), true, "Dropdown opens when click opener");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"triggerEvent":null, "triggerTarget":opener});
- opener.trigger("click");
- equal(dialog.dropdownDialog("isOpen"), false, "Dropdown doesn't open when click opener");
- dialog.dropdownDialog( "destroy" );
-
-});
-
-/*
- testing if a specified class is added to the trigger
- */
-test( "triggerClass", function() {
- expect(2);
- var opener = $('<div></div>');
- var dialog = $('<div></div>');
- dialog.dropdownDialog({"triggerTarget":opener,"triggerClass":"active"});
- dialog.dropdownDialog("open");
- ok( opener.hasClass("active"), "Class added to opener when dialog opens" );
- dialog.dropdownDialog("close");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"triggerEvent":opener, "triggerClass":null});
- dialog.dropdownDialog("open");
- ok( !opener.hasClass("active"), "Class added to opener when dialog opens" );
- dialog.dropdownDialog("close");
- dialog.dropdownDialog( "destroy" );
-
-});
-
-/*
- testing if a specified class is added to the element which the dialog appends to
- */
-test( "parentClass", function() {
- expect(2);
- var parent = $('<div></div>');
- var dialog = $('<div></div>');
-
- dialog.dropdownDialog({"parentClass":"active","appendTo":parent});
- dialog.dropdownDialog("open");
- ok( parent.hasClass("active"), "Class is added to parent when dialog opens" );
- dialog.dropdownDialog("close");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"parentClass":null,"appendTo":parent});
- dialog.dropdownDialog("open");
- ok( !parent.hasClass("active"), "No class is added to parent when dialog opens" );
- dialog.dropdownDialog("close");
- dialog.dropdownDialog( "destroy" );
-
-});
-
-/*
- testing if a specified class is added to the element that becomes dialog
- */
-test( "dialogContentClass", function() {
- expect(2);
- var dialog = $('<div></div>');
-
- dialog.dropdownDialog({"dialogContentClass":"active"});
- dialog.dropdownDialog("open");
- ok( $('.ui-dialog-content').hasClass("active"), "Class is added to dialog content when dialog opens" );
- dialog.dropdownDialog("close");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"dialogContentClass": null});
- dialog.dropdownDialog("open");
- ok( !$('.ui-dialog-content').hasClass("active"), "No class is added to dialog content" );
- dialog.dropdownDialog("close");
- dialog.dropdownDialog( "destroy" );
-});
-
-/*
- testing if a specified class is added to dialog
- */
-test( "defaultDialogClass", function() {
- expect(3);
- var dialog = $('<div></div>');
-
- dialog.dropdownDialog({"defaultDialogClass":"custom"});
- ok( $('.ui-dialog').hasClass("custom"), "Class is added to dialog" );
- ok( !$('.ui-dialog').hasClass("mage-dropdown-dialog"), "Default class has been overwritten" );
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({});
- ok( $('.ui-dialog').hasClass("mage-dropdown-dialog"), "Default class hasn't been overwritten" );
- dialog.dropdownDialog( "destroy" );
-});
-
-/*
- testing if the specified trigger actually opens the dialog
- */
-test( "triggerTarget", function() {
- expect(2);
- var opener = $('<div></div>');
- var dialog = $('<div></div>');
-
- dialog.dropdownDialog({"triggerTarget":opener});
- opener.trigger("click");
- equal(dialog.dropdownDialog("isOpen"), true, "Dropdown opens when click opener");
- dialog.dropdownDialog("close");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"triggerTarget":null});
- opener.trigger("click");
- equal(dialog.dropdownDialog("isOpen"), false, "Dropdown doesn't open when click opener");
- dialog.dropdownDialog( "destroy" );
-});
-
-/*
- testing if the dialog gets closed when clicking outside of it
- */
-test( "closeOnClickOutside", function() {
- expect(2);
- var outside = $('<div></div>').attr({"id":"outside"});
- var dialog = $('<div></div>').attr({"id":"dialog"});
- outside.appendTo("#qunit-fixture");
- dialog.appendTo("#qunit-fixture");
-
- dialog.dropdownDialog({"closeOnClickOutside":true});
- dialog.dropdownDialog("open");
- outside.trigger("click");
- equal(dialog.dropdownDialog("isOpen"), false, "Dropdown closes when click outside dropdown");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"closeOnClickOutside":false});
- dialog.dropdownDialog("open");
- outside.trigger("click");
- equal(dialog.dropdownDialog("isOpen"), true, "Dropdown doesn't close when click outside dropdown");
- dialog.dropdownDialog( "destroy" );
-});
-
-/*
- testing if the dialog gets closed when mouse leaves the dialog area
- */
-asyncTest( "closeOnMouseLeave true", function() {
- expect(1);
- var outside = $('<div></div>').attr({"id":"outside"});
- var dialog = $('<div></div>').attr({"id":"dialog"});
- var opener = $('<div></div>').attr({"id":"opener"});
- outside.appendTo("#qunit-fixture");
- dialog.appendTo("#qunit-fixture");
- opener.appendTo("#qunit-fixture");
-
- dialog.dropdownDialog({"closeOnMouseLeave":true});
- dialog.dropdownDialog("open");
- dialog.trigger("mouseenter");
- dialog.trigger("mouseleave");
-
- setTimeout(function() {
- equal(dialog.dropdownDialog("isOpen"), false, "Dropdown closes when mouseleave the dropdown area");
- dialog.dropdownDialog( "destroy" );
- start();
- }, 3000);
-
-});
-
-/*
- testing if the dialog gets closed when mouse leaves the dialog area
- */
-asyncTest( "closeOnMouseLeave false", function() {
- expect(1);
- var outside = $('<div></div>').attr({"id":"outside"});
- var dialog = $('<div></div>').attr({"id":"dialog"});
- var opener = $('<div></div>').attr({"id":"opener"});
- outside.appendTo("#qunit-fixture");
- dialog.appendTo("#qunit-fixture");
- opener.appendTo("#qunit-fixture");
-
- dialog.dropdownDialog({"closeOnMouseLeave":false});
- dialog.dropdownDialog("open");
- dialog.trigger("mouseenter");
- dialog.trigger("mouseleave");
-
- setTimeout(function() {
- equal(dialog.dropdownDialog("isOpen"), true, "Dropdown doesn't close when mouseleave the dropdown area");
- dialog.dropdownDialog( "destroy" );
- start();
- }, 3000);
-
-});
-
-/*
- testing if the dialog gets closed with the specified delay
- */
-asyncTest( "timeout", function() {
- expect(2);
- var outside = $('<div></div>').attr({"id":"outside"});
- var dialog = $('<div></div>').attr({"id":"dialog"});
- var opener = $('<div></div>').attr({"id":"opener"});
- outside.appendTo("#qunit-fixture");
- dialog.appendTo("#qunit-fixture");
- opener.appendTo("#qunit-fixture");
-
- dialog.dropdownDialog({"timeout":2000});
- dialog.dropdownDialog("open");
- dialog.trigger("mouseenter");
- dialog.trigger("mouseleave");
- equal(dialog.dropdownDialog("isOpen"), true, "Dropdown doesn't close when mouseleave the dropdown area");
- setTimeout(function() {
- equal(dialog.dropdownDialog("isOpen"), false, "Dropdown closes when mouseleave the dropdown area, after timeout passed");
- dialog.dropdownDialog( "destroy" );
- start();
- }, 3000);
-
-});
-
-/*
- testing if the title bar is prevented from being created
- */
-test( "createTitileBar", function() {
- expect(2);
- var dialog = $('<div></div>');
- dialog.dropdownDialog({"createTitleBar":true});
- ok(($(".ui-dialog").find(".ui-dialog-titlebar").length > 0), "Title bar is created");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"createTitleBar":false});
- ok($(".ui-dialog").find(".ui-dialog-titlebar").length <= 0, "Title bar isn't created");
- dialog.dropdownDialog( "destroy" );
-});
-
-/*
- testing if the position function gets disabled
- */
-test( "autoPosition", function() {
- expect(2);
- var dialog = $('<div></div>');
- dialog.dropdownDialog({"autoPosition":false});
- dialog.dropdownDialog("open");
- ok(($(".ui-dialog").css("top") === 'auto'), "_position function disabled");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"autoPosition":true});
- dialog.dropdownDialog("open");
- ok(($(".ui-dialog").css("top") !== '0px'), "_position function enabled");
- dialog.dropdownDialog( "destroy" );
-});
-
-/*
- testing if the size function gets disabled
- */
-test( "autoSize", function() {
- expect(2);
- var dialog = $('<div></div>');
- dialog.dropdownDialog({"autoSize":true, width:"300"});
- dialog.dropdownDialog("open");
- ok(($(".ui-dialog").css("width") === '300px'), "_size function enabled");
- dialog.dropdownDialog( "destroy" );
-
- dialog.dropdownDialog({"autoSize":false, width:"300"});
- dialog.dropdownDialog("open");
- ok($(".ui-dialog").css("width") !== '300px', "_size function disabled");
- dialog.dropdownDialog( "destroy" );
-});
diff --git a/dev/tests/js/jasmine/tests/lib/mage/dropdown.test.js b/dev/tests/js/jasmine/tests/lib/mage/dropdown.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..70e608d5bfefd6c55b097cf1db716cea5b72d763
--- /dev/null
+++ b/dev/tests/js/jasmine/tests/lib/mage/dropdown.test.js
@@ -0,0 +1,351 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+/* eslint-disable max-nested-callbacks */
+
+define([
+ 'jquery',
+ 'mage/dropdown'
+], function ($) {
+ 'use strict';
+
+ describe('Test for mage/dropdown jQuery plugin', function () {
+ it('check if dialog opens when the triggerEvent is triggered', function () {
+ var opener = $('<div/>'),
+ dialog = $('<div/>');
+
+ dialog.dropdownDialog({
+ 'triggerEvent': 'click',
+ 'triggerTarget': opener
+ });
+
+ opener.trigger('click');
+ expect(dialog.dropdownDialog('isOpen')).toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'triggerEvent': null,
+ 'triggerTarget': opener
+ });
+
+ opener.trigger('click');
+ expect(dialog.dropdownDialog('isOpen')).toBeFalsy();
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if a specified class is added to the trigger', function () {
+ var opener = $('<div/>'),
+ dialog = $('<div/>');
+
+ dialog.dropdownDialog({
+ 'triggerClass': 'active',
+ 'triggerTarget': opener
+ });
+
+ dialog.dropdownDialog('open');
+ expect(opener.hasClass('active')).toBeTruthy();
+
+ dialog.dropdownDialog('close');
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'triggerClass': null,
+ 'triggerTarget': opener
+ });
+
+ dialog.dropdownDialog('open');
+ expect(opener.hasClass('active')).toBeFalsy();
+
+ dialog.dropdownDialog('close');
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if a specified class is added to the element which the dialog appends to', function () {
+ var parent = $('<div/>'),
+ dialog = $('<div/>');
+
+ dialog.dropdownDialog({
+ 'parentClass': 'active',
+ 'appendTo': parent
+ });
+
+ dialog.dropdownDialog('open');
+ expect(parent.hasClass('active')).toBeTruthy();
+
+ dialog.dropdownDialog('close');
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'parentClass': null,
+ 'appendTo': parent
+ });
+
+ dialog.dropdownDialog('open');
+ expect(parent.hasClass('active')).toBeFalsy();
+
+ dialog.dropdownDialog('close');
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if a specified class is added to the element that becomes dialog', function () {
+ var dialog = $('<div/>'),
+ content;
+
+ dialog.dropdownDialog({
+ 'dialogContentClass': 'active'
+ });
+
+ content = $('.ui-dialog-content');
+ dialog.dropdownDialog('open');
+ expect(content.hasClass('active')).toBeTruthy();
+
+ dialog.dropdownDialog('close');
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'dialogContentClass': null
+ });
+
+ dialog.dropdownDialog('open');
+ expect(content.hasClass('active')).toBeFalsy();
+
+ dialog.dropdownDialog('close');
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if a specified class is added to dialog', function () {
+ var dialog = $('<div/>'),
+ uiClass = '.ui-dialog',
+ ui;
+
+ dialog.dropdownDialog({
+ 'defaultDialogClass': 'custom'
+ });
+
+ ui = $(uiClass);
+ expect(ui.hasClass('custom')).toBeTruthy();
+ expect(ui.hasClass('mage-dropdown-dialog')).toBeFalsy();
+
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({});
+ ui = $(uiClass);
+ expect(ui.hasClass('mage-dropdown-dialog')).toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if the specified trigger actually opens the dialog', function () {
+ var opener = $('<div/>'),
+ dialog = $('<div/>');
+
+ dialog.dropdownDialog({
+ 'triggerTarget': opener
+ });
+
+ opener.trigger('click');
+ expect(dialog.dropdownDialog('isOpen')).toBeTruthy();
+
+ dialog.dropdownDialog('close');
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'triggerTarget': null
+ });
+
+ opener.trigger('click');
+ expect(dialog.dropdownDialog('isOpen')).toBeFalsy();
+
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if the dialog gets closed when clicking outside of it', function () {
+ var container = $('<div/>'),
+ outside = $('<div/>').attr('id', 'outside').appendTo(container),
+ dialog = $('<div/>').attr('id', 'dialog').appendTo(container);
+
+ container.appendTo('body');
+
+ dialog.dropdownDialog({
+ 'closeOnClickOutside': true
+ });
+
+ dialog.dropdownDialog('open');
+ outside.trigger('click');
+ expect(dialog.dropdownDialog('isOpen')).toBeFalsy();
+
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'closeOnClickOutside': false
+ });
+
+ dialog.dropdownDialog('open');
+ outside.trigger('click');
+ expect(dialog.dropdownDialog('isOpen')).toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if the dialog gets closed when mouse leaves the dialog area', function () {
+ var container = $('<div/>'),
+ dialog = $('<div/>').attr('id', 'dialog').appendTo(container);
+
+ $('<div/>').attr('id', 'outside').appendTo(container);
+ $('<div/>').attr('id', 'opener').appendTo(container);
+
+ container.appendTo('body');
+
+ jasmine.clock().install();
+
+ dialog.dropdownDialog({
+ 'closeOnMouseLeave': true
+ });
+
+ dialog.dropdownDialog('open');
+ dialog.trigger('mouseenter');
+ expect(dialog.dropdownDialog('isOpen')).toBeTruthy();
+
+ dialog.trigger('mouseleave');
+
+ jasmine.clock().tick(10);
+
+ expect(dialog.dropdownDialog('isOpen')).toBeFalsy();
+ dialog.dropdownDialog('destroy');
+
+ jasmine.clock().uninstall();
+ });
+
+ it('check if the dialog does not close when mouse leaves the dialog area', function () {
+ var container = $('<div/>'),
+ dialog = $('<div/>').attr('id', 'dialog').appendTo(container);
+
+ $('<div/>').attr('id', 'outside').appendTo(container);
+ $('<div/>').attr('id', 'opener').appendTo(container);
+
+ container.appendTo('body');
+
+ jasmine.clock().install();
+
+ dialog.dropdownDialog({
+ 'closeOnMouseLeave': false
+ });
+
+ dialog.dropdownDialog('open');
+ dialog.trigger('mouseenter');
+ dialog.trigger('mouseleave');
+ jasmine.clock().tick(10);
+ expect(dialog.dropdownDialog('isOpen')).toBeTruthy();
+ dialog.dropdownDialog('destroy');
+
+ jasmine.clock().uninstall();
+ });
+
+ it('check if the dialog gets closed with the specified delay', function () {
+ var container = $('<div/>'),
+ dialog = $('<div/>').attr('id', 'dialog').appendTo(container);
+
+ $('<div/>').attr('id', 'outside').appendTo(container);
+ $('<div/>').attr('id', 'opener').appendTo(container);
+
+ container.appendTo('body');
+
+ jasmine.clock().install();
+
+ dialog.dropdownDialog({
+ 'timeout': 5
+ });
+
+ dialog.dropdownDialog('open');
+ dialog.trigger('mouseenter');
+ dialog.trigger('mouseleave');
+ expect(dialog.dropdownDialog('isOpen')).toBeTruthy();
+
+ jasmine.clock().tick(10);
+ expect(dialog.dropdownDialog('isOpen')).toBeFalsy();
+ dialog.dropdownDialog('destroy');
+
+ jasmine.clock().uninstall();
+ });
+
+ it('check if the title bar is prevented from being created', function () {
+ var dialog = $('<div/>'),
+ uiClass = '.ui-dialog',
+ ui;
+
+ dialog.dropdownDialog({
+ 'createTitleBar': true
+ });
+
+ ui = $(uiClass);
+ expect(ui.find('.ui-dialog-titlebar').length > 0).toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'createTitleBar': false
+ });
+
+ ui = $(uiClass);
+ expect(ui.find('.ui-dialog-titlebar').length <= 0).toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if the position function gets disabled', function () {
+ var dialog = $('<div/>'),
+ uiClass = '.ui-dialog',
+ ui;
+
+ dialog.dropdownDialog({
+ 'autoPosition': false
+ });
+
+ ui = $(uiClass);
+ dialog.dropdownDialog('open');
+ expect(ui.css('top') === 'auto').toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'autoPosition': true
+ });
+
+ ui = $(uiClass);
+ dialog.dropdownDialog('open');
+ expect(ui.css('top') !== '0px').toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+ });
+
+ it('check if the size function gets disabled', function () {
+ var dialog = $('<div/>'),
+ uiClass = '.ui-dialog',
+ ui;
+
+ dialog.dropdownDialog({
+ 'autoSize': true,
+ 'width': '300'
+ });
+
+ ui = $(uiClass);
+ dialog.dropdownDialog('open');
+ expect(ui.css('width') === '300px').toBeTruthy();
+
+ dialog.dropdownDialog('destroy');
+
+ dialog.dropdownDialog({
+ 'autoSize': false,
+ 'width': '300'
+ });
+
+ ui = $(uiClass);
+ dialog.dropdownDialog('open');
+ expect(ui.css('width') === '300px').toBeFalsy();
+
+ dialog.dropdownDialog('destroy');
+ });
+ });
+});