Rewritten modal without jquery (#23955)

* Trigger jquery events if available in event handler

* Rewritten modal without jquery

6 files changed, 293 insertions, 57 deletions

diff --git a/js/tests/index.html b/js/tests/index.html
index b49bbfa58..19ff53ce8 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -115,6 +115,7 @@
     <script src="../dist/toast.js"></script>
 
     <!-- Unit Tests -->
+    <script src="unit/dom/eventHandler.js"></script>
     <script src="unit/alert.js"></script>
     <script src="unit/button.js"></script>
     <script src="unit/carousel.js"></script>
diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js
index fff6df5bc..c162e3a9f 100644
--- a/js/tests/unit/button.js
+++ b/js/tests/unit/button.js
@@ -107,17 +107,17 @@ $(function () {
   QUnit.test('should check for closest matching toggle', function (assert) {
     assert.expect(12)
     var groupHTML =
-        '<div class="btn-group" data-toggle="buttons">'
-      + '  <label class="btn btn-primary active">'
-      + '    <input type="radio" name="options" id="option1" checked="true"> Option 1'
-      + '  </label>'
-      + '  <label class="btn btn-primary">'
-      + '    <input type="radio" name="options" id="option2"> Option 2'
-      + '  </label>'
-      + '  <label class="btn btn-primary">'
-      + '    <input type="radio" name="options" id="option3"> Option 3'
-      + '  </label>'
-      + '</div>'
+      '<div class="btn-group" data-toggle="buttons">' +
+      '  <label class="btn btn-primary active">' +
+      '    <input type="radio" name="options" id="option1" checked="true"> Option 1' +
+      '  </label>' +
+      '  <label class="btn btn-primary">' +
+      '    <input type="radio" name="options" id="option2"> Option 2' +
+      '  </label>' +
+      '  <label class="btn btn-primary">' +
+      '    <input type="radio" name="options" id="option3"> Option 3' +
+      '  </label>' +
+      '</div>'
 
     var $group = $(groupHTML).appendTo('#qunit-fixture')
 
diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js
index 615318ad3..fd9cf8509 100644
--- a/js/tests/unit/carousel.js
+++ b/js/tests/unit/carousel.js
@@ -619,13 +619,9 @@ $(function () {
 
     assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
 
-<<<<<<< HEAD
-    $template.trigger($.Event('keydown', {
+    EventHandler.trigger($template[0], 'keydown', {
       which: 37
-    }))
-=======
-    EventHandler.trigger($template[0], 'keydown', { which: 37 })
->>>>>>> fix unit test for carousel
+    })
 
     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
   })
@@ -651,13 +647,9 @@ $(function () {
 
     assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active')
 
-<<<<<<< HEAD
-    $template.trigger($.Event('keydown', {
+    EventHandler.trigger($template[0], 'keydown', {
       which: 39
-    }))
-=======
-    EventHandler.trigger($template[0], 'keydown', { which: 39 })
->>>>>>> fix unit test for carousel
+    })
 
     assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active')
   })
@@ -676,24 +668,14 @@ $(function () {
     $template.bootstrapCarousel()
     var done = assert.async()
 
-<<<<<<< HEAD
-    var eventArrowDown = $.Event('keydown', {
-      which: 40
-    })
-    var eventArrowUp   = $.Event('keydown', {
-      which: 38
-    })
-
-    $template.one('keydown', function (event) {
-      assert.strictEqual(event.isDefaultPrevented(), false)
-=======
     EventHandler.one($template[0], 'keydown', function (event) {
       assert.strictEqual(event.defaultPrevented, false)
->>>>>>> fix unit test for carousel
     })
 
     // arrow down
-    EventHandler.trigger($template[0], 'keydown', { which: 40 })
+    EventHandler.trigger($template[0], 'keydown', {
+      which: 40
+    })
 
     EventHandler.one($template[0], 'keydown', function (event) {
       assert.strictEqual(event.defaultPrevented, false)
@@ -701,7 +683,9 @@ $(function () {
     })
 
     // arrow up
-    EventHandler.trigger($template[0], 'keydown', { which: 38 })
+    EventHandler.trigger($template[0], 'keydown', {
+      which: 38
+    })
   })
 
   QUnit.test('should support disabling the keyboard navigation', function (assert) {
diff --git a/js/tests/unit/dom/eventHandler.js b/js/tests/unit/dom/eventHandler.js
new file mode 100644
index 000000000..49cc89c65
--- /dev/null
+++ b/js/tests/unit/dom/eventHandler.js
@@ -0,0 +1,239 @@
+$(function () {
+  'use strict'
+
+  QUnit.module('event handler')
+
+  QUnit.test('should be defined', function (assert) {
+    assert.expect(1)
+    assert.ok(EventHandler, 'EventHandler is defined')
+  })
+
+  QUnit.test('should trigger event correctly', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    element.addEventListener('foobar', function () {
+      assert.ok(true, 'listener called')
+    })
+
+    EventHandler.trigger(element, 'foobar')
+  })
+
+  QUnit.test('should trigger event through jQuery event system', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    $(element).on('foobar', function () {
+      assert.ok(true, 'listener called')
+    })
+
+    EventHandler.trigger(element, 'foobar')
+  })
+
+  QUnit.test('should trigger namespaced event through jQuery event system', function (assert) {
+    assert.expect(2)
+
+    var element = document.createElement('div')
+    $(element).on('foobar.namespace', function () {
+      assert.ok(true, 'first listener called')
+    })
+    element.addEventListener('foobar.namespace', function () {
+      assert.ok(true, 'second listener called')
+    })
+
+    EventHandler.trigger(element, 'foobar.namespace')
+  })
+
+  QUnit.test('should mirror preventDefault', function (assert) {
+    assert.expect(2)
+
+    var element = document.createElement('div')
+    $(element).on('foobar.namespace', function (event) {
+      event.preventDefault()
+      assert.ok(true, 'first listener called')
+    })
+    element.addEventListener('foobar.namespace', function (event) {
+      assert.ok(event.defaultPrevented, 'defaultPrevented is true in second listener')
+    })
+
+    EventHandler.trigger(element, 'foobar.namespace')
+  })
+
+  QUnit.test('on should add event listener', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    EventHandler.on(element, 'foobar', function () {
+      assert.ok(true, 'listener called')
+    })
+
+    EventHandler.trigger(element, 'foobar')
+  })
+
+  QUnit.test('on should add namespaced event listener', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    EventHandler.on(element, 'foobar.namespace', function () {
+      assert.ok(true, 'listener called')
+    })
+
+    EventHandler.trigger(element, 'foobar.namespace')
+  })
+
+  QUnit.test('on should add native namespaced event listener', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    document.body.appendChild(element)
+    EventHandler.on(element, 'click.namespace', function () {
+      assert.ok(true, 'listener called')
+    })
+
+    EventHandler.trigger(element, 'click')
+    document.body.removeChild(element)
+  })
+
+  QUnit.test('on should add delegated event listener', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    var subelement = document.createElement('span')
+    element.appendChild(subelement)
+
+    var anchor = document.createElement('a')
+    element.appendChild(anchor)
+
+    EventHandler.on(element, 'click.namespace', 'a', function () {
+      assert.ok(true, 'listener called')
+    })
+
+    EventHandler.on(element, 'click', 'span', function () {
+      assert.notOk(true, 'listener should not be called')
+    })
+
+    document.body.appendChild(element)
+    EventHandler.trigger(anchor, 'click')
+    document.body.removeChild(element)
+  })
+
+  QUnit.test('one should remove the listener after the event', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    EventHandler.one(element, 'foobar', function () {
+      assert.ok(true, 'listener called')
+    })
+
+    EventHandler.trigger(element, 'foobar')
+    EventHandler.trigger(element, 'foobar')
+  })
+
+  QUnit.test('off should remove a listener', function (assert) {
+    assert.expect(1)
+
+    var element = document.createElement('div')
+    var handler = function () {
+      assert.ok(true, 'listener called')
+    }
+
+    EventHandler.on(element, 'foobar', handler)
+    EventHandler.trigger(element, 'foobar')
+
+    EventHandler.off(element, 'foobar', handler)
+    EventHandler.trigger(element, 'foobar')
+  })
+
+  QUnit.test('off should remove all the listeners', function (assert) {
+    assert.expect(2)
+
+    var element = document.createElement('div')
+
+    EventHandler.on(element, 'foobar', function () {
+      assert.ok(true, 'first listener called')
+    })
+    EventHandler.on(element, 'foobar', function () {
+      assert.ok(true, 'second listener called')
+    })
+    EventHandler.trigger(element, 'foobar')
+
+    EventHandler.off(element, 'foobar')
+    EventHandler.trigger(element, 'foobar')
+  })
+
+  QUnit.test('off should remove all the namespaced listeners if namespace is passed', function (assert) {
+    assert.expect(2)
+
+    var element = document.createElement('div')
+
+    EventHandler.on(element, 'foobar.namespace', function () {
+      assert.ok(true, 'first listener called')
+    })
+    EventHandler.on(element, 'foofoo.namespace', function () {
+      assert.ok(true, 'second listener called')
+    })
+    EventHandler.trigger(element, 'foobar.namespace')
+    EventHandler.trigger(element, 'foofoo.namespace')
+
+    EventHandler.off(element, '.namespace')
+    EventHandler.trigger(element, 'foobar.namespace')
+    EventHandler.trigger(element, 'foofoo.namespace')
+  })
+
+  QUnit.test('off should remove the namespaced listeners', function (assert) {
+    assert.expect(2)
+
+    var element = document.createElement('div')
+
+    EventHandler.on(element, 'foobar.namespace', function () {
+      assert.ok(true, 'first listener called')
+    })
+    EventHandler.on(element, 'foofoo.namespace', function () {
+      assert.ok(true, 'second listener called')
+    })
+    EventHandler.trigger(element, 'foobar.namespace')
+
+    EventHandler.off(element, 'foobar.namespace')
+    EventHandler.trigger(element, 'foobar.namespace')
+
+    EventHandler.trigger(element, 'foofoo.namespace')
+  })
+
+  QUnit.test('off should remove the all the namespaced listeners for native events', function (assert) {
+    assert.expect(2)
+
+    var element = document.createElement('div')
+    document.body.appendChild(element)
+
+    EventHandler.on(element, 'click.namespace', function () {
+      assert.ok(true, 'first listener called')
+    })
+    EventHandler.on(element, 'click.namespace2', function () {
+      assert.ok(true, 'second listener called')
+    })
+    EventHandler.trigger(element, 'click')
+
+    EventHandler.off(element, 'click')
+    EventHandler.trigger(element, 'click')
+    document.body.removeChild(element)
+  })
+
+  QUnit.test('off should remove the specified namespaced listeners for native events', function (assert) {
+    assert.expect(3)
+
+    var element = document.createElement('div')
+    document.body.appendChild(element)
+
+    EventHandler.on(element, 'click.namespace', function () {
+      assert.ok(true, 'first listener called')
+    })
+    EventHandler.on(element, 'click.namespace2', function () {
+      assert.ok(true, 'second listener called')
+    })
+    EventHandler.trigger(element, 'click')
+
+    EventHandler.off(element, 'click.namespace')
+    EventHandler.trigger(element, 'click')
+    document.body.removeChild(element)
+  })
+})
diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index 9b7fb0aa6..cfac27bba 100644
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -209,9 +209,12 @@ $(function () {
       .on('shown.bs.modal', function () {
         assert.ok($('#modal-test').length, 'modal inserted into dom')
         assert.ok($('#modal-test').is(':visible'), 'modal visible')
-        $div.trigger($.Event('keydown', {
-          which: 27
-        }))
+
+        var evt = document.createEvent('HTMLEvents')
+        evt.initEvent('keydown', true, true)
+        evt.which = 27
+
+        $div[0].dispatchEvent(evt)
 
         setTimeout(function () {
           assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
@@ -308,15 +311,19 @@ $(function () {
       .one('hidden.bs.modal', function () {
         // After one open-close cycle
         assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
-        $(this)
-          .one('shown.bs.modal', function () {
-            $('#close').trigger('click')
-          })
-          .one('hidden.bs.modal', function () {
-            assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
-            done()
-          })
-          .bootstrapModal('show')
+
+        var $this = $(this)
+        setTimeout(function () {
+          $this
+            .one('shown.bs.modal', function () {
+              $('#close').trigger('click')
+            })
+            .one('hidden.bs.modal', function () {
+              assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
+              done()
+            })
+            .bootstrapModal('show')
+        }, 0)
       })
       .bootstrapModal('show')
   })
@@ -595,7 +602,6 @@ $(function () {
 
   QUnit.test('should not follow link in area tag', function (assert) {
     assert.expect(2)
-    var done = assert.async()
 
     $('<map><area id="test" shape="default" data-toggle="modal" data-target="#modal-test" href="demo.html"/></map>')
       .appendTo('#qunit-fixture')
@@ -603,16 +609,19 @@ $(function () {
     $('<div id="modal-test"><div class="contents"><div id="close" data-dismiss="modal"/></div></div>')
       .appendTo('#qunit-fixture')
 
+    // We need to use CustomEvent here to have a working preventDefault in IE tests.
+    var evt = new CustomEvent('click', {
+      bubbles: true,
+      cancelable: true
+    })
+
     $('#test')
       .on('click.bs.modal.data-api', function (event) {
-        assert.notOk(event.isDefaultPrevented(), 'navigating to href will happen')
-
-        setTimeout(function () {
-          assert.ok(event.isDefaultPrevented(), 'model shown instead of navigating to href')
-          done()
-        }, 1)
+        assert.notOk(event.defaultPrevented, 'navigating to href will happen')
       })
-      .trigger('click')
+
+    $('#test')[0].dispatchEvent(evt)
+    assert.ok(evt.defaultPrevented, 'model shown instead of navigating to href')
   })
 
   QUnit.test('should not parse target as html', function (assert) {
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 30975b0c7..2062a195b 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -207,7 +207,10 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/data.js"></script>
     <script src="../../dist/dom/eventHandler.js"></script>
+    <script src="../../dist/dom/manipulator.js"></script>
+    <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/modal.js"></script>
     <script src="../../dist/collapse.js"></script>