diff options
author | Joshua Wilson <10873576+jwilson8767@users.noreply.github.com> | 2019-02-11 16:15:03 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2019-02-20 23:05:45 +0300 |
commit | fdbb5db9192321564fd480d4ee77a2e966312427 (patch) | |
tree | 854a2aa2fbcd4c38e47e92d30e73c5f2593b4be1 /js | |
parent | 62277bc58e780a5d647e5fc7c023e431f0efd44f (diff) |
minor jQuery.hasclass removal (#28158)
Diffstat (limited to 'js')
-rw-r--r-- | js/src/modal.js | 2 | ||||
-rw-r--r-- | js/tests/unit/modal.js | 123 |
2 files changed, 76 insertions, 49 deletions
diff --git a/js/src/modal.js b/js/src/modal.js index e2d61621d3..69b77009d1 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -245,7 +245,7 @@ class Modal { this._element.removeAttribute('aria-hidden') this._element.setAttribute('aria-modal', true) - if ($(this._dialog).hasClass(ClassName.SCROLLABLE)) { + if (this._dialog.classList.contains(ClassName.SCROLLABLE)) { this._dialog.querySelector(Selector.MODAL_BODY).scrollTop = 0 } else { this._element.scrollTop = 0 diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index dacb1fb8d7..a9a3df838b 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -41,7 +41,7 @@ $(function () { QUnit.test('should throw explicit error on undefined method', function (assert) { assert.expect(1) - var $el = $('<div id="modal-test"/>') + var $el = $('<div id="modal-test"><div class="modal-dialog" /></div>') $el.bootstrapModal() try { $el.bootstrapModal('noMethod') @@ -52,7 +52,7 @@ $(function () { QUnit.test('should return jquery collection containing the element', function (assert) { assert.expect(2) - var $el = $('<div id="modal-test"/>') + var $el = $('<div id="modal-test"><div class="modal-dialog" /></div>') var $modal = $el.bootstrapModal() assert.ok($modal instanceof $, 'returns jquery collection') assert.strictEqual($modal[0], $el[0], 'collection contains element') @@ -67,7 +67,7 @@ $(function () { assert.expect(1) var done = assert.async() - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') done() @@ -79,7 +79,7 @@ $(function () { assert.expect(1) var done = assert.async() - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('show.bs.modal', function () { assert.ok(true, 'show event fired') done() @@ -91,7 +91,7 @@ $(function () { assert.expect(1) var done = assert.async() - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('show.bs.modal', function (e) { e.preventDefault() assert.ok(true, 'show event fired') @@ -107,7 +107,7 @@ $(function () { assert.expect(3) var done = assert.async() - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { assert.ok($('#modal-test').is(':visible'), 'modal visible') assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') @@ -124,7 +124,7 @@ $(function () { assert.expect(3) var done = assert.async() - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { assert.ok($('#modal-test').is(':visible'), 'modal visible') assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') @@ -140,8 +140,7 @@ $(function () { QUnit.test('should remove from dom when click [data-dismiss="modal"]', function (assert) { assert.expect(3) var done = assert.async() - - $('<div id="modal-test"><span class="close" data-dismiss="modal"/></div>') + $('<div id="modal-test"><div class="modal-dialog" /><span class="close" data-dismiss="modal"/></div>') .on('shown.bs.modal', function () { assert.ok($('#modal-test').is(':visible'), 'modal visible') assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') @@ -158,7 +157,7 @@ $(function () { assert.expect(2) var done = assert.async() - $('<div id="modal-test" data-backdrop="false"/>') + $('<div id="modal-test" data-backdrop="false"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { assert.ok($('#modal-test').is(':visible'), 'modal visible') $(this).bootstrapModal('hide') @@ -174,7 +173,7 @@ $(function () { assert.expect(3) var done = assert.async() - $('<div id="modal-test"><div class="contents"/></div>') + $('<div id="modal-test"><div class="modal-dialog" /><div class="contents"/></div>') .on('shown.bs.modal', function () { assert.notEqual($('#modal-test').length, 0, 'modal inserted into dom') $('.contents').trigger('click') @@ -192,7 +191,7 @@ $(function () { assert.expect(1) var done = assert.async() - $('<div id="modal-test" data-backdrop="false"><div class="contents"/></div>') + $('<div id="modal-test" data-backdrop="false"><div class="modal-dialog" /><div class="contents"/></div>') .on('shown.bs.modal', function () { $('#modal-test').trigger('click') assert.ok($('#modal-test').is(':visible'), 'modal not hidden') @@ -205,7 +204,7 @@ $(function () { assert.expect(3) var done = assert.async() - var $div = $('<div id="modal-test"/>') + var $div = $('<div id="modal-test"><div class="modal-dialog" /></div>') $div .on('shown.bs.modal', function () { assert.ok($('#modal-test').length, 'modal inserted into dom') @@ -230,7 +229,7 @@ $(function () { assert.expect(3) var done = assert.async() - var $div = $('<div id="modal-test"/>') + var $div = $('<div id="modal-test"><div class="modal-dialog" /></div>') $div .on('shown.bs.modal', function () { assert.ok($('#modal-test').length, 'modal inserted into dom') @@ -254,7 +253,7 @@ $(function () { var triggered - $('<div id="modal-test"><div class="contents"/></div>') + $('<div id="modal-test"><div class="modal-dialog" /><div class="contents"/></div>') .on('shown.bs.modal', function () { triggered = 0 $('#modal-test').trigger('click') @@ -271,7 +270,7 @@ $(function () { assert.expect(3) var done = assert.async() - $('<div id="modal-test" aria-hidden="true"/>') + $('<div id="modal-test" aria-hidden="true"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { assert.notOk($('#modal-test').is('[aria-hidden]'), 'aria-hidden attribute removed') $(this).bootstrapModal('hide') @@ -288,7 +287,7 @@ $(function () { assert.expect(3) var done = assert.async() - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { assert.ok($('#modal-test').is('[aria-modal]'), 'aria-modal attribute added') assert.strictEqual($('#modal-test').attr('aria-modal'), 'true', 'correct aria-modal="true" added') @@ -304,8 +303,15 @@ $(function () { QUnit.test('should close reopened modal with [data-dismiss="modal"] click', function (assert) { assert.expect(2) var done = assert.async() + var html = [ + '<div id="modal-test">', + ' <div class="modal-dialog">', + ' <div class="contents"><div id="close" data-dismiss="modal"/></div>', + ' </div>', + '</div>' + ].join('') - $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>') + $(html) .one('shown.bs.modal', function () { $('#close').trigger('click') }) @@ -332,10 +338,16 @@ $(function () { QUnit.test('should restore focus to toggling element when modal is hidden after having been opened via data-api', function (assert) { assert.expect(1) var done = assert.async() - var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture') + var html = [ + '<div id="modal-test">', + ' <div class="modal-dialog">', + ' <div class="contents"><div id="close" data-dismiss="modal"/></div>', + ' </div>', + '</div>' + ].join('') - $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>') + $(html) .on('hidden.bs.modal', function () { setTimeout(function () { assert.ok($(document.activeElement).is($toggleBtn), 'toggling element is once again focused') @@ -355,8 +367,15 @@ $(function () { var done = assert.async() var $toggleBtn = $('<button data-toggle="modal" data-target="#modal-test"/>').appendTo('#qunit-fixture') var $otherBtn = $('<button id="other-btn"/>').appendTo('#qunit-fixture') + var html = [ + '<div id="modal-test">', + ' <div class="modal-dialog">', + ' <div class="contents"><div id="close" data-dismiss="modal"/></div>', + ' </div>', + '</div>' + ].join('') - $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div>') + $(html) .one('show.bs.modal', function (e) { e.preventDefault() $otherBtn.trigger('focus') @@ -382,10 +401,10 @@ $(function () { assert.expect(1) var done = assert.async() - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { - var expectedPadding = $(this).getScrollbarWidth() + 'px' - var currentPadding = $(this).css('padding-right') + var expectedPadding = parseInt($(this).getScrollbarWidth(), 10) + var currentPadding = parseInt($(this).css('padding-right'), 10) assert.strictEqual(currentPadding, expectedPadding, 'modal padding should be adjusted while opening') done() }) @@ -396,18 +415,18 @@ $(function () { assert.expect(2) var done = assert.async() var $body = $(document.body) - var originalPadding = $body.css('padding-right') + var originalPadding = parseInt($body.css('padding-right'), 10) - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { - var currentPadding = $body.css('padding-right') + var currentPadding = parseInt($body.css('padding-right'), 10) assert.strictEqual(currentPadding, originalPadding, 'body padding should be reset after closing') $body.removeAttr('style') done() }) .on('shown.bs.modal', function () { - var expectedPadding = parseFloat(originalPadding) + $(this).getScrollbarWidth() + 'px' - var currentPadding = $body.css('padding-right') + var expectedPadding = parseInt(originalPadding, 10) + parseInt($(this).getScrollbarWidth(), 10) + var currentPadding = parseInt($body.css('padding-right'), 10) assert.strictEqual(currentPadding, expectedPadding, 'body padding should be adjusted while opening') $(this).bootstrapModal('hide') }) @@ -421,7 +440,7 @@ $(function () { var originalPadding = '0px' $body.css('padding-right', originalPadding) - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { assert.strictEqual(document.body.getAttribute('data-padding-right'), null, 'data-padding-right should be cleared after closing') $body.removeAttr('style') @@ -444,7 +463,7 @@ $(function () { $body.css('overflow', 'hidden') // Real scrollbar (for in-browser testing) $('html').css('padding-right', '0px') // Simulated scrollbar (for PhantomJS) - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('shown.bs.modal', function () { var currentPadding = $body.css('padding-right') assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted') @@ -462,18 +481,18 @@ $(function () { assert.expect(2) var done = assert.async() var $element = $('<div class="fixed-top"></div>').appendTo('#qunit-fixture') - var originalPadding = $element.css('padding-right') + var originalPadding = parseInt($element.css('padding-right'), 10) - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { - var currentPadding = $element.css('padding-right') + var currentPadding = parseInt($element.css('padding-right'), 10) assert.strictEqual(currentPadding, originalPadding, 'fixed element padding should be reset after closing') $element.remove() done() }) .on('shown.bs.modal', function () { - var expectedPadding = parseFloat(originalPadding) + $(this).getScrollbarWidth() + 'px' - var currentPadding = $element.css('padding-right') + var expectedPadding = parseFloat(originalPadding) + parseInt($(this).getScrollbarWidth(), 10) + var currentPadding = parseInt($element.css('padding-right'), 10) assert.strictEqual(currentPadding, expectedPadding, 'fixed element padding should be adjusted while opening') $(this).bootstrapModal('hide') }) @@ -487,7 +506,7 @@ $(function () { var originalPadding = '0px' $element.css('padding-right', originalPadding) - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { assert.strictEqual($element[0].getAttribute('data-padding-right'), null, 'data-padding-right should be cleared after closing') $element.remove() @@ -504,18 +523,18 @@ $(function () { assert.expect(2) var done = assert.async() var $element = $('<div class="sticky-top"></div>').appendTo('#qunit-fixture') - var originalPadding = $element.css('margin-right') + var originalPadding = parseInt($element.css('margin-right'), 10) - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { - var currentPadding = $element.css('margin-right') + var currentPadding = parseInt($element.css('margin-right'), 10) assert.strictEqual(currentPadding, originalPadding, 'sticky element margin should be reset after closing') $element.remove() done() }) .on('shown.bs.modal', function () { - var expectedPadding = parseFloat(originalPadding) - $(this).getScrollbarWidth() + 'px' - var currentPadding = $element.css('margin-right') + var expectedPadding = parseFloat(originalPadding) - $(this).getScrollbarWidth() + var currentPadding = parseInt($element.css('margin-right'), 10) assert.strictEqual(currentPadding, expectedPadding, 'sticky element margin should be adjusted while opening') $(this).bootstrapModal('hide') }) @@ -529,7 +548,7 @@ $(function () { var originalPadding = '0px' $element.css('margin-right', originalPadding) - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { assert.strictEqual($element[0].getAttribute('data-margin-right'), null, 'data-margin-right should be cleared after closing') $element.remove() @@ -548,7 +567,7 @@ $(function () { var $body = $(document.body) var $style = $('<style>body { padding-right: 42px; }</style>').appendTo('head') - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { assert.strictEqual($body.css('padding-left'), '0px', 'body does not have inline padding set') $style.remove() @@ -568,7 +587,7 @@ $(function () { $body.css('color', 'red') - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { assert.strictEqual($body[0].style.paddingRight, '', 'body does not have inline padding set') assert.strictEqual($body[0].style.color, 'red', 'body still has other inline styles set') @@ -589,7 +608,7 @@ $(function () { $body.css('padding-right', '5%') - $('<div id="modal-test"/>') + $('<div id="modal-test"><div class="modal-dialog" /></div>') .on('hidden.bs.modal', function () { assert.strictEqual($body[0].style.paddingRight, '5%', 'body does not have inline padding set') $body.removeAttr('style') @@ -607,7 +626,15 @@ $(function () { $('<map><area id="test" shape="default" data-toggle="modal" data-target="#modal-test" href="demo.html"/></map>') .appendTo('#qunit-fixture') - $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>') + var modalHtml = [ + '<div id="modal-test">', + ' <div class="modal-dialog">', + ' <div class="contents"><div id="close" data-dismiss="modal"/></div>', + ' </div>', + '</div>' + ].join('') + + $(modalHtml) .appendTo('#qunit-fixture') // We need to use CustomEvent here to have a working preventDefault in IE tests. @@ -630,7 +657,7 @@ $(function () { var done = assert.async() var count = 0 - $('<div id="modal-test"/>').on('shown.bs.modal', function () { + $('<div id="modal-test"><div class="modal-dialog" /></div>').on('shown.bs.modal', function () { count++ }).on('hidden.bs.modal', function () { assert.strictEqual(count, 1, 'show() runs only once') |