diff options
| author | Rohit Sharma <rohit2sharma95@gmail.com> | 2020-07-22 22:33:11 +0300 |
|---|---|---|
| committer | XhmikosR <xhmikosr@gmail.com> | 2020-11-14 08:09:15 +0300 |
| commit | 418f17ee2b849dafdc39623ba2378df9229164a7 (patch) | |
| tree | 7446b75f6b2a8e8ad9f5f8ab8143b4d451c94a14 /js | |
| parent | fe961c192d951bde610cdcd4817f4d8548d33141 (diff) | |
Add `bs` in data attributes
- Add `bs` in data APIs everywhere
- Update unit tests
Diffstat (limited to 'js')
41 files changed, 436 insertions, 416 deletions
diff --git a/js/src/alert.js b/js/src/alert.js index 7eb53ac0bc..724cda0173 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -28,7 +28,7 @@ const DATA_KEY = 'bs.alert' const EVENT_KEY = `.${DATA_KEY}` const DATA_API_KEY = '.data-api' -const SELECTOR_DISMISS = '[data-dismiss="alert"]' +const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]' const EVENT_CLOSE = `close${EVENT_KEY}` const EVENT_CLOSED = `closed${EVENT_KEY}` diff --git a/js/src/button.js b/js/src/button.js index dc9bd0e9db..42376943de 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -23,7 +23,7 @@ const DATA_API_KEY = '.data-api' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]' const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` diff --git a/js/src/carousel.js b/js/src/carousel.js index 84a88bb04d..58844a3873 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -91,8 +91,8 @@ const SELECTOR_ITEM = '.carousel-item' const SELECTOR_ITEM_IMG = '.carousel-item img' const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev' const SELECTOR_INDICATORS = '.carousel-indicators' -const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]' -const SELECTOR_DATA_RIDE = '[data-ride="carousel"]' +const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]' +const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]' const PointerType = { TOUCH: 'touch', @@ -419,7 +419,7 @@ class Carousel { return } - const elementInterval = parseInt(element.getAttribute('data-interval'), 10) + const elementInterval = parseInt(element.getAttribute('data-bs-interval'), 10) if (elementInterval) { this._config.defaultInterval = this._config.defaultInterval || this._config.interval @@ -576,7 +576,7 @@ class Carousel { ...Manipulator.getDataAttributes(target), ...Manipulator.getDataAttributes(this) } - const slideIndex = this.getAttribute('data-slide-to') + const slideIndex = this.getAttribute('data-bs-slide-to') if (slideIndex) { config.interval = false diff --git a/js/src/collapse.js b/js/src/collapse.js index 838d0f2a36..f3ca86f366 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -59,7 +59,7 @@ const WIDTH = 'width' const HEIGHT = 'height' const SELECTOR_ACTIVES = '.show, .collapsing' -const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' /** * ------------------------------------------------------------------------ @@ -74,7 +74,7 @@ class Collapse { this._config = this._getConfig(config) this._triggerArray = SelectorEngine.find( `${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` + - `${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]` + `${SELECTOR_DATA_TOGGLE}[data-bs-target="#${element.id}"]` ) const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE) @@ -137,7 +137,7 @@ class Collapse { actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent) .filter(elem => { if (typeof this._config.parent === 'string') { - return elem.getAttribute('data-parent') === this._config.parent + return elem.getAttribute('data-bs-parent') === this._config.parent } return elem.classList.contains(CLASS_NAME_COLLAPSE) @@ -303,7 +303,7 @@ class Collapse { parent = SelectorEngine.findOne(parent) } - const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]` + const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]` SelectorEngine.find(selector, parent) .forEach(element => { diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js index bcbd340ace..04b9543c8a 100644 --- a/js/src/dom/manipulator.js +++ b/js/src/dom/manipulator.js @@ -47,9 +47,13 @@ const Manipulator = { ...element.dataset } - Object.keys(attributes).forEach(key => { - attributes[key] = normalizeData(attributes[key]) - }) + Object.keys(attributes) + .filter(key => key.startsWith('bs')) + .forEach(key => { + let pureKey = key.replace(/^bs/, '') + pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length) + attributes[pureKey] = normalizeData(attributes[key]) + }) return attributes }, diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 3a3f12c488..c262997ce9 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -59,7 +59,7 @@ const CLASS_NAME_MENURIGHT = 'dropdown-menu-right' const CLASS_NAME_NAVBAR = 'navbar' const CLASS_NAME_POSITION_STATIC = 'position-static' -const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]' const SELECTOR_FORM_CHILD = '.dropdown form' const SELECTOR_MENU = '.dropdown-menu' const SELECTOR_NAVBAR_NAV = '.navbar-nav' diff --git a/js/src/modal.js b/js/src/modal.js index d6d10ab935..c42dc154c2 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -70,8 +70,8 @@ const CLASS_NAME_STATIC = 'modal-static' const SELECTOR_DIALOG = '.modal-dialog' const SELECTOR_MODAL_BODY = '.modal-body' -const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]' -const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]' const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top' const SELECTOR_STICKY_CONTENT = '.sticky-top' @@ -473,7 +473,7 @@ class Modal { .forEach(element => { const actualPadding = element.style.paddingRight const calculatedPadding = window.getComputedStyle(element)['padding-right'] - Manipulator.setDataAttribute(element, 'padding-right', actualPadding) + Manipulator.setDataAttribute(element, 'bs-padding-right', actualPadding) element.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` }) @@ -482,7 +482,7 @@ class Modal { .forEach(element => { const actualMargin = element.style.marginRight const calculatedMargin = window.getComputedStyle(element)['margin-right'] - Manipulator.setDataAttribute(element, 'margin-right', actualMargin) + Manipulator.setDataAttribute(element, 'bs-margin-right', actualMargin) element.style.marginRight = `${parseFloat(calculatedMargin) - this._scrollbarWidth}px` }) @@ -490,7 +490,7 @@ class Modal { const actualPadding = document.body.style.paddingRight const calculatedPadding = window.getComputedStyle(document.body)['padding-right'] - Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding) + Manipulator.setDataAttribute(document.body, 'bs-padding-right', actualPadding) document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px` } @@ -501,9 +501,9 @@ class Modal { // Restore fixed content padding SelectorEngine.find(SELECTOR_FIXED_CONTENT) .forEach(element => { - const padding = Manipulator.getDataAttribute(element, 'padding-right') + const padding = Manipulator.getDataAttribute(element, 'bs-padding-right') if (typeof padding !== 'undefined') { - Manipulator.removeDataAttribute(element, 'padding-right') + Manipulator.removeDataAttribute(element, 'bs-padding-right') element.style.paddingRight = padding } }) @@ -511,19 +511,19 @@ class Modal { // Restore sticky content and navbar-toggler margin SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`) .forEach(element => { - const margin = Manipulator.getDataAttribute(element, 'margin-right') + const margin = Manipulator.getDataAttribute(element, 'bs-margin-right') if (typeof margin !== 'undefined') { - Manipulator.removeDataAttribute(element, 'margin-right') + Manipulator.removeDataAttribute(element, 'bs-margin-right') element.style.marginRight = margin } }) // Restore body padding - const padding = Manipulator.getDataAttribute(document.body, 'padding-right') + const padding = Manipulator.getDataAttribute(document.body, 'bs-padding-right') if (typeof padding === 'undefined') { document.body.style.paddingRight = '' } else { - Manipulator.removeDataAttribute(document.body, 'padding-right') + Manipulator.removeDataAttribute(document.body, 'bs-padding-right') document.body.style.paddingRight = padding } } diff --git a/js/src/popover.js b/js/src/popover.js index 7203d9babe..46b693e696 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -123,7 +123,7 @@ class Popover extends Tooltip { } _getContent() { - return this.element.getAttribute('data-content') || + return this.element.getAttribute('data-bs-content') || this.config.content } diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 53c1700a50..de456e0805 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -49,7 +49,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}` const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item' const CLASS_NAME_ACTIVE = 'active' -const SELECTOR_DATA_SPY = '[data-spy="scroll"]' +const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_NAV_LINKS = '.nav-link' const SELECTOR_NAV_ITEMS = '.nav-item' @@ -241,7 +241,7 @@ class ScrollSpy { this._clear() const queries = this._selector.split(',') - .map(selector => `${selector}[data-target="${target}"],${selector}[href="${target}"]`) + .map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`) const link = SelectorEngine.findOne(queries.join(',')) diff --git a/js/src/tab.js b/js/src/tab.js index f7ebfc9cdc..56269e2fac 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -46,7 +46,7 @@ const SELECTOR_DROPDOWN = '.dropdown' const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group' const SELECTOR_ACTIVE = '.active' const SELECTOR_ACTIVE_UL = ':scope > li > .active' -const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]' +const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]' const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle' const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active' diff --git a/js/src/toast.js b/js/src/toast.js index bf5a386e81..1e50b06693 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -52,7 +52,7 @@ const Default = { delay: 5000 } -const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]' +const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]' /** * ------------------------------------------------------------------------ diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 0b19a96013..505f8c8532 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -443,7 +443,7 @@ class Tooltip { } getTitle() { - let title = this.element.getAttribute('data-original-title') + let title = this.element.getAttribute('data-bs-original-title') if (!title) { title = typeof this.config.title === 'function' ? @@ -578,11 +578,11 @@ class Tooltip { } _fixTitle() { - const titleType = typeof this.element.getAttribute('data-original-title') + const titleType = typeof this.element.getAttribute('data-bs-original-title') if (this.element.getAttribute('title') || titleType !== 'string') { this.element.setAttribute( - 'data-original-title', + 'data-bs-original-title', this.element.getAttribute('title') || '' ) diff --git a/js/src/util/index.js b/js/src/util/index.js index b7fac9c443..b8a53af969 100644 --- a/js/src/util/index.js +++ b/js/src/util/index.js @@ -33,7 +33,7 @@ const getUID = prefix => { } const getSelector = element => { - let selector = element.getAttribute('data-target') + let selector = element.getAttribute('data-bs-target') if (!selector || selector === '#') { const hrefAttr = element.getAttribute('href') @@ -173,7 +173,7 @@ const reflow = element => element.offsetHeight const getjQuery = () => { const { jQuery } = window - if (jQuery && !document.body.hasAttribute('data-no-jquery')) { + if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) { return jQuery } diff --git a/js/tests/integration/bundle-modularity.js b/js/tests/integration/bundle-modularity.js index 07c6674e65..ed427cd922 100644 --- a/js/tests/integration/bundle-modularity.js +++ b/js/tests/integration/bundle-modularity.js @@ -2,6 +2,6 @@ import 'popper.js' import Tooltip from '../../dist/tooltip' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/bundle.js b/js/tests/integration/bundle.js index 69d7543525..1c6e60bf5e 100644 --- a/js/tests/integration/bundle.js +++ b/js/tests/integration/bundle.js @@ -2,6 +2,6 @@ import 'popper.js' import { Tooltip } from '../../../dist/js/bootstrap.esm.js' window.addEventListener('load', () => { - [...document.querySelectorAll('[data-toggle="tooltip"]')] + [...document.querySelectorAll('[data-bs-toggle="tooltip"]')] .map(tooltipNode => new Tooltip(tooltipNode)) }) diff --git a/js/tests/integration/index.html b/js/tests/integration/index.html index 5606755b17..0ea0b64c33 100644 --- a/js/tests/integration/index.html +++ b/js/tests/integration/index.html @@ -14,14 +14,14 @@ <div class="container"> <h1>Hello, world!</h1> <div class="mt-5"> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> - <div id="carouselExampleCaptions" class="carousel slide mt-2" data-ride="carousel"> + <div id="carouselExampleCaptions" class="carousel slide mt-2" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#carouselExampleCaptions" data-slide-to="0"></li> - <li data-target="#carouselExampleCaptions" data-slide-to="1" class="active"></li> - <li data-target="#carouselExampleCaptions" data-slide-to="2"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" class="active"></li> + <li data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item"> @@ -46,11 +46,11 @@ </div> </div> </div> - <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev"> + <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js index 9372215b65..a746d85011 100644 --- a/js/tests/unit/alert.spec.js +++ b/js/tests/unit/alert.spec.js @@ -23,7 +23,7 @@ describe('Alert', () => { it('should close an alert without instantiating it manually', () => { fixtureEl.innerHTML = [ '<div class="alert">', - ' <button type="button" data-dismiss="alert">x</button>', + ' <button type="button" data-bs-dismiss="alert">x</button>', '</div>' ].join('') @@ -36,7 +36,7 @@ describe('Alert', () => { it('should close an alert without instantiating it manually with the parent selector', () => { fixtureEl.innerHTML = [ '<div class="alert">', - ' <button type="button" data-target=".alert" data-dismiss="alert">x</button>', + ' <button type="button" data-bs-target=".alert" data-bs-dismiss="alert">x</button>', '</div>' ].join('') diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js index ac32b4b897..44d7b54b18 100644 --- a/js/tests/unit/button.spec.js +++ b/js/tests/unit/button.spec.js @@ -27,8 +27,8 @@ describe('Button', () => { describe('data-api', () => { it('should toggle active class on click', () => { fixtureEl.innerHTML = [ - '<button class="btn" data-toggle="button">btn</button>', - '<button class="btn testParent" data-toggle="button"><div class="test"></div></button>' + '<button class="btn" data-bs-toggle="button">btn</button>', + '<button class="btn testParent" data-bs-toggle="button"><div class="test"></div></button>' ].join('') const btn = fixtureEl.querySelector('.btn') @@ -53,7 +53,7 @@ describe('Button', () => { describe('toggle', () => { it('should toggle aria-pressed', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button" aria-pressed="false"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button" aria-pressed="false"></button>' const btnEl = fixtureEl.querySelector('.btn') const button = new Button(btnEl) @@ -70,7 +70,7 @@ describe('Button', () => { describe('dispose', () => { it('should dispose a button', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') const button = new Button(btnEl) @@ -85,7 +85,7 @@ describe('Button', () => { describe('jQueryInterface', () => { it('should handle config passed and toggle existing button', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') const button = new Button(btnEl) @@ -101,7 +101,7 @@ describe('Button', () => { }) it('should create new button instance and call toggle', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') @@ -115,7 +115,7 @@ describe('Button', () => { }) it('should just create a button instance without calling toggle', () => { - fixtureEl.innerHTML = '<button class="btn" data-toggle="button"></button>' + fixtureEl.innerHTML = '<button class="btn" data-bs-toggle="button"></button>' const btnEl = fixtureEl.querySelector('.btn') diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index a4bd1bac86..8c928c429d 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -313,7 +313,7 @@ describe('Carousel', () => { Simulator.setType('pointer') fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item">', ' <img alt="">', @@ -357,7 +357,7 @@ describe('Carousel', () => { Simulator.setType('pointer') fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item active">', ' <img alt="">', @@ -396,7 +396,7 @@ describe('Carousel', () => { document.documentElement.ontouchstart = () => {} fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item">', ' <img alt="">', @@ -434,7 +434,7 @@ describe('Carousel', () => { document.documentElement.ontouchstart = () => {} fixtureEl.innerHTML = [ - '<div class="carousel" data-interval="false">', + '<div class="carousel" data-bs-interval="false">', ' <div class="carousel-inner">', ' <div id="item" class="carousel-item active">', ' <img alt="">', @@ -472,7 +472,7 @@ describe('Carousel', () => { clearPointerEvents() document.documentElement.ontouchstart = () => {} - fixtureEl.innerHTML = '<div class="carousel" data-interval="false"></div>' + fixtureEl.innerHTML = '<div class="carousel" data-bs-interval="false"></div>' const carouselEl = fixtureEl.querySelector('.carousel') const carousel = new Carousel(carouselEl) @@ -660,13 +660,13 @@ describe('Carousel', () => { fixtureEl.innerHTML = [ '<div id="myCarousel" class="carousel slide">', ' <ol class="carousel-indicators">', - ' <li data-target="#myCarousel" data-slide-to="0" class="active"></li>', - ' <li id="secondIndicator" data-target="#myCarousel" data-slide-to="1"></li>', - ' <li data-target="#myCarousel" data-slide-to="2"></li>', + ' <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>', + ' <li id="secondIndicator" data-bs-target="#myCarousel" data-bs-slide-to="1"></li>', + ' <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>', ' </ol>', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -689,7 +689,7 @@ describe('Carousel', () => { it('should not call next when the page is not visible', () => { fixtureEl.innerHTML = [ '<div style="display: none;">', - ' <div class="carousel" data-interval="false"></div>', + ' <div class="carousel" data-bs-interval="false"></div>', '</div>' ].join('') @@ -878,8 +878,8 @@ describe('Carousel', () => { fixtureEl.innerHTML = [ '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', - ' <div class="carousel-item active" data-interval="7">item 1</div>', - ' <div id="secondItem" class="carousel-item" data-interval="9385">item 2</div>', + ' <div class="carousel-item active" data-bs-interval="7">item 1</div>', + ' <div id="secondItem" class="carousel-item" data-bs-interval="9385">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -958,7 +958,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -985,7 +985,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -1010,7 +1010,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -1045,7 +1045,7 @@ describe('Carousel', () => { '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', ' <div class="carousel-item active">item 1</div>', - ' <div class="carousel-item" data-interval="7">item 2</div>', + ' <div class="carousel-item" data-bs-interval="7">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', '</div>' @@ -1125,8 +1125,8 @@ describe('Carousel', () => { }) describe('data-api', () => { - it('should init carousels with data-ride="carousel" on load', () => { - fixtureEl.innerHTML = '<div data-ride="carousel"></div>' + it('should init carousels with data-bs-ride="carousel" on load', () => { + fixtureEl.innerHTML = '<div data-bs-ride="carousel"></div>' const carouselEl = fixtureEl.querySelector('div') const loadEvent = createEvent('load') @@ -1144,8 +1144,8 @@ describe('Carousel', () => { ' <div id="item2" class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>', - ' <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>', + ' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>', + ' <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>', '</div>' ].join('') @@ -1160,7 +1160,7 @@ describe('Carousel', () => { }, 10) }) - it('should create carousel and go to the next slide on click with data-slide-to', done => { + it('should create carousel and go to the next slide on click with data-bs-slide-to', done => { fixtureEl.innerHTML = [ '<div id="myCarousel" class="carousel slide">', ' <div class="carousel-inner">', @@ -1168,7 +1168,7 @@ describe('Carousel', () => { ' <div id="item2" class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div id="next" data-target="#myCarousel" data-slide-to="1"></div>', + ' <div id="next" data-bs-target="#myCarousel" data-bs-slide-to="1"></div>', '</div>' ].join('') @@ -1191,8 +1191,8 @@ describe('Carousel', () => { ' <div class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>', - ' <div id="next" class="carousel-control-next" role="button" data-slide="next"></div>', + ' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>', + ' <div id="next" class="carousel-control-next" role="button" data-bs-slide="next"></div>', '</div>' ].join('') @@ -1211,8 +1211,8 @@ describe('Carousel', () => { ' <div id="item2" class="carousel-item">item 2</div>', ' <div class="carousel-item">item 3</div>', ' </div>', - ' <div class="carousel-control-prev" data-target="#myCarousel" role="button" data-slide="prev"></div>', - ' <div id="next" class="carousel-control-next" data-target="#myCarousel" role="button" data-slide="next"></div>', + ' <div class="carousel-control-prev" data-bs-target="#myCarousel" role="button" data-bs-slide="prev"></div>', + ' <div id="next" class="carousel-control-next" data-bs-target="#myCarousel" role="button" data-bs-slide="next"></div>', '</div>' ].join('') diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index a5e101aad1..c1ead859a9 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -32,7 +32,7 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item</a>', ' <div class="collapse">Lorem ipsum</div>', ' </div>', '</div>' @@ -55,7 +55,7 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item</a>', ' <div class="collapse">Lorem ipsum</div>', ' </div>', '</div>' @@ -74,7 +74,7 @@ describe('Collapse', () => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item</a>', ' <div class="collapse">Lorem ipsum</div>', ' </div>', '</div>' @@ -120,15 +120,15 @@ describe('Collapse', () => { expect(collapse.hide).toHaveBeenCalled() }) - it('should find collapse children if they have collapse class too not only data-parent', done => { + it('should find collapse children if they have collapse class too not only data-bs-parent', done => { fixtureEl.innerHTML = [ '<div class="my-collapse">', ' <div class="item">', - ' <a data-toggle="collapse" href="#">Toggle item 1</a>', + ' <a data-bs-toggle="collapse" href="#">Toggle item 1</a>', ' <div id="collapse1" class="collapse show">Lorem ipsum 1</div>', ' </div>', ' <div class="item">', - ' <a id="triggerCollapse2" data-toggle="collapse" href="#">Toggle item 2</a>', + ' <a id="triggerCollapse2" data-bs-toggle="collapse" href="#">Toggle item 2</a>', ' <div id="collapse2" class="collapse">Lorem ipsum 2</div>', ' </div>', '</div>' @@ -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 role="button" data-bs-toggle="collapse" class="collapsed" href=".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 role="button" data-bs-toggle="collapse" href=".multi"></a>', '<div id="collapse1" class="collapse multi show"></div>', '<div id="collapse2" class="collapse multi show"></div>' ].join('') @@ -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>', - '<a id="link2" role="button" data-toggle="collapse" class="collapsed" href="#" data-target="#test1"></a>', + '<a id="link1" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-target="#test1"></a>', + '<a id="link2" role="button" data-bs-toggle="collapse" class="collapsed" href="#" data-bs-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>', - '<a id="link2" role="button" data-toggle="collapse" href="#" data-target="#test1"></a>', + '<a id="link1" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>', + '<a id="link2" role="button" data-bs-toggle="collapse" href="#" data-bs-target="#test1"></a>', '<div id="test1" class="show"></div>' ].join('') @@ -466,12 +466,12 @@ 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>', - ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>', + ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-parent="#accordion"></div>', ' </div>', ' <div class="item">', - ' <a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', - ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>', ' </div>', '</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-bs-toggle="collapse" data-bs-target="#collapsediv1">', '<div id="collapsediv1"></div>' ].join('') @@ -521,14 +521,14 @@ 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>', - ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>', + ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-bs-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>', - ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-bs-parent="#accordion"></div>', ' </div>', ' </div>', ' </div>', @@ -569,12 +569,12 @@ describe('Collapse', () => { it('should allow accordion to target multiple elements', done => { fixtureEl.innerHTML = [ '<div id="accordion">', - ' <a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>', - ' <a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>', - ' <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>', - ' <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>', - ' <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>', - ' <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>', + ' <a id="linkTriggerOne" data-bs-toggle="collapse" data-bs-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" data-bs-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>', + ' <div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-bs-parent="#accordion"></div>', + ' <div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>', + ' <div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-bs-parent="#accordion"></div>', '</div>' ].join('') @@ -647,19 +647,19 @@ 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>', - ' <div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">', + ' <a id="linkTrigger" data-bs-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>', + ' <div id="collapseOne" data-bs-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>', - ' <div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree"></div>', + ' <a id="nestedLinkTrigger" data-bs-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>', + ' <div id="nestedCollapseOne" data-bs-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>', - ' <div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>', + ' <a id="linkTriggerTwo" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>', + ' <div id="collapseTwo" data-bs-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>', ' </div>', '</div>' ].join('') @@ -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" role="button" data-bs-toggle="collapse" href="#test1"></a>', + '<a id="trigger2" role="button" data-bs-toggle="collapse" href="#test2"></a>', + '<a id="trigger3" role="button" data-bs-toggle="collapse" href=".multi"></a>', '<div id="test1" class="multi"></div>', '<div id="test2" class="multi"></div>' ].join('') diff --git a/js/tests/unit/dom/manipulator.spec.js b/js/tests/unit/dom/manipulator.spec.js index 8d8118f2ba..747e8bfd74 100644 --- a/js/tests/unit/dom/manipulator.spec.js +++ b/js/tests/unit/dom/manipulator.spec.js @@ -60,14 +60,30 @@ describe('Manipulator', () => { expect().nothing() }) - it('should get all data attributes', () => { - fixtureEl.innerHTML = '<div data-test="js" data-test2="js2" ></div>' + it('should get all data attributes, without bs prefixed as well', () => { + fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-bs-target="#element" data-another="value"></div>' const div = fixtureEl.querySelector('div') expect(Manipulator.getDataAttributes(div)).toEqual({ - test: 'js', - test2: 'js2' + bsToggle: 'tabs', + bsTarget: '#element', + another: 'value', + toggle: 'tabs', + target: '#element' + }) + }) + + it('should remove just prefixed bs keyword from the attributes and override original attribute with bs prefixed', () => { + fixtureEl.innerHTML = '<div data-bs-toggle="tabs" data-toggle="override" data-target-bs="#element" data-in-bs-out="in-between"></div>' + + const div = fixtureEl.querySelector('div') + + expect(Manipulator.getDataAttributes(div)).toEqual({ + bsToggle: 'tabs', + targetBs: '#element', + inBsOut: 'in-between', + toggle: 'tabs' }) }) }) diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 17a5b41cf0..b1a99e7e6b 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -39,7 +39,7 @@ describe('Dropdown', () => { it('should create offset modifier correctly when offset option is a function', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -47,7 +47,7 @@ describe('Dropdown', () => { ].join('') const getOffset = offsets => offsets - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown, { offset: getOffset }) @@ -61,7 +61,7 @@ describe('Dropdown', () => { it('should create offset modifier correctly when offset option is not a function', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -69,7 +69,7 @@ describe('Dropdown', () => { ].join('') const myOffset = 7 - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown, { offset: myOffset }) @@ -80,7 +80,7 @@ describe('Dropdown', () => { expect(offset.fn).toBeUndefined() }) - it('should add a listener on trigger which do not have data-toggle="dropdown"', () => { + it('should add a listener on trigger which do not have data-bs-toggle="dropdown"', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', ' <button class="btn">Dropdown</button>', @@ -103,14 +103,14 @@ describe('Dropdown', () => { it('should allow to pass config to popper.js with `popperConfig`', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown, { popperConfig: { placement: 'left' @@ -127,14 +127,14 @@ describe('Dropdown', () => { it('should toggle a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -150,13 +150,13 @@ describe('Dropdown', () => { it('should destroy old popper references on toggle', done => { fixtureEl.innerHTML = [ '<div class="first dropdown">', - ' <button class="firstBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="firstBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>', '<div class="second dropdown">', - ' <button class="secondBtn btn" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="secondBtn btn" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -187,7 +187,7 @@ describe('Dropdown', () => { it('should toggle a dropdown and add/remove event listener on mobile', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -195,7 +195,7 @@ describe('Dropdown', () => { ].join('') const defaultValueOnTouchStart = document.documentElement.ontouchstart - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -226,14 +226,14 @@ describe('Dropdown', () => { it('should toggle a dropdown at the right', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu dropdown-menu-right">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -249,14 +249,14 @@ describe('Dropdown', () => { it('should toggle a dropup', done => { fixtureEl.innerHTML = [ '<div class="dropup">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropupEl = fixtureEl.querySelector('.dropup') const dropdown = new Dropdown(btnDropdown) @@ -272,14 +272,14 @@ describe('Dropdown', () => { it('should toggle a dropup at the right', done => { fixtureEl.innerHTML = [ '<div class="dropup">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu dropdown-menu-right">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropupEl = fixtureEl.querySelector('.dropup') const dropdown = new Dropdown(btnDropdown) @@ -295,14 +295,14 @@ describe('Dropdown', () => { it('should toggle a dropright', done => { fixtureEl.innerHTML = [ '<div class="dropright">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const droprightEl = fixtureEl.querySelector('.dropright') const dropdown = new Dropdown(btnDropdown) @@ -318,14 +318,14 @@ describe('Dropdown', () => { it('should toggle a dropleft', done => { fixtureEl.innerHTML = [ '<div class="dropleft">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropleftEl = fixtureEl.querySelector('.dropleft') const dropdown = new Dropdown(btnDropdown) @@ -341,14 +341,14 @@ describe('Dropdown', () => { it('should toggle a dropdown with parent reference', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown, { reference: 'parent' @@ -366,14 +366,14 @@ describe('Dropdown', () => { it('should toggle a dropdown with a dom node reference', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown, { reference: fixtureEl @@ -391,14 +391,14 @@ describe('Dropdown', () => { it('should toggle a dropdown with a jquery object reference', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown, { reference: { 0: fixtureEl, jquery: 'jQuery' } @@ -416,14 +416,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if the element is disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -442,14 +442,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if the element contains .disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -468,14 +468,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if the menu is shown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -494,14 +494,14 @@ describe('Dropdown', () => { it('should not toggle a dropdown if show event is prevented', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -526,14 +526,14 @@ describe('Dropdown', () => { it('should show a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -548,14 +548,14 @@ describe('Dropdown', () => { it('should not show a dropdown if the element is disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -574,14 +574,14 @@ describe('Dropdown', () => { it('should not show a dropdown if the element contains .disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -600,14 +600,14 @@ describe('Dropdown', () => { it('should not show a dropdown if the menu is shown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -626,14 +626,14 @@ describe('Dropdown', () => { it('should not show a dropdown if show event is prevented', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -658,14 +658,14 @@ describe('Dropdown', () => { it('should hide a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -681,14 +681,14 @@ describe('Dropdown', () => { it('should hide a dropdown and destroy popper', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -708,14 +708,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if the element is disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -735,14 +735,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if the element contains .disabled', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle disabled" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -762,14 +762,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if the menu is not shown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdown = new Dropdown(btnDropdown) @@ -788,14 +788,14 @@ describe('Dropdown', () => { it('should not hide a dropdown if hide event is prevented', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu show">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') const dropdown = new Dropdown(btnDropdown) @@ -821,14 +821,14 @@ describe('Dropdown', () => { it('should dispose dropdown', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) expect(dropdown._popper).toBeNull() @@ -844,14 +844,14 @@ describe('Dropdown', () => { it('should dispose dropdown with popper.js', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) dropdown.toggle() @@ -875,14 +875,14 @@ describe('Dropdown', () => { it('should call popper.js and detect navbar on update', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) dropdown.toggle() @@ -901,14 +901,14 @@ describe('Dropdown', () => { it('should just detect navbar on update', () => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(btnDropdown) spyOn(dropdown, '_detectNavbar') @@ -924,14 +924,14 @@ describe('Dropdown', () => { it('should not add class position-static to dropdown if boundary not set', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') dropdownEl.addEventListener('shown.bs.dropdown', () => { @@ -945,14 +945,14 @@ describe('Dropdown', () => { it('should add class position-static to dropdown if boundary not scrollParent', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-boundary="viewport">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') dropdownEl.addEventListener('shown.bs.dropdown', () => { @@ -966,14 +966,14 @@ describe('Dropdown', () => { it('should show and hide a dropdown', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') let showEventTriggered = false let hideEventTriggered = false @@ -1009,7 +1009,7 @@ describe('Dropdown', () => { fixtureEl.innerHTML = [ '<nav class="navbar navbar-expand-md navbar-light bg-light">', ' <div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', @@ -1017,7 +1017,7 @@ describe('Dropdown', () => { '</nav>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') @@ -1032,14 +1032,14 @@ describe('Dropdown', () => { it('should not use popper.js if display set to static', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') const dropdownMenu = fixtureEl.querySelector('.dropdown-menu') @@ -1055,14 +1055,14 @@ describe('Dropdown', () => { it('should remove "show" class if tabbing outside of menu', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' </div>', '</div>' ].join('') - const btnDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const btnDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdownEl = fixtureEl.querySelector('.dropdown') dropdownEl.addEventListener('shown.bs.dropdown', () => { @@ -1086,7 +1086,7 @@ 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 class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' </div>', @@ -1094,14 +1094,14 @@ describe('Dropdown', () => { '</div>', '<div class="btn-group">', ' <button class="btn">Actions</button>', - ' <button class="btn dropdown-toggle" data-toggle="dropdown"></button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Action 1</a>', ' </div>', '</div>' ].join('') - const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]') + const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]') expect(triggerDropdownList.length).toEqual(2) @@ -1138,21 +1138,21 @@ 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 class="dropdown-toggle" data-bs-toggle="dropdown" href="#testmenu">Test menu</a>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' </div>', '</div>', '<div class="btn-group">', ' <button class="btn">Actions</button>', - ' <button class="btn dropdown-toggle" data-toggle="dropdown"></button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown"></button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Action 1</a>', ' </div>', '</div>' ].join('') - const triggerDropdownList = fixtureEl.querySelectorAll('[data-toggle="dropdown"]') + const triggerDropdownList = fixtureEl.querySelectorAll('[data-bs-toggle="dropdown"]') expect(triggerDropdownList.length).toEqual(2) @@ -1197,14 +1197,14 @@ describe('Dropdown', () => { it('should fire hide and hidden event without a clickEvent if event type is not click', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' </div>', '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') dropdown.addEventListener('hide.bs.dropdown', e => { @@ -1229,7 +1229,7 @@ describe('Dropdown', () => { it('should ignore keyboard events within <input>s and <textarea>s', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' <input type="text">', @@ -1238,7 +1238,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const input = fixtureEl.querySelector('input') const textarea = fixtureEl.querySelector('textarea') @@ -1265,7 +1265,7 @@ describe('Dropdown', () => { it('should skip disabled element when using keyboard navigation', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item disabled" href="#sub1">Submenu 1</a>', ' <button class="dropdown-item" type="button" disabled>Disabled button</button>', @@ -1274,7 +1274,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') dropdown.addEventListener('shown.bs.dropdown', () => { @@ -1300,7 +1300,7 @@ describe('Dropdown', () => { ' }', '</style>', '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-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>', @@ -1310,7 +1310,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') dropdown.addEventListener('shown.bs.dropdown', () => { @@ -1332,7 +1332,7 @@ describe('Dropdown', () => { it('should focus next/previous element when using keyboard navigation', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a id="item1" class="dropdown-item" href="#">A link</a>', ' <a id="item2" class="dropdown-item" href="#">Another link</a>', @@ -1340,7 +1340,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const item1 = fixtureEl.querySelector('#item1') const item2 = fixtureEl.querySelector('#item2') @@ -1370,7 +1370,7 @@ describe('Dropdown', () => { it('should focus on the first element when using ArrowUp for the first time', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a id="item1" class="dropdown-item" href="#">A link</a>', ' <a id="item2" class="dropdown-item" href="#">Another link</a>', @@ -1378,7 +1378,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const item1 = fixtureEl.querySelector('#item1') @@ -1398,14 +1398,14 @@ describe('Dropdown', () => { it('should not close the dropdown if the user clicks on a text field', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <input type="text">', ' </div>', '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const input = fixtureEl.querySelector('input') @@ -1425,14 +1425,14 @@ describe('Dropdown', () => { it('should not close the dropdown if the user clicks on a textarea', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <textarea></textarea>', ' </div>', '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const textarea = fixtureEl.querySelector('textarea') @@ -1452,7 +1452,7 @@ describe('Dropdown', () => { it('should ignore keyboard events for <input>s and <textarea>s within dropdown-menu, except for escape key', done => { fixtureEl.innerHTML = [ '<div class="dropdown">', - ' <button class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#sub1">Submenu 1</a>', ' <input type="text">', @@ -1461,7 +1461,7 @@ describe('Dropdown', () => { '</div>' ].join('') - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = fixtureEl.querySelector('.dropdown') const input = fixtureEl.querySelector('input') const textarea = fixtureEl.querySelector('textarea') @@ -1527,7 +1527,7 @@ describe('Dropdown', () => { fixtureEl.innerHTML = [ '<div class="tabs">', ' <div class="dropdown">', - ' <button disabled class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>', + ' <button disabled class="btn dropdown-toggle" data-bs-toggle="dropdown">Dropdown</button>', ' <div class="dropdown-menu">', ' <a class="dropdown-item" href="#">Secondary link</a>', ' <a class="dropdown-item" href="#">Something else here</a>', @@ -1538,9 +1538,9 @@ describe('Dropdown', () => { '</div>' ] - const triggerDropdown = fixtureEl.querySelector('[data-toggle="dropdown"]') + const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]') const dropdown = new Dropdown(triggerDropdown) - const button = fixtureEl.querySelector('button[data-toggle="dropdown"]') + const button = fixtureEl.querySelector('button[data-bs-toggle="dropdown"]') spyOn(dropdown, 'toggle') diff --git a/js/tests/unit/jquery.spec.js b/js/tests/unit/jquery.spec.js index ba41d49efb..6198cdb851 100644 --- a/js/tests/unit/jquery.spec.js +++ b/js/tests/unit/jquery.spec.js @@ -42,7 +42,7 @@ describe('jQuery', () => { it('should use jQuery event system', done => { fixtureEl.innerHTML = [ '<div class="alert">', - ' <button type="button" data-dismiss="alert">x</button>', + ' <button type="button" data-bs-dismiss="alert">x</button>', '</div>' ].join('') diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 9ed1fc4348..c90e260b6c 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -29,7 +29,7 @@ describe('Modal', () => { document.body.classList.remove('modal-open') document.body.removeAttribute('style') - document.body.removeAttribute('data-padding-right') + document.body.removeAttribute('data-bs-padding-right') document.querySelectorAll('.modal-backdrop') .forEach(backdrop => { @@ -67,12 +67,12 @@ describe('Modal', () => { document.body.style.paddingRight = originalPadding modalEl.addEventListener('shown.bs.modal', () => { - expect(document.body.getAttribute('data-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-padding-right') + expect(document.body.getAttribute('data-bs-padding-right')).toEqual(originalPadding, 'original body padding should be stored in data-bs-padding-right') modal.toggle() }) modalEl.addEventListener('hidden.bs.modal', () => { - expect(document.body.getAttribute('data-padding-right')).toBeNull() + expect(document.body.getAttribute('data-bs-padding-right')).toBeNull() expect().nothing() done() }) @@ -95,7 +95,7 @@ describe('Modal', () => { const expectedPadding = originalPadding + modal._getScrollbarWidth() const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10) - expect(fixedEl.getAttribute('data-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-padding-right') + expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual('0px', 'original fixed element padding should be stored in data-bs-padding-right') expect(currentPadding).toEqual(expectedPadding, 'fixed element padding should be adjusted while opening') modal.toggle() }) @@ -103,7 +103,7 @@ describe('Modal', () => { modalEl.addEventListener('hidden.bs.modal', () => { const currentPadding = parseInt(window.getComputedStyle(modalEl).paddingRight, 10) - expect(fixedEl.getAttribute('data-padding-right')).toEqual(null, 'data-padding-right should be cleared after closing') + expect(fixedEl.getAttribute('data-bs-padding-right')).toEqual(null, 'data-bs-padding-right should be cleared after closing') expect(currentPadding).toEqual(originalPadding, 'fixed element padding should be reset after closing') done() }) @@ -126,7 +126,7 @@ describe('Modal', () => { const expectedMargin = originalMargin - modal._getScrollbarWidth() const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) - expect(stickyTopEl.getAttribute('data-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-margin-right') + expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual('0px', 'original sticky element margin should be stored in data-bs-margin-right') expect(currentMargin).toEqual(expectedMargin, 'sticky element margin should be adjusted while opening') modal.toggle() }) @@ -134,7 +134,7 @@ describe('Modal', () => { modalEl.addEventListener('hidden.bs.modal', () => { const currentMargin = parseInt(window.getComputedStyle(stickyTopEl).marginRight, 10) - expect(stickyTopEl.getAttribute('data-margin-right')).toEqual(null, 'data-margin-right should be cleared after closing') + expect(stickyTopEl.getAttribute('data-bs-margin-right')).toEqual(null, 'data-bs-margin-right should be cleared after closing') expect(currentMargin).toEqual(originalMargin, 'sticky element margin should be reset after closing') done() }) @@ -355,19 +355,19 @@ describe('Modal', () => { modal.show() }) - it('should close modal when a click occurred on data-dismiss="modal"', done => { + it('should close modal when a click occurred on data-bs-dismiss="modal"', done => { fixtureEl.innerHTML = [ '<div class="modal fade">', ' <div class="modal-dialog">', ' <div class="modal-header">', - ' <button type="button" data-dismiss="modal"></button>', + ' <button type="button" data-bs-dismiss="modal"></button>', ' </div>', ' </div>', '</div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const btnClose = fixtureEl.querySelector('[data-dismiss="modal"]') + const btnClose = fixtureEl.querySelector('[data-bs-dismiss="modal"]') const modal = new Modal(modalEl) spyOn(modal, 'hide').and.callThrough() @@ -542,7 +542,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-bs-backdrop="static" ><div class="modal-dialog"></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -569,7 +569,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-bs-backdrop="static"><div class="modal-dialog"></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -596,7 +596,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-bs-backdrop="static" data-bs-keyboard="false"><div class="modal-dialog"></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -627,7 +627,7 @@ describe('Modal', () => { }) it('should not overflow when clicking outside of modal-content if backdrop = static', done => { - fixtureEl.innerHTML = '<div class="modal" data-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>' + fixtureEl.innerHTML = '<div class="modal" data-bs-backdrop="static"><div class="modal-dialog" style="transition-duration: 20ms;"></div></div>' const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl, { @@ -873,12 +873,12 @@ describe('Modal', () => { describe('data-api', () => { it('should open modal', done => { fixtureEl.innerHTML = [ - '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>', + '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') modalEl.addEventListener('shown.bs.modal', () => { expect(modalEl.getAttribute('aria-modal')).toEqual('true') @@ -894,13 +894,13 @@ describe('Modal', () => { it('should not recreate a new modal', done => { fixtureEl.innerHTML = [ - '<button type="button" data-toggle="modal" data-target="#exampleModal"></button>', + '<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl) - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(modal, 'show').and.callThrough() @@ -914,12 +914,12 @@ 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>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(Event.prototype, 'preventDefault').and.callThrough() @@ -938,12 +938,12 @@ describe('Modal', () => { it('should focus the trigger on hide', done => { fixtureEl.innerHTML = [ - '<a data-toggle="modal" href="#" data-target="#exampleModal"></a>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(trigger, 'focus') @@ -969,12 +969,12 @@ 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>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal" style="display: none;"></a>', '<div id="exampleModal" class="modal" style="display: none;"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(trigger, 'focus') @@ -1000,12 +1000,12 @@ 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>', + '<a data-bs-toggle="modal" href="#" data-bs-target="#exampleModal"></a>', '<div id="exampleModal" class="modal"><div class="modal-dialog"></div>' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const trigger = fixtureEl.querySelector('[data-toggle="modal"]') + const trigger = fixtureEl.querySelector('[data-bs-toggle="modal"]') spyOn(trigger, 'focus') @@ -1086,7 +1086,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-bs-show="false"><div class="modal-dialog"></div>' const div = fixtureEl.querySelector('div') diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index acaf0a48c2..df48305954 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -64,7 +64,7 @@ describe('Popover', () => { describe('show', () => { it('should show a popover', done => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -120,7 +120,7 @@ describe('Popover', () => { describe('hide', () => { it('should hide a popover', done => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -140,7 +140,7 @@ describe('Popover', () => { describe('jQueryInterface', () => { it('should create a popover', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') @@ -168,7 +168,7 @@ describe('Popover', () => { }) it('should not re create a popover', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -182,7 +182,7 @@ describe('Popover', () => { }) it('should throw error on undefined method', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const action = 'undefinedMethod' @@ -198,7 +198,7 @@ describe('Popover', () => { }) it('should should call show method', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -214,7 +214,7 @@ describe('Popover', () => { }) it('should do nothing if dipose is called when a popover do not exist', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') @@ -231,7 +231,7 @@ describe('Popover', () => { describe('getInstance', () => { it('should return popover instance', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') const popover = new Popover(popoverEl) @@ -240,7 +240,7 @@ describe('Popover', () => { }) it('should return null when there is no popover instance', () => { - fixtureEl.innerHTML = '<a href="#" title="Popover" data-content="https://twitter.com/getbootstrap">BS twitter</a>' + fixtureEl.innerHTML = '<a href="#" title="Popover" data-bs-content="https://twitter.com/getbootstrap">BS twitter</a>' const popoverEl = fixtureEl.querySelector('a') diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index 9ac02ce99f..33298300cf 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -641,7 +641,7 @@ describe('ScrollSpy', () => { describe('event handler', () => { it('should create scrollspy on window load event', () => { - fixtureEl.innerHTML = '<div data-spy="scroll"></div>' + fixtureEl.innerHTML = '<div data-bs-spy="scroll"></div>' const scrollSpyEl = fixtureEl.querySelector('div') diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index a08fec20d6..f74d389df2 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -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 class="nav-link nav-tab" href="#profile" role="tab" data-bs-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 id="secondNav" class="nav-link nav-tab" href="#buzz" role="tab" data-bs-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 class="nav-link nav-tab" href="#references" role="tab" data-bs-toggle="tab">', ' <button id="btnClose" class="close"><span aria-hidden="true">×</span></button>', ' </a>', ' </li>', @@ -425,7 +425,7 @@ describe('Tab', () => { 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 id="triggerProfile" data-bs-toggle="tab" href="#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 class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>', + ' <li class="nav-item"><a class="nav-link" href="#profile" data-bs-toggle="tab">Profile</a></li>', ' <li class="nav-item dropdown">', - ' <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>', + ' <a class="nav-link dropdown-toggle active" data-bs-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 class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>', + ' <a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-bs-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 id="tab1" href="#x-tab1" class="nav-link" data-bs-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>', + ' <a href="#x-tab2" class="nav-link active" data-bs-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>', + ' <a href="#x-tab3" class="nav-link" data-bs-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="#nested-tab1" class="nav-link active" data-bs-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-bs-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 id="tab-home" href="#home" class="nav-link" data-bs-toggle="tab" role="tab">Home</a></li>', + ' <li class="nav-item" role="presentation"><a id="tab-profile" href="#profile" class="nav-link" data-bs-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 class="nav-link nav-tab" href="#home" role="tab" data-bs-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 id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-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 class="nav-link nav-tab" href="#home" role="tab" data-bs-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 id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-bs-toggle="tab">Profile</a>', ' </li>', '</ul>', '<div class="tab-content">', diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js index 1641ded666..b743549625 100644 --- a/js/tests/unit/toast.spec.js +++ b/js/tests/unit/toast.spec.js @@ -43,10 +43,10 @@ describe('Toast', () => { toast.show() }) - it('should close toast when close element with data-dismiss attribute is set', done => { + it('should close toast when close element with data-bs-dismiss attribute is set', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-autohide="false" data-animation="false">', - ' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">', + '<div class="toast" data-bs-delay="1" data-bs-autohide="false" data-bs-animation="false">', + ' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">', ' close', ' </button>', '</div>' @@ -79,8 +79,8 @@ describe('Toast', () => { Toast.Default.delay = defaultDelay fixtureEl.innerHTML = [ - '<div class="toast" data-autohide="false" data-animation="false">', - ' <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">', + '<div class="toast" data-bs-autohide="false" data-bs-animation="false">', + ' <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">', ' close', ' </button>', '</div>' @@ -102,7 +102,7 @@ describe('Toast', () => { describe('show', () => { it('should auto hide', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1">', + '<div class="toast" data-bs-delay="1">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -122,7 +122,7 @@ describe('Toast', () => { it('should not add fade class', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-animation="false">', + '<div class="toast" data-bs-delay="1" data-bs-animation="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -142,7 +142,7 @@ describe('Toast', () => { it('should not trigger shown if show is prevented', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-animation="false">', + '<div class="toast" data-bs-delay="1" data-bs-animation="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -202,7 +202,7 @@ describe('Toast', () => { describe('hide', () => { it('should allow to hide toast manually', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-autohide="false">', + '<div class="toast" data-bs-delay="1" data-bs-autohide="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -239,7 +239,7 @@ describe('Toast', () => { it('should not trigger hidden if hide is prevented', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="1" data-animation="false">', + '<div class="toast" data-bs-delay="1" data-bs-animation="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', @@ -289,7 +289,7 @@ describe('Toast', () => { it('should allow to destroy toast and hide it before that', done => { fixtureEl.innerHTML = [ - '<div class="toast" data-delay="0" data-autohide="false">', + '<div class="toast" data-bs-delay="0" data-bs-autohide="false">', ' <div class="toast-body">', ' a simple toast', ' </div>', diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index 611fadfe1c..c6d91b4028 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-bs-sanitize="false" title="Another tooltip">' const tooltipEl = fixtureEl.querySelector('a') const tooltip = new Tooltip(tooltipEl) diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index f7cc379777..ecad59b4d3 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -24,9 +24,9 @@ describe('Util', () => { }) describe('getSelectorFromElement', () => { - it('should get selector from data-target', () => { + it('should get selector from data-bs-target', () => { fixtureEl.innerHTML = [ - '<div id="test" data-target=".target"></div>', + '<div id="test" data-bs-target=".target"></div>', '<div class="target"></div>' ].join('') @@ -35,7 +35,7 @@ describe('Util', () => { expect(Util.getSelectorFromElement(testEl)).toEqual('.target') }) - it('should get selector from href if no data-target set', () => { + it('should get selector from href if no data-bs-target set', () => { fixtureEl.innerHTML = [ '<a id="test" href=".target"></a>', '<div class="target"></div>' @@ -46,9 +46,9 @@ describe('Util', () => { expect(Util.getSelectorFromElement(testEl)).toEqual('.target') }) - it('should get selector from href if data-target equal to #', () => { + it('should get selector from href if data-bs-target equal to #', () => { fixtureEl.innerHTML = [ - '<a id="test" data-target="#" href=".target"></a>', + '<a id="test" data-bs-target="#" href=".target"></a>', '<div class="target"></div>' ].join('') @@ -75,9 +75,9 @@ describe('Util', () => { }) describe('getElementFromSelector', () => { - it('should get element from data-target', () => { + it('should get element from data-bs-target', () => { fixtureEl.innerHTML = [ - '<div id="test" data-target=".target"></div>', + '<div id="test" data-bs-target=".target"></div>', '<div class="target"></div>' ].join('') @@ -86,7 +86,7 @@ describe('Util', () => { expect(Util.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) }) - it('should get element from href if no data-target set', () => { + it('should get element from href if no data-bs-target set', () => { fixtureEl.innerHTML = [ '<a id="test" href=".target"></a>', '<div class="target"></div>' @@ -380,13 +380,13 @@ describe('Util', () => { expect(Util.getjQuery()).toEqual(fakejQuery) }) - it('should not return jQuery object when present if data-no-jquery', () => { - document.body.setAttribute('data-no-jquery', '') + it('should not return jQuery object when present if data-bs-no-jquery', () => { + document.body.setAttribute('data-bs-no-jquery', '') expect(window.jQuery).toEqual(fakejQuery) expect(Util.getjQuery()).toEqual(null) - document.body.removeAttribute('data-no-jquery') + document.body.removeAttribute('data-bs-no-jquery') }) it('should not return jQuery if not present', () => { diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html index f94d86d95e..f51fe80447 100644 --- a/js/tests/visual/alert.html +++ b/js/tests/visual/alert.html @@ -11,14 +11,14 @@ <h1>Alert <small>Bootstrap Visual Test</small></h1> <div class="alert alert-warning alert-dismissible fade show" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>Holy guacamole!</strong> You should check in on some of those fields below. </div> <div class="alert alert-danger alert-dismissible fade show" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <p> @@ -31,7 +31,7 @@ </div> <div class="alert alert-danger alert-dismissible fade show" role="alert"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <p> @@ -44,7 +44,7 @@ </div> <div class="alert alert-warning alert-dismissible fade show" role="alert" style="transition-duration: 5s;"> - <button type="button" class="close" data-dismiss="alert" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> This alert will take 5 seconds to fade out. diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html index 14cc208704..75ad132099 100644 --- a/js/tests/visual/button.html +++ b/js/tests/visual/button.html @@ -10,14 +10,14 @@ <div class="container"> <h1>Button <small>Bootstrap Visual Test</small></h1> - <button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> + <button type="button" class="btn btn-primary" data-bs-toggle="button" aria-pressed="false" autocomplete="off"> Single toggle </button> <p>For checkboxes and radio buttons, ensure that keyboard behavior is functioning correctly.</p> <p>Navigate to the checkboxes with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>), and ensure that <kbd>SPACE</kbd> toggles the currently focused checkbox. Click on one of the checkboxes using the mouse, ensure that focus was correctly set on the actual checkbox, and that <kbd>SPACE</kbd> toggles the checkbox again.</p> - <div class="btn-group" data-toggle="buttons"> + <div class="btn-group" data-bs-toggle="buttons"> <label class="btn btn-primary active"> <input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked) </label> @@ -31,7 +31,7 @@ <p>Navigate to the radio button group with the keyboard (generally, using <kbd>TAB</kbd> / <kbd>SHIFT + TAB</kbd>). If no radio button was initially set to be selected, the first/last radio button should receive focus (depending on whether you navigated "forward" to the group with <kbd>TAB</kbd> or "backwards" using <kbd>SHIFT + TAB</kbd>). If a radio button was already selected, navigating with the keyboard should set focus to that particular radio button. Only one radio button in a group should receive focus at any given time. Ensure that the selected radio button can be changed by using the <kbd>←</kbd> and <kbd>→</kbd> arrow keys. Click on one of the radio buttons with the mouse, ensure that focus was correctly set on the actual radio button, and that <kbd>←</kbd> and <kbd>→</kbd> change the selected radio button again.</p> - <div class="btn-group" data-toggle="buttons"> + <div class="btn-group" data-bs-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) </label> diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html index 44fdff8184..51f58e417e 100644 --- a/js/tests/visual/carousel.html +++ b/js/tests/visual/carousel.html @@ -17,11 +17,11 @@ <p>The transition duration should be around 2s. Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p> - <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> + <div id="carousel-example-generic" class="carousel slide" data-bs-ride="carousel"> <ol class="carousel-indicators"> - <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> - <li data-target="#carousel-example-generic" data-slide-to="1"></li> - <li data-target="#carousel-example-generic" data-slide-to="2"></li> + <li data-bs-target="#carousel-example-generic" data-bs-slide-to="0" class="active"></li> + <li data-bs-target="#carousel-example-generic" data-bs-slide-to="1"></li> + <li data-bs-target="#carousel-example-generic" data-bs-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> @@ -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 class="carousel-control-prev" href="#carousel-example-generic" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> - <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next"> + <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a> diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html index f36f73f7e6..3f38ec747e 100644 --- a/js/tests/visual/collapse.html +++ b/js/tests/visual/collapse.html @@ -14,13 +14,13 @@ <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 data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> - <div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> + <div id="collapseOne" class="collapse show" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> <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> @@ -29,12 +29,12 @@ <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 class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> - <div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> + <div id="collapseTwo" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> <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> @@ -43,12 +43,12 @@ <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 class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> - <div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> + <div id="collapseThree" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> <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> @@ -57,12 +57,12 @@ <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"> - Collapsible Group Item with XSS in data-parent + <a class="collapsed" data-bs-toggle="collapse" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> + Collapsible Group Item with XSS in data-bs-parent </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-bs-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/dropdown.html b/js/tests/visual/dropdown.html index 0816683be4..5dc757197c 100644 --- a/js/tests/visual/dropdown.html +++ b/js/tests/visual/dropdown.html @@ -12,7 +12,7 @@ <nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> @@ -28,7 +28,7 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -50,7 +50,7 @@ <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown2" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown2"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -62,14 +62,14 @@ <div class="row"> <div class="col-sm-12 mt-4"> <div class="dropdown"> - <button type="button" class="btn btn-secondary" data-toggle="dropdown" aria-expanded="false">Dropdown</button> + <button type="button" class="btn btn-secondary" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</button> <div class="dropdown-menu"> <input id="textField" type="text"> </div> </div> <div class="btn-group dropup"> <button type="button" class="btn btn-secondary">Dropup split</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Dropup split</span> </button> <ul class="dropdown-menu"> @@ -80,7 +80,7 @@ </div> <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropup</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -89,7 +89,7 @@ </div> <div class="btn-group"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> This dropdown's menu is right-aligned </button> <div class="dropdown-menu dropdown-menu-right"> @@ -103,7 +103,7 @@ <div class="col-sm-12 mt-4"> <div class="btn-group dropup" role="group"> <a href="#" class="btn btn-secondary">Dropup split align right</a> - <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" id="dropdown-page-subheader-button-3" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> </button> <div class="dropdown-menu dropdown-menu-right"> @@ -113,7 +113,7 @@ </div> </div> <div class="btn-group dropup"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropup align right</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Dropup align right</button> <div class="dropdown-menu dropdown-menu-right"> <button class="dropdown-item" type="button">Action</button> <button class="dropdown-item" type="button">Another action</button> @@ -125,7 +125,7 @@ <div class="col-sm-12 mt-4"> <div class="btn-group dropright" role="group"> <a href="#" class="btn btn-secondary">Dropright split</a> - <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" id="dropdown-page-subheader-button-4" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> </button> <div class="dropdown-menu"> @@ -135,7 +135,7 @@ </div> </div> <div class="btn-group dropright"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuRight" data-bs-toggle="dropdown" aria-expanded="false"> Dropright </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuRight"> @@ -147,7 +147,7 @@ <!-- dropleft --> <div class="btn-group dropleft" role="group"> <a href="#" class="btn btn-secondary">Dropleft split</a> - <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false"> + <button type="button" id="dropdown-page-subheader-button-5" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"> <span class="visually-hidden">Product actions</span> </button> <div class="dropdown-menu"> @@ -157,7 +157,7 @@ </div> </div> <div class="btn-group dropleft"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-toggle="dropdown" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftMenu" data-bs-toggle="dropdown" aria-expanded="false"> Dropleft </button> <div class="dropdown-menu" aria-labelledby="dropleftMenu"> @@ -172,7 +172,7 @@ <div class="row"> <div class="col-sm-3 mt-4"> <div class="btn-group dropdown"> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="10,20">Dropdown offset</button> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" data-bs-offset="10,20">Dropdown offset</button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> @@ -183,7 +183,7 @@ <div class="col-sm-3 mt-4"> <div class="btn-group dropdown"> <button type="button" class="btn btn-secondary">Dropdown reference</button> - <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" data-reference="parent"> + <button type="button" class="btn btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent"> <span class="visually-hidden">Dropdown split</span> </button> <ul class="dropdown-menu"> @@ -195,7 +195,7 @@ </div> <div class="col-sm-3 mt-4"> <div class="dropdown"> - <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-expanded="false"> + <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" data-bs-display="static" aria-expanded="false"> Dropdown menu without Popper.js </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"> diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html index 3c1e37cfda..79d815d3ca 100644 --- a/js/tests/visual/modal.html +++ b/js/tests/visual/modal.html @@ -14,7 +14,7 @@ </head> <body> <nav class="navbar navbar-full navbar-dark bg-dark"> - <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> + <button class="navbar-toggler hidden-lg-up" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> <div class="collapse navbar-expand-md" id="navbarResponsive"> <a class="navbar-brand" href="#">This shouldn't jump!</a> <ul class="navbar-nav"> @@ -39,7 +39,7 @@ <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="myModalLabel">Modal title</h4> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> @@ -48,23 +48,23 @@ <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p> <h4>Popover in a modal</h4> - <p>This <button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p> + <p>This <button type="button" class="btn btn-primary" data-bs-toggle="popover" data-bs-placement="left" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">button</button> should trigger a popover on click.</p> <h4>Tooltips in a modal</h4> - <p><a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p> + <p><a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">This link</a> and <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">that link</a> should have tooltips on hover.</p> <div id="accordion" role="tablist"> <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 data-bs-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Collapsible Group Item #1 </a> </h5> </div> - <div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> + <div id="collapseOne" class="collapse show" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingOne"> <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> @@ -73,12 +73,12 @@ <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 class="collapsed" data-bs-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Collapsible Group Item #2 </a> </h5> </div> - <div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> + <div id="collapseTwo" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingTwo"> <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> @@ -87,12 +87,12 @@ <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 class="collapsed" data-bs-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Collapsible Group Item #3 </a> </h5> </div> - <div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> + <div id="collapseThree" class="collapse" data-bs-parent="#accordion" role="tabpanel" aria-labelledby="headingThree"> <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> @@ -114,7 +114,7 @@ <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -126,7 +126,7 @@ <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> @@ -140,7 +140,7 @@ <p>Test result: <strong id="ff-bug-test-result"></strong></p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> @@ -152,7 +152,7 @@ <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4> - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> + <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> @@ -160,14 +160,14 @@ <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.</p> </div> <div class="modal-footer"> - <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> + <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> - <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> + <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#myModal"> Launch demo modal </button> @@ -177,14 +177,14 @@ <br><br> - <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#firefoxModal"> + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="#firefoxModal"> Launch Firefox bug test modal </button> (<a href="https://github.com/twbs/bootstrap/issues/18365">See Issue #18365</a>) <br><br> - <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#slowModal"> + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="#slowModal"> Launch modal with slow transition </button> @@ -194,8 +194,8 @@ Tall body content to force the page to have a scrollbar. </div> - <button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-target attribute of it's show-button</div></div></div></div>"> - Modal with an XSS inside the data-target + <button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>"> + Modal with an XSS inside the data-bs-target </button> <br><br> @@ -225,12 +225,12 @@ } } - [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) + [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) .forEach(function (popover) { new Popover(popover) }) - var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) + var tooltipList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) tooltipList.forEach(function (tooltip) { new Tooltip(tooltip) }) diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html index b6ca7dc248..e33de5f0bd 100644 --- a/js/tests/visual/popover.html +++ b/js/tests/visual/popover.html @@ -10,23 +10,23 @@ <div class="container"> <h1>Popover <small>Bootstrap Visual Test</small></h1> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="auto" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="auto" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on auto </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Default placement was on top but not enough place"> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Default placement was on top but not enough place"> Popover on top </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on right </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on bottom </button> - <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> + <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Popover on left </button> </div> @@ -39,7 +39,7 @@ <script src="../../dist/tooltip.js"></script> <script src="../../dist/popover.js"></script> <script> - [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) + [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) .forEach(function (popover) { new Popover(popover) }) diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 6da8a51bf1..c86927d991 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -9,10 +9,10 @@ body { padding-top: 70px; } </style> </head> - <body data-spy="scroll" data-target=".navbar" data-offset="70"> + <body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="70"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"> <a class="navbar-brand" href="#">Scrollspy test</a> - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="navbarSupportedContent"> @@ -24,7 +24,7 @@ <a class="nav-link" href="#mdo">@mdo</a> </li> <li class="nav-item dropdown"> - <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-expanded="false">Dropdown</a> + <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a> <ul class="dropdown-menu" aria-labelledby="dropdown"> <li><a class="dropdown-item" href="#one">One</a></li> <li><a class="dropdown-item" href="#two">Two</a></li> diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index a221f971e6..0f7b734e76 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 class="nav-link active" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link active" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link" data-bs-toggle="tab" href="#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 class="nav-link nav-item active" data-bs-toggle="tab" href="#home5">Home</a> + <a class="nav-link nav-item" data-bs-toggle="tab" href="#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> + <a class="nav-link dropdown-toggle" href="#" id="dropdown5" data-bs-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 class="dropdown-item" data-bs-toggle="tab" href="#fat5">@fat</a></li> + <li><a class="dropdown-item" data-bs-toggle="tab" href="#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 class="list-group-item list-group-item-action active" id="list-home-list" data-bs-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-bs-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-bs-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-bs-toggle="tab" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a> </div> </div> <div class="col-8"> diff --git a/js/tests/visual/toast.html b/js/tests/visual/toast.html index 046c4345c0..bee3f6729e 100644 --- a/js/tests/visual/toast.html +++ b/js/tests/visual/toast.html @@ -26,7 +26,7 @@ </div> <div class="notifications"> - <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000"> + <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000"> <div class="toast-header"> <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span> <strong class="mr-auto">Bootstrap</strong> @@ -37,12 +37,12 @@ </div> </div> - <div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true"> + <div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span> <strong class="mr-auto">Bootstrap</strong> <small class="text-muted">2 seconds ago</small> - <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> + <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> diff --git a/js/tests/visual/tooltip.html b/js/tests/visual/tooltip.html index 14f704b934..93536a0443 100644 --- a/js/tests/visual/tooltip.html +++ b/js/tests/visual/tooltip.html @@ -21,41 +21,41 @@ <div class="container"> <h1>Tooltip <small>Bootstrap Visual Test</small></h1> - <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> + <p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> <hr> <div class="row"> <p> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="auto" title="Tooltip on auto"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="auto" title="Tooltip on auto"> Tooltip on auto </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top"> Tooltip on top </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right"> Tooltip on right </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom"> Tooltip on bottom </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left"> Tooltip on left </button> </p> </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-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with XSS" data-bs-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"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip with container (selector)" data-bs-container="#customContainer"> Tooltip with container (selector) </button> - <button id="tooltipElement" type="button" class="btn btn-secondary" data-placement="left" title="Tooltip with container (element)"> + <button id="tooltipElement" type="button" class="btn btn-secondary" data-bs-placement="left" title="Tooltip with container (element)"> Tooltip with container (element) </button> - <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> + <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button> </p> @@ -79,10 +79,10 @@ if (typeof document.body.attachShadow === 'function') { var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' }) shadowRoot.innerHTML = - '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' + + '<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom">' + ' Tooltip on top in a shadow dom' + '</button>' + - '<button id="secondTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' + + '<button id="secondTooltip" type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top in a shadow dom with container option">' + ' Tooltip on top in a shadow dom' + '</button>' @@ -92,7 +92,7 @@ }) } - [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) + [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) .forEach(function (tooltip) { new Tooltip(tooltip) }) |