diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/content.html b/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/content.html
deleted file mode 100644
index e81938dfbeaba32386a7fe89121e9a653febf991..0000000000000000000000000000000000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/content.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!--
-/**
- * @category mage.collapsible
- * @package test
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
--->
-
-<HTML>
-<body>
- <p>Test text</p>
-</body>
-</HTML>
diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/index.html b/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/index.html
deleted file mode 100644
index ccfd4d97f03312ac84950f5655e1276a25777f26..0000000000000000000000000000000000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/index.html
+++ /dev/null
@@ -1,31 +0,0 @@
-<!--
-/**
- * @category mage.collapsible
- * @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/collapsible.js"></script>
- <script type="text/javascript" src="../../../pub/lib/mage/bootstrap.js"></script>
- <script type="text/javascript" src="testsuite/mage/collapsible/test-collapsible.js"></script>
-</head>
-<body>
-<div id="qunit"></div>
-<div id="qunit-fixture">
-</div>
-</body>
-</html>
-
diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/test-collapsible.js b/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/test-collapsible.js
deleted file mode 100644
index 1a22e5a79eb1df0d65e897859733ff95074f5e4f..0000000000000000000000000000000000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/collapsible/test-collapsible.js
+++ /dev/null
@@ -1,180 +0,0 @@
-/**
- * @category mage.collapsible
- * @package test
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
-
-/*
- Test if the collapsible widget gets initialized when is called and destroy function works
- */
-test('initialization & destroy', function() {
- expect(2);
- var group = $('<div id="1"></div>');
- group.collapsible();
- ok( group.is(':mage-collapsible'), "widget instantiated" );
- group.collapsible('destroy');
- ok( !group.is(':mage-collapsible'), "widget destroyed" );
-});
-
-/*
- Test enable, disable, activate, deactivate functions
- */
-test('Enable, disable, activate, deactivate methods', function() {
- expect(5);
- var group = $('<div id="2"></div>');
- var title = $('<div data-role="title"></div>');
- var content = $('<div data-role="content"></div>');
- title.appendTo(group);
- content.appendTo(group);
- group.appendTo("body");
- group.collapsible();
- group.collapsible("deactivate");
- ok(content.is(':hidden'), "Content is collapsed");
- group.collapsible("activate");
- ok(content.is(':visible'), "Content is expanded");
- group.collapsible("disable");
- ok(content.is(':hidden'), "Content is collapsed");
- group.collapsible("activate");
- ok(content.is(':hidden'), "Content is collapsed");
- group.collapsible("enable");
- group.collapsible("activate");
- ok(content.is(':visible'), "Content is expanded");
- group.collapsible('destroy');
-});
-
-/*
- Test if the widget gets expanded/collapsed when the title is clicked
- */
-test('Collapse and expand', function() {
- expect(3);
- var group = $('<div id="3"></div>');
- var title = $('<div data-role="title"></div>');
- var content = $('<div data-role="content"></div>');
- title.appendTo(group);
- content.appendTo(group);
- group.appendTo("body");
- group.collapsible();
- group.collapsible("deactivate");
- ok(content.is(':hidden'), "Content is collapsed");
- title.trigger("click");
- ok(content.is(':visible'), "Content gets expanded on click title");
- title.trigger("click");
- ok(content.is(':hidden'), "Content gets collapsed on click again");
- group.collapsible('destroy');
-});
-
-
-/*
- Test state Classes
- */
-test('State classes', function() {
- expect(3);
- var group = $('<div id="4"></div>');
- var title = $('<div data-role="title"></div>');
- var content = $('<div data-role="content"></div>');
- title.appendTo(group);
- content.appendTo(group);
- group.collapsible({openedState:"opened", closedState:"closed", disabledState:"disabled"});
- ok( group.hasClass("closed"));
- title.trigger("click");
- ok( group.hasClass("opened"));
- group.collapsible("disable");
- ok( group.hasClass("disabled"));
- group.collapsible('destroy');
-});
-
-/*
- Test if icons are added to title when widget gets initialized and are removed when gets destroyed
- */
-test('Create & destroy icons', function() {
- expect(2);
- var group = $('<div id="5"></div>');
- var title = $('<div data-role="title"></div>');
- var content = $('<div data-role="content"></div>');
- title.appendTo(group);
- content.appendTo(group);
- group.collapsible({icons: {header:"minus",activeHeader:"plus"}});
- ok(title.children("[data-role=icons]").length, "Icons added to title" );
- group.collapsible('destroy');
- ok(!title.children("[data-role=icons]").length, "Icons removed from title" );
-});
-
-/*
- Test if icon classes are changed when content gets expanded/collapsed
- */
-test('Change icons when content gets expanded/collapsed', function() {
- expect(2);
- var group = $('<div id="6"></div>');
- var title = $('<div data-role="title"></div>');
- var content = $('<div data-role="content"></div>');
- title.appendTo(group);
- content.appendTo(group);
- group.collapsible({icons: {header:"minus",activeHeader:"plus"}});
- group.collapsible("deactivate");
- var icons = group.collapsible("option","icons");
- ok(title.children("[data-role=icons]").hasClass(icons.header), "When content is collapsed,header has the right class for icons" );
- title.trigger("click");
- ok(title.children("[data-role=icons]").hasClass(icons.activeHeader), "When content is expanded,header has the right class for icons" );
- group.collapsible('destroy');
-});
-
-
-/*
- Test if content gets expanded/collapsed when certain keys are pressed
- */
-asyncTest( "keyboard support", function() {
-
- expect( 5 );
- var group = $('<div id="7"></div>');
- var title = $('<div data-role="title"></div>');
- var content = $('<div data-role="content"></div>');
- title.appendTo(group);
- content.appendTo(group);
- group.appendTo("body");
- group.collapsible();
- group.collapsible("deactivate");
-
- title.on("focus",function(ev){
- ok(content.is(':hidden'), "Content is collapsed");
- title.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.ENTER } ));
- ok(content.is(':visible'), "Content is expanded");
- title.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.ENTER } ));
- ok(content.is(':hidden'), "Content is collapsed");
- title.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.SPACE } ));
- ok(content.is(':visible'), "Content is expanded");
- title.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.SPACE } ));
- ok(content.is(':hidden'), "Content is collapsed");
- group.collapsible('destroy');
- start();
- } );
-
- setTimeout(function(){
- title.focus();
- },10);
-
-});
-
-/*
- Test if content gets updated via Ajax when title is clicked
- */
-test('Update content via ajax', function() {
- expect(2);
- var group = $('<div id="8"></div>');
- var title = $('<div data-role="title"></div>');
- var content = $('<div data-role="content"></div>');
- var ajax = $('<a data-ajax="true" href="testsuite/mage/collapsible/content.html"></a>');
- title.appendTo(group);
- content.appendTo(group);
- ajax.appendTo(content);
- group.appendTo("body");
- group.collapsible({ajaxContent : true});
- group.collapsible("deactivate");
- ok(!content.children("p").length, "Content has no data");
- title.trigger("click");
- ok(content.children("p"), "Content gets data from content.html");
- group.collapsible('destroy');
-});
-
-
-
diff --git a/dev/tests/js/jasmine/tests/lib/mage/collapsible.test.js b/dev/tests/js/jasmine/tests/lib/mage/collapsible.test.js
new file mode 100644
index 0000000000000000000000000000000000000000..8bb8cd1cafe78b1681084f99db32d5ca54fce13f
--- /dev/null
+++ b/dev/tests/js/jasmine/tests/lib/mage/collapsible.test.js
@@ -0,0 +1,247 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+/* eslint-disable max-nested-callbacks */
+
+define([
+ 'jquery',
+ 'jquery/ui',
+ 'mage/collapsible'
+], function ($) {
+ 'use strict';
+
+ describe('Test for mage/collapsible jQuery plugin', function () {
+ it('check if collapsible can be initialized and destroyed', function () {
+ var group = $('<div id="1"></div>');
+
+ group.collapsible();
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+
+ describe('Test enable, disable, activate and deactivate methods', function () {
+ var group = $('<div id="2"></div>'),
+ content = $('<div data-role="content"></div>').appendTo(group);
+
+ $('<div data-role="title"></div>').prependTo(group);
+
+ beforeEach(function () {
+ group.appendTo('body');
+ });
+
+ afterEach(function () {
+ group.remove();
+ });
+
+ it('check enable and disable methods', function () {
+ group.collapsible();
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+
+ group.collapsible('disable');
+ expect(content.is(':hidden')).toBeTruthy();
+
+ group.collapsible('enable');
+ expect(content.is(':visible')).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+
+ it('check activate and deactivate methods', function () {
+ group.collapsible();
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+
+ group.collapsible('deactivate');
+ expect(content.is(':hidden')).toBeTruthy();
+
+ group.collapsible('activate');
+ expect(content.is(':visible')).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+ });
+
+ it('check if the widget gets expanded/collapsed when the title is clicked', function () {
+ var group = $('<div id="3"></div>'),
+ title = $('<div data-role="title"></div>').appendTo(group),
+ content = $('<div data-role="content"></div>').appendTo(group);
+
+ group.appendTo('body');
+
+ group.collapsible();
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+
+ group.collapsible('deactivate');
+ expect(content.is(':hidden')).toBeTruthy();
+
+ title.trigger('click');
+ expect(content.is(':visible')).toBeTruthy();
+
+ title.trigger('click');
+ expect(content.is(':hidden')).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+
+ it('check state classes', function () {
+ var group = $('<div id="4"></div>'),
+ title = $('<div data-role="title"></div>').appendTo(group);
+
+ $('<div data-role="content"></div>').appendTo(group);
+
+ group.appendTo('body');
+
+ group.collapsible({
+ openedState: 'opened',
+ closedState: 'closed',
+ disabledState: 'disabled'
+ });
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+ expect(group.hasClass('closed')).toBeTruthy();
+
+ title.trigger('click');
+ expect(group.hasClass('opened')).toBeTruthy();
+
+ group.collapsible('disable');
+ expect(group.hasClass('disabled')).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+
+ it('check if icons are added to title when initialized and removed when destroyed', function () {
+ var group = $('<div id="5"></div>'),
+ title = $('<div data-role="title"></div>').appendTo(group);
+
+ $('<div data-role="content"></div>').appendTo(group);
+
+ group.appendTo('body');
+
+ group.collapsible({
+ icons: {
+ header: 'minus',
+ activeHeader: 'plus'
+ }
+ });
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+ expect(title.children('[data-role=icons]').length).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ expect(title.children('[data-role=icons]').length).toBeFalsy();
+ });
+
+ it('check if icon classes are changed when content gets expanded/collapsed', function () {
+ var group = $('<div id="6"></div>'),
+ title = $('<div data-role="title"></div>').appendTo(group),
+ content = $('<div data-role="content"></div>').appendTo(group),
+ icons;
+
+ group.appendTo('body');
+
+ group.collapsible({
+ icons: {
+ header: 'minus',
+ activeHeader: 'plus'
+ }
+ });
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+
+ icons = group.collapsible('option', 'icons');
+ group.collapsible('deactivate');
+ expect(content.is(':hidden')).toBeTruthy();
+ expect(title.children('[data-role=icons]').hasClass(icons.header)).toBeTruthy();
+
+ title.trigger('click');
+ expect(title.children('[data-role=icons]').hasClass(icons.activeHeader)).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+
+ it('check keyboard support', function () {
+ var group = $('<div id="7"></div>'),
+ title = $('<div data-role="title"></div>').appendTo(group),
+ content = $('<div data-role="content"></div>').appendTo(group);
+
+ group.appendTo('body');
+
+ group.collapsible();
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+
+ group.collapsible('deactivate');
+ expect(content.is(':hidden')).toBeTruthy();
+
+ title.on('focus', function () {
+ title.trigger($.Event('keydown', {
+ keyCode: $.ui.keyCode.ENTER
+ }));
+ expect(content.is(':visible')).toBeTruthy();
+
+ title.trigger($.Event('keydown', {
+ keyCode: $.ui.keyCode.ENTER
+ }));
+ expect(content.is(':hidden')).toBeTruthy();
+
+ title.trigger($.Event('keydown', {
+ keyCode: $.ui.keyCode.SPACE
+ }));
+ expect(content.is(':visible')).toBeTruthy();
+
+ title.trigger($.Event('keydown', {
+ keyCode: $.ui.keyCode.SPACE
+ }));
+ expect(content.is(':hidden')).toBeTruthy();
+ });
+
+ setTimeout(function () {
+ title.focus();
+ }, 10);
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+
+ it('check if content gets updated via Ajax when title is clicked', function () {
+ var group = $('<div id="8"></div>'),
+ title = $('<div data-role="title"></div>').appendTo(group),
+ content = $('<div data-role="content"></div>').appendTo(group);
+
+ $('<a data-ajax="true" href="test.html"></a>').appendTo(group);
+
+ $.get = jasmine.createSpy().and.callFake(function () {
+ var d = $.Deferred();
+
+ d.promise().success = function () {
+ };
+
+ d.promise().complete = function () {
+ };
+
+ return d.promise();
+ });
+
+ group.appendTo('body');
+
+ group.collapsible({
+ ajaxContent: true
+ });
+ expect(group.is(':mage-collapsible')).toBeTruthy();
+
+ group.collapsible('deactivate');
+ expect(content.is(':hidden')).toBeTruthy();
+ expect(content.children('p').length).toBeFalsy();
+
+ title.trigger('click');
+ expect(content.children('p')).toBeTruthy();
+
+ group.collapsible('destroy');
+ expect(group.is(':mage-collapsible')).toBeFalsy();
+ });
+ });
+});