diff options
Diffstat (limited to 'js/tests')
| -rw-r--r-- | js/tests/unit/collapse.spec.js | 24 | ||||
| -rw-r--r-- | js/tests/unit/dropdown.spec.js | 20 | ||||
| -rw-r--r-- | js/tests/unit/scrollspy.spec.js | 24 | ||||
| -rw-r--r-- | js/tests/unit/tab.spec.js | 86 | ||||
| -rw-r--r-- | js/tests/unit/util/index.spec.js | 43 | ||||
| -rw-r--r-- | js/tests/visual/carousel.html | 4 | ||||
| -rw-r--r-- | js/tests/visual/collapse.html | 8 | ||||
| -rw-r--r-- | js/tests/visual/modal.html | 6 | ||||
| -rw-r--r-- | js/tests/visual/tab.html | 48 |
9 files changed, 122 insertions, 141 deletions
diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index a5e101aad..fcf3adfa5 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -376,7 +376,7 @@ describe('Collapse', () => { describe('data-api', () => { it('should show multiple collapsed elements', done => { fixtureEl.innerHTML = [ - '<a role="button" data-toggle="collapse" class="collapsed" href=".multi"></a>', + '<a href="#" role="button" data-toggle="collapse" class="collapsed" data-target=".multi"></a>', '<div id="collapse1" class="collapse multi"></div>', '<div id="collapse2" class="collapse multi"></div>' ].join('') @@ -398,7 +398,7 @@ describe('Collapse', () => { it('should hide multiple collapsed elements', done => { fixtureEl.innerHTML = [ - '<a role="button" data-toggle="collapse" href=".multi"></a>', + '<a href="#" role="button" data-toggle="collapse" data-target=".multi"></a>', '<div id="collapse1" class="collapse multi show"></div>', '<div id="collapse2" class="collapse multi show"></div>' ].join('') @@ -466,11 +466,11 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div id="accordion">', ' <div class="item">', - ' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>', ' </div>', ' <div class="item">', - ' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>', ' </div>', '</div>' @@ -521,13 +521,13 @@ describe('Collapse', () => { ' <div class="row">', ' <div class="col-lg-6">', ' <div class="item">', - ' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>', ' </div>', ' </div>', ' <div class="col-lg-6">', ' <div class="item">', - ' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>', ' </div>', ' </div>', @@ -647,18 +647,18 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div id="accordion">', ' <div class="item">', - ' <a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <a id="linkTrigger" href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', ' <div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">', ' <div id="nestedAccordion">', ' <div class="item">', - ' <a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>', + ' <a id="nestedLinkTrigger" href="#" data-toggle="collapse" data-target="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>', ' <div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>', ' </div>', ' </div>', ' </div>', ' </div>', ' <div class="item">', - ' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <a id="linkTriggerTwo" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', ' <div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>', ' </div>', '</div>' @@ -703,9 +703,9 @@ 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>', - '<a id="trigger2" role="button" data-toggle="collapse" href="#test2"></a>', - '<a id="trigger3" role="button" data-toggle="collapse" href=".multi"></a>', + '<a id="trigger1" href="#" role="button" data-toggle="collapse" data-target="#test1"></a>', + '<a id="trigger2" href="#" role="button" data-toggle="collapse" data-target="#test2"></a>', + '<a id="trigger3" href="#" role="button" data-toggle="collapse" data-target=".multi"></a>', '<div id="test1" class="multi"></div>', '<div id="test2" class="multi"></div>' ].join('') diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index c7f05ed22..cf32c56c0 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1086,9 +1086,9 @@ describe('Dropdown', () => { fixtureEl.innerHTML = [ '<div class="nav">', ' <div class="dropdown" id="testmenu">', - ' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>', + ' <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#testmenu">Test menu</a>', ' <div class="dropdown-menu">', - ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', + ' <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>', ' </div>', ' </div>', '</div>', @@ -1138,9 +1138,9 @@ describe('Dropdown', () => { it('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu</a>', + ' <a href="#" class="dropdown-toggle" data-toggle="dropdown" data-target="#testmenu">Test menu</a>', ' <div class="dropdown-menu">', - ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', + ' <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>', ' </div>', '</div>', '<div class="btn-group">', @@ -1199,7 +1199,7 @@ describe('Dropdown', () => { '<div class="dropdown">', ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', - ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', + ' <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>', ' </div>', '</div>' ].join('') @@ -1231,7 +1231,7 @@ describe('Dropdown', () => { '<div class="dropdown">', ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', - ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', + ' <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>', ' <input type="text">', ' <textarea></textarea>', ' </div>', @@ -1267,7 +1267,7 @@ describe('Dropdown', () => { '<div class="dropdown">', ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', - ' <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>', + ' <a href="#" class="dropdown-item disabled" data-target="#sub1">Submenu 1</a>', ' <button class="dropdown-item" type="button" disabled>Disabled button</button>', ' <a id="item1" class="dropdown-item" href="#">Another link</a>', ' </div>', @@ -1303,8 +1303,8 @@ describe('Dropdown', () => { ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <button class="dropdown-item d-none" type="button">Hidden button by class</button>', - ' <a class="dropdown-item" href="#sub1" style="display: none">Hidden link</a>', - ' <a class="dropdown-item" href="#sub1" style="visibility: hidden">Hidden link</a>', + ' <a href="#" class="dropdown-item" data-target="#sub1" style="display: none">Hidden link</a>', + ' <a href="#" class="dropdown-item" data-target="#sub1" style="visibility: hidden">Hidden link</a>', ' <a id="item1" class="dropdown-item" href="#">Another link</a>', ' </div>', '</div>' @@ -1454,7 +1454,7 @@ describe('Dropdown', () => { '<div class="dropdown">', ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', - ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', + ' <a href="#" class="dropdown-item" data-target="#sub1">Submenu 1</a>', ' <input type="text">', ' <textarea></textarea>', ' </div>', diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index 9ac02ce99..53201a0b6 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -64,7 +64,7 @@ describe('ScrollSpy', () => { expect(navEl.getAttribute('id')).not.toEqual(null) }) - it('should not process element without target', () => { + it('should not process element without target and process elements with target inside href attribute', () => { fixtureEl.innerHTML = [ '<nav id="navigation" class="navbar">', ' <ul class="navbar-nav">', @@ -86,6 +86,28 @@ describe('ScrollSpy', () => { expect(scrollSpy._targets.length).toEqual(2) }) + it('should process element with target in data-target', () => { + fixtureEl.innerHTML = [ + '<nav id="navigation" class="navbar">', + ' <ul class="navbar-nav">', + ' <li class="nav-item active"><a class="nav-link" id="one-link" href="#">One</a></li>', + ' <li class="nav-item"><a class="nav-link" id="two-link" href="#" data-target="#two">Two</a></li>', + ' <li class="nav-item"><a class="nav-link" id="three-link" href="#" data-target="#three">Three</a></li>', + ' </ul>', + '</nav>', + '<div id="content" style="height: 200px; overflow-y: auto;">', + ' <div id="two" style="height: 300px;"></div>', + ' <div id="three" style="height: 10px;"></div>', + '</div>' + ].join('') + + const scrollSpy = new ScrollSpy(fixtureEl.querySelector('#content'), { + target: '#navigation' + }) + + expect(scrollSpy._targets.length).toEqual(2) + }) + it('should only switch "active" class on current target', done => { fixtureEl.innerHTML = [ '<div id="root" class="active" style="display: block">', diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index a08fec20d..044957cc0 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -24,8 +24,8 @@ describe('Tab', () => { it('should activate element by tab id', done => { fixtureEl.innerHTML = [ '<ul class="nav">', - ' <li><a href="#home" role="tab">Home</a></li>', - ' <li><a id="triggerProfile" role="tab" href="#profile">Profile</a></li>', + ' <li><a href="#" data-target="#home" role="tab">Home</a></li>', + ' <li><a href="#" id="triggerProfile" role="tab" data-target="#profile">Profile</a></li>', '</ul>', '<ul>', ' <li id="home"></li>', @@ -48,8 +48,8 @@ describe('Tab', () => { it('should activate element by tab id in ordered list', done => { fixtureEl.innerHTML = [ '<ol class="nav nav-pills">', - ' <li><a href="#home">Home</a></li>', - ' <li><a id="triggerProfile" href="#profile">Profile</a></li>', + ' <li><a href="#" data-target="#home">Home</a></li>', + ' <li><a href="#" id="triggerProfile" data-target="#profile">Profile</a></li>', '</ol>', '<ol>', ' <li id="home"></li>', @@ -71,8 +71,8 @@ describe('Tab', () => { it('should activate element by tab id in nav list', done => { fixtureEl.innerHTML = [ '<nav class="nav">', - ' <a href="#home">Home</a>', - ' <a id="triggerProfile" href="#profile">Profile</a>', + ' <a href="#" data-target="#home">Home</a>', + ' <a href="#" id="triggerProfile" data-target="#profile">Profile</a>', '</nav>', '<nav><div id="home"></div><div id="profile"></div></nav>' ].join('') @@ -91,8 +91,8 @@ describe('Tab', () => { it('should activate element by tab id in list group', done => { fixtureEl.innerHTML = [ '<div class="list-group">', - ' <a href="#home">Home</a>', - ' <a id="triggerProfile" href="#profile">Profile</a>', + ' <a href="#" data-target="#home">Home</a>', + ' <a href="#" id="triggerProfile" data-target="#profile">Profile</a>', '</div>', '<nav><div id="home"></div><div id="profile"></div></nav>' ].join('') @@ -135,8 +135,8 @@ describe('Tab', () => { it('should not fire shown when tab is already active', done => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', - ' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>', - ' <li class="nav-item" role="presentation"><a href="#profile" class="nav-link" role="tab">Profile</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" data-target="#profile" class="nav-link" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane active" id="home" role="tabpanel"></div>', @@ -161,8 +161,8 @@ describe('Tab', () => { it('should not fire shown when tab is disabled', done => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', - ' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>', - ' <li class="nav-item" role="presentation"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" data-target="#profile" class="nav-link disabled" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane active" id="home" role="tabpanel"></div>', @@ -187,8 +187,8 @@ describe('Tab', () => { it('show and shown events should reference correct relatedTarget', done => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', - ' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>', - ' <li class="nav-item" role="presentation"><a id="triggerProfile" href="#profile" class="nav-link" role="tab">Profile</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" id="triggerProfile" data-target="#profile" class="nav-link" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane active" id="home" role="tabpanel"></div>', @@ -200,11 +200,11 @@ describe('Tab', () => { const secondTab = new Tab(secondTabTrigger) secondTabTrigger.addEventListener('show.bs.tab', ev => { - expect(ev.relatedTarget.hash).toEqual('#home') + expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#home') }) secondTabTrigger.addEventListener('shown.bs.tab', ev => { - expect(ev.relatedTarget.hash).toEqual('#home') + expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#home') expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true') expect(fixtureEl.querySelector('a:not(.active)').getAttribute('aria-selected')).toEqual('false') done() @@ -216,8 +216,8 @@ describe('Tab', () => { it('should fire hide and hidden events', done => { fixtureEl.innerHTML = [ '<ul class="nav">', - ' <li><a href="#home">Home</a></li>', - ' <li><a href="#profile">Profile</a></li>', + ' <li><a href="#" data-target="#home">Home</a></li>', + ' <li><a href="#" data-target="#profile">Profile</a></li>', '</ul>' ].join('') @@ -232,12 +232,12 @@ describe('Tab', () => { triggerList[0].addEventListener('hide.bs.tab', ev => { hideCalled = true - expect(ev.relatedTarget.hash).toEqual('#profile') + expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#profile') }) triggerList[0].addEventListener('hidden.bs.tab', ev => { expect(hideCalled).toEqual(true) - expect(ev.relatedTarget.hash).toEqual('#profile') + expect(ev.relatedTarget.getAttribute('data-target')).toEqual('#profile') done() }) @@ -247,8 +247,8 @@ describe('Tab', () => { it('should not fire hidden when hide is prevented', done => { fixtureEl.innerHTML = [ '<ul class="nav">', - ' <li><a href="#home">Home</a></li>', - ' <li><a href="#profile">Profile</a></li>', + ' <li><a href="#" data-target="#home">Home</a></li>', + ' <li><a href="#" data-target="#profile">Profile</a></li>', '</ul>' ].join('') @@ -282,17 +282,17 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">', + ' <a href="#" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">', ' <button class="close"><span aria-hidden="true">×</span></button>', ' </a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-toggle="tab">', + ' <a href="#" id="secondNav" class="nav-link nav-tab" data-target="#buzz" role="tab" data-toggle="tab">', ' <button class="close"><span aria-hidden="true">×</span></button>', ' </a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#references" role="tab" data-toggle="tab">', + ' <a href="#" class="nav-link nav-tab" data-target="#references" role="tab" data-toggle="tab">', ' <button id="btnClose" class="close"><span aria-hidden="true">×</span></button>', ' </a>', ' </li>', @@ -316,7 +316,7 @@ describe('Tab', () => { btnCloseEl.addEventListener('click', () => { const linkEl = btnCloseEl.parentNode const liEl = linkEl.parentNode - const tabId = linkEl.getAttribute('href') + const tabId = linkEl.getAttribute('data-target') const tabIdEl = fixtureEl.querySelector(tabId) liEl.parentNode.removeChild(liEl) @@ -424,8 +424,8 @@ describe('Tab', () => { it('should create dynamically a tab', done => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', - ' <li class="nav-item" role="presentation"><a href="#home" class="nav-link active" role="tab">Home</a></li>', - ' <li class="nav-item" role="presentation"><a id="triggerProfile" data-toggle="tab" href="#profile" class="nav-link" role="tab">Profile</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" data-target="#home" class="nav-link active" role="tab">Home</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" id="triggerProfile" data-toggle="tab" data-target="#profile" class="nav-link" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane active" id="home" role="tabpanel"></div>', @@ -447,13 +447,13 @@ describe('Tab', () => { it('selected tab should deactivate previous selected link in dropdown', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs">', - ' <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"><a href="#" class="nav-link" data-target="#home" data-toggle="tab">Home</a></li>', + ' <li class="nav-item"><a href="#" class="nav-link" data-target="#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>', ' <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>', + ' <a href="#" class="dropdown-item active" data-target="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>', + ' <a href="#" class="dropdown-item" data-target="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>', ' </div>', ' </li>', '</ul>' @@ -470,15 +470,15 @@ describe('Tab', () => { it('should handle nested tabs', done => { fixtureEl.innerHTML = [ '<nav class="nav nav-tabs" role="tablist">', - ' <a id="tab1" href="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>', - ' <a href="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>', - ' <a href="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>', + ' <a href="#" id="tab1" data-target="#x-tab1" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>', + ' <a href="#" data-target="#x-tab2" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>', + ' <a href="#" data-target="#x-tab3" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>', '</nav>', '<div class="tab-content">', ' <div class="tab-pane" id="x-tab1" role="tabpanel">', ' <nav class="nav nav-tabs" role="tablist">', - ' <a href="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>', - ' <a id="tabNested2" href="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>', + ' <a href="#" data-target="#nested-tab1" class="nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>', + ' <a href="#" id="tabNested2" data-target="#nested-tab2" class="nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>', ' </nav>', ' <div class="tab-content">', ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>', @@ -510,8 +510,8 @@ describe('Tab', () => { it('should not remove fade class if no active pane is present', done => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', - ' <li class="nav-item" role="presentation"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>', - ' <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" id="tab-home" data-target="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>', + ' <li class="nav-item" role="presentation"><a href="#" id="tab-profile" data-target="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>', '</ul>', '<div class="tab-content">', ' <div class="tab-pane fade" id="home" role="tabpanel"></div>', @@ -548,10 +548,10 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>', + ' <a href="#" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>', + ' <a href="#" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</a>', ' </li>', '</ul>', '<div class="tab-content">', @@ -574,10 +574,10 @@ describe('Tab', () => { fixtureEl.innerHTML = [ '<ul class="nav nav-tabs" role="tablist">', ' <li class="nav-item" role="presentation">', - ' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>', + ' <a href="#" class="nav-link nav-tab" data-target="#home" role="tab" data-toggle="tab">Home</a>', ' </li>', ' <li class="nav-item" role="presentation">', - ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>', + ' <a href="#" id="secondNav" class="nav-link nav-tab" data-target="#profile" role="tab" data-toggle="tab">Profile</a>', ' </li>', '</ul>', '<div class="tab-content">', diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index 541c10baa..de48cf53e 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -35,36 +35,6 @@ describe('Util', () => { expect(Util.getSelectorFromElement(testEl)).toEqual('.target') }) - it('should get selector from href if no data-target set', () => { - fixtureEl.innerHTML = [ - '<a id="test" href=".target"></a>', - '<div class="target"></div>' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toEqual('.target') - }) - - it('should get selector from href if data-target equal to #', () => { - fixtureEl.innerHTML = [ - '<a id="test" data-target="#" href=".target"></a>', - '<div class="target"></div>' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toEqual('.target') - }) - - it('should return null if selector not found', () => { - fixtureEl.innerHTML = '<a id="test" href=".target"></a>' - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getSelectorFromElement(testEl)).toBeNull() - }) - it('should return null if no selector', () => { fixtureEl.innerHTML = '<div></div>' @@ -86,19 +56,8 @@ describe('Util', () => { expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) }) - it('should get element from href if no data-target set', () => { - fixtureEl.innerHTML = [ - '<a id="test" href=".target"></a>', - '<div class="target"></div>' - ].join('') - - const testEl = fixtureEl.querySelector('#test') - - expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) - }) - it('should return null if element not found', () => { - fixtureEl.innerHTML = '<a id="test" href=".target"></a>' + fixtureEl.innerHTML = '<a id="test" data-target=".target"></a>' const testEl = fixtureEl.querySelector('#test') diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index d66f14053..f788256f7 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -34,11 +34,11 @@ <img src="https://i.imgur.com/Nm7xoti.jpg" alt="Third slide"> </div> </div> - <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev"> + <a href="#" class="carousel-control-prev" data-target="#carousel-example-generic" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> - <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next"> + <a href="#" class="carousel-control-next" data-target="#carousel-example-generic" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html index 0fa97133c..7b0d1bb5b 100644 --- a/js/tests/visual/collapse.html +++ b/js/tests/visual/collapse.html @@ -14,7 +14,7 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> - <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> @@ -29,7 +29,7 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> @@ -43,7 +43,7 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> @@ -57,7 +57,7 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingFour"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> + <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> Collapsible Group Item with XSS in data-parent </a> </h5> diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index fa043af00..af59969aa 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -58,7 +58,7 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> - <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> + <a href="#" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> @@ -73,7 +73,7 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> + <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> @@ -87,7 +87,7 @@ <div class="card" role="presentation"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> - <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> + <a href="#" class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index e5bc0448b..6809c6d93 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -19,16 +19,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a> + <a href="#" class="nav-link active" data-toggle="tab" data-target="#home" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#profile" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat" role="tab">@fat</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#fat" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo" role="tab">@mdo</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo" role="tab">@mdo</a> </li> </ul> @@ -55,16 +55,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a> + <a href="#" class="nav-link active" data-toggle="tab" data-target="#home2" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#profile2" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat2" role="tab">@fat</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#fat2" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo2" role="tab">@mdo</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo2" role="tab">@mdo</a> </li> </ul> @@ -91,16 +91,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#home3" role="tab">Home</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#home3" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile3" role="tab">Profile</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#profile3" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat3" role="tab">@fat</a> + <a class="nav-link" data-toggle="tab" data-target="#fat3" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo3" role="tab">@mdo</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo3" role="tab">@mdo</a> </li> </ul> @@ -127,16 +127,16 @@ <ul class="nav nav-tabs" role="tablist"> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#home4" role="tab">Home</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#home4" role="tab">Home</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#profile4" role="tab">Profile</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#profile4" role="tab">Profile</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#fat4" role="tab">@fat</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#fat4" role="tab">@fat</a> </li> <li class="nav-item" role="presentation"> - <a class="nav-link" data-toggle="tab" href="#mdo4" role="tab">@mdo</a> + <a href="#" class="nav-link" data-toggle="tab" data-target="#mdo4" role="tab">@mdo</a> </li> </ul> @@ -161,13 +161,13 @@ <h4>Tabs with nav (with fade)</h4> <nav class="nav nav-pills"> - <a class="nav-link nav-item active" data-toggle="tab" href="#home5">Home</a> - <a class="nav-link nav-item" data-toggle="tab" href="#profile5">Profile</a> + <a href="#" class="nav-link nav-item active" data-toggle="tab" data-target="#home5">Home</a> + <a href="#" class="nav-link nav-item" data-toggle="tab" data-target="#profile5">Profile</a> <div class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown5"> - <li><a class="dropdown-item" data-toggle="tab" href="#fat5">@fat</a></li> - <li><a class="dropdown-item" data-toggle="tab" href="#mdo5">@mdo</a></li> + <li><a href="#" class="dropdown-item" data-toggle="tab" data-target="#fat5">@fat</a></li> + <li><a href="#" class="dropdown-item" data-toggle="tab" data-target="#mdo5">@mdo</a></li> </ul> </div> <a class="nav-link nav-item disabled" href="#">Disabled</a> @@ -196,10 +196,10 @@ <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> - <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" href="#list-home" role="tab" aria-controls="list-home">Home</a> - <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a> - <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a> - <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> + <a href="#" class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="tab" data-target="#list-home" role="tab" aria-controls="list-home">Home</a> + <a href="#" class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="tab" data-target="#list-profile" role="tab" aria-controls="list-profile">Profile</a> + <a href="#" class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="tab" data-target="#list-messages" role="tab" aria-controls="list-messages">Messages</a> + <a href="#" class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="tab" data-target="#list-settings" role="tab" aria-controls="list-settings">Settings</a> </div> </div> <div class="col-8"> |