From 2fff734b30e7e310ae2a98f1bf0687b47edf6df4 Mon Sep 17 00:00:00 2001
From: Oleksandr Miroshnichenko <omiroshnichenko@magento.com>
Date: Thu, 21 Dec 2017 20:02:17 +0200
Subject: [PATCH] magento/magento2#12342: JSTestDriver removal - Added
tabs.test.js and removed JsTestDriver equivalent.
---
.../testsuite/mage/tabs/index.html | 27 ---
.../testsuite/mage/tabs/tabs-test.js | 203 ------------------
.../JsTestDriver/testsuite/mage/tabs/tabs.js | 124 -----------
.../js/jasmine/assets/lib/web/mage/tabs.html | 8 +
.../js/jasmine/tests/lib/mage/tabs.test.js | 119 ++++++++++
5 files changed, 127 insertions(+), 354 deletions(-)
delete mode 100644 dev/tests/js/JsTestDriver/testsuite/mage/tabs/index.html
delete mode 100644 dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs-test.js
delete mode 100644 dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs.js
create mode 100644 dev/tests/js/jasmine/assets/lib/web/mage/tabs.html
create mode 100644 dev/tests/js/jasmine/tests/lib/mage/tabs.test.js
diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/tabs/index.html b/dev/tests/js/JsTestDriver/testsuite/mage/tabs/index.html
deleted file mode 100644
index 30c29e38cc1..00000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/tabs/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-/**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
--->
-<!DOCTYPE html>
-<html>
-<head>
- <meta charset="utf-8">
- <title>Tabs Widget: QUnit Tests </title>
- <base href="../../../"/>
- <link type="text/css" rel="stylesheet" href="framework/qunit/qunit-1.14.0.css"/>
- <script type="text/javascript" src="../../../pub/lib/jquery.js"></script>
- <script type="text/javascript" src="../../../pub/lib/jquery/jquery-ui.js"></script>
- <script type="text/javascript" src="framework/qunit/qunit-1.14.0.js"></script>
- <script type="text/javascript" src="../../../pub/lib/mage/mage.js"></script>
- <script type="text/javascript" src="../../../pub/lib/mage/tabs.js"></script>
- <script type="text/javascript" src="../../../pub/lib/mage/collapsible.js"></script>
- <script type="text/javascript" src="testsuite/mage/tabs/tabs.js"></script>
-</head>
-<body>
-<div id="qunit"></div>
-<div id="qunit-fixture">
-</div>
-</body>
-</html>
diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs-test.js b/dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs-test.js
deleted file mode 100644
index 7129357159f..00000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs-test.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
-TabsTest = TestCase('TabsTest');
-TabsTest.prototype.testInit = function() {
- /*:DOC += <div id="tabs"></div>*/
- var tabs = jQuery('#tabs').tabs();
- assertTrue(tabs.is(':mage-tabs'));
-};
-
-TabsTest.prototype.testCreate = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="#tab1_content" id="tab1"></a>
- <div id="tab1_content"></div>
- </li>
- <li>
- <a href="#tab2_content" id="tab2"></a>
- <div id="tab2_content"></div>
- </li>
- </ul></div>*/
- var tabs = jQuery('#tabs').tabs({active: 'tab2'});
- assertEquals(tabs.tabs('option', 'active'), tabs.data("tabs").anchors.index(jQuery('#tab2')));
-};
-
-TabsTest.prototype.testActiveAnchor = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="#tab1_content" id="tab1"></a>
- <div id="tab1_content"></div>
- </li>
- <li>
- <a href="#tab2_content" id="tab2"></a>
- <div id="tab2_content"></div>
- </li>
- </ul></div>*/
- var tabs = jQuery('#tabs').tabs({active: 'tab2'});
- assertTrue(tabs.tabs('activeAnchor').is(tabs.data("tabs").anchors.eq(tabs.tabs('option', 'active'))));
-};
-
-TabsTest.prototype.testGetTabIndex = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="#tab1_content" id="tab1"></a>
- <div id="tab1_content"></div>
- </li>
- <li>
- <a href="#tab2_content" id="tab2"></a>
- <div id="tab2_content"></div>
- </li>
- </ul></div>*/
- var tabs = jQuery('#tabs').tabs();
- assertEquals(0, tabs.data("tabs")._getTabIndex('tab1'));
- assertEquals(1, tabs.data("tabs")._getTabIndex('tab2'));
-};
-
-TabsTest.prototype.testGetPanelForTab = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="#tab1_content" id="tab1"></a>
- </li>
- </ul></div>
- <div id="destination">
- <div id="tab1_content"></div>
- </div>*/
- var tabs = jQuery('#tabs').tabs({destination: '#destination'});
- assertTrue(jQuery(tabs.data("tabs")._getPanelForTab(jQuery('#tab1').closest('li'))).is('#tab1_content'));
-};
-
-TabsTest.prototype.testMovePanelsInDestination = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="#tab1_content" id="tab1"></a>
- <div id="tab1_content"></div>
- </li>
- </ul></div>
- <div id="destination">
- </div>*/
- var tabs = jQuery('#tabs').tabs({destination: '#destination'});
- var panel = jQuery('#tab1_content');
- tabs.append(panel);
- assertTrue(panel.parents('#tabs').length > 0);
- assertEquals(panel.parents(tabs.tabs('option', 'destination')).length, 0);
-
- tabs.data("tabs")._movePanelsInDestination(panel);
- assertEquals(panel.parents('#tabs').length, 0);
- assertTrue(panel.parents(tabs.tabs('option', 'destination')).length > 0);
-
- tabs.tabs('option', 'destination', null);
- tabs.append(panel);
- assertTrue(panel.parents('#tabs').length > 0);
-
- tabs.data("tabs")._movePanelsInDestination(panel);
- assertTrue(panel.parents('#tabs').length > 0);
-};
-
-TabsTest.prototype.testAjaxLoad = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="www.site.com" id="tab1">Tab 1</a>
- <div id="tab1_content"></div>
- </li>
- </ul></div>
- */
- var tabs = jQuery('#tabs').tabs(),
- ui = {
- tab: jQuery('#tab1'),
- panel: jQuery('#tab1_content')
- };
- tabs.tabs('option', 'load')({}, ui);
- assertEquals(jQuery('#tab1').attr('href'), '#tab1_content');
-};
-
-TabsTest.prototype.testOnContentChange = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="www.site.com" id="tab1">Tab 1</a>
- <div id="tab1_content"></div>
- </li>
- </ul></div>
- */
- var eventMock = {
- data: {
- index: 0
- }
- },
- tabs = jQuery('#tabs').tabs();
-
- tabs.data("tabs")._onContentChange(eventMock);
- assertTrue(jQuery('#tab1').hasClass('_changed'));
-};
-
-TabsTest.prototype.testOnFocus = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="#tab1_content" id="tab1"></a>
- <div id="tab1_content"></div>
- </li>
- <li>
- <a href="#tab2_content" id="tab2"></a>
- <div id="tab2_content"><input /></div>
- </li>
- </ul></div>
- */
- var eventMock = {
- data: {
- index: 1
- }
- },
- tabs = jQuery('#tabs').tabs();
-
- assertNotEquals(tabs.tabs('option', '_active'), eventMock.data.index);
-
- tabs.data("tabs")._onFocus(eventMock);
- assertEquals(tabs.tabs('option', '_active'), eventMock.data.index);
-};
-
-TabsTest.prototype.testOnBeforeSubmit = function() {
- /*:DOC += <div id="tabs"><ul>
- <li>
- <a href="#tab1_content" id="tab1"></a>
- <div id="tab1_content"></div>
- </li>
- </ul></div>
- */
- var tabs = jQuery('#tabs').tabs({active: 'tab1'}),
- data= {},
- testData = {
- action: {
- args: {
- tab: 'tab1'
- }
- }
- },
- testDataTabArgument = {
- action: {
- args: {
- testtab: 'tab1'
- }
- }
- },
- tabPrefix = 'test-',
- tabIdArgument = 'testtab';
-
- tabs.data("tabs")._onBeforeSubmit({}, data);
- assertEquals(data, testData);
- data = {};
-
- jQuery('#tab1').prop('id', 'test-tab1');
- tabs.tabs('option', 'tabsBlockPrefix', tabPrefix);
- tabs.data("tabs")._onBeforeSubmit({}, data);
- assertEquals(data, testData);
- tabs.tabs('option', 'tabsBlockPrefix', null);
- jQuery('#test-tab1').prop('id', 'tab1');
- data = {};
-
- tabs.tabs('option', 'tabIdArgument', tabIdArgument);
- tabs.data("tabs")._onBeforeSubmit({}, data);
- assertEquals(data, testDataTabArgument);
-};
-
-
diff --git a/dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs.js b/dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs.js
deleted file mode 100644
index 582c55da344..00000000000
--- a/dev/tests/js/JsTestDriver/testsuite/mage/tabs/tabs.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * @category mage.js
- * @package test
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
-
-/*
-
- */
-test( "Initialization", function() {
- expect(2);
- var tabs = $("<div></div>");
- tabs.tabs();
- ok( tabs.is(':mage-tabs'), "widget instantiated" );
- tabs.tabs('destroy');
- ok( !tabs.is(':mage-tabs'), "widget destroyed" );
-});
-
-test( "Collapsible instantiation", function() {
- expect(2);
- var tabs = $("<div></div>");
- var title = $("<div></div>").attr("data-role","collapsible");
- title.appendTo(tabs);
- tabs.tabs();
- ok( title.is(':mage-collapsible'), "widget instantiated" );
- tabs.tabs('destroy');
- ok( !title.is(':mage-collapsible'), "widget destroyed" );
-});
-
-test( "Tabs behavior - closing others tabs when one gets activated", function() {
- expect(4);
- var tabs = $('<div></div>');
- var title1 = $('<div data-role="collapsible"></div>').appendTo(tabs);
- var content1 = $('<div data-role="content"></div>').appendTo(tabs);
- var title2 = $('<div data-role="collapsible"></div>').appendTo(tabs);
- var content2 = $('<div data-role="content"></div>').appendTo(tabs);
- tabs.appendTo("body");
- tabs.tabs();
- ok( content1.is(':visible'), "content visible" );
- ok( content2.is(':hidden'), "content hidden" );
- title2.trigger('click');
- ok( content1.is(':hidden'), "content hidden" );
- ok( content2.is(':visible'), "content visible" );
- tabs.tabs('destroy');
-});
-
-test( "Testing enable,disable,activate,deactivate options", function() {
- expect(6);
- var tabs = $('<div></div>');
- var title = $('<div data-role="collapsible"></div>').appendTo(tabs);
- var content = $('<div data-role="content"></div>').appendTo(tabs);
- tabs.appendTo("body");
- tabs.tabs();
- ok( content.is(':visible'), "content visible" );
- tabs.tabs("deactivate",0);
- ok( content.is(':hidden'), "content hidden" );
- tabs.tabs("activate",0);
- ok( content.is(':visible'), "content visible" );
- tabs.tabs("disable",0);
- ok( content.is(':hidden'), "content hidden" );
- title.trigger("click");
- ok( content.is(':hidden'), "content hidden" );
- tabs.tabs("enable",0);
- title.trigger("click");
- ok( content.is(':visible'), "content visible" );
- tabs.tabs('destroy');
-});
-
-asyncTest( "Keyboard support for tabs view", function() {
-
- expect( 5 );
- var tabs = $('<div></div>');
- var title1 = $('<div data-role="collapsible"></div>').appendTo(tabs);
- var content1 = $('<div data-role="content"></div>').appendTo(tabs);
- var title2 = $('<div data-role="collapsible"></div>').appendTo(tabs);
- var content2 = $('<div data-role="content"></div>').appendTo(tabs);
- tabs.appendTo("body");
- tabs.tabs();
-
- title1.on("focus",function(ev){
- ok(content1.is(':visible'), "Content is expanded");
- title1.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.RIGHT } ));
- ok(content2.is(':visible'), "Content is expanded");
- ok(content1.is(':hidden'), "Content is collapsed");
- title2.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.LEFT } ));
- ok(content1.is(':visible'), "Content is expanded");
- ok(content2.is(':hidden'), "Content is collapsed");
- tabs.tabs('destroy');
- start();
- } );
-
- setTimeout(function(){
- title1.focus();
- },10);
-});
-
-asyncTest( "Keyboard support for accordion view", function() {
-
- expect( 5 );
- var tabs = $('<div></div>');
- var title1 = $('<div data-role="collapsible"></div>').appendTo(tabs);
- var content1 = $('<div data-role="content"></div>').appendTo(tabs);
- var title2 = $('<div data-role="collapsible"></div>').appendTo(tabs);
- var content2 = $('<div data-role="content"></div>').appendTo(tabs);
- tabs.appendTo("body");
- tabs.tabs({openOnFocus:false});
-
- title1.on("focus",function(ev){
- ok(content1.is(':visible'), "Content is expanded");
- title1.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.RIGHT } ));
- ok(content1.is(':visible'), "Content is expanded");
- ok(content2.is(':hidden'), "Content is collapsed");
- title2.trigger($.Event( 'keydown', { keyCode: $.ui.keyCode.ENTER } ));
- ok(content2.is(':visible'), "Content is expanded");
- ok(content1.is(':hidden'), "Content is collapsed");
- tabs.tabs('destroy');
- start();
- } );
-
- setTimeout(function(){
- title1.focus();
- },10);
-});
diff --git a/dev/tests/js/jasmine/assets/lib/web/mage/tabs.html b/dev/tests/js/jasmine/assets/lib/web/mage/tabs.html
new file mode 100644
index 00000000000..dd4d665ca18
--- /dev/null
+++ b/dev/tests/js/jasmine/assets/lib/web/mage/tabs.html
@@ -0,0 +1,8 @@
+<div id="tabs">
+ <div id="title1" data-role="collapsible">
+ </div>
+ <div id="content1" data-role="content"></div>
+ <div id="title2" data-role="collapsible">
+ </div>
+ <div id="content2" data-role="content"></div>
+</div>
\ No newline at end of file
diff --git a/dev/tests/js/jasmine/tests/lib/mage/tabs.test.js b/dev/tests/js/jasmine/tests/lib/mage/tabs.test.js
new file mode 100644
index 00000000000..061563f8a0e
--- /dev/null
+++ b/dev/tests/js/jasmine/tests/lib/mage/tabs.test.js
@@ -0,0 +1,119 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/* eslint-disable max-nested-callbacks */
+define([
+ 'jquery',
+ 'jquery/ui',
+ 'mage/tabs',
+ 'text!tests/assets/lib/web/mage/tabs.html'
+], function ($, ui, tabs, tabsTmpl) {
+ 'use strict';
+
+ describe('mage/tabs', function () {
+ var tabsSelector = '#tabs';
+
+ beforeEach(function () {
+ var $tabs = $(tabsTmpl);
+
+ $('body').append($tabs);
+ });
+
+ afterEach(function () {
+ $(tabsSelector).remove();
+ $(tabsSelector).tabs('destroy');
+ });
+
+ it('Check tabs inited', function () {
+ var $tabs = $(tabsSelector).tabs();
+
+ expect($tabs.is(':mage-tabs')).toBe(true);
+ });
+
+ it('Check tabs collapsible inited', function () {
+ var $title1 = $('#title1'),
+ $title2 = $('#title2');
+
+ $(tabsSelector).tabs();
+
+ expect($title1.is(':mage-collapsible')).toBe(true);
+ expect($title2.is(':mage-collapsible')).toBe(true);
+ });
+
+ it('Check tabs active', function () {
+ var $content1 = $('#content1'),
+ $content2 = $('#content2');
+
+ $(tabsSelector).tabs({
+ active: 1
+ });
+
+ expect($content1.is(':hidden')).toBe(true);
+ expect($content2.is(':visible')).toBe(true);
+ });
+
+ it('Check tabs closing others tabs when one gets activated', function () {
+ var $title2 = $('#title2'),
+ $content1 = $('#content1'),
+ $content2 = $('#content2');
+
+ $(tabsSelector).tabs();
+
+ expect($content1.is(':visible')).toBe(true);
+ expect($content2.is(':hidden')).toBe(true);
+
+ $title2.trigger('click');
+
+ expect($content1.is(':hidden')).toBe(true);
+ expect($content2.is(':visible')).toBe(true);
+ });
+
+ it('Check tabs enable,disable,activate,deactivate options', function () {
+ var $title1 = $('#title1'),
+ $content1 = $('#content1'),
+ $tabs = $(tabsSelector).tabs();
+
+ expect($content1.is(':visible')).toBe(true);
+ $tabs.tabs('deactivate', 0);
+ expect($content1.is(':hidden')).toBe(true);
+ $tabs.tabs('activate', 0);
+ expect($content1.is(':visible')).toBe(true);
+ $tabs.tabs('disable', 0);
+ expect($content1.is(':hidden')).toBe(true);
+ $title1.trigger('click');
+ expect($content1.is(':hidden')).toBe(true);
+ $tabs.tabs('enable', 0);
+ expect($content1.is(':visible')).toBe(true);
+ $title1.trigger('click');
+ expect($content1.is(':visible')).toBe(true);
+ });
+
+ it('Check tabs keyboard support', function (done) {
+ var $title1 = $('#title1'),
+ $title2 = $('#title2'),
+ $content1 = $('#content1'),
+ $content2 = $('#content2');
+
+ $(tabsSelector).tabs();
+
+ $title1.one('focus', function () {
+ expect($content1.is(':visible')).toBe(true);
+ $title1.trigger($.Event('keydown', {
+ keyCode: $.ui.keyCode.RIGHT
+ }));
+ expect($content2.is(':visible')).toBe(true);
+ expect($content1.is(':hidden')).toBe(true);
+ $title2.trigger($.Event('keydown', {
+ keyCode: $.ui.keyCode.LEFT
+ }));
+ expect($content1.is(':visible')).toBe(true);
+ expect($content2.is(':hidden')).toBe(true);
+ done();
+ });
+
+ $title1.trigger('focus');
+ });
+ });
+});
--
GitLab