Skip to content
Snippets Groups Projects
Commit c98720f5 authored by Carlos Lizaga's avatar Carlos Lizaga
Browse files

Added dropdown.test.js and removed JsTestDriver equivalent.

parent 6366f835
Branches
No related merge requests found
Hide whitespace changes
Inline Side-by-side
dev/tests/js/JsTestDriver/testsuite/mage/dropdown/index.html deleted 100644 → 0
+ 0
− 30
View file @ 6366f835
<!--
/**
* @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>
dev/tests/js/JsTestDriver/testsuite/mage/dropdown/test-dropdown.js deleted 100644 → 0
+ 0
− 270
View file @ 6366f835
/**
* 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" );
});
dev/tests/js/jasmine/tests/lib/mage/dropdown.test.js 0 → 100644
+ 351
− 0
View file @ c98720f5
/**
* 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');
});
});
});
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment