From 967e6071bac797101daabe74c31cc3a5e6493fd4 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Wed, 6 May 2020 09:20:08 +0300
Subject: [PATCH] tests: streamline HTML end tags (#30648)

---
 js/tests/README.md             |   2 +-
 js/tests/unit/button.spec.js   |  10 ++--
 js/tests/unit/carousel.spec.js |   2 +-
 js/tests/unit/collapse.spec.js |  32 +++++------
 js/tests/unit/dropdown.spec.js |   8 +--
 js/tests/unit/modal.spec.js    |  84 +++++++++++++--------------
 js/tests/unit/tab.spec.js      |  12 +++-
 js/tests/unit/tooltip.spec.js  | 100 ++++++++++++++++-----------------
 js/tests/visual/collapse.html  |   2 +-
 js/tests/visual/tooltip.html   |   2 +-
 10 files changed, 130 insertions(+), 124 deletions(-)

diff --git a/js/tests/README.md b/js/tests/README.md
index 8823d05dc5..41fddb9a31 100644
--- a/js/tests/README.md
+++ b/js/tests/README.md
@@ -51,7 +51,7 @@ describe('getInstance', () => {
 
 // Asynchronous test
 it('should show a tooltip without the animation', done => {
-  fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+  fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"></a>'
 
   const tooltipEl = fixtureEl.querySelector('a')
   const tooltip = new Tooltip(tooltipEl, {
diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js
index a3c95be1ba..f7caf23f62 100644
--- a/js/tests/unit/button.spec.js
+++ b/js/tests/unit/button.spec.js
@@ -143,7 +143,7 @@ describe('Button', () => {
     })
 
     it('should add focus class on focus event', () => {
-      fixtureEl.innerHTML = '<button class="btn" data-toggle="button"><input type="text" /></button>'
+      fixtureEl.innerHTML = '<button class="btn" data-toggle="button"><input type="text"></button>'
 
       const btn = fixtureEl.querySelector('.btn')
       const input = fixtureEl.querySelector('input')
@@ -155,7 +155,7 @@ describe('Button', () => {
     })
 
     it('should not add focus class', () => {
-      fixtureEl.innerHTML = '<button data-toggle="button"><input type="text" /></button>'
+      fixtureEl.innerHTML = '<button data-toggle="button"><input type="text"></button>'
 
       const btn = fixtureEl.querySelector('button')
       const input = fixtureEl.querySelector('input')
@@ -167,7 +167,7 @@ describe('Button', () => {
     })
 
     it('should remove focus class on blur event', () => {
-      fixtureEl.innerHTML = '<button class="btn focus" data-toggle="button"><input type="text" /></button>'
+      fixtureEl.innerHTML = '<button class="btn focus" data-toggle="button"><input type="text"></button>'
 
       const btn = fixtureEl.querySelector('.btn')
       const input = fixtureEl.querySelector('input')
@@ -179,7 +179,7 @@ describe('Button', () => {
     })
 
     it('should not remove focus class on blur event', () => {
-      fixtureEl.innerHTML = '<button class="focus" data-toggle="button"><input type="text" /></button>'
+      fixtureEl.innerHTML = '<button class="focus" data-toggle="button"><input type="text"></button>'
 
       const btn = fixtureEl.querySelector('button')
       const input = fixtureEl.querySelector('input')
@@ -211,7 +211,7 @@ describe('Button', () => {
       fixtureEl.innerHTML = [
         '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>',
         '  <label class="btn btn-danger disabled" aria-disabled="true" disabled>',
-        '    <input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>',
+        '    <input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled">',
         '  </label>',
         '</div>'
       ].join('')
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index 46659a032a..61ca52cb29 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -141,7 +141,7 @@ describe('Carousel', () => {
         '<div id="myCarousel" class="carousel slide">',
         '  <div class="carousel-inner">',
         '    <div class="carousel-item active">',
-        '      <input type="text" />',
+        '      <input type="text">',
         '      <textarea></textarea>',
         '    </div>',
         '    <div class="carousel-item"></div>',
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js
index 7eb0f598ec..a5e101aad1 100644
--- a/js/tests/unit/collapse.spec.js
+++ b/js/tests/unit/collapse.spec.js
@@ -229,10 +229,10 @@ describe('Collapse', () => {
     it('should collapse only the first collapse', done => {
       fixtureEl.innerHTML = [
         '<div class="card" id="accordion1">',
-        '  <div id="collapse1" class="collapse"/>',
+        '  <div id="collapse1" class="collapse"></div>',
         '</div>',
         '<div class="card" id="accordion2">',
-        '  <div id="collapse2" class="collapse show"/>',
+        '  <div id="collapse2" class="collapse show"></div>',
         '</div>'
       ].join('')
 
@@ -377,8 +377,8 @@ describe('Collapse', () => {
     it('should show multiple collapsed elements', done => {
       fixtureEl.innerHTML = [
         '<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>',
-        '<div id="collapse1" class="collapse multi"/>',
-        '<div id="collapse2" class="collapse multi"/>'
+        '<div id="collapse1" class="collapse multi"></div>',
+        '<div id="collapse2" class="collapse multi"></div>'
       ].join('')
 
       const trigger = fixtureEl.querySelector('a')
@@ -399,8 +399,8 @@ describe('Collapse', () => {
     it('should hide multiple collapsed elements', done => {
       fixtureEl.innerHTML = [
         '<a role="button" data-toggle="collapse" href=".multi"></a>',
-        '<div id="collapse1" class="collapse multi show"/>',
-        '<div id="collapse2" class="collapse multi show"/>'
+        '<div id="collapse1" class="collapse multi show"></div>',
+        '<div id="collapse2" class="collapse multi show"></div>'
       ].join('')
 
       const trigger = fixtureEl.querySelector('a')
@@ -420,8 +420,8 @@ describe('Collapse', () => {
 
     it('should remove "collapsed" class from target when collapse is shown', done => {
       fixtureEl.innerHTML = [
-        '<a id="link1" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1" />',
-        '<a id="link2" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1" />',
+        '<a id="link1" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>',
+        '<a id="link2" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>',
         '<div id="test1"></div>'
       ].join('')
 
@@ -442,8 +442,8 @@ describe('Collapse', () => {
 
     it('should add "collapsed" class to target when collapse is hidden', done => {
       fixtureEl.innerHTML = [
-        '<a id="link1" role="button" data-toggle="collapse" href="#" data-target="#test1" />',
-        '<a id="link2" role="button" data-toggle="collapse" href="#" data-target="#test1" />',
+        '<a id="link1" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>',
+        '<a id="link2" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>',
         '<div id="test1" class="show"></div>'
       ].join('')
 
@@ -499,7 +499,7 @@ describe('Collapse', () => {
 
     it('should not prevent event for input', done => {
       fixtureEl.innerHTML = [
-        '<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1" />',
+        '<input type="checkbox" data-toggle="collapse" data-target="#collapsediv1">',
         '<div id="collapsediv1"></div>'
       ].join('')
 
@@ -703,11 +703,11 @@ describe('Collapse', () => {
 
     it('should add "collapsed" class and set aria-expanded to triggers only when all the targeted collapse are hidden', done => {
       fixtureEl.innerHTML = [
-        '<a id="trigger1" role="button" data-toggle="collapse" href="#test1"/>',
-        '<a id="trigger2" role="button" data-toggle="collapse" href="#test2"/>',
-        '<a id="trigger3" role="button" data-toggle="collapse" href=".multi"/>',
-        '<div id="test1" class="multi"/>',
-        '<div id="test2" class="multi"/>'
+        '<a id="trigger1" role="button" data-toggle="collapse" href="#test1"></a>',
+        '<a id="trigger2" role="button" data-toggle="collapse" href="#test2"></a>',
+        '<a id="trigger3" role="button" data-toggle="collapse" href=".multi"></a>',
+        '<div id="test1" class="multi"></div>',
+        '<div id="test2" class="multi"></div>'
       ].join('')
 
       const trigger1 = fixtureEl.querySelector('#trigger1')
diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js
index ccac6f0cf4..c7f05ed22a 100644
--- a/js/tests/unit/dropdown.spec.js
+++ b/js/tests/unit/dropdown.spec.js
@@ -1232,7 +1232,7 @@ describe('Dropdown', () => {
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
-        '    <input type="text" />',
+        '    <input type="text">',
         '    <textarea></textarea>',
         '  </div>',
         '</div>'
@@ -1400,7 +1400,7 @@ describe('Dropdown', () => {
         '<div class="dropdown">',
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
-        '    <input type="text" />',
+        '    <input type="text">',
         '  </div>',
         '</div>'
       ].join('')
@@ -1455,7 +1455,7 @@ describe('Dropdown', () => {
         '  <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>',
         '  <div class="dropdown-menu">',
         '    <a class="dropdown-item" href="#sub1">Submenu 1</a>',
-        '    <input type="text" />',
+        '    <input type="text">',
         '    <textarea></textarea>',
         '  </div>',
         '</div>'
@@ -1531,7 +1531,7 @@ describe('Dropdown', () => {
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item" href="#">Secondary link</a>',
         '      <a class="dropdown-item" href="#">Something else here</a>',
-        '      <div class="divider"/>',
+        '      <div class="divider"></div>',
         '     <a class="dropdown-item" href="#">Another link</a>',
         '   </div>',
         '  </div>',
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index a2077b5944..4bc103edc9 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -58,7 +58,7 @@ describe('Modal', () => {
 
   describe('toggle', () => {
     it('should toggle a modal', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -83,7 +83,7 @@ describe('Modal', () => {
     it('should adjust the inline padding of fixed elements when opening and restore when closing', done => {
       fixtureEl.innerHTML = [
         '<div class="fixed-top" style="padding-right: 0px"></div>',
-        '<div class="modal"><div class="modal-dialog" /></div>'
+        '<div class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const fixedEl = fixtureEl.querySelector('.fixed-top')
@@ -114,7 +114,7 @@ describe('Modal', () => {
     it('should adjust the inline margin of sticky elements when opening and restore when closing', done => {
       fixtureEl.innerHTML = [
         '<div class="sticky-top" style="margin-right: 0px;"></div>',
-        '<div class="modal"><div class="modal-dialog" /></div>'
+        '<div class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const stickyTopEl = fixtureEl.querySelector('.sticky-top')
@@ -143,7 +143,7 @@ describe('Modal', () => {
     })
 
     it('should ignore values set via CSS when trying to restore body padding after closing', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
       const styleTest = document.createElement('style')
 
       styleTest.type = 'text/css'
@@ -167,7 +167,7 @@ describe('Modal', () => {
     })
 
     it('should ignore other inline styles when trying to restore body padding after closing', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
       const styleTest = document.createElement('style')
 
       styleTest.type = 'text/css'
@@ -197,7 +197,7 @@ describe('Modal', () => {
     })
 
     it('should properly restore non-pixel inline body padding after closing', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       document.body.style.paddingRight = '5%'
 
@@ -220,7 +220,7 @@ describe('Modal', () => {
 
   describe('show', () => {
     it('should show a modal', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -241,7 +241,7 @@ describe('Modal', () => {
     })
 
     it('should show a modal without backdrop', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -284,7 +284,7 @@ describe('Modal', () => {
     })
 
     it('should do nothing if a modal is shown', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -298,7 +298,7 @@ describe('Modal', () => {
     })
 
     it('should do nothing if a modal is transitioning', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -312,7 +312,7 @@ describe('Modal', () => {
     })
 
     it('should not fire shown event when show is prevented', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -336,7 +336,7 @@ describe('Modal', () => {
     })
 
     it('should set is transitioning if fade class is present', done => {
-      fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -423,7 +423,7 @@ describe('Modal', () => {
     })
 
     it('should not enforce focus if focus equal to false', done => {
-      fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -441,7 +441,7 @@ describe('Modal', () => {
     })
 
     it('should add listener when escape touch is pressed', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -464,7 +464,7 @@ describe('Modal', () => {
     })
 
     it('should do nothing when the pressed key is not escape', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -489,7 +489,7 @@ describe('Modal', () => {
     })
 
     it('should adjust dialog on resize', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -513,7 +513,7 @@ describe('Modal', () => {
     })
 
     it('should not close modal when clicking outside of modal-content if backdrop = false', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -540,7 +540,7 @@ describe('Modal', () => {
     })
 
     it('should not close modal when clicking outside of modal-content if backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" ><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" ><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -567,7 +567,7 @@ describe('Modal', () => {
     })
 
     it('should close modal when escape key is pressed with keyboard = true and backdrop is static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -594,7 +594,7 @@ describe('Modal', () => {
     })
 
     it('should not close modal when escape key is pressed with keyboard = false and backdrop = static', done => {
-      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-backdrop="static" data-keyboard="false"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl, {
@@ -625,7 +625,7 @@ describe('Modal', () => {
     })
 
     it('should not adjust the inline body padding when it does not overflow', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -650,7 +650,7 @@ describe('Modal', () => {
     })
 
     it('should enforce focus', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -684,7 +684,7 @@ describe('Modal', () => {
 
   describe('hide', () => {
     it('should hide a modal', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -709,7 +709,7 @@ describe('Modal', () => {
     })
 
     it('should close modal when clicking outside of modal-content', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -730,7 +730,7 @@ describe('Modal', () => {
     })
 
     it('should do nothing is the modal is not shown', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -741,7 +741,7 @@ describe('Modal', () => {
     })
 
     it('should do nothing is the modal is transitioning', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -753,7 +753,7 @@ describe('Modal', () => {
     })
 
     it('should not hide a modal if hide is prevented', done => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -784,7 +784,7 @@ describe('Modal', () => {
 
   describe('dispose', () => {
     it('should dispose a modal', () => {
-      fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -802,7 +802,7 @@ describe('Modal', () => {
 
   describe('handleUpdate', () => {
     it('should call adjust dialog', () => {
-      fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
 
       const modalEl = fixtureEl.querySelector('.modal')
       const modal = new Modal(modalEl)
@@ -819,7 +819,7 @@ describe('Modal', () => {
     it('should open modal', done => {
       fixtureEl.innerHTML = [
         '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
-        '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+        '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
@@ -839,7 +839,7 @@ describe('Modal', () => {
     it('should not recreate a new modal', done => {
       fixtureEl.innerHTML = [
         '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>',
-        '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+        '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
@@ -859,7 +859,7 @@ describe('Modal', () => {
     it('should prevent default when the trigger is <a> or <area>', done => {
       fixtureEl.innerHTML = [
         '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
-        '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+        '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
@@ -882,7 +882,7 @@ describe('Modal', () => {
     it('should focus the trigger on hide', done => {
       fixtureEl.innerHTML = [
         '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
-        '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+        '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
@@ -913,7 +913,7 @@ describe('Modal', () => {
     it('should not focus the trigger if the modal is not visible', done => {
       fixtureEl.innerHTML = [
         '<a data-toggle="modal" href="#" data-target="#exampleModal" style="display: none;"></a>',
-        '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog" /></div>'
+        '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
@@ -944,7 +944,7 @@ describe('Modal', () => {
     it('should not focus the trigger if the modal is not shown', done => {
       fixtureEl.innerHTML = [
         '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>',
-        '<div id="exampleModal" class="modal"><div class="modal-dialog" /></div>'
+        '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>'
       ].join('')
 
       const modalEl = fixtureEl.querySelector('.modal')
@@ -970,7 +970,7 @@ describe('Modal', () => {
 
   describe('jQueryInterface', () => {
     it('should create a modal', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
 
@@ -983,7 +983,7 @@ describe('Modal', () => {
     })
 
     it('should not re create a modal', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
       const modal = new Modal(div)
@@ -997,7 +997,7 @@ describe('Modal', () => {
     })
 
     it('should throw error on undefined method', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
       const action = 'undefinedMethod'
@@ -1013,7 +1013,7 @@ describe('Modal', () => {
     })
 
     it('should should call show method', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
       const modal = new Modal(div)
@@ -1029,7 +1029,7 @@ describe('Modal', () => {
     })
 
     it('should should not call show method', () => {
-      fixtureEl.innerHTML = '<div class="modal" data-show="false"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal" data-show="false"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
 
@@ -1046,7 +1046,7 @@ describe('Modal', () => {
 
   describe('getInstance', () => {
     it('should return modal instance', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
       const modal = new Modal(div)
@@ -1055,7 +1055,7 @@ describe('Modal', () => {
     })
 
     it('should return null when there is no modal instance', () => {
-      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog" /></div>'
+      fixtureEl.innerHTML = '<div class="modal"><div class="modal-dialog"></div>'
 
       const div = fixtureEl.querySelector('div')
 
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 70aa8eb336..8bf172d10d 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -27,7 +27,10 @@ describe('Tab', () => {
         '  <li><a href="#home" role="tab">Home</a></li>',
         '  <li><a id="triggerProfile" role="tab" href="#profile">Profile</a></li>',
         '</ul>',
-        '<ul><li id="home"/><li id="profile"/></ul>'
+        '<ul>',
+        '  <li id="home"></li>',
+        '  <li id="profile"></li>',
+        '</ul>'
       ].join('')
 
       const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
@@ -48,7 +51,10 @@ describe('Tab', () => {
         '  <li><a href="#home">Home</a></li>',
         '  <li><a id="triggerProfile" href="#profile">Profile</a></li>',
         '</ol>',
-        '<ol><li id="home"/><li id="profile"/></ol>'
+        '<ol>',
+        '  <li id="home"></li>',
+        '  <li id="profile"></li>',
+        '</ol>'
       ].join('')
 
       const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
@@ -444,7 +450,7 @@ describe('Tab', () => {
         '  <li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>',
         '  <li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>',
         '  <li class="nav-item dropdown">',
-        '    <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</>',
+        '    <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>',
         '    <div class="dropdown-menu">',
         '      <a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>',
         '      <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>',
diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js
index 5e3bb93261..e713fe5602 100644
--- a/js/tests/unit/tooltip.spec.js
+++ b/js/tests/unit/tooltip.spec.js
@@ -64,7 +64,7 @@ describe('Tooltip', () => {
 
   describe('constructor', () => {
     it('should not take care of disallowed data attributes', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-sanitize="false" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" data-sanitize="false" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -73,7 +73,7 @@ describe('Tooltip', () => {
     })
 
     it('should convert title and content to string if numbers', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -94,7 +94,7 @@ describe('Tooltip', () => {
         trigger: 'click'
       })
 
-      containerEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      containerEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipInContainerEl = containerEl.querySelector('a')
 
@@ -108,7 +108,7 @@ describe('Tooltip', () => {
     })
 
     it('should allow to pass config to popper.js with `popperConfig`', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -125,7 +125,7 @@ describe('Tooltip', () => {
 
   describe('enable', () => {
     it('should enable a tooltip', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -143,7 +143,7 @@ describe('Tooltip', () => {
 
   describe('disable', () => {
     it('should disable tooltip', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -165,7 +165,7 @@ describe('Tooltip', () => {
 
   describe('toggleEnabled', () => {
     it('should toggle enabled', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -180,7 +180,7 @@ describe('Tooltip', () => {
 
   describe('toggle', () => {
     it('should do nothing if disabled', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -200,7 +200,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -214,7 +214,7 @@ describe('Tooltip', () => {
     })
 
     it('should call toggle and show the tooltip when trigger is "click"', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -232,7 +232,7 @@ describe('Tooltip', () => {
     })
 
     it('should hide a tooltip', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -250,7 +250,7 @@ describe('Tooltip', () => {
     })
 
     it('should call toggle and hide the tooltip when trigger is "click"', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -274,7 +274,7 @@ describe('Tooltip', () => {
 
   describe('dispose', () => {
     it('should destroy a tooltip', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -287,7 +287,7 @@ describe('Tooltip', () => {
     })
 
     it('should destroy a tooltip and remove it from the dom', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -307,7 +307,7 @@ describe('Tooltip', () => {
 
   describe('show', () => {
     it('should show a tooltip', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -325,7 +325,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip on mobile', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -344,7 +344,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip relative to placement option', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -366,7 +366,7 @@ describe('Tooltip', () => {
     })
 
     it('should not error when trying to show a tooltip that has been removed from the dom', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -393,7 +393,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip with a dom element container', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -409,7 +409,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip with a jquery element container', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -428,7 +428,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip with a selector in container', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -444,7 +444,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip with placement as a function', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const spy = jasmine.createSpy('placement').and.returnValue('top')
       const tooltipEl = fixtureEl.querySelector('a')
@@ -462,7 +462,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip with offset as a function', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const spy = jasmine.createSpy('offset').and.returnValue({})
       const tooltipEl = fixtureEl.querySelector('a')
@@ -480,7 +480,7 @@ describe('Tooltip', () => {
     })
 
     it('should show a tooltip without the animation', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -499,7 +499,7 @@ describe('Tooltip', () => {
     })
 
     it('should throw an error the element is not visible', () => {
-      fixtureEl.innerHTML = '<a href="#" style="display: none" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" style="display: none" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -512,7 +512,7 @@ describe('Tooltip', () => {
     })
 
     it('should not show a tooltip if show.bs.tooltip is prevented', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -537,7 +537,7 @@ describe('Tooltip', () => {
     })
 
     it('should show tooltip if leave event hasn\'t occurred before delay expires', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -559,7 +559,7 @@ describe('Tooltip', () => {
     })
 
     it('should not show tooltip if leave event occurs before delay expires', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -583,7 +583,7 @@ describe('Tooltip', () => {
     })
 
     it('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -614,7 +614,7 @@ describe('Tooltip', () => {
 
   describe('hide', () => {
     it('should hide a tooltip', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -630,7 +630,7 @@ describe('Tooltip', () => {
     })
 
     it('should hide a tooltip on mobile', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -652,7 +652,7 @@ describe('Tooltip', () => {
     })
 
     it('should hide a tooltip without animation', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -670,7 +670,7 @@ describe('Tooltip', () => {
     })
 
     it('should not hide a tooltip if hide event is prevented', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const assertDone = () => {
         setTimeout(() => {
@@ -699,7 +699,7 @@ describe('Tooltip', () => {
 
   describe('update', () => {
     it('should call popper schedule update', done => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -717,7 +717,7 @@ describe('Tooltip', () => {
     })
 
     it('should do nothing if the tooltip is not shown', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -729,7 +729,7 @@ describe('Tooltip', () => {
 
   describe('isWithContent', () => {
     it('should return true if there is content', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -738,7 +738,7 @@ describe('Tooltip', () => {
     })
 
     it('should return false if there is no content', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title=""/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -749,7 +749,7 @@ describe('Tooltip', () => {
 
   describe('getTipElement', () => {
     it('should create the tip element and return it', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -761,7 +761,7 @@ describe('Tooltip', () => {
     })
 
     it('should return the created tip element', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -780,7 +780,7 @@ describe('Tooltip', () => {
 
   describe('setContent', () => {
     it('should set tip content', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -797,7 +797,7 @@ describe('Tooltip', () => {
 
   describe('setElementContent', () => {
     it('should do nothing if the element is null', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -808,7 +808,7 @@ describe('Tooltip', () => {
 
     it('should add the content as a child of the element', () => {
       fixtureEl.innerHTML = [
-        '<a href="#" rel="tooltip" title="Another tooltip"/>',
+        '<a href="#" rel="tooltip" title="Another tooltip">',
         '<div id="childContent"></div>'
       ].join('')
 
@@ -825,7 +825,7 @@ describe('Tooltip', () => {
 
     it('should do nothing if the content is a child of the element', () => {
       fixtureEl.innerHTML = [
-        '<a href="#" rel="tooltip" title="Another tooltip"/>',
+        '<a href="#" rel="tooltip" title="Another tooltip">',
         '<div id="childContent"></div>'
       ].join('')
 
@@ -843,7 +843,7 @@ describe('Tooltip', () => {
 
     it('should add the content as a child of the element for jQuery elements', () => {
       fixtureEl.innerHTML = [
-        '<a href="#" rel="tooltip" title="Another tooltip"/>',
+        '<a href="#" rel="tooltip" title="Another tooltip">',
         '<div id="childContent"></div>'
       ].join('')
 
@@ -860,7 +860,7 @@ describe('Tooltip', () => {
 
     it('should add the child text content in the element', () => {
       fixtureEl.innerHTML = [
-        '<a href="#" rel="tooltip" title="Another tooltip"/>',
+        '<a href="#" rel="tooltip" title="Another tooltip">',
         '<div id="childContent">Tooltip</div>'
       ].join('')
 
@@ -874,7 +874,7 @@ describe('Tooltip', () => {
     })
 
     it('should add html without sanitize it', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -888,7 +888,7 @@ describe('Tooltip', () => {
     })
 
     it('should add html sanitized', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
@@ -906,7 +906,7 @@ describe('Tooltip', () => {
     })
 
     it('should add text content', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -919,7 +919,7 @@ describe('Tooltip', () => {
 
   describe('getTitle', () => {
     it('should return the title', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip"/>'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip" title="Another tooltip">'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl)
@@ -928,7 +928,7 @@ describe('Tooltip', () => {
     })
 
     it('should call title function', () => {
-      fixtureEl.innerHTML = '<a href="#" rel="tooltip" />'
+      fixtureEl.innerHTML = '<a href="#" rel="tooltip"></a>'
 
       const tooltipEl = fixtureEl.querySelector('a')
       const tooltip = new Tooltip(tooltipEl, {
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 0bc82923ec..0fa97133ce 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -62,7 +62,7 @@
               </a>
             </h5>
           </div>
-          <div id="collapseFour" class="collapse" data-parent="<img src=1 onerror=alert(123) />" role="tabpanel" aria-labelledby="headingFour">
+          <div id="collapseFour" class="collapse" data-parent="<img src=1 onerror=alert(123)>" role="tabpanel" aria-labelledby="headingFour">
             <div class="card-body">
               Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
             </div>
diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html
index e15b818375..f21c325a3b 100644
--- a/js/tests/visual/tooltip.html
+++ b/js/tests/visual/tooltip.html
@@ -48,7 +48,7 @@
       </div>
       <div class="row">
         <p>
-          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with XSS" data-container="<img src=1 onerror=alert(123) />">
+          <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with XSS" data-container="<img src=1 onerror=alert(123)>">
             Tooltip with XSS
           </button>
           <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip with container (selector)" data-container="#customContainer">