diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
index 34adc7bd47..dcc19277cf 100644
--- a/.bundlewatch.config.json
+++ b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
},
{
"path": "./dist/css/boosted.min.css",
- "maxSize": "26.4 kB"
+ "maxSize": "26.5 kB"
},
{
"path": "./dist/js/boosted.bundle.js",
diff --git a/.cspell.json b/.cspell.json
index 77c36fa831..1c7afc6c9f 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -12,6 +12,7 @@
"Blockquotes",
"Bootstrappers",
"borderless",
+ "Brotli",
"browserslist",
"browserslistrc",
"btncheck",
@@ -49,6 +50,7 @@
"française",
"fullscreen",
"getbootstrap",
+ "Gaël",
"Grayscale",
"Helv",
"Hoverable",
@@ -76,8 +78,10 @@
"offcanvas",
"offcanvases",
"opensource",
+ "Packagist",
"pinterest",
"popperjs",
+ "Poupard",
"prebuild",
"precompiled",
"preconnect",
@@ -127,13 +131,17 @@
"بالعالم",
"مرحبًا"
],
- "language": "en, en-US",
+ "language": "en-US",
"files": [
- "site/**/*.md"
+ "**/*.md"
],
"ignorePaths": [
".cspell.json",
- "*.min.*"
+ "dist/",
+ "*.min.*",
+ "**/*rtl*",
+ "**/tests/**",
+ "CHANGELOG.md"
],
"useGitignore": true
}
\ No newline at end of file
diff --git a/.github/workflows/cspell.yml b/.github/workflows/cspell.yml
new file mode 100644
index 0000000000..3b214575d0
--- /dev/null
+++ b/.github/workflows/cspell.yml
@@ -0,0 +1,34 @@
+name: cspell
+
+on:
+ push:
+ branches-ignore:
+ - "dependabot/**"
+ pull_request:
+ workflow_dispatch:
+
+env:
+ FORCE_COLOR: 2
+ NODE: 16
+
+jobs:
+ cspell:
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Bail early
+ if: github.event_name == 'pull_request' && contains(github.event.pull_request.labels.*.name, 'skip:ci')
+ run: exit 0
+
+ - name: Clone repository
+ uses: actions/checkout@v2
+ if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
+
+ - name: Run cspell
+ uses: streetsidesoftware/cspell-action@v1
+ with:
+ config: ".cspell.json"
+ files: "**/*.md"
+ inline: error
+ incremental_files_only: false
+ if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
index 7a6b71775b..02a50f0116 100644
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -50,6 +50,19 @@ jobs:
run: npm ci
if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
- - name: Test docs
- run: npm run docs
+ - name: Build docs
+ run: npm run docs-build
+ if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
+
+ - name: Validate HTML
+ run: npm run docs-vnu
+ if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
+
+ - name: Run linkinator
+ uses: JustinBeckwith/linkinator-action@v1
+ with:
+ paths: _site
+ recurse: true
+ verbosity: error
+ skip: "^(?!http://localhost)"
if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci'))
diff --git a/.github/workflows/pa11y.yml b/.github/workflows/pa11y.yml
index 50fb553519..513d3afd3b 100644
--- a/.github/workflows/pa11y.yml
+++ b/.github/workflows/pa11y.yml
@@ -62,7 +62,7 @@ jobs:
- name: Update sri
run: npm run release-sri
if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci') && !contains(github.event.pull_request.labels.*.name, 'skip:pa11y'))
-
+
- name: Test docs
run: npm run docs-build
if: github.event_name == 'push' || (github.event_name == 'pull_request' && !contains(github.event.pull_request.labels.*.name, 'skip:ci') && !contains(github.event.pull_request.labels.*.name, 'skip:pa11y'))
diff --git a/README.md b/README.md
index e7ff23c000..af16cb4345 100644
--- a/README.md
+++ b/README.md
@@ -58,7 +58,7 @@ Read the [Getting started page](https://boosted.orange.com/docs/5.1/getting-star
[](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/dist/js/boosted.min.js)
[](https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/dist/js/boosted.min.js)
[](https://automate.browserstack.com/public-build/ZGR2VnBvQ1F6ajhoNDIwWEF3Wm1RcjJlak1rdFZpRXJSdFZjTjJxQU9udz0tLU5wS2lrODNRTkswdzZZVUxjSHFpTHc9PQ==--714e60c953cf25bd52082a2b494eb881db1736c0)
-[](https://www.jsdelivr.com/package/npm/boosted)
+[](https://www.jsdelivr.com/package/npm/boosted)
## What's included
diff --git a/build/build-plugins.js b/build/build-plugins.js
index 401c676017..8fa0e0b1f3 100644
--- a/build/build-plugins.js
+++ b/build/build-plugins.js
@@ -15,8 +15,8 @@ const globby = require('globby')
const { babel } = require('@rollup/plugin-babel')
const banner = require('./banner.js')
-const srcPath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
-const jsFiles = globby.sync(srcPath + '/**/*.js')
+const sourcePath = path.resolve(__dirname, '../js/src/').replace(/\\/g, '/')
+const jsFiles = globby.sync(sourcePath + '/**/*.js')
// Array which holds the resolved plugins
const resolvedPlugins = []
@@ -31,7 +31,7 @@ for (const file of jsFiles) {
dist: file.replace('src', 'dist'),
fileName: path.basename(file),
className: filenameToEntity(path.basename(file))
- // safeClassName: filenameToEntity(path.relative(srcPath, file))
+ // safeClassName: filenameToEntity(path.relative(sourcePath, file))
})
}
diff --git a/build/generate-sri.js b/build/generate-sri.js
index 1ce940c37c..678fa4e3b0 100644
--- a/build/generate-sri.js
+++ b/build/generate-sri.js
@@ -60,9 +60,9 @@ const files = [
]
for (const file of files) {
- fs.readFile(file.file, 'utf8', (err, data) => {
- if (err) {
- throw err
+ fs.readFile(file.file, 'utf8', (error, data) => {
+ if (error) {
+ throw error
}
const algo = 'sha384'
diff --git a/build/rollup.config.js b/build/rollup.config.js
index 417d5ec560..2e67663c42 100644
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@@ -9,7 +9,7 @@ const banner = require('./banner.js')
const BUNDLE = process.env.BUNDLE === 'true'
const ESM = process.env.ESM === 'true'
-let fileDest = `boosted${ESM ? '.esm' : ''}`
+let fileDestination = `boosted${ESM ? '.esm' : ''}`
const external = ['@popperjs/core']
const plugins = [
babel({
@@ -24,7 +24,7 @@ const globals = {
}
if (BUNDLE) {
- fileDest += '.bundle'
+ fileDestination += '.bundle'
// Remove last entry in external array to bundle Popper
external.pop()
delete globals['@popperjs/core']
@@ -41,7 +41,7 @@ const rollupConfig = {
input: path.resolve(__dirname, `../js/index.${ESM ? 'esm' : 'umd'}.js`),
output: {
banner,
- file: path.resolve(__dirname, `../dist/js/${fileDest}.js`),
+ file: path.resolve(__dirname, `../dist/js/${fileDestination}.js`),
format: ESM ? 'esm' : 'umd',
globals,
generatedCode: 'es2015'
diff --git a/js/index.esm.js b/js/index.esm.js
index 4a8bf422bd..8a7b17dd14 100644
--- a/js/index.esm.js
+++ b/js/index.esm.js
@@ -14,6 +14,7 @@ export { default as Collapse } from './src/collapse'
export { default as Dropdown } from './src/dropdown'
export { default as Modal } from './src/modal'
export { default as Offcanvas } from './src/offcanvas'
+export { default as OrangeNavbar } from './src/orange-navbar'
export { default as Popover } from './src/popover'
export { default as ScrollSpy } from './src/scrollspy'
export { default as Tab } from './src/tab'
diff --git a/js/index.umd.js b/js/index.umd.js
index b5ec086c67..e2f4bb70c0 100644
--- a/js/index.umd.js
+++ b/js/index.umd.js
@@ -12,6 +12,7 @@ import Collapse from './src/collapse'
import Dropdown from './src/dropdown'
import Modal from './src/modal'
import Offcanvas from './src/offcanvas'
+import OrangeNavbar from './src/orange-navbar'
import Popover from './src/popover'
import ScrollSpy from './src/scrollspy'
import Tab from './src/tab'
@@ -27,6 +28,7 @@ export default {
Dropdown,
Modal,
Offcanvas,
+ OrangeNavbar,
Popover,
ScrollSpy,
Tab,
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 548af85144..b6c144367a 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -245,27 +245,29 @@ class Carousel extends BaseComponent {
}
_addTouchEventListeners() {
- for (const itemImg of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
- EventHandler.on(itemImg, EVENT_DRAG_START, event => event.preventDefault())
+ for (const img of SelectorEngine.find(SELECTOR_ITEM_IMG, this._element)) {
+ EventHandler.on(img, EVENT_DRAG_START, event => event.preventDefault())
}
const endCallBack = () => {
- if (this._config.pause === 'hover') {
- // If it's a touch-enabled device, mouseenter/leave are fired as
- // part of the mouse compatibility events on first tap - the carousel
- // would stop cycling until user tapped out of it;
- // here, we listen for touchend, explicitly pause the carousel
- // (as if it's the second time we tap on it, mouseenter compat event
- // is NOT fired) and after a timeout (to allow for mouse compatibility
- // events to fire) we explicitly restart cycling
-
- this.pause()
- if (this.touchTimeout) {
- clearTimeout(this.touchTimeout)
- }
+ if (this._config.pause !== 'hover') {
+ return
+ }
+
+ // If it's a touch-enabled device, mouseenter/leave are fired as
+ // part of the mouse compatibility events on first tap - the carousel
+ // would stop cycling until user tapped out of it;
+ // here, we listen for touchend, explicitly pause the carousel
+ // (as if it's the second time we tap on it, mouseenter compat event
+ // is NOT fired) and after a timeout (to allow for mouse compatibility
+ // events to fire) we explicitly restart cycling
- this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
+ this.pause()
+ if (this.touchTimeout) {
+ clearTimeout(this.touchTimeout)
}
+
+ this.touchTimeout = setTimeout(event => this.cycle(event), TOUCHEVENT_COMPAT_WAIT + this._config.interval)
}
const swipeConfig = {
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 56d4f51c2d..b1088e106f 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -70,7 +70,7 @@ class Collapse extends BaseComponent {
for (const elem of toggleList) {
const selector = getSelectorFromElement(elem)
const filterElement = SelectorEngine.find(selector)
- .filter(foundElem => foundElem === this._element)
+ .filter(foundElement => foundElement === this._element)
if (selector !== null && filterElement.length) {
this._triggerArray.push(elem)
@@ -185,9 +185,9 @@ class Collapse extends BaseComponent {
this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW)
for (const trigger of this._triggerArray) {
- const elem = getElementFromSelector(trigger)
+ const element = getElementFromSelector(trigger)
- if (elem && !this._isShown(elem)) {
+ if (element && !this._isShown(element)) {
this._addAriaAndCollapsedClass([trigger], false)
}
}
@@ -240,7 +240,7 @@ class Collapse extends BaseComponent {
_getFirstLevelChildren(selector) {
const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
// remove children if greater depth
- return SelectorEngine.find(selector, this._config.parent).filter(elem => !children.includes(elem))
+ return SelectorEngine.find(selector, this._config.parent).filter(element => !children.includes(element))
}
_addAriaAndCollapsedClass(triggerArray, isOpen) {
@@ -248,25 +248,20 @@ class Collapse extends BaseComponent {
return
}
- for (const elem of triggerArray) {
- if (isOpen) {
- elem.classList.remove(CLASS_NAME_COLLAPSED)
- } else {
- elem.classList.add(CLASS_NAME_COLLAPSED)
- }
-
- elem.setAttribute('aria-expanded', isOpen)
+ for (const element of triggerArray) {
+ element.classList.toggle(CLASS_NAME_COLLAPSED, !isOpen)
+ element.setAttribute('aria-expanded', isOpen)
}
}
// Static
static jQueryInterface(config) {
- return this.each(function () {
- const _config = {}
- if (typeof config === 'string' && /show|hide/.test(config)) {
- _config.toggle = false
- }
+ const _config = {}
+ if (typeof config === 'string' && /show|hide/.test(config)) {
+ _config.toggle = false
+ }
+ return this.each(function () {
const data = Collapse.getOrCreateInstance(this, _config)
if (typeof config === 'string') {
diff --git a/js/src/dom/event-handler.js b/js/src/dom/event-handler.js
index b9ebce3244..a31ed333c9 100644
--- a/js/src/dom/event-handler.js
+++ b/js/src/dom/event-handler.js
@@ -104,65 +104,54 @@ function bootstrapDelegationHandler(element, selector, fn) {
const domElements = element.querySelectorAll(selector)
for (let { target } = event; target && target !== this; target = target.parentNode) {
- for (let i = domElements.length; i--;) {
- if (domElements[i] === target) {
- event.delegateTarget = target
+ for (const domElement of domElements) {
+ if (domElement !== target) {
+ continue
+ }
- if (handler.oneOff) {
- EventHandler.off(element, event.type, selector, fn)
- }
+ event.delegateTarget = target
- return fn.apply(target, [event])
+ if (handler.oneOff) {
+ EventHandler.off(element, event.type, selector, fn)
}
+
+ return fn.apply(target, [event])
}
}
-
- // To please ESLint
- return null
}
}
function findHandler(events, handler, delegationSelector = null) {
- const uidEventList = Object.keys(events)
-
- for (const uidEvent of uidEventList) {
- const event = events[uidEvent]
-
- if (event.originalHandler === handler && event.delegationSelector === delegationSelector) {
- return event
- }
- }
-
- return null
+ return Object.values(events)
+ .find(event => event.originalHandler === handler && event.delegationSelector === delegationSelector)
}
-function normalizeParams(originalTypeEvent, handler, delegationFn) {
+function normalizeParameters(originalTypeEvent, handler, delegationFunction) {
const delegation = typeof handler === 'string'
- const originalHandler = delegation ? delegationFn : handler
+ const originalHandler = delegation ? delegationFunction : handler
let typeEvent = getTypeEvent(originalTypeEvent)
- const isNative = nativeEvents.has(typeEvent)
- if (!isNative) {
+ if (!nativeEvents.has(typeEvent)) {
typeEvent = originalTypeEvent
}
return [delegation, originalHandler, typeEvent]
}
-function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
+function addHandler(element, originalTypeEvent, handler, delegationFunction, oneOff) {
if (typeof originalTypeEvent !== 'string' || !element) {
return
}
if (!handler) {
- handler = delegationFn
- delegationFn = null
+ handler = delegationFunction
+ delegationFunction = null
}
// in case of mouseenter or mouseleave wrap the handler within a function that checks for its DOM position
// this prevents the handler from being dispatched the same way as mouseover or mouseout does
if (customEventsRegex.test(originalTypeEvent)) {
- const wrapFn = fn => {
+ const wrapFunction = fn => {
return function (event) {
if (!event.relatedTarget || (event.relatedTarget !== event.delegateTarget && !event.delegateTarget.contains(event.relatedTarget))) {
return fn.call(this, event)
@@ -170,27 +159,27 @@ function addHandler(element, originalTypeEvent, handler, delegationFn, oneOff) {
}
}
- if (delegationFn) {
- delegationFn = wrapFn(delegationFn)
+ if (delegationFunction) {
+ delegationFunction = wrapFunction(delegationFunction)
} else {
- handler = wrapFn(handler)
+ handler = wrapFunction(handler)
}
}
- const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn)
+ const [delegation, originalHandler, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
const events = getEvent(element)
const handlers = events[typeEvent] || (events[typeEvent] = {})
- const previousFn = findHandler(handlers, originalHandler, delegation ? handler : null)
+ const previousFunction = findHandler(handlers, originalHandler, delegation ? handler : null)
- if (previousFn) {
- previousFn.oneOff = previousFn.oneOff && oneOff
+ if (previousFunction) {
+ previousFunction.oneOff = previousFunction.oneOff && oneOff
return
}
const uid = getUidEvent(originalHandler, originalTypeEvent.replace(namespaceRegex, ''))
const fn = delegation ?
- bootstrapDelegationHandler(element, handler, delegationFn) :
+ bootstrapDelegationHandler(element, handler, delegationFunction) :
bootstrapHandler(element, handler)
fn.delegationSelector = delegation ? handler : null
@@ -231,20 +220,20 @@ function getTypeEvent(event) {
}
const EventHandler = {
- on(element, event, handler, delegationFn) {
- addHandler(element, event, handler, delegationFn, false)
+ on(element, event, handler, delegationFunction) {
+ addHandler(element, event, handler, delegationFunction, false)
},
- one(element, event, handler, delegationFn) {
- addHandler(element, event, handler, delegationFn, true)
+ one(element, event, handler, delegationFunction) {
+ addHandler(element, event, handler, delegationFunction, true)
},
- off(element, originalTypeEvent, handler, delegationFn) {
+ off(element, originalTypeEvent, handler, delegationFunction) {
if (typeof originalTypeEvent !== 'string' || !element) {
return
}
- const [delegation, originalHandler, typeEvent] = normalizeParams(originalTypeEvent, handler, delegationFn)
+ const [delegation, originalHandler, typeEvent] = normalizeParameters(originalTypeEvent, handler, delegationFunction)
const inNamespace = typeEvent !== originalTypeEvent
const events = getEvent(element)
const isNamespace = originalTypeEvent.startsWith('.')
@@ -284,13 +273,11 @@ const EventHandler = {
const $ = getjQuery()
const typeEvent = getTypeEvent(event)
const inNamespace = event !== typeEvent
- const isNative = nativeEvents.has(typeEvent)
- let jQueryEvent
+ let jQueryEvent = null
let bubbles = true
let nativeDispatch = true
let defaultPrevented = false
- let evt = null
if (inNamespace && $) {
jQueryEvent = $.Event(event, args)
@@ -301,12 +288,7 @@ const EventHandler = {
defaultPrevented = jQueryEvent.isDefaultPrevented()
}
- if (isNative) {
- evt = document.createEvent('HTMLEvents')
- evt.initEvent(typeEvent, bubbles, true)
- } else {
- evt = new CustomEvent(event, { bubbles, cancelable: true })
- }
+ const evt = new Event(event, { bubbles, cancelable: true })
// merge custom information in our event
if (typeof args !== 'undefined') {
@@ -327,7 +309,7 @@ const EventHandler = {
element.dispatchEvent(evt)
}
- if (evt.defaultPrevented && typeof jQueryEvent !== 'undefined') {
+ if (evt.defaultPrevented && jQueryEvent) {
jQueryEvent.preventDefault()
}
diff --git a/js/src/dom/manipulator.js b/js/src/dom/manipulator.js
index a3e9e192ae..e3ee293c7d 100644
--- a/js/src/dom/manipulator.js
+++ b/js/src/dom/manipulator.js
@@ -5,24 +5,24 @@
* --------------------------------------------------------------------------
*/
-function normalizeData(val) {
- if (val === 'true') {
+function normalizeData(value) {
+ if (value === 'true') {
return true
}
- if (val === 'false') {
+ if (value === 'false') {
return false
}
- if (val === Number(val).toString()) {
- return Number(val)
+ if (value === Number(value).toString()) {
+ return Number(value)
}
- if (val === '' || val === 'null') {
+ if (value === '' || value === 'null') {
return null
}
- return val
+ return value
}
function normalizeDataKey(key) {
diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js
index af27dc3795..9214335bd5 100644
--- a/js/src/dom/selector-engine.js
+++ b/js/src/dom/selector-engine.js
@@ -11,8 +11,6 @@ import { isDisabled, isVisible } from '../util/index'
* Constants
*/
-const NODE_TEXT = 3
-
const SelectorEngine = {
find(selector, element = document.documentElement) {
return [].concat(...Element.prototype.querySelectorAll.call(element, selector))
@@ -28,14 +26,11 @@ const SelectorEngine = {
parents(element, selector) {
const parents = []
- let ancestor = element.parentNode
-
- while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) {
- if (ancestor.matches(selector)) {
- parents.push(ancestor)
- }
+ let ancestor = element.parentNode.closest(selector)
- ancestor = ancestor.parentNode
+ while (ancestor) {
+ parents.push(ancestor)
+ ancestor = ancestor.parentNode.closest(selector)
}
return parents
@@ -55,6 +50,7 @@ const SelectorEngine = {
return []
},
+ // TODO: this is now unused; remove later along with prev()
next(element, selector) {
let next = element.nextElementSibling
@@ -79,7 +75,7 @@ const SelectorEngine = {
'details',
'[tabindex]',
'[contenteditable="true"]'
- ].map(selector => `${selector}:not([tabindex^="-"])`).join(', ')
+ ].map(selector => `${selector}:not([tabindex^="-"])`).join(',')
return this.find(focusables, element).filter(el => !isDisabled(el) && isVisible(el))
}
diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 674150e016..5635ec96ec 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -9,7 +9,6 @@ import * as Popper from '@popperjs/core'
import {
defineJQueryPlugin,
getElement,
- getElementFromSelector,
getNextActiveElement,
isDisabled,
isElement,
@@ -90,7 +89,8 @@ class Dropdown extends BaseComponent {
super(element, config)
this._popper = null
- this._menu = this._getMenuElement()
+ this._parent = this._element.parentNode // dropdown wrapper
+ this._menu = SelectorEngine.findOne(SELECTOR_MENU, this._parent)
this._inNavbar = this._detectNavbar()
}
@@ -113,7 +113,7 @@ class Dropdown extends BaseComponent {
}
show() {
- if (isDisabled(this._element) || this._isShown(this._menu)) {
+ if (isDisabled(this._element) || this._isShown()) {
return
}
@@ -127,17 +127,15 @@ class Dropdown extends BaseComponent {
return
}
- const parent = getElementFromSelector(this._element) || this._element.parentNode
-
- this._createPopper(parent)
+ this._createPopper()
// If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
// only needed because of broken event delegation on iOS
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
- if ('ontouchstart' in document.documentElement && !parent.closest(SELECTOR_NAVBAR_NAV)) {
- for (const elem of [].concat(...document.body.children)) {
- EventHandler.on(elem, 'mouseover', noop)
+ if ('ontouchstart' in document.documentElement && !this._parent.closest(SELECTOR_NAVBAR_NAV)) {
+ for (const element of [].concat(...document.body.children)) {
+ EventHandler.on(element, 'mouseover', noop)
}
}
@@ -150,7 +148,7 @@ class Dropdown extends BaseComponent {
}
hide() {
- if (isDisabled(this._element) || !this._isShown(this._menu)) {
+ if (isDisabled(this._element) || !this._isShown()) {
return
}
@@ -186,8 +184,8 @@ class Dropdown extends BaseComponent {
// If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) {
- for (const elem of [].concat(...document.body.children)) {
- EventHandler.off(elem, 'mouseover', noop)
+ for (const element of [].concat(...document.body.children)) {
+ EventHandler.off(element, 'mouseover', noop)
}
}
@@ -215,7 +213,7 @@ class Dropdown extends BaseComponent {
return config
}
- _createPopper(parent) {
+ _createPopper() {
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s dropdowns require Popper (https://popper.js.org)')
}
@@ -223,7 +221,7 @@ class Dropdown extends BaseComponent {
let referenceElement = this._element
if (this._config.reference === 'parent') {
- referenceElement = parent
+ referenceElement = this._parent
} else if (isElement(this._config.reference)) {
referenceElement = getElement(this._config.reference)
} else if (typeof this._config.reference === 'object') {
@@ -234,16 +232,12 @@ class Dropdown extends BaseComponent {
this._popper = Popper.createPopper(referenceElement, this._menu, popperConfig)
}
- _isShown(element = this._element) {
- return element.classList.contains(CLASS_NAME_SHOW)
- }
-
- _getMenuElement() {
- return SelectorEngine.next(this._element, SELECTOR_MENU)[0]
+ _isShown() {
+ return this._menu.classList.contains(CLASS_NAME_SHOW)
}
_getPlacement() {
- const parentDropdown = this._element.parentNode
+ const parentDropdown = this._parent
if (parentDropdown.classList.contains(CLASS_NAME_DROPEND)) {
return PLACEMENT_RIGHT
@@ -271,7 +265,7 @@ class Dropdown extends BaseComponent {
const { offset } = this._config
if (typeof offset === 'string') {
- return offset.split(',').map(val => Number.parseInt(val, 10))
+ return offset.split(',').map(value => Number.parseInt(value, 10))
}
if (typeof offset === 'function') {
@@ -314,7 +308,7 @@ class Dropdown extends BaseComponent {
}
_selectMenuItem({ key, target }) {
- const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(el => isVisible(el))
+ const items = SelectorEngine.find(SELECTOR_VISIBLE_ITEMS, this._menu).filter(element => isVisible(element))
if (!items.length) {
return
@@ -359,10 +353,6 @@ class Dropdown extends BaseComponent {
continue
}
- const relatedTarget = {
- relatedTarget: context._element
- }
-
const composedPath = event.composedPath()
const isMenuTarget = composedPath.includes(context._menu)
if (
@@ -378,6 +368,8 @@ class Dropdown extends BaseComponent {
continue
}
+ const relatedTarget = { relatedTarget: context._element }
+
if (event.type === 'click') {
relatedTarget.clickEvent = event
}
@@ -393,9 +385,10 @@ class Dropdown extends BaseComponent {
// - If key is not UP or DOWN => not a dropdown command
// - If trigger inside the menu => not a dropdown command
- const isInput = /input|textarea/i.test(event.target.tagName)
- const isEscapeEvent = event.key === ESCAPE_KEY
- const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(event.key)
+ const { target, key, delegateTarget } = event
+ const isInput = /input|textarea/i.test(target.tagName)
+ const isEscapeEvent = key === ESCAPE_KEY
+ const isUpOrDownEvent = [ARROW_UP_KEY, ARROW_DOWN_KEY].includes(key)
if (!isInput && !(isUpOrDownEvent || isEscapeEvent)) {
return
@@ -403,12 +396,12 @@ class Dropdown extends BaseComponent {
if (isInput && !isEscapeEvent) {
// eslint-disable-next-line unicorn/no-lonely-if
- if (!isUpOrDownEvent || event.target.closest(SELECTOR_MENU)) {
+ if (!isUpOrDownEvent || target.closest(SELECTOR_MENU)) {
return
}
}
- const isActive = this.classList.contains(CLASS_NAME_SHOW)
+ const isActive = delegateTarget.classList.contains(CLASS_NAME_SHOW)
if (!isActive && isEscapeEvent) {
return
@@ -421,7 +414,7 @@ class Dropdown extends BaseComponent {
return
}
- const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ? this : SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0]
+ const getToggleButton = SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, delegateTarget.parentNode)
const instance = Dropdown.getOrCreateInstance(getToggleButton)
if (isEscapeEvent) {
diff --git a/js/src/modal.js b/js/src/modal.js
index cc158d6ce5..054750c5f7 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -30,7 +30,6 @@ const EVENT_HIDDEN = `hidden${EVENT_KEY}`
const EVENT_SHOW = `show${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_RESIZE = `resize${EVENT_KEY}`
-const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
@@ -115,7 +114,7 @@ class Modal extends BaseComponent {
this._toggleEscapeEventListener(true)
this._toggleResizeEventListener(true)
- this._showBackdrop(() => this._showElement(relatedTarget))
+ this._backdrop.show(() => this._showElement(relatedTarget))
}
hide() {
@@ -158,9 +157,22 @@ class Modal extends BaseComponent {
// Private
_initializeBackDrop() {
+ const clickCallback = () => {
+ if (this._config.backdrop === 'static') {
+ this._triggerBackdropTransition()
+ return
+ }
+
+ this.hide()
+ }
+
+ // 'static' option will be translated to true, and booleans will keep their value
+ const isVisible = Boolean(this._config.backdrop)
+
return new Backdrop({
- isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value
- isAnimated: this._isAnimated()
+ isVisible,
+ isAnimated: this._isAnimated(),
+ clickCallback: isVisible ? clickCallback : null
})
}
@@ -250,25 +262,6 @@ class Modal extends BaseComponent {
})
}
- _showBackdrop(callback) {
- EventHandler.on(this._element, EVENT_CLICK_DISMISS, event => {
- if (event.target !== event.currentTarget) {
- return
- }
-
- if (this._config.backdrop === true) {
- this.hide()
- return
- }
-
- if (this._config.backdrop === 'static') {
- this._triggerBackdropTransition()
- }
- })
-
- this._backdrop.show(callback)
- }
-
_isAnimated() {
return this._element.classList.contains(CLASS_NAME_FADE)
}
@@ -279,23 +272,22 @@ class Modal extends BaseComponent {
return
}
- const { classList, scrollHeight, style } = this._element
- const isModalOverflowing = scrollHeight > document.documentElement.clientHeight
- const initialOverflowY = style.overflowY
+ const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+ const initialOverflowY = this._element.style.overflowY
// return if the following background transition hasn't yet completed
- if (initialOverflowY === 'hidden' || classList.contains(CLASS_NAME_STATIC)) {
+ if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) {
return
}
if (!isModalOverflowing) {
- style.overflowY = 'hidden'
+ this._element.style.overflowY = 'hidden'
}
- classList.add(CLASS_NAME_STATIC)
+ this._element.classList.add(CLASS_NAME_STATIC)
this._queueCallback(() => {
- classList.remove(CLASS_NAME_STATIC)
+ this._element.classList.remove(CLASS_NAME_STATIC)
this._queueCallback(() => {
- style.overflowY = initialOverflowY
+ this._element.style.overflowY = initialOverflowY
}, this._dialog)
}, this._dialog)
@@ -370,9 +362,9 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
})
// avoid conflict when clicking modal toggler while another one is open
- const allReadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
- if (allReadyOpen) {
- Modal.getInstance(allReadyOpen).hide()
+ const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
+ if (alreadyOpen) {
+ Modal.getInstance(alreadyOpen).hide()
}
const data = Modal.getOrCreateInstance(target)
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index db65340391..2735a9c2ae 100644
--- a/js/src/offcanvas.js
+++ b/js/src/offcanvas.js
@@ -238,8 +238,8 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
})
EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
- for (const el of SelectorEngine.find(OPEN_SELECTOR)) {
- Offcanvas.getOrCreateInstance(el).show()
+ for (const selector of SelectorEngine.find(OPEN_SELECTOR)) {
+ Offcanvas.getOrCreateInstance(selector).show()
}
})
diff --git a/js/src/orange-navbar.js b/js/src/orange-navbar.js
new file mode 100644
index 0000000000..5248d639e9
--- /dev/null
+++ b/js/src/orange-navbar.js
@@ -0,0 +1,40 @@
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+import SelectorEngine from './dom/selector-engine'
+
+const NAME = 'orangenavbar'
+const DATA_KEY = 'bs.orangenavbar'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+const EVENT_SCROLL_DATA_API = `scroll${EVENT_KEY}${DATA_API_KEY}`
+const SELECTOR_STICKY_TOP = 'header.sticky-top'
+
+class OrangeNavbar extends BaseComponent {
+ // Getters
+ static get NAME() {
+ return NAME
+ }
+
+ enableMinimizing(el) {
+ // The minimized behaviour works only if your header has .sticky-top (fixed-top will be sticky without minimizing)
+ const Scroll = window.scrollY
+ const headerChildren = [...el.children]
+ const globalHeaderChild = headerChildren.find(element => !element.classList.contains('supra'))
+ if (globalHeaderChild) {
+ if (Scroll > 0) {
+ // Consider first element not having .supra in array is the first header
+ globalHeaderChild.classList.add('header-minimized')
+ } else {
+ globalHeaderChild.classList.remove('header-minimized')
+ }
+ }
+ }
+}
+
+EventHandler.on(window, EVENT_SCROLL_DATA_API, () => {
+ for (const el of SelectorEngine.find(SELECTOR_STICKY_TOP)) {
+ OrangeNavbar.getOrCreateInstance(el).enableMinimizing(el)
+ }
+})
+
+export default OrangeNavbar
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index aa54371e7e..ef5b9fa825 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -178,14 +178,16 @@ class Tooltip extends BaseComponent {
} else {
context._leave()
}
- } else {
- if (this._getTipElement().classList.contains(CLASS_NAME_SHOW)) {
- this._leave()
- return
- }
- this._enter()
+ return
+ }
+
+ if (this._isShown()) {
+ this._leave()
+ return
}
+
+ this._enter()
}
dispose() {
@@ -234,11 +236,7 @@ class Tooltip extends BaseComponent {
if (this._popper) {
this._popper.update()
} else {
- const placement = typeof this._config.placement === 'function' ?
- this._config.placement.call(this, tip, this._element) :
- this._config.placement
- const attachment = AttachmentMap[placement.toUpperCase()]
- this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
+ this._createPopper(tip)
}
tip.classList.add(CLASS_NAME_SHOW)
@@ -254,12 +252,12 @@ class Tooltip extends BaseComponent {
}
const complete = () => {
- const prevHoverState = this._isHovered
+ const previousHoverState = this._isHovered
this._isHovered = false
EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
- if (prevHoverState) {
+ if (previousHoverState) {
this._leave()
}
}
@@ -268,7 +266,7 @@ class Tooltip extends BaseComponent {
}
hide() {
- if (!this._popper) {
+ if (!this._isShown()) {
return
}
@@ -291,6 +289,7 @@ class Tooltip extends BaseComponent {
this._activeTrigger[TRIGGER_CLICK] = false
this._activeTrigger[TRIGGER_FOCUS] = false
this._activeTrigger[TRIGGER_HOVER] = false
+ this._isHovered = false
const complete = () => {
if (this._isWithActiveTrigger()) {
@@ -308,7 +307,6 @@ class Tooltip extends BaseComponent {
}
this._queueCallback(complete, this.tip, this._isAnimated())
- this._isHovered = false
}
update() {
@@ -356,7 +354,7 @@ class Tooltip extends BaseComponent {
setContent(content) {
let isShown = false
if (this.tip) {
- isShown = this.tip.classList.contains(CLASS_NAME_SHOW)
+ isShown = this._isShown()
this.tip.remove()
this.tip = null
}
@@ -404,11 +402,23 @@ class Tooltip extends BaseComponent {
return this._config.animation || (this.tip && this.tip.classList.contains(CLASS_NAME_FADE))
}
+ _isShown() {
+ return this.tip && this.tip.classList.contains(CLASS_NAME_SHOW)
+ }
+
+ _createPopper(tip) {
+ const placement = typeof this._config.placement === 'function' ?
+ this._config.placement.call(this, tip, this._element) :
+ this._config.placement
+ const attachment = AttachmentMap[placement.toUpperCase()]
+ this._popper = Popper.createPopper(this._element, tip, this._getPopperConfig(attachment))
+ }
+
_getOffset() {
const { offset } = this._config
if (typeof offset === 'string') {
- return offset.split(',').map(val => Number.parseInt(val, 10))
+ return offset.split(',').map(value => Number.parseInt(value, 10))
}
if (typeof offset === 'function') {
@@ -532,7 +542,7 @@ class Tooltip extends BaseComponent {
}
_enter() {
- if (this._getTipElement().classList.contains(CLASS_NAME_SHOW) || this._isHovered) {
+ if (this._isShown() || this._isHovered) {
this._isHovered = true
return
}
@@ -572,9 +582,9 @@ class Tooltip extends BaseComponent {
_getConfig(config) {
const dataAttributes = Manipulator.getDataAttributes(this._element)
- for (const dataAttr of Object.keys(dataAttributes)) {
- if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
- delete dataAttributes[dataAttr]
+ for (const dataAttribute of Object.keys(dataAttributes)) {
+ if (DISALLOWED_ATTRIBUTES.has(dataAttribute)) {
+ delete dataAttributes[dataAttribute]
}
}
diff --git a/js/src/util/backdrop.js b/js/src/util/backdrop.js
index 63f2b581c6..8f121e5bd2 100644
--- a/js/src/util/backdrop.js
+++ b/js/src/util/backdrop.js
@@ -68,11 +68,12 @@ class Backdrop extends Config {
this._append()
+ const element = this._getElement()
if (this._config.isAnimated) {
- reflow(this._getElement())
+ reflow(element)
}
- this._getElement().classList.add(CLASS_NAME_SHOW)
+ element.classList.add(CLASS_NAME_SHOW)
this._emulateAnimation(() => {
execute(callback)
@@ -130,9 +131,10 @@ class Backdrop extends Config {
return
}
- this._config.rootElement.append(this._getElement())
+ const element = this._getElement()
+ this._config.rootElement.append(element)
- EventHandler.on(this._getElement(), EVENT_MOUSEDOWN, () => {
+ EventHandler.on(element, EVENT_MOUSEDOWN, () => {
execute(this._config.clickCallback)
})
diff --git a/js/src/util/focustrap.js b/js/src/util/focustrap.js
index 46727ecf8a..88fd16b104 100644
--- a/js/src/util/focustrap.js
+++ b/js/src/util/focustrap.js
@@ -60,14 +60,12 @@ class FocusTrap extends Config {
// Public
activate() {
- const { trapElement, autofocus } = this._config
-
if (this._isActive) {
return
}
- if (autofocus) {
- trapElement.focus()
+ if (this._config.autofocus) {
+ this._config.trapElement.focus()
}
EventHandler.off(document, EVENT_KEY) // guard against infinite focus loop
@@ -88,10 +86,9 @@ class FocusTrap extends Config {
// Private
_handleFocusin(event) {
- const { target } = event
const { trapElement } = this._config
- if (target === document || target === trapElement || trapElement.contains(target)) {
+ if (event.target === document || event.target === trapElement || trapElement.contains(event.target)) {
return
}
diff --git a/js/src/util/sanitizer.js b/js/src/util/sanitizer.js
index 5a7a680355..1db61ae707 100644
--- a/js/src/util/sanitizer.js
+++ b/js/src/util/sanitizer.js
@@ -82,13 +82,13 @@ export const DefaultAllowlist = {
ul: []
}
-export function sanitizeHtml(unsafeHtml, allowList, sanitizeFn) {
+export function sanitizeHtml(unsafeHtml, allowList, sanitizeFunction) {
if (!unsafeHtml.length) {
return unsafeHtml
}
- if (sanitizeFn && typeof sanitizeFn === 'function') {
- return sanitizeFn(unsafeHtml)
+ if (sanitizeFunction && typeof sanitizeFunction === 'function') {
+ return sanitizeFunction(unsafeHtml)
}
const domParser = new window.DOMParser()
diff --git a/js/src/util/scrollbar.js b/js/src/util/scrollbar.js
index b81d4b2372..86a2bca01f 100644
--- a/js/src/util/scrollbar.js
+++ b/js/src/util/scrollbar.js
@@ -61,39 +61,39 @@ class ScrollBarHelper {
this._element.style.overflow = 'hidden'
}
- _setElementAttributes(selector, styleProp, callback) {
+ _setElementAttributes(selector, styleProperty, callback) {
const scrollbarWidth = this.getWidth()
const manipulationCallBack = element => {
if (element !== this._element && window.innerWidth > element.clientWidth + scrollbarWidth) {
return
}
- this._saveInitialAttribute(element, styleProp)
- const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProp)
- element.style.setProperty(styleProp, `${callback(Number.parseFloat(calculatedValue))}px`)
+ this._saveInitialAttribute(element, styleProperty)
+ const calculatedValue = window.getComputedStyle(element).getPropertyValue(styleProperty)
+ element.style.setProperty(styleProperty, `${callback(Number.parseFloat(calculatedValue))}px`)
}
this._applyManipulationCallback(selector, manipulationCallBack)
}
- _saveInitialAttribute(element, styleProp) {
- const actualValue = element.style.getPropertyValue(styleProp)
+ _saveInitialAttribute(element, styleProperty) {
+ const actualValue = element.style.getPropertyValue(styleProperty)
if (actualValue) {
- Manipulator.setDataAttribute(element, styleProp, actualValue)
+ Manipulator.setDataAttribute(element, styleProperty, actualValue)
}
}
- _resetElementAttributes(selector, styleProp) {
+ _resetElementAttributes(selector, styleProperty) {
const manipulationCallBack = element => {
- const value = Manipulator.getDataAttribute(element, styleProp)
+ const value = Manipulator.getDataAttribute(element, styleProperty)
// We only want to remove the property if the value is `null`; the value can also be zero
if (value === null) {
- element.style.removeProperty(styleProp)
+ element.style.removeProperty(styleProperty)
return
}
- Manipulator.removeDataAttribute(element, styleProp)
- element.style.setProperty(styleProp, value)
+ Manipulator.removeDataAttribute(element, styleProperty)
+ element.style.setProperty(styleProperty, value)
}
this._applyManipulationCallback(selector, manipulationCallBack)
diff --git a/js/tests/README.md b/js/tests/README.md
index ca99c0ede0..79d05d444f 100644
--- a/js/tests/README.md
+++ b/js/tests/README.md
@@ -50,22 +50,24 @@ describe('getInstance', () => {
})
// Asynchronous test
-it('should show a tooltip without the animation', done => {
- fixtureEl.innerHTML = '
'
+ it('should close an alert', () => {
+ return new Promise(resolve => {
+ const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+ fixtureEl.innerHTML = '
'
- const alertEl = document.querySelector('.alert')
- const alert = new Alert(alertEl)
+ const alertEl = document.querySelector('.alert')
+ const alert = new Alert(alertEl)
- alertEl.addEventListener('closed.bs.alert', () => {
- expect(document.querySelectorAll('.alert')).toHaveSize(0)
- expect(spy).not.toHaveBeenCalled()
- done()
- })
+ alertEl.addEventListener('closed.bs.alert', () => {
+ expect(document.querySelectorAll('.alert')).toHaveSize(0)
+ expect(spy).not.toHaveBeenCalled()
+ resolve()
+ })
- alert.close()
+ alert.close()
+ })
})
- it('should close alert with fade class', done => {
- fixtureEl.innerHTML = '
'
+ it('should close alert with fade class', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const alertEl = document.querySelector('.alert')
- const alert = new Alert(alertEl)
+ const alertEl = document.querySelector('.alert')
+ const alert = new Alert(alertEl)
- alertEl.addEventListener('transitionend', () => {
- expect().nothing()
- })
+ alertEl.addEventListener('transitionend', () => {
+ expect().nothing()
+ })
- alertEl.addEventListener('closed.bs.alert', () => {
- expect(document.querySelectorAll('.alert')).toHaveSize(0)
- done()
- })
+ alertEl.addEventListener('closed.bs.alert', () => {
+ expect(document.querySelectorAll('.alert')).toHaveSize(0)
+ resolve()
+ })
- alert.close()
+ alert.close()
+ })
})
- it('should not remove alert if close event is prevented', done => {
- fixtureEl.innerHTML = '
'
+ it('should not remove alert if close event is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const getAlert = () => document.querySelector('.alert')
- const alertEl = getAlert()
- const alert = new Alert(alertEl)
+ const getAlert = () => document.querySelector('.alert')
+ const alertEl = getAlert()
+ const alert = new Alert(alertEl)
- alertEl.addEventListener('close.bs.alert', event => {
- event.preventDefault()
- setTimeout(() => {
- expect(getAlert()).not.toBeNull()
- done()
- }, 10)
- })
+ alertEl.addEventListener('close.bs.alert', event => {
+ event.preventDefault()
+ setTimeout(() => {
+ expect(getAlert()).not.toBeNull()
+ resolve()
+ }, 10)
+ })
- alertEl.addEventListener('closed.bs.alert', () => {
- throw new Error('should not fire closed event')
- })
+ alertEl.addEventListener('closed.bs.alert', () => {
+ throw new Error('should not fire closed event')
+ })
- alert.close()
+ alert.close()
+ })
})
})
diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js
index 9c3f69e608..ddd2df96af 100644
--- a/js/tests/unit/carousel.spec.js
+++ b/js/tests/unit/carousel.spec.js
@@ -63,94 +63,100 @@ describe('Carousel', () => {
expect(carouselByElement._element).toEqual(carouselEl)
})
- it('should go to next item if right arrow key is pressed', done => {
- fixtureEl.innerHTML = [
- '',
- '
',
- '
item 1
',
- '
item 2
',
- '
item 3
',
- '
',
- '
',
+ '
',
+ '
item 1
',
+ '
item 2
',
+ '
item 3
',
+ '
',
+ '
',
- '
',
- '
item 1
',
- '
item 2
',
- '
item 3
',
- '
',
- '
',
+ '
',
+ '
item 1
',
+ '
item 2
',
+ '
item 3
',
+ '
',
+ '
',
- '
',
- '
item 1
',
- '
item 2
',
- '
item 3
',
- '
',
- '
',
+ '
',
+ '
item 1
',
+ '
item 2
',
+ '
item 3
',
+ '
',
+ '
',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const input = fixtureEl.querySelector('input')
- const textarea = fixtureEl.querySelector('textarea')
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdownParent = fixtureEl.querySelector('.dropdown')
+ const dropdown = new Dropdown(triggerDropdown)
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- input.focus()
- const keydown = createEvent('keydown')
+ const showFunction = jasmine.createSpy('showFunction')
+ dropdownParent.addEventListener('show.bs.dropdown', showFunction)
- keydown.key = 'ArrowUp'
- input.dispatchEvent(keydown)
+ const shownFunction = jasmine.createSpy('shownFunction')
+ dropdownParent.addEventListener('shown.bs.dropdown', () => {
+ shownFunction()
+ dropdown.hide()
+ })
- expect(document.activeElement).toEqual(input, 'input still focused')
+ const hideFunction = jasmine.createSpy('hideFunction')
+ dropdownParent.addEventListener('hide.bs.dropdown', hideFunction)
- textarea.focus()
- textarea.dispatchEvent(keydown)
+ dropdownParent.addEventListener('hidden.bs.dropdown', () => {
+ expect(showFunction).toHaveBeenCalled()
+ expect(shownFunction).toHaveBeenCalled()
+ expect(hideFunction).toHaveBeenCalled()
+ resolve()
+ })
- expect(document.activeElement).toEqual(textarea, 'textarea still focused')
- done()
+ dropdown.show()
})
-
- triggerDropdown.click()
})
- it('should skip disabled element when using keyboard navigation', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ it('should ignore keyboard events within ',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ it('should skip disabled element when using keyboard navigation', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowDown'
+ triggerDropdown.addEventListener('shown.bs.dropdown', () => {
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowDown'
- triggerDropdown.dispatchEvent(keydown)
+ triggerDropdown.dispatchEvent(keydown)
+ triggerDropdown.dispatchEvent(keydown)
- expect(document.activeElement).not.toHaveClass('d-none')
- expect(document.activeElement.style.display).not.toEqual('none')
- expect(document.activeElement.style.visibility).not.toEqual('hidden')
+ expect(document.activeElement).not.toHaveClass('disabled')
+ expect(document.activeElement.hasAttribute('disabled')).toBeFalse()
+ resolve()
+ })
- done()
+ triggerDropdown.click()
})
-
- triggerDropdown.click()
})
- it('should focus next/previous element when using keyboard navigation', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
-
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const item1 = fixtureEl.querySelector('#item1')
- const item2 = fixtureEl.querySelector('#item2')
+ it('should skip hidden element when using keyboard navigation', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- const keydownArrowDown = createEvent('keydown')
- keydownArrowDown.key = 'ArrowDown'
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- triggerDropdown.dispatchEvent(keydownArrowDown)
- expect(document.activeElement).toEqual(item1, 'item1 is focused')
+ triggerDropdown.addEventListener('shown.bs.dropdown', () => {
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowDown'
- document.activeElement.dispatchEvent(keydownArrowDown)
- expect(document.activeElement).toEqual(item2, 'item2 is focused')
+ triggerDropdown.dispatchEvent(keydown)
- const keydownArrowUp = createEvent('keydown')
- keydownArrowUp.key = 'ArrowUp'
+ expect(document.activeElement).not.toHaveClass('d-none')
+ expect(document.activeElement.style.display).not.toEqual('none')
+ expect(document.activeElement.style.visibility).not.toEqual('hidden')
- document.activeElement.dispatchEvent(keydownArrowUp)
- expect(document.activeElement).toEqual(item1, 'item1 is focused')
+ resolve()
+ })
- done()
+ triggerDropdown.click()
})
-
- triggerDropdown.click()
})
- it('should open the dropdown and focus on the last item when using ArrowUp for the first time', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ it('should focus next/previous element when using keyboard navigation', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const lastItem = fixtureEl.querySelector('#item2')
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const item1 = fixtureEl.querySelector('#item1')
+ const item2 = fixtureEl.querySelector('#item2')
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- setTimeout(() => {
- expect(document.activeElement).toEqual(lastItem, 'item2 is focused')
- done()
+ triggerDropdown.addEventListener('shown.bs.dropdown', () => {
+ const keydownArrowDown = createEvent('keydown')
+ keydownArrowDown.key = 'ArrowDown'
+
+ triggerDropdown.dispatchEvent(keydownArrowDown)
+ expect(document.activeElement).toEqual(item1, 'item1 is focused')
+
+ document.activeElement.dispatchEvent(keydownArrowDown)
+ expect(document.activeElement).toEqual(item2, 'item2 is focused')
+
+ const keydownArrowUp = createEvent('keydown')
+ keydownArrowUp.key = 'ArrowUp'
+
+ document.activeElement.dispatchEvent(keydownArrowUp)
+ expect(document.activeElement).toEqual(item1, 'item1 is focused')
+
+ resolve()
})
- })
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowUp'
- triggerDropdown.dispatchEvent(keydown)
+ triggerDropdown.click()
+ })
})
- it('should open the dropdown and focus on the first item when using ArrowDown for the first time', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ it('should open the dropdown and focus on the last item when using ArrowUp for the first time', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const firstItem = fixtureEl.querySelector('#item1')
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const lastItem = fixtureEl.querySelector('#item2')
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- setTimeout(() => {
- expect(document.activeElement).toEqual(firstItem, 'item1 is focused')
- done()
+ triggerDropdown.addEventListener('shown.bs.dropdown', () => {
+ setTimeout(() => {
+ expect(document.activeElement).toEqual(lastItem, 'item2 is focused')
+ resolve()
+ })
})
- })
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowDown'
- triggerDropdown.dispatchEvent(keydown)
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowUp'
+ triggerDropdown.dispatchEvent(keydown)
+ })
})
- it('should not close the dropdown if the user clicks on a text field within dropdown-menu', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ it('should open the dropdown and focus on the first item when using ArrowDown for the first time', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const input = fixtureEl.querySelector('input')
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const firstItem = fixtureEl.querySelector('#item1')
- input.addEventListener('click', () => {
- expect(triggerDropdown).toHaveClass('show')
- done()
- })
+ triggerDropdown.addEventListener('shown.bs.dropdown', () => {
+ setTimeout(() => {
+ expect(document.activeElement).toEqual(firstItem, 'item1 is focused')
+ resolve()
+ })
+ })
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- expect(triggerDropdown).toHaveClass('show')
- input.dispatchEvent(createEvent('click'))
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowDown'
+ triggerDropdown.dispatchEvent(keydown)
})
-
- triggerDropdown.click()
})
- it('should not close the dropdown if the user clicks on a textarea within dropdown-menu', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ it('should not close the dropdown if the user clicks on a text field within dropdown-menu', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const textarea = fixtureEl.querySelector('textarea')
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const input = fixtureEl.querySelector('input')
- textarea.addEventListener('click', () => {
- expect(triggerDropdown).toHaveClass('show')
- done()
- })
+ input.addEventListener('click', () => {
+ expect(triggerDropdown).toHaveClass('show')
+ resolve()
+ })
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- expect(triggerDropdown).toHaveClass('show')
- textarea.dispatchEvent(createEvent('click'))
- })
+ triggerDropdown.addEventListener('shown.bs.dropdown', () => {
+ expect(triggerDropdown).toHaveClass('show')
+ input.dispatchEvent(createEvent('click'))
+ })
- triggerDropdown.click()
+ triggerDropdown.click()
+ })
})
- it('should close the dropdown if the user clicks on a text field that is not contained within dropdown-menu', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
',
- '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const input = fixtureEl.querySelector('input')
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const textarea = fixtureEl.querySelector('textarea')
- triggerDropdown.addEventListener('hidden.bs.dropdown', () => {
- expect().nothing()
- done()
- })
+ textarea.addEventListener('click', () => {
+ expect(triggerDropdown).toHaveClass('show')
+ resolve()
+ })
- triggerDropdown.addEventListener('shown.bs.dropdown', () => {
- input.dispatchEvent(createEvent('click', {
- bubbles: true
- }))
- })
+ triggerDropdown.addEventListener('shown.bs.dropdown', () => {
+ expect(triggerDropdown).toHaveClass('show')
+ textarea.dispatchEvent(createEvent('click'))
+ })
- triggerDropdown.click()
+ triggerDropdown.click()
+ })
})
- it('should ignore keyboard events for ',
+ ' Dropdown ',
+ ' ',
+ '
',
+ '',
- '
',
- ' Dropdown ',
- ' ',
- '
',
- '
',
+ '
',
+ ' Dropdown ',
+ ' ',
+ '
',
+ '
',
- '
',
- ' Dropdown ',
- ' ',
- '
',
- '
',
+ '
',
+ ' Dropdown ',
+ ' ',
+ '
',
+ '
',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
- toggle.focus()
- toggle.dispatchEvent(keydownEscape)
- toggle.dispatchEvent(keyupEscape)
- })
+ const toggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- it('should close dropdown using `escape` button, and return focus to its trigger', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ toggle.addEventListener('shown.bs.dropdown', () => {
+ const keydownEvent = createEvent('keydown', { bubbles: true })
+ keydownEvent.key = 'ArrowDown'
+ toggle.dispatchEvent(keydownEvent)
+ keydownEvent.key = 'Escape'
+ toggle.dispatchEvent(keydownEvent)
+ })
- const toggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ toggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
+ expect(document.activeElement).toEqual(toggle)
+ resolve()
+ }))
- toggle.addEventListener('shown.bs.dropdown', () => {
- const keydownEvent = createEvent('keydown', { bubbles: true })
- keydownEvent.key = 'ArrowDown'
- toggle.dispatchEvent(keydownEvent)
- keydownEvent.key = 'Escape'
- toggle.dispatchEvent(keydownEvent)
+ toggle.click()
})
+ })
- toggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
- expect(document.activeElement).toEqual(toggle)
- done()
- }))
+ it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown toggle ',
+ ' ',
+ '
'
+ ].join('')
- toggle.click()
- })
+ const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
- it('should close dropdown (only) by clicking inside the dropdown menu when it has data-attribute `data-bs-auto-close="inside"`', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown toggle ',
- ' ',
- '
'
- ].join('')
+ const expectDropdownToBeOpened = () => setTimeout(() => {
+ expect(dropdownToggle).toHaveClass('show')
+ dropdownMenu.click()
+ }, 150)
- const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+ dropdownToggle.addEventListener('shown.bs.dropdown', () => {
+ document.documentElement.click()
+ expectDropdownToBeOpened()
+ })
- const expectDropdownToBeOpened = () => setTimeout(() => {
- expect(dropdownToggle).toHaveClass('show')
- dropdownMenu.click()
- }, 150)
+ dropdownToggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
+ expect(dropdownToggle).not.toHaveClass('show')
+ resolve()
+ }))
- dropdownToggle.addEventListener('shown.bs.dropdown', () => {
- document.documentElement.click()
- expectDropdownToBeOpened()
+ dropdownToggle.click()
})
+ })
- dropdownToggle.addEventListener('hidden.bs.dropdown', () => setTimeout(() => {
- expect(dropdownToggle).not.toHaveClass('show')
- done()
- }))
+ it('should close dropdown (only) by clicking outside the dropdown menu when it has data-attribute `data-bs-auto-close="outside"`', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown toggle ',
+ ' ',
+ '
'
+ ].join('')
- dropdownToggle.click()
- })
+ const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
- it('should close dropdown (only) by clicking outside the dropdown menu when it has data-attribute `data-bs-auto-close="outside"`', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown toggle ',
- ' ',
- '
'
- ].join('')
+ const expectDropdownToBeOpened = () => setTimeout(() => {
+ expect(dropdownToggle).toHaveClass('show')
+ document.documentElement.click()
+ }, 150)
- const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+ dropdownToggle.addEventListener('shown.bs.dropdown', () => {
+ dropdownMenu.click()
+ expectDropdownToBeOpened()
+ })
- const expectDropdownToBeOpened = () => setTimeout(() => {
- expect(dropdownToggle).toHaveClass('show')
- document.documentElement.click()
- }, 150)
+ dropdownToggle.addEventListener('hidden.bs.dropdown', () => {
+ expect(dropdownToggle).not.toHaveClass('show')
+ resolve()
+ })
- dropdownToggle.addEventListener('shown.bs.dropdown', () => {
- dropdownMenu.click()
- expectDropdownToBeOpened()
+ dropdownToggle.click()
})
+ })
- dropdownToggle.addEventListener('hidden.bs.dropdown', () => {
- expect(dropdownToggle).not.toHaveClass('show')
- done()
- })
+ it('should not close dropdown by clicking inside or outside the dropdown menu when it has data-attribute `data-bs-auto-close="false"`', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown toggle ',
+ ' ',
+ '
'
+ ].join('')
- dropdownToggle.click()
+ const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
+
+ const expectDropdownToBeOpened = (shouldTriggerClick = true) => setTimeout(() => {
+ expect(dropdownToggle).toHaveClass('show')
+ if (shouldTriggerClick) {
+ document.documentElement.click()
+ } else {
+ resolve()
+ }
+
+ expectDropdownToBeOpened(false)
+ }, 150)
+
+ dropdownToggle.addEventListener('shown.bs.dropdown', () => {
+ dropdownMenu.click()
+ expectDropdownToBeOpened()
+ })
+
+ dropdownToggle.click()
+ })
})
- it('should not close dropdown by clicking inside or outside the dropdown menu when it has data-attribute `data-bs-auto-close="false"`', done => {
+ it('should be able to identify clicked dropdown, no matter the markup order', () => {
fixtureEl.innerHTML = [
'',
- ' Dropdown toggle ',
' ',
+ '
',
+ ' Dropdown toggle ',
''
].join('')
const dropdownToggle = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
const dropdownMenu = fixtureEl.querySelector('.dropdown-menu')
-
- const expectDropdownToBeOpened = (shouldTriggerClick = true) => setTimeout(() => {
- expect(dropdownToggle).toHaveClass('show')
- if (shouldTriggerClick) {
- document.documentElement.click()
- } else {
- done()
- }
-
- expectDropdownToBeOpened(false)
- }, 150)
-
- dropdownToggle.addEventListener('shown.bs.dropdown', () => {
- dropdownMenu.click()
- expectDropdownToBeOpened()
- })
+ const spy = spyOn(Dropdown, 'getOrCreateInstance').and.callThrough()
dropdownToggle.click()
+ expect(spy).toHaveBeenCalledWith(dropdownToggle)
+ dropdownMenu.click()
+ expect(spy).toHaveBeenCalledWith(dropdownToggle)
})
})
@@ -2030,52 +2162,54 @@ describe('Dropdown', () => {
})
})
- it('should open dropdown when pressing keydown or keyup', done => {
- fixtureEl.innerHTML = [
- '',
- ' Dropdown ',
- ' ',
- '
'
- ].join('')
+ it('should open dropdown when pressing keydown or keyup', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Dropdown ',
+ ' ',
+ '
'
+ ].join('')
+
+ const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
+ const dropdown = fixtureEl.querySelector('.dropdown')
- const triggerDropdown = fixtureEl.querySelector('[data-bs-toggle="dropdown"]')
- const dropdown = fixtureEl.querySelector('.dropdown')
+ const keydown = createEvent('keydown')
+ keydown.key = 'ArrowDown'
- const keydown = createEvent('keydown')
- keydown.key = 'ArrowDown'
+ const keyup = createEvent('keyup')
+ keyup.key = 'ArrowUp'
- const keyup = createEvent('keyup')
- keyup.key = 'ArrowUp'
+ const handleArrowDown = () => {
+ expect(triggerDropdown).toHaveClass('show')
+ expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
+ setTimeout(() => {
+ dropdown.hide()
+ keydown.key = 'ArrowUp'
+ triggerDropdown.dispatchEvent(keyup)
+ }, 20)
+ }
- const handleArrowDown = () => {
- expect(triggerDropdown).toHaveClass('show')
- expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
- setTimeout(() => {
- dropdown.hide()
- keydown.key = 'ArrowUp'
- triggerDropdown.dispatchEvent(keyup)
- }, 20)
- }
-
- const handleArrowUp = () => {
- expect(triggerDropdown).toHaveClass('show')
- expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
- done()
- }
-
- dropdown.addEventListener('shown.bs.dropdown', event => {
- if (event.target.key === 'ArrowDown') {
- handleArrowDown()
- } else {
- handleArrowUp()
+ const handleArrowUp = () => {
+ expect(triggerDropdown).toHaveClass('show')
+ expect(triggerDropdown.getAttribute('aria-expanded')).toEqual('true')
+ resolve()
}
- })
- triggerDropdown.dispatchEvent(keydown)
+ dropdown.addEventListener('shown.bs.dropdown', event => {
+ if (event.target.key === 'ArrowDown') {
+ handleArrowDown()
+ } else {
+ handleArrowUp()
+ }
+ })
+
+ triggerDropdown.dispatchEvent(keydown)
+ })
})
it('should allow `data-bs-toggle="dropdown"` click events to bubble up', () => {
@@ -2101,27 +2235,29 @@ describe('Dropdown', () => {
expect(delegatedClickListener).toHaveBeenCalled()
})
- it('should open the dropdown when clicking the child element inside `data-bs-toggle="dropdown"`', done => {
- fixtureEl.innerHTML = [
- '',
- '
',
- ' Dropdown
',
- '
',
+ '
',
+ ' Dropdown
',
+ '
',
- ' x ',
- '
'
- ].join('')
-
- $(fixtureEl).find('.alert')
- .one('closed.bs.alert', () => {
- expect($(fixtureEl).find('.alert')).toHaveSize(0)
- done()
- })
-
- $(fixtureEl).find('button').trigger('click')
+ it('should use jQuery event system', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' x ',
+ '
'
+ ].join('')
+
+ $(fixtureEl).find('.alert')
+ .one('closed.bs.alert', () => {
+ expect($(fixtureEl).find('.alert')).toHaveSize(0)
+ resolve()
+ })
+
+ $(fixtureEl).find('button').trigger('click')
+ })
})
})
diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js
index 84a95c86ad..0471a1b9f7 100644
--- a/js/tests/unit/modal.spec.js
+++ b/js/tests/unit/modal.spec.js
@@ -56,93 +56,101 @@ describe('Modal', () => {
})
describe('toggle', () => {
- it('should call ScrollBarHelper to handle scrollBar on body', done => {
- fixtureEl.innerHTML = ''
+ it('should call ScrollBarHelper to handle scrollBar on body', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ''
+
+ spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
+ spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
+
+ modalEl.addEventListener('shown.bs.modal', () => {
+ expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled()
+ modal.toggle()
+ })
- spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
- spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
+ modalEl.addEventListener('hidden.bs.modal', () => {
+ expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
+ resolve()
+ })
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled()
modal.toggle()
})
-
- modalEl.addEventListener('hidden.bs.modal', () => {
- expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
- done()
- })
-
- modal.toggle()
})
})
describe('show', () => {
- it('should show a modal', done => {
- fixtureEl.innerHTML = ''
+ it('should show a modal', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ''
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
- modalEl.addEventListener('show.bs.modal', event => {
- expect(event).toBeDefined()
- })
+ modalEl.addEventListener('show.bs.modal', event => {
+ expect(event).toBeDefined()
+ })
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('role')).toEqual('dialog')
- expect(modalEl.getAttribute('aria-hidden')).toBeNull()
- expect(modalEl.style.display).toEqual('block')
- expect(document.querySelector('.modal-backdrop')).not.toBeNull()
- done()
- })
+ modalEl.addEventListener('shown.bs.modal', () => {
+ expect(modalEl.getAttribute('aria-modal')).toEqual('true')
+ expect(modalEl.getAttribute('role')).toEqual('dialog')
+ expect(modalEl.getAttribute('aria-hidden')).toBeNull()
+ expect(modalEl.style.display).toEqual('block')
+ expect(document.querySelector('.modal-backdrop')).not.toBeNull()
+ resolve()
+ })
- modal.show()
+ modal.show()
+ })
})
- it('should show a modal without backdrop', done => {
- fixtureEl.innerHTML = ''
+ it('should show a modal without backdrop', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ''
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl, {
- backdrop: false
- })
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl, {
+ backdrop: false
+ })
- modalEl.addEventListener('show.bs.modal', event => {
- expect(event).toBeDefined()
- })
+ modalEl.addEventListener('show.bs.modal', event => {
+ expect(event).toBeDefined()
+ })
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modalEl.getAttribute('aria-modal')).toEqual('true')
- expect(modalEl.getAttribute('role')).toEqual('dialog')
- expect(modalEl.getAttribute('aria-hidden')).toBeNull()
- expect(modalEl.style.display).toEqual('block')
- expect(document.querySelector('.modal-backdrop')).toBeNull()
- done()
- })
+ modalEl.addEventListener('shown.bs.modal', () => {
+ expect(modalEl.getAttribute('aria-modal')).toEqual('true')
+ expect(modalEl.getAttribute('role')).toEqual('dialog')
+ expect(modalEl.getAttribute('aria-hidden')).toBeNull()
+ expect(modalEl.style.display).toEqual('block')
+ expect(document.querySelector('.modal-backdrop')).toBeNull()
+ resolve()
+ })
- modal.show()
+ modal.show()
+ })
})
- it('should show a modal and append the element', done => {
- const modalEl = document.createElement('div')
- const id = 'dynamicModal'
+ it('should show a modal and append the element', () => {
+ return new Promise(resolve => {
+ const modalEl = document.createElement('div')
+ const id = 'dynamicModal'
- modalEl.setAttribute('id', id)
- modalEl.classList.add('modal')
- modalEl.innerHTML = '
'
+ modalEl.setAttribute('id', id)
+ modalEl.classList.add('modal')
+ modalEl.innerHTML = '
'
- const modal = new Modal(modalEl)
+ const modal = new Modal(modalEl)
- modalEl.addEventListener('shown.bs.modal', () => {
- const dynamicModal = document.getElementById(id)
- expect(dynamicModal).not.toBeNull()
- dynamicModal.remove()
- done()
- })
+ modalEl.addEventListener('shown.bs.modal', () => {
+ const dynamicModal = document.getElementById(id)
+ expect(dynamicModal).not.toBeNull()
+ dynamicModal.remove()
+ resolve()
+ })
- modal.show()
+ modal.show()
+ })
})
it('should do nothing if a modal is shown', () => {
@@ -173,511 +181,550 @@ describe('Modal', () => {
expect(EventHandler.trigger).not.toHaveBeenCalled()
})
- it('should not fire shown event when show is prevented', done => {
- fixtureEl.innerHTML = ''
+ it('should not fire shown event when show is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ''
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
- modalEl.addEventListener('show.bs.modal', event => {
- event.preventDefault()
+ modalEl.addEventListener('show.bs.modal', event => {
+ event.preventDefault()
- const expectedDone = () => {
- expect().nothing()
- done()
- }
+ const expectedDone = () => {
+ expect().nothing()
+ resolve()
+ }
- setTimeout(expectedDone, 10)
- })
+ setTimeout(expectedDone, 10)
+ })
- modalEl.addEventListener('shown.bs.modal', () => {
- throw new Error('shown event triggered')
- })
+ modalEl.addEventListener('shown.bs.modal', () => {
+ throw new Error('shown event triggered')
+ })
- modal.show()
+ modal.show()
+ })
})
- it('should be shown after the first call to show() has been prevented while fading is enabled ', done => {
- fixtureEl.innerHTML = ''
+ it('should be shown after the first call to show() has been prevented while fading is enabled ', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ''
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
- let prevented = false
- modalEl.addEventListener('show.bs.modal', event => {
- if (!prevented) {
- event.preventDefault()
- prevented = true
+ let prevented = false
+ modalEl.addEventListener('show.bs.modal', event => {
+ if (!prevented) {
+ event.preventDefault()
+ prevented = true
- setTimeout(() => {
- modal.show()
- })
- }
- })
+ setTimeout(() => {
+ modal.show()
+ })
+ }
+ })
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(prevented).toBeTrue()
- expect(modal._isAnimated()).toBeTrue()
- done()
- })
+ modalEl.addEventListener('shown.bs.modal', () => {
+ expect(prevented).toBeTrue()
+ expect(modal._isAnimated()).toBeTrue()
+ resolve()
+ })
- modal.show()
+ modal.show()
+ })
})
+ it('should set is transitioning if fade class is present', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ''
- it('should set is transitioning if fade class is present', done => {
- fixtureEl.innerHTML = ''
+ const modalEl = fixtureEl.querySelector('.modal')
+ const modal = new Modal(modalEl)
- const modalEl = fixtureEl.querySelector('.modal')
- const modal = new Modal(modalEl)
+ modalEl.addEventListener('show.bs.modal', () => {
+ setTimeout(() => {
+ expect(modal._isTransitioning).toBeTrue()
+ })
+ })
- modalEl.addEventListener('show.bs.modal', () => {
- setTimeout(() => {
- expect(modal._isTransitioning).toBeTrue()
+ modalEl.addEventListener('shown.bs.modal', () => {
+ expect(modal._isTransitioning).toBeFalse()
+ resolve()
})
- })
- modalEl.addEventListener('shown.bs.modal', () => {
- expect(modal._isTransitioning).toBeFalse()
- done()
+ modal.show()
})
-
- modal.show()
})
- it('should close modal when a click occurred on data-bs-dismiss="modal" inside modal', done => {
- fixtureEl.innerHTML = [
- '',
- '
',
- ' ',
- '
',
- '
',
+ '
',
+ ' ',
+ '
',
+ '
or or or ',
+ '
',
+ '
',
+ '
or ',
- '
',
- '
',
- '
or or
'
+ it('if scroll is enabled, should allow body to scroll while offcanvas is open', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
- spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
- const offCanvasEl = fixtureEl.querySelector('.offcanvas')
- const offCanvas = new Offcanvas(offCanvasEl, { scroll: true })
+ spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
+ spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new Offcanvas(offCanvasEl, { scroll: true })
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(ScrollBarHelper.prototype.hide).not.toHaveBeenCalled()
- offCanvas.hide()
- })
- offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- expect(ScrollBarHelper.prototype.reset).not.toHaveBeenCalled()
- done()
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(ScrollBarHelper.prototype.hide).not.toHaveBeenCalled()
+ offCanvas.hide()
+ })
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ expect(ScrollBarHelper.prototype.reset).not.toHaveBeenCalled()
+ resolve()
+ })
+ offCanvas.show()
})
- offCanvas.show()
})
- it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', done => {
- fixtureEl.innerHTML = '
'
+ it('if scroll is disabled, should call ScrollBarHelper to handle scrollBar on body', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
- spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
- const offCanvasEl = fixtureEl.querySelector('.offcanvas')
- const offCanvas = new Offcanvas(offCanvasEl, { scroll: false })
+ spyOn(ScrollBarHelper.prototype, 'hide').and.callThrough()
+ spyOn(ScrollBarHelper.prototype, 'reset').and.callThrough()
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new Offcanvas(offCanvasEl, { scroll: false })
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled()
- offCanvas.hide()
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(ScrollBarHelper.prototype.hide).toHaveBeenCalled()
+ offCanvas.hide()
+ })
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
+ resolve()
+ })
+ offCanvas.show()
})
- offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- expect(ScrollBarHelper.prototype.reset).toHaveBeenCalled()
- done()
- })
- offCanvas.show()
})
- it('should hide a shown element if user click on backdrop', done => {
- fixtureEl.innerHTML = '
'
+ it('should hide a shown element if user click on backdrop', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('div')
- const offCanvas = new Offcanvas(offCanvasEl, { backdrop: true })
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new Offcanvas(offCanvasEl, { backdrop: true })
- const clickEvent = document.createEvent('MouseEvents')
- clickEvent.initEvent('mousedown', true, true)
- spyOn(offCanvas._backdrop._config, 'clickCallback').and.callThrough()
+ const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
+ spyOn(offCanvas._backdrop._config, 'clickCallback').and.callThrough()
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(offCanvas._backdrop._config.clickCallback).toEqual(jasmine.any(Function))
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvas._backdrop._config.clickCallback).toEqual(jasmine.any(Function))
- offCanvas._backdrop._getElement().dispatchEvent(clickEvent)
- })
+ offCanvas._backdrop._getElement().dispatchEvent(clickEvent)
+ })
- offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- expect(offCanvas._backdrop._config.clickCallback).toHaveBeenCalled()
- done()
- })
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ expect(offCanvas._backdrop._config.clickCallback).toHaveBeenCalled()
+ resolve()
+ })
- offCanvas.show()
+ offCanvas.show()
+ })
})
- it('should not trap focus if scroll is allowed', done => {
- fixtureEl.innerHTML = '
'
+ it('should not trap focus if scroll is allowed', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('.offcanvas')
- const offCanvas = new Offcanvas(offCanvasEl, {
- scroll: true
- })
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new Offcanvas(offCanvasEl, {
+ scroll: true
+ })
- spyOn(offCanvas._focustrap, 'activate').and.callThrough()
+ spyOn(offCanvas._focustrap, 'activate').and.callThrough()
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(offCanvas._focustrap.activate).not.toHaveBeenCalled()
- done()
- })
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvas._focustrap.activate).not.toHaveBeenCalled()
+ resolve()
+ })
- offCanvas.show()
+ offCanvas.show()
+ })
})
})
@@ -242,44 +249,48 @@ describe('Offcanvas', () => {
expect(offCanvas.show).toHaveBeenCalled()
})
- it('should call hide method if show class is present', done => {
- fixtureEl.innerHTML = '
'
+ it('should call hide method if show class is present', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('.offcanvas')
- const offCanvas = new Offcanvas(offCanvasEl)
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new Offcanvas(offCanvasEl)
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(offCanvasEl).toHaveClass('show')
- spyOn(offCanvas, 'hide')
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvasEl).toHaveClass('show')
+ spyOn(offCanvas, 'hide')
- offCanvas.toggle()
+ offCanvas.toggle()
- expect(offCanvas.hide).toHaveBeenCalled()
- done()
- })
+ expect(offCanvas.hide).toHaveBeenCalled()
+ resolve()
+ })
- offCanvas.show()
+ offCanvas.show()
+ })
})
})
describe('show', () => {
- it('should add `showing` class during opening and `show` class on end', done => {
- fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('.offcanvas')
- const offCanvas = new Offcanvas(offCanvasEl)
+ it('should add `showing` class during opening and `show` class on end', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new Offcanvas(offCanvasEl)
- offCanvasEl.addEventListener('show.bs.offcanvas', () => {
- expect(offCanvasEl).not.toHaveClass('show')
- })
+ offCanvasEl.addEventListener('show.bs.offcanvas', () => {
+ expect(offCanvasEl).not.toHaveClass('show')
+ })
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(offCanvasEl).not.toHaveClass('showing')
- expect(offCanvasEl).toHaveClass('show')
- done()
- })
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvasEl).not.toHaveClass('showing')
+ expect(offCanvasEl).toHaveClass('show')
+ resolve()
+ })
- offCanvas.show()
- expect(offCanvasEl).toHaveClass('showing')
+ offCanvas.show()
+ expect(offCanvasEl).toHaveClass('showing')
+ })
})
it('should do nothing if already shown', () => {
@@ -299,104 +310,114 @@ describe('Offcanvas', () => {
expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
})
- it('should show a hidden element', done => {
- fixtureEl.innerHTML = '
'
+ it('should show a hidden element', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('div')
- const offCanvas = new Offcanvas(offCanvasEl)
- spyOn(offCanvas._backdrop, 'show').and.callThrough()
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new Offcanvas(offCanvasEl)
+ spyOn(offCanvas._backdrop, 'show').and.callThrough()
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(offCanvasEl).toHaveClass('show')
- expect(offCanvas._backdrop.show).toHaveBeenCalled()
- done()
- })
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvasEl).toHaveClass('show')
+ expect(offCanvas._backdrop.show).toHaveBeenCalled()
+ resolve()
+ })
- offCanvas.show()
+ offCanvas.show()
+ })
})
- it('should not fire shown when show is prevented', done => {
- fixtureEl.innerHTML = '
'
+ it('should not fire shown when show is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('div')
- const offCanvas = new Offcanvas(offCanvasEl)
- spyOn(offCanvas._backdrop, 'show').and.callThrough()
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new Offcanvas(offCanvasEl)
+ spyOn(offCanvas._backdrop, 'show').and.callThrough()
- const expectEnd = () => {
- setTimeout(() => {
- expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
- done()
- }, 10)
- }
+ const expectEnd = () => {
+ setTimeout(() => {
+ expect(offCanvas._backdrop.show).not.toHaveBeenCalled()
+ resolve()
+ }, 10)
+ }
- offCanvasEl.addEventListener('show.bs.offcanvas', event => {
- event.preventDefault()
- expectEnd()
- })
+ offCanvasEl.addEventListener('show.bs.offcanvas', event => {
+ event.preventDefault()
+ expectEnd()
+ })
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- throw new Error('should not fire shown event')
- })
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ throw new Error('should not fire shown event')
+ })
- offCanvas.show()
+ offCanvas.show()
+ })
})
- it('on window load, should make visible an offcanvas element, if its markup contains class "show"', done => {
- fixtureEl.innerHTML = '
'
+ it('on window load, should make visible an offcanvas element, if its markup contains class "show"', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('div')
- spyOn(Offcanvas.prototype, 'show').and.callThrough()
+ const offCanvasEl = fixtureEl.querySelector('div')
+ spyOn(Offcanvas.prototype, 'show').and.callThrough()
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- done()
- })
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ resolve()
+ })
- window.dispatchEvent(createEvent('load'))
+ window.dispatchEvent(createEvent('load'))
- const instance = Offcanvas.getInstance(offCanvasEl)
- expect(instance).not.toBeNull()
- expect(Offcanvas.prototype.show).toHaveBeenCalled()
+ const instance = Offcanvas.getInstance(offCanvasEl)
+ expect(instance).not.toBeNull()
+ expect(Offcanvas.prototype.show).toHaveBeenCalled()
+ })
})
- it('should trap focus', done => {
- fixtureEl.innerHTML = '
'
+ it('should trap focus', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('.offcanvas')
- const offCanvas = new Offcanvas(offCanvasEl)
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new Offcanvas(offCanvasEl)
- spyOn(offCanvas._focustrap, 'activate').and.callThrough()
+ spyOn(offCanvas._focustrap, 'activate').and.callThrough()
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(offCanvas._focustrap.activate).toHaveBeenCalled()
- done()
- })
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvas._focustrap.activate).toHaveBeenCalled()
+ resolve()
+ })
- offCanvas.show()
+ offCanvas.show()
+ })
})
})
describe('hide', () => {
- it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', done => {
- fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('.offcanvas')
- const offCanvas = new Offcanvas(offCanvasEl)
+ it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
+ const offCanvasEl = fixtureEl.querySelector('.offcanvas')
+ const offCanvas = new Offcanvas(offCanvasEl)
- offCanvasEl.addEventListener('hide.bs.offcanvas', () => {
- expect(offCanvasEl).not.toHaveClass('showing')
- expect(offCanvasEl).toHaveClass('show')
- })
+ offCanvasEl.addEventListener('hide.bs.offcanvas', () => {
+ expect(offCanvasEl).not.toHaveClass('showing')
+ expect(offCanvasEl).toHaveClass('show')
+ })
- offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- expect(offCanvasEl).not.toHaveClass('hiding')
- expect(offCanvasEl).not.toHaveClass('show')
- done()
- })
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ expect(offCanvasEl).not.toHaveClass('hiding')
+ expect(offCanvasEl).not.toHaveClass('show')
+ resolve()
+ })
- offCanvas.show()
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- offCanvas.hide()
- expect(offCanvasEl).not.toHaveClass('showing')
- expect(offCanvasEl).toHaveClass('hiding')
+ offCanvas.show()
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ offCanvas.hide()
+ expect(offCanvasEl).not.toHaveClass('showing')
+ expect(offCanvasEl).toHaveClass('hiding')
+ })
})
})
@@ -414,65 +435,71 @@ describe('Offcanvas', () => {
expect(EventHandler.trigger).not.toHaveBeenCalled()
})
- it('should hide a shown element', done => {
- fixtureEl.innerHTML = '
'
+ it('should hide a shown element', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('div')
- const offCanvas = new Offcanvas(offCanvasEl)
- spyOn(offCanvas._backdrop, 'hide').and.callThrough()
- offCanvas.show()
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new Offcanvas(offCanvasEl)
+ spyOn(offCanvas._backdrop, 'hide').and.callThrough()
+ offCanvas.show()
- offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- expect(offCanvasEl).not.toHaveClass('show')
- expect(offCanvas._backdrop.hide).toHaveBeenCalled()
- done()
- })
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ expect(offCanvasEl).not.toHaveClass('show')
+ expect(offCanvas._backdrop.hide).toHaveBeenCalled()
+ resolve()
+ })
- offCanvas.hide()
+ offCanvas.hide()
+ })
})
- it('should not fire hidden when hide is prevented', done => {
- fixtureEl.innerHTML = '
'
+ it('should not fire hidden when hide is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('div')
- const offCanvas = new Offcanvas(offCanvasEl)
- spyOn(offCanvas._backdrop, 'hide').and.callThrough()
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new Offcanvas(offCanvasEl)
+ spyOn(offCanvas._backdrop, 'hide').and.callThrough()
- offCanvas.show()
+ offCanvas.show()
- const expectEnd = () => {
- setTimeout(() => {
- expect(offCanvas._backdrop.hide).not.toHaveBeenCalled()
- done()
- }, 10)
- }
+ const expectEnd = () => {
+ setTimeout(() => {
+ expect(offCanvas._backdrop.hide).not.toHaveBeenCalled()
+ resolve()
+ }, 10)
+ }
- offCanvasEl.addEventListener('hide.bs.offcanvas', event => {
- event.preventDefault()
- expectEnd()
- })
+ offCanvasEl.addEventListener('hide.bs.offcanvas', event => {
+ event.preventDefault()
+ expectEnd()
+ })
- offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- throw new Error('should not fire hidden event')
- })
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ throw new Error('should not fire hidden event')
+ })
- offCanvas.hide()
+ offCanvas.hide()
+ })
})
- it('should release focus trap', done => {
- fixtureEl.innerHTML = '
'
+ it('should release focus trap', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const offCanvasEl = fixtureEl.querySelector('div')
- const offCanvas = new Offcanvas(offCanvasEl)
- spyOn(offCanvas._focustrap, 'deactivate').and.callThrough()
- offCanvas.show()
+ const offCanvasEl = fixtureEl.querySelector('div')
+ const offCanvas = new Offcanvas(offCanvasEl)
+ spyOn(offCanvas._focustrap, 'deactivate').and.callThrough()
+ offCanvas.show()
- offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- expect(offCanvas._focustrap.deactivate).toHaveBeenCalled()
- done()
- })
+ offCanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ expect(offCanvas._focustrap.deactivate).toHaveBeenCalled()
+ resolve()
+ })
- offCanvas.hide()
+ offCanvas.hide()
+ })
})
})
@@ -502,22 +529,24 @@ describe('Offcanvas', () => {
})
describe('data-api', () => {
- it('should not prevent event for input', done => {
- fixtureEl.innerHTML = [
- '
'
- ].join('')
+ it('should not prevent event for input', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
'
+ ].join('')
- const target = fixtureEl.querySelector('input')
- const offCanvasEl = fixtureEl.querySelector('#offcanvasdiv1')
+ const target = fixtureEl.querySelector('input')
+ const offCanvasEl = fixtureEl.querySelector('#offcanvasdiv1')
- offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
- expect(offCanvasEl).toHaveClass('show')
- expect(target.checked).toBeTrue()
- done()
- })
+ offCanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ expect(offCanvasEl).toHaveClass('show')
+ expect(target.checked).toBeTrue()
+ resolve()
+ })
- target.click()
+ target.click()
+ })
})
it('should not call toggle on disabled elements', () => {
@@ -535,76 +564,82 @@ describe('Offcanvas', () => {
expect(Offcanvas.prototype.toggle).not.toHaveBeenCalled()
})
- it('should call hide first, if another offcanvas is open', done => {
- fixtureEl.innerHTML = [
- '
',
- '
'
- ].join('')
-
- const trigger2 = fixtureEl.querySelector('#btn2')
- const offcanvasEl1 = document.querySelector('#offcanvas1')
- const offcanvasEl2 = document.querySelector('#offcanvas2')
- const offcanvas1 = new Offcanvas(offcanvasEl1)
-
- offcanvasEl1.addEventListener('shown.bs.offcanvas', () => {
- trigger2.click()
+ it('should call hide first, if another offcanvas is open', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
',
+ '
'
+ ].join('')
+
+ const trigger2 = fixtureEl.querySelector('#btn2')
+ const offcanvasEl1 = document.querySelector('#offcanvas1')
+ const offcanvasEl2 = document.querySelector('#offcanvas2')
+ const offcanvas1 = new Offcanvas(offcanvasEl1)
+
+ offcanvasEl1.addEventListener('shown.bs.offcanvas', () => {
+ trigger2.click()
+ })
+ offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {
+ expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()
+ resolve()
+ })
+ offcanvas1.show()
+ })
+ })
+
+ it('should focus on trigger element after closing offcanvas', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
'
+ ].join('')
+
+ const trigger = fixtureEl.querySelector('#btn')
+ const offcanvasEl = fixtureEl.querySelector('#offcanvas')
+ const offcanvas = new Offcanvas(offcanvasEl)
+ spyOn(trigger, 'focus')
+
+ offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ offcanvas.hide()
+ })
+ offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ setTimeout(() => {
+ expect(trigger.focus).toHaveBeenCalled()
+ resolve()
+ }, 5)
+ })
+
+ trigger.click()
+ })
+ })
+
+ it('should not focus on trigger element after closing offcanvas, if it is not visible', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '
'
+ ].join('')
+
+ const trigger = fixtureEl.querySelector('#btn')
+ const offcanvasEl = fixtureEl.querySelector('#offcanvas')
+ const offcanvas = new Offcanvas(offcanvasEl)
+ spyOn(trigger, 'focus')
+
+ offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
+ trigger.style.display = 'none'
+ offcanvas.hide()
+ })
+ offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
+ setTimeout(() => {
+ expect(isVisible(trigger)).toBeFalse()
+ expect(trigger.focus).not.toHaveBeenCalled()
+ resolve()
+ }, 5)
+ })
+
+ trigger.click()
})
- offcanvasEl1.addEventListener('hidden.bs.offcanvas', () => {
- expect(Offcanvas.getInstance(offcanvasEl2)).not.toBeNull()
- done()
- })
- offcanvas1.show()
- })
-
- it('should focus on trigger element after closing offcanvas', done => {
- fixtureEl.innerHTML = [
- '
'
- ].join('')
-
- const trigger = fixtureEl.querySelector('#btn')
- const offcanvasEl = fixtureEl.querySelector('#offcanvas')
- const offcanvas = new Offcanvas(offcanvasEl)
- spyOn(trigger, 'focus')
-
- offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
- offcanvas.hide()
- })
- offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- setTimeout(() => {
- expect(trigger.focus).toHaveBeenCalled()
- done()
- }, 5)
- })
-
- trigger.click()
- })
-
- it('should not focus on trigger element after closing offcanvas, if it is not visible', done => {
- fixtureEl.innerHTML = [
- '
'
- ].join('')
-
- const trigger = fixtureEl.querySelector('#btn')
- const offcanvasEl = fixtureEl.querySelector('#offcanvas')
- const offcanvas = new Offcanvas(offcanvasEl)
- spyOn(trigger, 'focus')
-
- offcanvasEl.addEventListener('shown.bs.offcanvas', () => {
- trigger.style.display = 'none'
- offcanvas.hide()
- })
- offcanvasEl.addEventListener('hidden.bs.offcanvas', () => {
- setTimeout(() => {
- expect(isVisible(trigger)).toBeFalse()
- expect(trigger.focus).not.toHaveBeenCalled()
- done()
- }, 5)
- })
-
- trigger.click()
})
})
diff --git a/js/tests/unit/orange-navbar.spec.js b/js/tests/unit/orange-navbar.spec.js
new file mode 100644
index 0000000000..1d2ba9e939
--- /dev/null
+++ b/js/tests/unit/orange-navbar.spec.js
@@ -0,0 +1,115 @@
+import OrangeNavbar from '../../src/orange-navbar'
+import { clearFixture, getFixture, createEvent } from '../helpers/fixture'
+
+describe('OrangeNavbar', () => {
+ let fixtureEl
+
+ beforeAll(() => {
+ fixtureEl = getFixture()
+ })
+
+ afterEach(() => {
+ clearFixture()
+ })
+
+ describe('VERSION', () => {
+ it('should return plugin version', () => {
+ expect(OrangeNavbar.VERSION).toEqual(jasmine.any(String))
+ })
+ })
+
+ describe('Default', () => {
+ it('should return plugin default config', () => {
+ expect(OrangeNavbar.Default).toEqual(jasmine.any(Object))
+ })
+ })
+
+ describe('DefaultType', () => {
+ it('should return plugin default type config', () => {
+ expect(OrangeNavbar.DefaultType).toEqual(jasmine.any(Object))
+ })
+ })
+
+ describe('DATA_KEY', () => {
+ it('should return plugin data key', () => {
+ expect(OrangeNavbar.DATA_KEY).toEqual('bs.orangenavbar')
+ })
+ })
+
+ it('should add .header-minimized to the global header non-supra first when scrolling down and remove it when back to top', () => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const targetEl = fixtureEl.querySelector('#target')
+ const scrollEvent = createEvent('scroll')
+ window.scrollY = 1
+ window.dispatchEvent(scrollEvent)
+
+ expect(targetEl.classList).toContain('header-minimized')
+
+ const scrollEvent2 = createEvent('scroll')
+ window.scrollY = 0
+ window.dispatchEvent(scrollEvent2)
+
+ expect(targetEl.classList).not.toContain('header-minimized')
+ })
+
+ it('should add .header-minimized to the global header non-supra first when header has a supra bar', () => {
+ fixtureEl.innerHTML = [
+ '',
+ ' '
+ ].join('')
+
+ const targetEl = fixtureEl.querySelector('#target')
+ const target2El = fixtureEl.querySelector('#target2')
+ const scrollEvent = createEvent('scroll')
+ window.scrollY = 1
+ window.dispatchEvent(scrollEvent)
+
+ expect(targetEl.classList).toContain('header-minimized')
+ expect(target2El.classList).not.toContain('header-minimized')
+
+ const scrollEvent2 = createEvent('scroll')
+ window.scrollY = 0
+ window.dispatchEvent(scrollEvent2)
+
+ expect(targetEl.classList).not.toContain('header-minimized')
+ expect(target2El.classList).not.toContain('header-minimized')
+ })
+
+ it('should not add .header-minimized to the global header non-supra first when the header is .fixed-top', () => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const targetEl = fixtureEl.querySelector('#target')
+ const scrollEvent = createEvent('scroll')
+ window.scrollY = 1
+ window.dispatchEvent(scrollEvent)
+
+ expect(targetEl.classList).not.toContain('header-minimized')
+ })
+
+ it('should not add .header-minimized to the global header non-supra first when the header only has .supra ', () => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const targetEl = fixtureEl.querySelector('#target')
+ const scrollEvent = createEvent('scroll')
+ window.scrollY = 1
+ window.dispatchEvent(scrollEvent)
+
+ expect(targetEl.classList).not.toContain('header-minimized')
+ })
+})
diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js
index a04bd21c60..bf3a71848c 100644
--- a/js/tests/unit/popover.spec.js
+++ b/js/tests/unit/popover.spec.js
@@ -62,113 +62,120 @@ describe('Popover', () => {
})
describe('show', () => {
- it('should show a popover', done => {
- fixtureEl.innerHTML = 'BS twitter '
+ it('should show a popover', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'BS twitter '
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl)
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl)
- popoverEl.addEventListener('shown.bs.popover', () => {
- expect(document.querySelector('.popover')).not.toBeNull()
- done()
- })
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ expect(document.querySelector('.popover')).not.toBeNull()
+ resolve()
+ })
- popover.show()
+ popover.show()
+ })
})
- it('should set title and content from functions', done => {
- fixtureEl.innerHTML = 'BS twitter '
+ it('should set title and content from functions', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'BS twitter '
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl, {
- title: () => 'Bootstrap',
- content: () => 'loves writing tests （╯°□°）╯︵ ┻━┻'
- })
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl, {
+ title: () => 'Bootstrap',
+ content: () => 'loves writing tests （╯°□°）╯︵ ┻━┻'
+ })
- popoverEl.addEventListener('shown.bs.popover', () => {
- const popoverDisplayed = document.querySelector('.popover')
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ const popoverDisplayed = document.querySelector('.popover')
- expect(popoverDisplayed).not.toBeNull()
- expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
- expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')
- done()
- })
+ expect(popoverDisplayed).not.toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Bootstrap')
+ expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('loves writing tests （╯°□°）╯︵ ┻━┻')
+ resolve()
+ })
- popover.show()
+ popover.show()
+ })
})
- it('should show a popover with just content without having header', done => {
- fixtureEl.innerHTML = 'Nice link '
+ it('should show a popover with just content without having header', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'Nice link '
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl, {
- content: 'Some beautiful content :)'
- })
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl, {
+ content: 'Some beautiful content :)'
+ })
- popoverEl.addEventListener('shown.bs.popover', () => {
- const popoverDisplayed = document.querySelector('.popover')
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ const popoverDisplayed = document.querySelector('.popover')
- expect(popoverDisplayed).not.toBeNull()
- expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
- expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
- done()
- })
+ expect(popoverDisplayed).not.toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-header')).toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Some beautiful content :)')
+ resolve()
+ })
- popover.show()
+ popover.show()
+ })
})
- it('should show a popover with just title without having body', done => {
- fixtureEl.innerHTML = 'Nice link '
+ it('should show a popover with just title without having body', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'Nice link '
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl, {
- title: 'Title which does not require content'
- })
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl, {
+ title: 'Title which does not require content'
+ })
- popoverEl.addEventListener('shown.bs.popover', () => {
- const popoverDisplayed = document.querySelector('.popover')
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ const popoverDisplayed = document.querySelector('.popover')
- expect(popoverDisplayed).not.toBeNull()
- expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
- expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
- done()
- })
+ expect(popoverDisplayed).not.toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
+ resolve()
+ })
- popover.show()
+ popover.show()
+ })
})
- it('should show a popover with just title without having body using data-attribute to get config', done => {
- fixtureEl.innerHTML = 'Nice link '
+ it('should show a popover with just title without having body using data-attribute to get config', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'Nice link '
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl)
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl)
- popoverEl.addEventListener('shown.bs.popover', () => {
- const popoverDisplayed = document.querySelector('.popover')
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ const popoverDisplayed = document.querySelector('.popover')
- expect(popoverDisplayed).not.toBeNull()
- expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
- expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
- done()
- })
+ expect(popoverDisplayed).not.toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-body')).toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-header').textContent).toEqual('Title which does not require content')
+ resolve()
+ })
- popover.show()
+ popover.show()
+ })
})
- it('should NOT show a popover without `title` and `content`', done => {
+ it('should NOT show a popover without `title` and `content`', () => {
fixtureEl.innerHTML = 'Nice link '
const popoverEl = fixtureEl.querySelector('a')
const popover = new Popover(popoverEl, { animation: false })
spyOn(EventHandler, 'trigger').and.callThrough()
- setTimeout(() => {
- expect(EventHandler.trigger).not.toHaveBeenCalled()
- expect(document.querySelector('.popover')).toBeNull()
- done()
- })
-
popover.show()
+
+ expect(EventHandler.trigger).not.toHaveBeenCalledWith(popoverEl, Popover.Event.SHOW)
+ expect(document.querySelector('.popover')).toBeNull()
})
it('"setContent" should keep the initial template', () => {
@@ -187,72 +194,78 @@ describe('Popover', () => {
expect(tip.querySelector('.popover-body')).not.toBeNull()
})
- it('should call setContent once', done => {
- fixtureEl.innerHTML = 'BS twitter '
-
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl, {
- content: 'Popover content'
- })
- expect(popover._templateFactory).toBeNull()
- let spy = null
- let times = 1
-
- popoverEl.addEventListener('hidden.bs.popover', () => {
+ it('should call setContent once', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'BS twitter '
+
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl, {
+ content: 'Popover content'
+ })
+ expect(popover._templateFactory).toBeNull()
+ let spy = null
+ let times = 1
+
+ popoverEl.addEventListener('hidden.bs.popover', () => {
+ popover.show()
+ })
+
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()
+ const popoverDisplayed = document.querySelector('.popover')
+
+ expect(popoverDisplayed).not.toBeNull()
+ expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
+ expect(spy).toHaveBeenCalledTimes(0)
+ if (times > 1) {
+ resolve()
+ }
+
+ times++
+ popover.hide()
+ })
popover.show()
})
-
- popoverEl.addEventListener('shown.bs.popover', () => {
- spy = spy || spyOn(popover._templateFactory, 'constructor').and.callThrough()
- const popoverDisplayed = document.querySelector('.popover')
-
- expect(popoverDisplayed).not.toBeNull()
- expect(popoverDisplayed.querySelector('.popover-body').textContent).toEqual('Popover content')
- expect(spy).toHaveBeenCalledTimes(0)
- if (times > 1) {
- done()
- }
-
- times++
- popover.hide()
- })
- popover.show()
})
- it('should show a popover with provided custom class', done => {
- fixtureEl.innerHTML = 'BS twitter '
+ it('should show a popover with provided custom class', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'BS twitter '
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl)
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl)
- popoverEl.addEventListener('shown.bs.popover', () => {
- const tip = document.querySelector('.popover')
- expect(tip).not.toBeNull()
- expect(tip).toHaveClass('custom-class')
- done()
- })
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ const tip = document.querySelector('.popover')
+ expect(tip).not.toBeNull()
+ expect(tip).toHaveClass('custom-class')
+ resolve()
+ })
- popover.show()
+ popover.show()
+ })
})
})
describe('hide', () => {
- it('should hide a popover', done => {
- fixtureEl.innerHTML = 'BS twitter '
+ it('should hide a popover', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'BS twitter '
- const popoverEl = fixtureEl.querySelector('a')
- const popover = new Popover(popoverEl)
+ const popoverEl = fixtureEl.querySelector('a')
+ const popover = new Popover(popoverEl)
- popoverEl.addEventListener('shown.bs.popover', () => {
- popover.hide()
- })
+ popoverEl.addEventListener('shown.bs.popover', () => {
+ popover.hide()
+ })
- popoverEl.addEventListener('hidden.bs.popover', () => {
- expect(document.querySelector('.popover')).toBeNull()
- done()
- })
+ popoverEl.addEventListener('hidden.bs.popover', () => {
+ expect(document.querySelector('.popover')).toBeNull()
+ resolve()
+ })
- popover.show()
+ popover.show()
+ })
})
})
diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js
index 5c044e697a..291654d9be 100644
--- a/js/tests/unit/scrollspy.spec.js
+++ b/js/tests/unit/scrollspy.spec.js
@@ -1,6 +1,6 @@
import ScrollSpy from '../../src/scrollspy'
import Manipulator from '../../src/dom/manipulator'
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
+import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
describe('ScrollSpy', () => {
let fixtureEl
@@ -85,418 +85,436 @@ describe('ScrollSpy', () => {
expect(scrollSpy._targets).toHaveSize(2)
})
- it('should only switch "active" class on current target', done => {
- fixtureEl.innerHTML = [
- ''
- ].join('')
-
- const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
- const rootEl = fixtureEl.querySelector('#root')
- const scrollSpy = new ScrollSpy(scrollSpyEl, {
- target: 'ss-target'
- })
-
- spyOn(scrollSpy, '_process').and.callThrough()
-
- scrollSpyEl.addEventListener('scroll', () => {
- expect(rootEl).toHaveClass('active')
- expect(scrollSpy._process).toHaveBeenCalled()
- done()
+ it('should only switch "active" class on current target', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
+ const rootEl = fixtureEl.querySelector('#root')
+ const scrollSpy = new ScrollSpy(scrollSpyEl, {
+ target: 'ss-target'
+ })
+
+ spyOn(scrollSpy, '_process').and.callThrough()
+
+ scrollSpyEl.addEventListener('scroll', () => {
+ expect(rootEl).toHaveClass('active')
+ expect(scrollSpy._process).toHaveBeenCalled()
+ resolve()
+ })
+
+ scrollSpyEl.scrollTop = 350
})
-
- scrollSpyEl.scrollTop = 350
})
- it('should only switch "active" class on current target specified w element', done => {
- fixtureEl.innerHTML = [
- ''
- ].join('')
-
- const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
- const rootEl = fixtureEl.querySelector('#root')
- const scrollSpy = new ScrollSpy(scrollSpyEl, {
- target: fixtureEl.querySelector('#ss-target')
- })
-
- spyOn(scrollSpy, '_process').and.callThrough()
-
- scrollSpyEl.addEventListener('scroll', () => {
- expect(rootEl).toHaveClass('active')
- expect(scrollSpy._process).toHaveBeenCalled()
- done()
+ it('should only switch "active" class on current target specified w element', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
+
+ const scrollSpyEl = fixtureEl.querySelector('#scrollspy-example')
+ const rootEl = fixtureEl.querySelector('#root')
+ const scrollSpy = new ScrollSpy(scrollSpyEl, {
+ target: fixtureEl.querySelector('#ss-target')
+ })
+
+ spyOn(scrollSpy, '_process').and.callThrough()
+
+ scrollSpyEl.addEventListener('scroll', () => {
+ expect(rootEl).toHaveClass('active')
+ expect(scrollSpy._process).toHaveBeenCalled()
+ resolve()
+ })
+
+ scrollSpyEl.scrollTop = 350
})
-
- scrollSpyEl.scrollTop = 350
})
- it('should correctly select middle navigation option when large offset is used', done => {
- fixtureEl.innerHTML = [
- '',
- '',
- ' ',
- ' ',
- '',
- '
',
- '
',
- '
',
- '
',
+ ' ',
+ ' ',
+ '',
+ '
',
+ '
',
+ '
',
+ '
',
- ' ',
- ' ',
- '',
- '
div 1
',
- '
div 2
',
- '
',
+ ' ',
+ ' ',
+ '',
+ '
div 1
',
+ '
div 2
',
+ '
',
- ' ',
- ' div 1 ',
- ' div 2 ',
- ' ',
- ' ',
- '',
- '
div 1
',
- '
div 2
',
- '
',
+ ' ',
+ ' div 1 ',
+ ' div 2 ',
+ ' ',
+ ' ',
+ '',
+ '
div 1
',
+ '
div 2
',
+ '
',
- ' ',
- ' ',
- '',
- '
div 1
',
- '
div 2
',
- '
',
+ ' ',
+ ' ',
+ '',
+ '
div 1
',
+ '
div 2
',
+ '
',
- ' ',
- ' ',
- '',
- '
',
- '
',
- '
',
- '
',
- '
',
- '
',
+ ' ',
+ ' ',
+ '',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
- ' ',
- ' ',
- '',
- '
',
- '
',
- '
',
- '
',
- '
',
+ ' ',
+ ' ',
+ '',
+ '
',
+ '
',
+ '
',
+ '
',
+ '
',
- ' ',
- ' ',
- '',
- '
div 1
',
- '
div 2
',
- '
div 3
',
- '
div 4
',
- '
div 5
',
- '
',
+ ' ',
+ ' ',
+ '',
+ '
div 1
',
+ '
div 2
',
+ '
div 3
',
+ '
div 4
',
+ '
div 5
',
+ '
',
- ' Home Profile ',
- ''
- ].join('')
-
- const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
- const tab = new Tab(profileTriggerEl)
+ it('should activate element by tab id (using buttons, the preferred semantic way)', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile ',
+ ''
+ ].join('')
+
+ const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
+ const tab = new Tab(profileTriggerEl)
+
+ profileTriggerEl.addEventListener('shown.bs.tab', () => {
+ expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
+ expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')
+ resolve()
+ })
- profileTriggerEl.addEventListener('shown.bs.tab', () => {
- expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
- expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')
- done()
+ tab.show()
})
-
- tab.show()
})
- it('should activate element by tab id (using links for tabs - not ideal, but still supported)', done => {
- fixtureEl.innerHTML = [
- '',
- ''
- ].join('')
-
- const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
- const tab = new Tab(profileTriggerEl)
+ it('should activate element by tab id (using links for tabs - not ideal, but still supported)', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ''
+ ].join('')
+
+ const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
+ const tab = new Tab(profileTriggerEl)
+
+ profileTriggerEl.addEventListener('shown.bs.tab', () => {
+ expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
+ expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')
+ resolve()
+ })
- profileTriggerEl.addEventListener('shown.bs.tab', () => {
- expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
- expect(profileTriggerEl.getAttribute('aria-selected')).toEqual('true')
- done()
+ tab.show()
})
-
- tab.show()
})
- it('should activate element by tab id in ordered list', done => {
- fixtureEl.innerHTML = [
- '',
- ' Home Profile ',
- '',
- ' '
- ].join('')
-
- const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
- const tab = new Tab(profileTriggerEl)
+ it('should activate element by tab id in ordered list', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile ',
+ '',
+ ' '
+ ].join('')
+
+ const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
+ const tab = new Tab(profileTriggerEl)
+
+ profileTriggerEl.addEventListener('shown.bs.tab', () => {
+ expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
+ resolve()
+ })
- profileTriggerEl.addEventListener('shown.bs.tab', () => {
- expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
- done()
+ tab.show()
})
-
- tab.show()
})
- it('should activate element by tab id in nav list', done => {
- fixtureEl.innerHTML = [
- '',
- ' Home ',
- ' Profile ',
- ' ',
- ''
- ].join('')
-
- const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
- const tab = new Tab(profileTriggerEl)
+ it('should activate element by tab id in nav list', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home ',
+ ' Profile ',
+ ' ',
+ ''
+ ].join('')
+
+ const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
+ const tab = new Tab(profileTriggerEl)
+
+ profileTriggerEl.addEventListener('shown.bs.tab', () => {
+ expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
+ resolve()
+ })
- profileTriggerEl.addEventListener('shown.bs.tab', () => {
- expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
- done()
+ tab.show()
})
-
- tab.show()
})
- it('should activate element by tab id in list group', done => {
- fixtureEl.innerHTML = [
- '',
- ' Home ',
- ' Profile ',
- '
',
- ''
- ].join('')
-
- const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
- const tab = new Tab(profileTriggerEl)
+ it('should activate element by tab id in list group', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home ',
+ ' Profile ',
+ '
',
+ ''
+ ].join('')
+
+ const profileTriggerEl = fixtureEl.querySelector('#triggerProfile')
+ const tab = new Tab(profileTriggerEl)
+
+ profileTriggerEl.addEventListener('shown.bs.tab', () => {
+ expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
+ resolve()
+ })
- profileTriggerEl.addEventListener('shown.bs.tab', () => {
- expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
- done()
+ tab.show()
})
-
- tab.show()
})
- it('should not fire shown when show is prevented', done => {
- fixtureEl.innerHTML = '
'
+ it('should not fire shown when show is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const navEl = fixtureEl.querySelector('div')
- const tab = new Tab(navEl)
- const expectDone = () => {
- setTimeout(() => {
- expect().nothing()
- done()
- }, 30)
- }
+ const navEl = fixtureEl.querySelector('div')
+ const tab = new Tab(navEl)
+ const expectDone = () => {
+ setTimeout(() => {
+ expect().nothing()
+ resolve()
+ }, 30)
+ }
- navEl.addEventListener('show.bs.tab', ev => {
- ev.preventDefault()
- expectDone()
- })
+ navEl.addEventListener('show.bs.tab', ev => {
+ ev.preventDefault()
+ expectDone()
+ })
- navEl.addEventListener('shown.bs.tab', () => {
- throw new Error('should not trigger shown event')
- })
+ navEl.addEventListener('shown.bs.tab', () => {
+ throw new Error('should not trigger shown event')
+ })
- tab.show()
+ tab.show()
+ })
})
- it('should not fire shown when tab is already active', done => {
- fixtureEl.innerHTML = [
- '',
- ' Home Profile ',
- ''
- ].join('')
-
- const triggerActive = fixtureEl.querySelector('button.active')
- const tab = new Tab(triggerActive)
+ it('should not fire shown when tab is already active', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile ',
+ ''
+ ].join('')
+
+ const triggerActive = fixtureEl.querySelector('button.active')
+ const tab = new Tab(triggerActive)
+
+ triggerActive.addEventListener('shown.bs.tab', () => {
+ throw new Error('should not trigger shown event')
+ })
- triggerActive.addEventListener('shown.bs.tab', () => {
- throw new Error('should not trigger shown event')
+ tab.show()
+ setTimeout(() => {
+ expect().nothing()
+ resolve()
+ }, 30)
})
-
- tab.show()
- setTimeout(() => {
- expect().nothing()
- done()
- }, 30)
})
- it('show and shown events should reference correct relatedTarget', done => {
- fixtureEl.innerHTML = [
- '',
- ' Home Profile ',
- ''
- ].join('')
-
- const secondTabTrigger = fixtureEl.querySelector('#triggerProfile')
- const secondTab = new Tab(secondTabTrigger)
+ it('show and shown events should reference correct relatedTarget', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile ',
+ ''
+ ].join('')
+
+ const secondTabTrigger = fixtureEl.querySelector('#triggerProfile')
+ const secondTab = new Tab(secondTabTrigger)
+
+ secondTabTrigger.addEventListener('show.bs.tab', ev => {
+ expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')
+ })
- secondTabTrigger.addEventListener('show.bs.tab', ev => {
- expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')
- })
+ secondTabTrigger.addEventListener('shown.bs.tab', ev => {
+ expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')
+ expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true')
+ expect(fixtureEl.querySelector('button:not(.active)').getAttribute('aria-selected')).toEqual('false')
+ resolve()
+ })
- secondTabTrigger.addEventListener('shown.bs.tab', ev => {
- expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#home')
- expect(secondTabTrigger.getAttribute('aria-selected')).toEqual('true')
- expect(fixtureEl.querySelector('button:not(.active)').getAttribute('aria-selected')).toEqual('false')
- done()
+ secondTab.show()
})
-
- secondTab.show()
})
- it('should fire hide and hidden events', done => {
- fixtureEl.innerHTML = [
- '',
- ' Home Profile '
- ].join('')
+ it('should fire hide and hidden events', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile '
+ ].join('')
- const triggerList = fixtureEl.querySelectorAll('button')
- const firstTab = new Tab(triggerList[0])
- const secondTab = new Tab(triggerList[1])
+ const triggerList = fixtureEl.querySelectorAll('button')
+ const firstTab = new Tab(triggerList[0])
+ const secondTab = new Tab(triggerList[1])
- let hideCalled = false
- triggerList[0].addEventListener('shown.bs.tab', () => {
- secondTab.show()
- })
+ let hideCalled = false
+ triggerList[0].addEventListener('shown.bs.tab', () => {
+ secondTab.show()
+ })
- triggerList[0].addEventListener('hide.bs.tab', ev => {
- hideCalled = true
- expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')
- })
+ triggerList[0].addEventListener('hide.bs.tab', ev => {
+ hideCalled = true
+ expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')
+ })
- triggerList[0].addEventListener('hidden.bs.tab', ev => {
- expect(hideCalled).toBeTrue()
- expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')
- done()
- })
+ triggerList[0].addEventListener('hidden.bs.tab', ev => {
+ expect(hideCalled).toBeTrue()
+ expect(ev.relatedTarget.getAttribute('data-bs-target')).toEqual('#profile')
+ resolve()
+ })
- firstTab.show()
+ firstTab.show()
+ })
})
- it('should not fire hidden when hide is prevented', done => {
- fixtureEl.innerHTML = [
- '',
- ' Home Profile '
- ].join('')
-
- const triggerList = fixtureEl.querySelectorAll('button')
- const firstTab = new Tab(triggerList[0])
- const secondTab = new Tab(triggerList[1])
- const expectDone = () => {
- setTimeout(() => {
- expect().nothing()
- done()
- }, 30)
- }
+ it('should not fire hidden when hide is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile '
+ ].join('')
+
+ const triggerList = fixtureEl.querySelectorAll('button')
+ const firstTab = new Tab(triggerList[0])
+ const secondTab = new Tab(triggerList[1])
+ const expectDone = () => {
+ setTimeout(() => {
+ expect().nothing()
+ resolve()
+ }, 30)
+ }
+
+ triggerList[0].addEventListener('shown.bs.tab', () => {
+ secondTab.show()
+ })
- triggerList[0].addEventListener('shown.bs.tab', () => {
- secondTab.show()
- })
+ triggerList[0].addEventListener('hide.bs.tab', ev => {
+ ev.preventDefault()
+ expectDone()
+ })
- triggerList[0].addEventListener('hide.bs.tab', ev => {
- ev.preventDefault()
- expectDone()
- })
+ triggerList[0].addEventListener('hidden.bs.tab', () => {
+ throw new Error('should not trigger hidden')
+ })
- triggerList[0].addEventListener('hidden.bs.tab', () => {
- throw new Error('should not trigger hidden')
+ firstTab.show()
})
-
- firstTab.show()
})
- it('should handle removed tabs', done => {
- fixtureEl.innerHTML = [
- '',
- ' ',
- ' ',
- ' Close ',
- ' ',
- ' ',
- ' ',
- ' Close ',
- ' ',
- ' ',
- ' ',
- ' Close ',
- ' ',
- ' ',
- '',
- '
test 1
',
- '
test 2
',
- '
test 3
',
- '
',
+ ' ',
+ ' ',
+ ' Close ',
+ ' ',
+ ' ',
+ ' ',
+ ' Close ',
+ ' ',
+ ' ',
+ ' ',
+ ' Close ',
+ ' ',
+ ' ',
+ '',
+ '
test 1
',
+ '
test 2
',
+ '
test 3
',
+ '
',
- ' Home Profile ',
- ''
- ].join('')
-
- const secondTabTrigger = fixtureEl.querySelector('#triggerProfile')
+ it('should create dynamically a tab', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile ',
+ ''
+ ].join('')
+
+ const secondTabTrigger = fixtureEl.querySelector('#triggerProfile')
+
+ secondTabTrigger.addEventListener('shown.bs.tab', () => {
+ expect(secondTabTrigger).toHaveClass('active')
+ expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
+ resolve()
+ })
- secondTabTrigger.addEventListener('shown.bs.tab', () => {
- expect(secondTabTrigger).toHaveClass('active')
- expect(fixtureEl.querySelector('#profile')).toHaveClass('active')
- done()
+ secondTabTrigger.click()
})
-
- secondTabTrigger.click()
})
it('selected tab should deactivate previous selected link in dropdown', () => {
@@ -567,202 +591,216 @@ describe('Tab', () => {
expect(fixtureEl.querySelector('.nav-link')).not.toHaveClass('active')
})
- it('should handle nested tabs', done => {
- fixtureEl.innerHTML = [
- '',
- ' Tab 1 ',
- ' Tab 2 ',
- ' Tab 3 ',
- ' ',
- '',
- '
',
- '
',
- ' Nested Tab 1 ',
- ' Nested Tab2 ',
- ' ',
- '
',
- '
Nested Tab1 Content
',
- '
Nested Tab2 Content
',
- '
',
- '
',
- '
Tab2 Content
',
- '
Tab3 Content
',
- '
',
+ ' Tab 1 ',
+ ' Tab 2 ',
+ ' Tab 3 ',
+ ' ',
+ '',
+ '
',
+ '
',
+ ' Nested Tab 1 ',
+ ' Nested Tab2 ',
+ ' ',
+ '
',
+ '
Nested Tab1 Content
',
+ '
Nested Tab2 Content
',
+ '
',
+ '
',
+ '
Tab2 Content
',
+ '
Tab3 Content
',
+ '
',
- ' Home Profile ',
- ''
- ].join('')
-
- const triggerTabProfileEl = fixtureEl.querySelector('#tab-profile')
- const triggerTabHomeEl = fixtureEl.querySelector('#tab-home')
- const tabProfileEl = fixtureEl.querySelector('#profile')
- const tabHomeEl = fixtureEl.querySelector('#home')
+ it('should not remove fade class if no active pane is present', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile ',
+ ''
+ ].join('')
+
+ const triggerTabProfileEl = fixtureEl.querySelector('#tab-profile')
+ const triggerTabHomeEl = fixtureEl.querySelector('#tab-home')
+ const tabProfileEl = fixtureEl.querySelector('#profile')
+ const tabHomeEl = fixtureEl.querySelector('#home')
+
+ triggerTabProfileEl.addEventListener('shown.bs.tab', () => {
+ expect(tabProfileEl).toHaveClass('fade')
+ expect(tabProfileEl).toHaveClass('show')
- triggerTabProfileEl.addEventListener('shown.bs.tab', () => {
- expect(tabProfileEl).toHaveClass('fade')
- expect(tabProfileEl).toHaveClass('show')
+ triggerTabHomeEl.addEventListener('shown.bs.tab', () => {
+ expect(tabProfileEl).toHaveClass('fade')
+ expect(tabProfileEl).not.toHaveClass('show')
- triggerTabHomeEl.addEventListener('shown.bs.tab', () => {
- expect(tabProfileEl).toHaveClass('fade')
- expect(tabProfileEl).not.toHaveClass('show')
+ expect(tabHomeEl).toHaveClass('fade')
+ expect(tabHomeEl).toHaveClass('show')
- expect(tabHomeEl).toHaveClass('fade')
- expect(tabHomeEl).toHaveClass('show')
+ resolve()
+ })
- done()
+ triggerTabHomeEl.click()
})
- triggerTabHomeEl.click()
+ triggerTabProfileEl.click()
})
-
- triggerTabProfileEl.click()
})
- it('should not add show class to tab panes if there is no `.fade` class', done => {
- fixtureEl.innerHTML = [
- '',
- ' ',
- ' Home ',
- ' ',
- ' ',
- ' Profile ',
- ' ',
- ' ',
- '',
- '
test 1
',
- '
test 2
',
- '
',
+ ' ',
+ ' Home ',
+ ' ',
+ ' ',
+ ' Profile ',
+ ' ',
+ ' ',
+ '',
+ '
test 1
',
+ '
test 2
',
+ '
',
- ' ',
- ' Home ',
- ' ',
- ' ',
- ' Profile ',
- ' ',
- ' ',
- '',
- '
test 1
',
- '
test 2
',
- '
',
+ ' ',
+ ' Home ',
+ ' ',
+ ' ',
+ ' Profile ',
+ ' ',
+ ' ',
+ '',
+ '
test 1
',
+ '
test 2
',
+ '
or or ',
- ' Home Profile ',
- ''
- ].join('')
+ it('should not fire shown when tab has disabled attribute', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Home Profile ',
+ ''
+ ].join('')
+
+ const triggerDisabled = fixtureEl.querySelector('button[disabled]')
+ triggerDisabled.addEventListener('shown.bs.tab', () => {
+ throw new Error('should not trigger shown event')
+ })
- const triggerDisabled = fixtureEl.querySelector('button[disabled]')
- triggerDisabled.addEventListener('shown.bs.tab', () => {
- throw new Error('should not trigger shown event')
+ triggerDisabled.click()
+ setTimeout(() => {
+ expect().nothing()
+ resolve()
+ }, 30)
})
-
- triggerDisabled.click()
- setTimeout(() => {
- expect().nothing()
- done()
- }, 30)
})
- it('should not fire shown when tab has disabled class', done => {
- fixtureEl.innerHTML = [
- '',
- ''
- ].join('')
+ it('should not fire shown when tab has disabled class', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ''
+ ].join('')
- const triggerDisabled = fixtureEl.querySelector('a.disabled')
+ const triggerDisabled = fixtureEl.querySelector('a.disabled')
- triggerDisabled.addEventListener('shown.bs.tab', () => {
- throw new Error('should not trigger shown event')
- })
+ triggerDisabled.addEventListener('shown.bs.tab', () => {
+ throw new Error('should not trigger shown event')
+ })
- triggerDisabled.click()
- setTimeout(() => {
- expect().nothing()
- done()
- }, 30)
+ triggerDisabled.click()
+ setTimeout(() => {
+ expect().nothing()
+ resolve()
+ }, 30)
+ })
})
})
})
diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js
index 9cd758a9d5..dc7bd7d01e 100644
--- a/js/tests/unit/toast.spec.js
+++ b/js/tests/unit/toast.spec.js
@@ -1,5 +1,5 @@
import Toast from '../../src/toast'
-import { getFixture, clearFixture, createEvent, jQueryMock } from '../helpers/fixture'
+import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
describe('Toast', () => {
let fixtureEl
@@ -36,52 +36,56 @@ describe('Toast', () => {
expect(toastByElement._element).toEqual(toastEl)
})
- it('should allow to config in js', done => {
- fixtureEl.innerHTML = [
- '',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
',
- ' Close
'
- ].join('')
+ it('should close toast when close element with data-bs-dismiss attribute is set', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' Close
'
+ ].join('')
- const toastEl = fixtureEl.querySelector('div')
- const toast = new Toast(toastEl)
+ const toastEl = fixtureEl.querySelector('div')
+ const toast = new Toast(toastEl)
- toastEl.addEventListener('shown.bs.toast', () => {
- expect(toastEl).toHaveClass('show')
+ toastEl.addEventListener('shown.bs.toast', () => {
+ expect(toastEl).toHaveClass('show')
- const button = toastEl.querySelector('.btn-close')
+ const button = toastEl.querySelector('.btn-close')
- button.click()
- })
+ button.click()
+ })
- toastEl.addEventListener('hidden.bs.toast', () => {
- expect(toastEl).not.toHaveClass('show')
- done()
- })
+ toastEl.addEventListener('hidden.bs.toast', () => {
+ expect(toastEl).not.toHaveClass('show')
+ resolve()
+ })
- toast.show()
+ toast.show()
+ })
})
})
@@ -93,7 +97,7 @@ describe('Toast', () => {
fixtureEl.innerHTML = [
'',
- ' Close Close
'
].join('')
@@ -111,304 +115,324 @@ describe('Toast', () => {
})
describe('show', () => {
- it('should auto hide', done => {
- fixtureEl.innerHTML = [
- '',
- '
',
- ' a simple toast',
- '
',
- '
',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
outside focusable ',
- '',
- '
',
- ' a simple toast',
- ' with a button ',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
outside focusable ',
- '',
- '
',
- ' a simple toast',
- ' with a button ',
- '
',
- '
outside focusable ',
+ '',
+ '
',
+ ' a simple toast',
+ ' with a button ',
+ '
',
+ '
outside focusable ',
+ '',
+ '
',
+ ' a simple toast',
+ ' with a button ',
+ '
',
+ '
outside focusable ',
- '',
- '
',
- ' a simple toast',
- ' with a button ',
- '
',
- '
outside focusable ',
+ '',
+ '
',
+ ' a simple toast',
+ ' with a button ',
+ '
',
+ '
outside focusable ',
- '',
- '
',
- ' a simple toast',
- ' with a button ',
- '
',
- '
outside focusable ',
+ '',
+ '
',
+ ' a simple toast',
+ ' with a button ',
+ '
',
+ '
',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
',
- '
',
- ' a simple toast',
- '
',
- '
',
+ '
',
+ ' a simple toast',
+ '
',
+ '
'
+ it('should enable selector delegation', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
+
+ const containerEl = fixtureEl.querySelector('div')
+ const tooltipContainer = new Tooltip(containerEl, {
+ selector: 'a[rel="tooltip"]',
+ trigger: 'click'
+ })
- const containerEl = fixtureEl.querySelector('div')
- const tooltipContainer = new Tooltip(containerEl, {
- selector: 'a[rel="tooltip"]',
- trigger: 'click'
- })
+ containerEl.innerHTML = ' '
- containerEl.innerHTML = ' '
+ const tooltipInContainerEl = containerEl.querySelector('a')
- const tooltipInContainerEl = containerEl.querySelector('a')
+ tooltipInContainerEl.addEventListener('shown.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).not.toBeNull()
+ tooltipContainer.dispose()
+ resolve()
+ })
- tooltipInContainerEl.addEventListener('shown.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).not.toBeNull()
- tooltipContainer.dispose()
- done()
+ tooltipInContainerEl.click()
})
-
- tooltipInContainerEl.click()
})
- it('should create offset modifier when offset is passed as a function', done => {
- fixtureEl.innerHTML = ' '
+ it('should create offset modifier when offset is passed as a function', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- offset: getOffset,
- popperConfig: {
- onFirstUpdate: state => {
- expect(getOffset).toHaveBeenCalledWith({
- popper: state.rects.popper,
- reference: state.rects.reference,
- placement: state.placement
- }, tooltipEl)
- done()
+ const getOffset = jasmine.createSpy('getOffset').and.returnValue([10, 20])
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ offset: getOffset,
+ popperConfig: {
+ onFirstUpdate: state => {
+ expect(getOffset).toHaveBeenCalledWith({
+ popper: state.rects.popper,
+ reference: state.rects.reference,
+ placement: state.placement
+ }, tooltipEl)
+ resolve()
+ }
}
- }
- })
+ })
- const offset = tooltip._getOffset()
+ const offset = tooltip._getOffset()
- expect(offset).toEqual(jasmine.any(Function))
+ expect(offset).toEqual(jasmine.any(Function))
- tooltip.show()
+ tooltip.show()
+ })
})
it('should create offset modifier when offset option is passed in data attribute', () => {
@@ -192,42 +196,46 @@ describe('Tooltip', () => {
})
describe('enable', () => {
- it('should enable a tooltip', done => {
- fixtureEl.innerHTML = ' '
+ it('should enable a tooltip', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltip.enable()
+ tooltip.enable()
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).not.toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).not.toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
})
describe('disable', () => {
- it('should disable tooltip', done => {
- fixtureEl.innerHTML = ' '
+ it('should disable tooltip', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltip.disable()
+ tooltip.disable()
- tooltipEl.addEventListener('show.bs.tooltip', () => {
- throw new Error('should not show a disabled tooltip')
- })
+ tooltipEl.addEventListener('show.bs.tooltip', () => {
+ throw new Error('should not show a disabled tooltip')
+ })
- tooltip.show()
+ tooltip.show()
- setTimeout(() => {
- expect().nothing()
- done()
- }, 10)
+ setTimeout(() => {
+ expect().nothing()
+ resolve()
+ }, 10)
+ })
})
})
@@ -247,96 +255,106 @@ describe('Tooltip', () => {
})
describe('toggle', () => {
- it('should do nothing if disabled', done => {
- fixtureEl.innerHTML = ' '
+ it('should do nothing if disabled', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltip.disable()
+ tooltip.disable()
- tooltipEl.addEventListener('show.bs.tooltip', () => {
- throw new Error('should not show a disabled tooltip')
- })
+ tooltipEl.addEventListener('show.bs.tooltip', () => {
+ throw new Error('should not show a disabled tooltip')
+ })
- tooltip.toggle()
+ tooltip.toggle()
- setTimeout(() => {
- expect().nothing()
- done()
- }, 10)
+ setTimeout(() => {
+ expect().nothing()
+ resolve()
+ }, 10)
+ })
})
- it('should show a tooltip', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).not.toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).not.toBeNull()
+ resolve()
+ })
- tooltip.toggle()
+ tooltip.toggle()
+ })
})
- it('should call toggle and show the tooltip when trigger is "click"', done => {
- fixtureEl.innerHTML = ' '
+ it('should call toggle and show the tooltip when trigger is "click"', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- trigger: 'click'
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ trigger: 'click'
+ })
- spyOn(tooltip, 'toggle').and.callThrough()
+ spyOn(tooltip, 'toggle').and.callThrough()
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(tooltip.toggle).toHaveBeenCalled()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(tooltip.toggle).toHaveBeenCalled()
+ resolve()
+ })
- tooltipEl.click()
+ tooltipEl.click()
+ })
})
- it('should hide a tooltip', done => {
- fixtureEl.innerHTML = ' '
+ it('should hide a tooltip', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
+
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ tooltip.toggle()
+ })
+
+ tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).toBeNull()
+ resolve()
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
tooltip.toggle()
})
+ })
- tooltipEl.addEventListener('hidden.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).toBeNull()
- done()
- })
+ it('should call toggle and hide the tooltip when trigger is "click"', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- tooltip.toggle()
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ trigger: 'click'
+ })
- it('should call toggle and hide the tooltip when trigger is "click"', done => {
- fixtureEl.innerHTML = ' '
+ spyOn(tooltip, 'toggle').and.callThrough()
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- trigger: 'click'
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ tooltipEl.click()
+ })
- spyOn(tooltip, 'toggle').and.callThrough()
+ tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ expect(tooltip.toggle).toHaveBeenCalled()
+ resolve()
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
tooltipEl.click()
})
-
- tooltipEl.addEventListener('hidden.bs.tooltip', () => {
- expect(tooltip.toggle).toHaveBeenCalled()
- done()
- })
-
- tooltipEl.click()
})
})
@@ -367,239 +385,263 @@ describe('Tooltip', () => {
expect(removeEventSpy.calls.allArgs()).toEqual(expectedArgs)
})
- it('should destroy a tooltip after it is shown and hidden', done => {
- fixtureEl.innerHTML = ' '
+ it('should destroy a tooltip after it is shown and hidden', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- tooltip.hide()
- })
- tooltipEl.addEventListener('hidden.bs.tooltip', () => {
- tooltip.dispose()
- expect(tooltip.tip).toBeNull()
- expect(Tooltip.getInstance(tooltipEl)).toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ tooltip.hide()
+ })
+ tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ tooltip.dispose()
+ expect(tooltip.tip).toBeNull()
+ expect(Tooltip.getInstance(tooltipEl)).toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should destroy a tooltip and remove it from the dom', done => {
- fixtureEl.innerHTML = ' '
+ it('should destroy a tooltip and remove it from the dom', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).not.toBeNull()
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).not.toBeNull()
- tooltip.dispose()
+ tooltip.dispose()
- expect(document.querySelector('.tooltip')).toBeNull()
- done()
- })
+ expect(document.querySelector('.tooltip')).toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
})
describe('show', () => {
- it('should show a tooltip', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- const tooltipShown = document.querySelector('.tooltip')
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ const tooltipShown = document.querySelector('.tooltip')
- expect(tooltipShown).not.toBeNull()
- expect(tooltipEl.getAttribute('aria-describedby')).toEqual(tooltipShown.getAttribute('id'))
- expect(tooltipShown.getAttribute('id')).toContain('tooltip')
- done()
- })
+ expect(tooltipShown).not.toBeNull()
+ expect(tooltipEl.getAttribute('aria-describedby')).toEqual(tooltipShown.getAttribute('id'))
+ expect(tooltipShown.getAttribute('id')).toContain('tooltip')
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip when hovering a child element', done => {
- fixtureEl.innerHTML = [
- ' ',
- ' ',
- ' ',
- ' '
- ].join('')
+ it('should show a tooltip when hovering a child element', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ ' ',
+ ' ',
+ ' '
+ ].join('')
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- spyOn(tooltip, 'show')
+ spyOn(tooltip, 'show')
- tooltipEl.querySelector('rect').dispatchEvent(createEvent('mouseover', { bubbles: true }))
+ tooltipEl.querySelector('rect').dispatchEvent(createEvent('mouseover', { bubbles: true }))
- setTimeout(() => {
- expect(tooltip.show).toHaveBeenCalled()
- done()
- }, 0)
+ setTimeout(() => {
+ expect(tooltip.show).toHaveBeenCalled()
+ resolve()
+ }, 0)
+ })
})
- it('should show a tooltip on mobile', done => {
- fixtureEl.innerHTML = ''
+ it('should show a tooltip on mobile', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
- document.documentElement.ontouchstart = noop
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
+ document.documentElement.ontouchstart = noop
- spyOn(EventHandler, 'on').and.callThrough()
+ spyOn(EventHandler, 'on').and.callThrough()
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).not.toBeNull()
- expect(EventHandler.on).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
- document.documentElement.ontouchstart = undefined
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).not.toBeNull()
+ expect(EventHandler.on).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
+ document.documentElement.ontouchstart = undefined
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip relative to placement option', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip relative to placement option', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- placement: 'bottom'
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ placement: 'bottom'
+ })
- tooltipEl.addEventListener('inserted.bs.tooltip', () => {
- expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')
- })
+ tooltipEl.addEventListener('inserted.bs.tooltip', () => {
+ expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')
- expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('bottom')
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(tooltip._getTipElement()).toHaveClass('bs-tooltip-auto')
+ expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('bottom')
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should not error when trying to show a tooltip that has been removed from the dom', done => {
- fixtureEl.innerHTML = ' '
+ it('should not error when trying to show a tooltip that has been removed from the dom', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- const firstCallback = () => {
- tooltipEl.removeEventListener('shown.bs.tooltip', firstCallback)
- let tooltipShown = document.querySelector('.tooltip')
+ const firstCallback = () => {
+ tooltipEl.removeEventListener('shown.bs.tooltip', firstCallback)
+ let tooltipShown = document.querySelector('.tooltip')
- tooltipShown.remove()
+ tooltipShown.remove()
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- tooltipShown = document.querySelector('.tooltip')
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ tooltipShown = document.querySelector('.tooltip')
- expect(tooltipShown).not.toBeNull()
- done()
- })
+ expect(tooltipShown).not.toBeNull()
+ resolve()
+ })
- tooltip.show()
- }
+ tooltip.show()
+ }
- tooltipEl.addEventListener('shown.bs.tooltip', firstCallback)
+ tooltipEl.addEventListener('shown.bs.tooltip', firstCallback)
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip with a dom element container', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip with a dom element container', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- container: fixtureEl
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ container: fixtureEl
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip with a jquery element container', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip with a jquery element container', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- container: {
- 0: fixtureEl,
- jquery: 'jQuery'
- }
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ container: {
+ 0: fixtureEl,
+ jquery: 'jQuery'
+ }
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip with a selector in container', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip with a selector in container', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- container: '#fixture'
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ container: '#fixture'
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(fixtureEl.querySelector('.tooltip')).not.toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip with placement as a function', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip with placement as a function', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const spy = jasmine.createSpy('placement').and.returnValue('top')
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- placement: spy
- })
+ const spy = jasmine.createSpy('placement').and.returnValue('top')
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ placement: spy
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).not.toBeNull()
- expect(spy).toHaveBeenCalled()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).not.toBeNull()
+ expect(spy).toHaveBeenCalled()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip without the animation', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip without the animation', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- animation: false
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ animation: false
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- const tip = document.querySelector('.tooltip')
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ const tip = document.querySelector('.tooltip')
- expect(tip).not.toBeNull()
- expect(tip).not.toHaveClass('fade')
- done()
- })
+ expect(tip).not.toBeNull()
+ expect(tip).not.toHaveClass('fade')
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
it('should throw an error the element is not visible', () => {
@@ -615,352 +657,382 @@ describe('Tooltip', () => {
}
})
- it('should not show a tooltip if show.bs.tooltip is prevented', done => {
- fixtureEl.innerHTML = ' '
-
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
-
- const expectedDone = () => {
- setTimeout(() => {
- expect(document.querySelector('.tooltip')).toBeNull()
- done()
- }, 10)
- }
+ it('should not show a tooltip if show.bs.tooltip is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- tooltipEl.addEventListener('show.bs.tooltip', ev => {
- ev.preventDefault()
- expectedDone()
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- throw new Error('Tooltip should not be shown')
- })
+ const expectedDone = () => {
+ setTimeout(() => {
+ expect(document.querySelector('.tooltip')).toBeNull()
+ resolve()
+ }, 10)
+ }
- tooltip.show()
- })
+ tooltipEl.addEventListener('show.bs.tooltip', ev => {
+ ev.preventDefault()
+ expectedDone()
+ })
- it('should show tooltip if leave event hasn\'t occurred before delay expires', done => {
- fixtureEl.innerHTML = ' '
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ throw new Error('Tooltip should not be shown')
+ })
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- delay: 150
+ tooltip.show()
})
-
- spyOn(tooltip, 'show')
-
- setTimeout(() => {
- expect(tooltip.show).not.toHaveBeenCalled()
- }, 100)
-
- setTimeout(() => {
- expect(tooltip.show).toHaveBeenCalled()
- done()
- }, 200)
-
- tooltipEl.dispatchEvent(createEvent('mouseover'))
})
- it('should not show tooltip if leave event occurs before delay expires', done => {
- fixtureEl.innerHTML = ' '
+ it('should show tooltip if leave event hasn\'t occurred before delay expires', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- delay: 150
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ delay: 150
+ })
- spyOn(tooltip, 'show')
+ spyOn(tooltip, 'show')
- setTimeout(() => {
- expect(tooltip.show).not.toHaveBeenCalled()
- tooltipEl.dispatchEvent(createEvent('mouseover'))
- }, 100)
+ setTimeout(() => {
+ expect(tooltip.show).not.toHaveBeenCalled()
+ }, 100)
- setTimeout(() => {
- expect(tooltip.show).toHaveBeenCalled()
- expect(document.querySelectorAll('.tooltip')).toHaveSize(0)
- done()
- }, 200)
+ setTimeout(() => {
+ expect(tooltip.show).toHaveBeenCalled()
+ resolve()
+ }, 200)
- tooltipEl.dispatchEvent(createEvent('mouseover'))
+ tooltipEl.dispatchEvent(createEvent('mouseover'))
+ })
})
- it('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', done => {
- fixtureEl.innerHTML = ' '
+ it('should not show tooltip if leave event occurs before delay expires', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- delay: {
- show: 0,
- hide: 150
- }
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ delay: 150
+ })
- setTimeout(() => {
- expect(tooltip._getTipElement()).toHaveClass('show')
- tooltipEl.dispatchEvent(createEvent('mouseout'))
+ spyOn(tooltip, 'show')
setTimeout(() => {
- expect(tooltip._getTipElement()).toHaveClass('show')
+ expect(tooltip.show).not.toHaveBeenCalled()
tooltipEl.dispatchEvent(createEvent('mouseover'))
}, 100)
setTimeout(() => {
- expect(tooltip._getTipElement()).toHaveClass('show')
- expect(document.querySelectorAll('.tooltip')).toHaveSize(1)
- done()
+ expect(tooltip.show).toHaveBeenCalled()
+ expect(document.querySelectorAll('.tooltip')).toHaveSize(0)
+ resolve()
}, 200)
- }, 10)
- tooltipEl.dispatchEvent(createEvent('mouseover'))
+ tooltipEl.dispatchEvent(createEvent('mouseover'))
+ })
})
- it('should not hide tooltip if leave event occurs and interaction remains inside trigger', done => {
- fixtureEl.innerHTML = [
- ' ',
- 'Trigger ',
- 'the tooltip',
- ' '
- ].join('')
-
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
- const triggerChild = tooltipEl.querySelector('b')
-
- spyOn(tooltip, 'hide').and.callThrough()
+ it('should not hide tooltip if leave event occurs and enter event occurs within the hide delay', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ''
- tooltipEl.addEventListener('mouseover', () => {
- const moveMouseToChildEvent = createEvent('mouseout')
- Object.defineProperty(moveMouseToChildEvent, 'relatedTarget', {
- value: triggerChild
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ delay: {
+ show: 0,
+ hide: 150
+ }
})
- tooltipEl.dispatchEvent(moveMouseToChildEvent)
- })
+ setTimeout(() => {
+ expect(tooltip._getTipElement()).toHaveClass('show')
+ tooltipEl.dispatchEvent(createEvent('mouseout'))
+
+ setTimeout(() => {
+ expect(tooltip._getTipElement()).toHaveClass('show')
+ tooltipEl.dispatchEvent(createEvent('mouseover'))
+ }, 100)
+
+ setTimeout(() => {
+ expect(tooltip._getTipElement()).toHaveClass('show')
+ expect(document.querySelectorAll('.tooltip')).toHaveSize(1)
+ resolve()
+ }, 200)
+ }, 10)
- tooltipEl.addEventListener('mouseout', () => {
- expect(tooltip.hide).not.toHaveBeenCalled()
- done()
+ tooltipEl.dispatchEvent(createEvent('mouseover'))
})
-
- tooltipEl.dispatchEvent(createEvent('mouseover'))
})
- it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', done => {
- // Style this tooltip to give it plenty of room for popper to do what it wants
- fixtureEl.innerHTML = ' Trigger '
+ it('should not hide tooltip if leave event occurs and interaction remains inside trigger', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ '',
+ 'Trigger ',
+ 'the tooltip',
+ ' '
+ ].join('')
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
+ const triggerChild = tooltipEl.querySelector('b')
+
+ spyOn(tooltip, 'hide').and.callThrough()
+
+ tooltipEl.addEventListener('mouseover', () => {
+ const moveMouseToChildEvent = createEvent('mouseout')
+ Object.defineProperty(moveMouseToChildEvent, 'relatedTarget', {
+ value: triggerChild
+ })
+
+ tooltipEl.dispatchEvent(moveMouseToChildEvent)
+ })
- spyOn(window, 'getComputedStyle').and.returnValue({
- transitionDuration: '0.15s',
- transitionDelay: '0s'
+ tooltipEl.addEventListener('mouseout', () => {
+ expect(tooltip.hide).not.toHaveBeenCalled()
+ resolve()
+ })
+
+ tooltipEl.dispatchEvent(createEvent('mouseover'))
})
+ })
- setTimeout(() => {
- expect(tooltip._popper).not.toBeNull()
- expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')
- tooltipEl.dispatchEvent(createEvent('mouseout'))
+ it('should properly maintain tooltip state if leave event occurs and enter event occurs during hide transition', () => {
+ return new Promise(resolve => {
+ // Style this tooltip to give it plenty of room for popper to do what it wants
+ fixtureEl.innerHTML = 'Trigger '
- setTimeout(() => {
- expect(tooltip._getTipElement()).not.toHaveClass('show')
- tooltipEl.dispatchEvent(createEvent('mouseover'))
- }, 100)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
+
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.15s',
+ transitionDelay: '0s'
+ })
setTimeout(() => {
expect(tooltip._popper).not.toBeNull()
expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')
- done()
- }, 200)
- }, 10)
+ tooltipEl.dispatchEvent(createEvent('mouseout'))
+
+ setTimeout(() => {
+ expect(tooltip._getTipElement()).not.toHaveClass('show')
+ tooltipEl.dispatchEvent(createEvent('mouseover'))
+ }, 100)
+
+ setTimeout(() => {
+ expect(tooltip._popper).not.toBeNull()
+ expect(tooltip._getTipElement().getAttribute('data-popper-placement')).toEqual('top')
+ resolve()
+ }, 200)
+ }, 10)
- tooltipEl.dispatchEvent(createEvent('mouseover'))
+ tooltipEl.dispatchEvent(createEvent('mouseover'))
+ })
})
- it('should only trigger inserted event if a new tooltip element was created', done => {
- fixtureEl.innerHTML = ''
-
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ it('should only trigger inserted event if a new tooltip element was created', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- spyOn(window, 'getComputedStyle').and.returnValue({
- transitionDuration: '0.15s',
- transitionDelay: '0s'
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- const insertedFunc = jasmine.createSpy()
- tooltipEl.addEventListener('inserted.bs.tooltip', insertedFunc)
-
- setTimeout(() => {
- expect(insertedFunc).toHaveBeenCalledTimes(1)
- tooltip.hide()
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.15s',
+ transitionDelay: '0s'
+ })
- setTimeout(() => {
- tooltip.show()
- }, 100)
+ const insertedFunc = jasmine.createSpy()
+ tooltipEl.addEventListener('inserted.bs.tooltip', insertedFunc)
setTimeout(() => {
expect(insertedFunc).toHaveBeenCalledTimes(1)
- done()
- }, 200)
- }, 0)
+ tooltip.hide()
- tooltip.show()
+ setTimeout(() => {
+ tooltip.show()
+ }, 100)
+
+ setTimeout(() => {
+ expect(insertedFunc).toHaveBeenCalledTimes(1)
+ resolve()
+ }, 200)
+ }, 0)
+
+ tooltip.show()
+ })
})
- it('should show a tooltip with custom class provided in data attributes', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip with custom class provided in data attributes', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- const tip = document.querySelector('.tooltip')
- expect(tip).not.toBeNull()
- expect(tip).toHaveClass('custom-class')
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ const tip = document.querySelector('.tooltip')
+ expect(tip).not.toBeNull()
+ expect(tip).toHaveClass('custom-class')
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip with custom class provided as a string in config', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip with custom class provided as a string in config', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- customClass: 'custom-class custom-class-2'
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ customClass: 'custom-class custom-class-2'
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- const tip = document.querySelector('.tooltip')
- expect(tip).not.toBeNull()
- expect(tip).toHaveClass('custom-class')
- expect(tip).toHaveClass('custom-class-2')
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ const tip = document.querySelector('.tooltip')
+ expect(tip).not.toBeNull()
+ expect(tip).toHaveClass('custom-class')
+ expect(tip).toHaveClass('custom-class-2')
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should show a tooltip with custom class provided as a function in config', done => {
- fixtureEl.innerHTML = ' '
+ it('should show a tooltip with custom class provided as a function in config', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const spy = jasmine.createSpy('customClass').and.returnValue('custom-class')
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- customClass: spy
- })
+ const spy = jasmine.createSpy('customClass').and.returnValue('custom-class')
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ customClass: spy
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- const tip = document.querySelector('.tooltip')
- expect(tip).not.toBeNull()
- expect(spy).toHaveBeenCalled()
- expect(tip).toHaveClass('custom-class')
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ const tip = document.querySelector('.tooltip')
+ expect(tip).not.toBeNull()
+ expect(spy).toHaveBeenCalled()
+ expect(tip).toHaveClass('custom-class')
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should remove `title` attribute if exists', done => {
- fixtureEl.innerHTML = ' '
+ it('should hide a tooltip', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())
- tooltipEl.addEventListener('hidden.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).toBeNull()
- expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())
+ tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).toBeNull()
+ expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should hide a tooltip on mobile', done => {
- fixtureEl.innerHTML = ' '
+ it('should hide a tooltip on mobile', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- document.documentElement.ontouchstart = noop
- spyOn(EventHandler, 'off')
- tooltip.hide()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ document.documentElement.ontouchstart = noop
+ spyOn(EventHandler, 'off')
+ tooltip.hide()
+ })
- tooltipEl.addEventListener('hidden.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).toBeNull()
- expect(EventHandler.off).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
- document.documentElement.ontouchstart = undefined
- done()
- })
+ tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).toBeNull()
+ expect(EventHandler.off).toHaveBeenCalledWith(jasmine.any(Object), 'mouseover', noop)
+ document.documentElement.ontouchstart = undefined
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should hide a tooltip without animation', done => {
- fixtureEl.innerHTML = ' '
+ it('should hide a tooltip without animation', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- animation: false
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ animation: false
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())
- tooltipEl.addEventListener('hidden.bs.tooltip', () => {
- expect(document.querySelector('.tooltip')).toBeNull()
- expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()
- done()
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())
+ tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ expect(document.querySelector('.tooltip')).toBeNull()
+ expect(tooltipEl.getAttribute('aria-describedby')).toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
- it('should not hide a tooltip if hide event is prevented', done => {
- fixtureEl.innerHTML = ' '
+ it('should not hide a tooltip if hide event is prevented', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const assertDone = () => {
- setTimeout(() => {
- expect(document.querySelector('.tooltip')).not.toBeNull()
- done()
- }, 20)
- }
+ const assertDone = () => {
+ setTimeout(() => {
+ expect(document.querySelector('.tooltip')).not.toBeNull()
+ resolve()
+ }, 20)
+ }
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl, {
- animation: false
- })
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl, {
+ animation: false
+ })
- tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())
- tooltipEl.addEventListener('hide.bs.tooltip', event => {
- event.preventDefault()
- assertDone()
- })
- tooltipEl.addEventListener('hidden.bs.tooltip', () => {
- throw new Error('should not trigger hidden event')
- })
+ tooltipEl.addEventListener('shown.bs.tooltip', () => tooltip.hide())
+ tooltipEl.addEventListener('hide.bs.tooltip', event => {
+ event.preventDefault()
+ assertDone()
+ })
+ tooltipEl.addEventListener('hidden.bs.tooltip', () => {
+ throw new Error('should not trigger hidden event')
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
it('should not throw error running hide if popper hasn\'t been shown', () => {
@@ -979,22 +1051,24 @@ describe('Tooltip', () => {
})
describe('update', () => {
- it('should call popper update', done => {
- fixtureEl.innerHTML = ' '
+ it('should call popper update', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = ' '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- spyOn(tooltip._popper, 'update')
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ spyOn(tooltip._popper, 'update')
- tooltip.update()
+ tooltip.update()
- expect(tooltip._popper.update).toHaveBeenCalled()
- done()
- })
+ expect(tooltip._popper.update).toHaveBeenCalled()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
it('should do nothing if the tooltip is not shown', () => {
@@ -1272,55 +1346,61 @@ describe('Tooltip', () => {
})
describe('aria-label', () => {
- it('should add the aria-label attribute for referencing original title', done => {
- fixtureEl.innerHTML = ' text content '
+ it('should not add the aria-label attribute if the element has text content', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = 'text content '
- const tooltipEl = fixtureEl.querySelector('a')
- const tooltip = new Tooltip(tooltipEl)
+ const tooltipEl = fixtureEl.querySelector('a')
+ const tooltip = new Tooltip(tooltipEl)
- tooltipEl.addEventListener('shown.bs.tooltip', () => {
- const tooltipShown = document.querySelector('.tooltip')
+ tooltipEl.addEventListener('shown.bs.tooltip', () => {
+ const tooltipShown = document.querySelector('.tooltip')
- expect(tooltipShown).not.toBeNull()
- expect(tooltipEl.getAttribute('aria-label')).toBeNull()
- done()
- })
+ expect(tooltipShown).not.toBeNull()
+ expect(tooltipEl.getAttribute('aria-label')).toBeNull()
+ resolve()
+ })
- tooltip.show()
+ tooltip.show()
+ })
})
})
diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js
index 4303693805..73384fc90b 100644
--- a/js/tests/unit/util/backdrop.spec.js
+++ b/js/tests/unit/util/backdrop.spec.js
@@ -23,268 +23,297 @@ describe('Backdrop', () => {
})
describe('show', () => {
- it('should append the backdrop html once on show and include the "show" class if it is "shown"', done => {
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: false
- })
- const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+ it('should append the backdrop html once on show and include the "show" class if it is "shown"', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: false
+ })
+ const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
- expect(getElements()).toHaveSize(0)
+ expect(getElements()).toHaveSize(0)
- instance.show()
- instance.show(() => {
- expect(getElements()).toHaveSize(1)
- for (const el of getElements()) {
- expect(el).toHaveClass(CLASS_NAME_SHOW)
- }
+ instance.show()
+ instance.show(() => {
+ expect(getElements()).toHaveSize(1)
+ for (const el of getElements()) {
+ expect(el).toHaveClass(CLASS_NAME_SHOW)
+ }
- done()
+ resolve()
+ })
})
})
- it('should not append the backdrop html if it is not "shown"', done => {
- const instance = new Backdrop({
- isVisible: false,
- isAnimated: true
- })
- const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+ it('should not append the backdrop html if it is not "shown"', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: false,
+ isAnimated: true
+ })
+ const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
- expect(getElements()).toHaveSize(0)
- instance.show(() => {
expect(getElements()).toHaveSize(0)
- done()
+ instance.show(() => {
+ expect(getElements()).toHaveSize(0)
+ resolve()
+ })
})
})
- it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', done => {
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: true
- })
- const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+ it('should append the backdrop html once and include the "fade" class if it is "shown" and "animated"', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: true
+ })
+ const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
- expect(getElements()).toHaveSize(0)
+ expect(getElements()).toHaveSize(0)
- instance.show(() => {
- expect(getElements()).toHaveSize(1)
- for (const el of getElements()) {
- expect(el).toHaveClass(CLASS_NAME_FADE)
- }
+ instance.show(() => {
+ expect(getElements()).toHaveSize(1)
+ for (const el of getElements()) {
+ expect(el).toHaveClass(CLASS_NAME_FADE)
+ }
- done()
+ resolve()
+ })
})
})
})
describe('hide', () => {
- it('should remove the backdrop html', done => {
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: true
- })
+ it('should remove the backdrop html', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: true
+ })
- const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
+ const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP)
- expect(getElements()).toHaveSize(0)
- instance.show(() => {
- expect(getElements()).toHaveSize(1)
- instance.hide(() => {
- expect(getElements()).toHaveSize(0)
- done()
+ expect(getElements()).toHaveSize(0)
+ instance.show(() => {
+ expect(getElements()).toHaveSize(1)
+ instance.hide(() => {
+ expect(getElements()).toHaveSize(0)
+ resolve()
+ })
})
})
})
- it('should remove the "show" class', done => {
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: true
- })
- const elem = instance._getElement()
+ it('should remove the "show" class', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: true
+ })
+ const elem = instance._getElement()
- instance.show()
- instance.hide(() => {
- expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
- done()
+ instance.show()
+ instance.hide(() => {
+ expect(elem).not.toHaveClass(CLASS_NAME_SHOW)
+ resolve()
+ })
})
})
- it('should not try to remove Node on remove method if it is not "shown"', done => {
- const instance = new Backdrop({
- isVisible: false,
- isAnimated: true
- })
- const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
- const spy = spyOn(instance, 'dispose').and.callThrough()
+ it('should not try to remove Node on remove method if it is not "shown"', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: false,
+ isAnimated: true
+ })
+ const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+ const spy = spyOn(instance, 'dispose').and.callThrough()
- expect(getElements()).toHaveSize(0)
- expect(instance._isAppended).toBeFalse()
- instance.show(() => {
- instance.hide(() => {
- expect(getElements()).toHaveSize(0)
- expect(spy).not.toHaveBeenCalled()
- expect(instance._isAppended).toBeFalse()
- done()
+ expect(getElements()).toHaveSize(0)
+ expect(instance._isAppended).toBeFalse()
+ instance.show(() => {
+ instance.hide(() => {
+ expect(getElements()).toHaveSize(0)
+ expect(spy).not.toHaveBeenCalled()
+ expect(instance._isAppended).toBeFalse()
+ resolve()
+ })
})
})
})
- it('should not error if the backdrop no longer has a parent', done => {
- fixtureEl.innerHTML = '
'
+ it('should not error if the backdrop no longer has a parent', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const wrapper = fixtureEl.querySelector('#wrapper')
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: true,
- rootElement: wrapper
- })
+ const wrapper = fixtureEl.querySelector('#wrapper')
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: true,
+ rootElement: wrapper
+ })
- const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
+ const getElements = () => document.querySelectorAll(CLASS_BACKDROP)
- instance.show(() => {
- wrapper.remove()
- instance.hide(() => {
- expect(getElements()).toHaveSize(0)
- done()
+ instance.show(() => {
+ wrapper.remove()
+ instance.hide(() => {
+ expect(getElements()).toHaveSize(0)
+ resolve()
+ })
})
})
})
})
describe('click callback', () => {
- it('should execute callback on click', done => {
- const spy = jasmine.createSpy('spy')
+ it('should execute callback on click', () => {
+ return new Promise(resolve => {
+ const spy = jasmine.createSpy('spy')
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: false,
- clickCallback: () => spy()
- })
- const endTest = () => {
- setTimeout(() => {
- expect(spy).toHaveBeenCalled()
- done()
- }, 10)
- }
-
- instance.show(() => {
- const clickEvent = document.createEvent('MouseEvents')
- clickEvent.initEvent('mousedown', true, true)
- document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
- endTest()
- })
- })
- })
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: false,
+ clickCallback: () => spy()
+ })
+ const endTest = () => {
+ setTimeout(() => {
+ expect(spy).toHaveBeenCalled()
+ resolve()
+ }, 10)
+ }
- describe('animation callbacks', () => {
- it('should show and hide backdrop after counting transition duration if it is animated', done => {
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: true
- })
- const spy2 = jasmine.createSpy('spy2')
-
- const execDone = () => {
- setTimeout(() => {
- expect(spy2).toHaveBeenCalledTimes(2)
- done()
- }, 10)
- }
-
- instance.show(spy2)
- instance.hide(() => {
- spy2()
- execDone()
+ instance.show(() => {
+ const clickEvent = new Event('mousedown', { bubbles: true, cancelable: true })
+ document.querySelector(CLASS_BACKDROP).dispatchEvent(clickEvent)
+ endTest()
+ })
})
- expect(spy2).not.toHaveBeenCalled()
})
- it('should show and hide backdrop without a delay if it is not animated', done => {
- const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
- const instance = new Backdrop({
- isVisible: true,
- isAnimated: false
+ describe('animation callbacks', () => {
+ it('should show and hide backdrop after counting transition duration if it is animated', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: true
+ })
+ const spy2 = jasmine.createSpy('spy2')
+
+ const execDone = () => {
+ setTimeout(() => {
+ expect(spy2).toHaveBeenCalledTimes(2)
+ resolve()
+ }, 10)
+ }
+
+ instance.show(spy2)
+ instance.hide(() => {
+ spy2()
+ execDone()
+ })
+ expect(spy2).not.toHaveBeenCalled()
+ })
})
- const spy2 = jasmine.createSpy('spy2')
- instance.show(spy2)
- instance.hide(spy2)
-
- setTimeout(() => {
- expect(spy2).toHaveBeenCalled()
- expect(spy).not.toHaveBeenCalled()
- done()
- }, 10)
- })
-
- it('should not call delay callbacks if it is not "shown"', done => {
- const instance = new Backdrop({
- isVisible: false,
- isAnimated: true
+ it('should show and hide backdrop without a delay if it is not animated', () => {
+ return new Promise(resolve => {
+ const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+ const instance = new Backdrop({
+ isVisible: true,
+ isAnimated: false
+ })
+ const spy2 = jasmine.createSpy('spy2')
+
+ instance.show(spy2)
+ instance.hide(spy2)
+
+ setTimeout(() => {
+ expect(spy2).toHaveBeenCalled()
+ expect(spy).not.toHaveBeenCalled()
+ resolve()
+ }, 10)
+ })
})
- const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
- instance.show()
- instance.hide(() => {
- expect(spy).not.toHaveBeenCalled()
- done()
+ it('should not call delay callbacks if it is not "shown"', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: false,
+ isAnimated: true
+ })
+ const spy = jasmine.createSpy('spy', getTransitionDurationFromElement)
+
+ instance.show()
+ instance.hide(() => {
+ expect(spy).not.toHaveBeenCalled()
+ resolve()
+ })
+ })
})
})
- })
- describe('Config', () => {
- describe('rootElement initialization', () => {
- it('should be appended on "document.body" by default', done => {
- const instance = new Backdrop({
- isVisible: true
- })
- const getElement = () => document.querySelector(CLASS_BACKDROP)
- instance.show(() => {
- expect(getElement().parentElement).toEqual(document.body)
- done()
+ describe('Config', () => {
+ describe('rootElement initialization', () => {
+ it('should be appended on "document.body" by default', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true
+ })
+ const getElement = () => document.querySelector(CLASS_BACKDROP)
+ instance.show(() => {
+ expect(getElement().parentElement).toEqual(document.body)
+ resolve()
+ })
+ })
})
- })
- it('should find the rootElement if passed as a string', done => {
- const instance = new Backdrop({
- isVisible: true,
- rootElement: 'body'
- })
- const getElement = () => document.querySelector(CLASS_BACKDROP)
- instance.show(() => {
- expect(getElement().parentElement).toEqual(document.body)
- done()
+ it('should find the rootElement if passed as a string', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true,
+ rootElement: 'body'
+ })
+ const getElement = () => document.querySelector(CLASS_BACKDROP)
+ instance.show(() => {
+ expect(getElement().parentElement).toEqual(document.body)
+ resolve()
+ })
+ })
})
- })
-
- it('should be appended on any element given by the proper config', done => {
- fixtureEl.innerHTML = '
'
- const wrapper = fixtureEl.querySelector('#wrapper')
- const instance = new Backdrop({
- isVisible: true,
- rootElement: wrapper
- })
- const getElement = () => document.querySelector(CLASS_BACKDROP)
- instance.show(() => {
- expect(getElement().parentElement).toEqual(wrapper)
- done()
+ it('should be appended on any element given by the proper config', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
+
+ const wrapper = fixtureEl.querySelector('#wrapper')
+ const instance = new Backdrop({
+ isVisible: true,
+ rootElement: wrapper
+ })
+ const getElement = () => document.querySelector(CLASS_BACKDROP)
+ instance.show(() => {
+ expect(getElement().parentElement).toEqual(wrapper)
+ resolve()
+ })
+ })
})
})
- })
- describe('ClassName', () => {
- it('should allow configuring className', done => {
- const instance = new Backdrop({
- isVisible: true,
- className: 'foo'
- })
- const getElement = () => document.querySelector('.foo')
- instance.show(() => {
- expect(getElement()).toEqual(instance._getElement())
- instance.dispose()
- done()
+ describe('ClassName', () => {
+ it('should allow configuring className', () => {
+ return new Promise(resolve => {
+ const instance = new Backdrop({
+ isVisible: true,
+ className: 'foo'
+ })
+ const getElement = () => document.querySelector('.foo')
+ instance.show(() => {
+ expect(getElement()).toEqual(instance._getElement())
+ instance.dispose()
+ resolve()
+ })
+ })
})
})
})
diff --git a/js/tests/unit/util/focustrap.spec.js b/js/tests/unit/util/focustrap.spec.js
index 52a7573971..55f6a23a7e 100644
--- a/js/tests/unit/util/focustrap.spec.js
+++ b/js/tests/unit/util/focustrap.spec.js
@@ -1,7 +1,7 @@
import FocusTrap from '../../../src/util/focustrap'
import EventHandler from '../../../src/dom/event-handler'
import SelectorEngine from '../../../src/dom/selector-engine'
-import { clearFixture, getFixture, createEvent } from '../../helpers/fixture'
+import { clearFixture, createEvent, getFixture } from '../../helpers/fixture'
describe('FocusTrap', () => {
let fixtureEl
@@ -41,140 +41,148 @@ describe('FocusTrap', () => {
expect(trapElement.focus).not.toHaveBeenCalled()
})
- it('should force focus inside focus trap if it can', done => {
- fixtureEl.innerHTML = [
- 'outside ',
- ''
- ].join('')
+ it('should force focus inside focus trap if it can', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ 'outside ',
+ ''
+ ].join('')
- const trapElement = fixtureEl.querySelector('div')
- const focustrap = new FocusTrap({ trapElement })
- focustrap.activate()
+ const trapElement = fixtureEl.querySelector('div')
+ const focustrap = new FocusTrap({ trapElement })
+ focustrap.activate()
- const inside = document.getElementById('inside')
+ const inside = document.getElementById('inside')
- const focusInListener = () => {
- expect(inside.focus).toHaveBeenCalled()
- document.removeEventListener('focusin', focusInListener)
- done()
- }
+ const focusInListener = () => {
+ expect(inside.focus).toHaveBeenCalled()
+ document.removeEventListener('focusin', focusInListener)
+ resolve()
+ }
- spyOn(inside, 'focus')
- spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [inside])
+ spyOn(inside, 'focus')
+ spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [inside])
- document.addEventListener('focusin', focusInListener)
+ document.addEventListener('focusin', focusInListener)
- const focusInEvent = createEvent('focusin', { bubbles: true })
- Object.defineProperty(focusInEvent, 'target', {
- value: document.getElementById('outside')
- })
+ const focusInEvent = createEvent('focusin', { bubbles: true })
+ Object.defineProperty(focusInEvent, 'target', {
+ value: document.getElementById('outside')
+ })
- document.dispatchEvent(focusInEvent)
+ document.dispatchEvent(focusInEvent)
+ })
})
- it('should wrap focus around forward on tab', done => {
- fixtureEl.innerHTML = [
- 'outside ',
- ''
- ].join('')
-
- const trapElement = fixtureEl.querySelector('div')
- const focustrap = new FocusTrap({ trapElement })
- focustrap.activate()
-
- const first = document.getElementById('first')
- const inside = document.getElementById('inside')
- const last = document.getElementById('last')
- const outside = document.getElementById('outside')
-
- spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
- spyOn(first, 'focus').and.callThrough()
-
- const focusInListener = () => {
- expect(first.focus).toHaveBeenCalled()
- first.removeEventListener('focusin', focusInListener)
- done()
- }
-
- first.addEventListener('focusin', focusInListener)
-
- const keydown = createEvent('keydown')
- keydown.key = 'Tab'
-
- document.dispatchEvent(keydown)
- outside.focus()
+ it('should wrap focus around forward on tab', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ 'outside ',
+ ''
+ ].join('')
+
+ const trapElement = fixtureEl.querySelector('div')
+ const focustrap = new FocusTrap({ trapElement })
+ focustrap.activate()
+
+ const first = document.getElementById('first')
+ const inside = document.getElementById('inside')
+ const last = document.getElementById('last')
+ const outside = document.getElementById('outside')
+
+ spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
+ spyOn(first, 'focus').and.callThrough()
+
+ const focusInListener = () => {
+ expect(first.focus).toHaveBeenCalled()
+ first.removeEventListener('focusin', focusInListener)
+ resolve()
+ }
+
+ first.addEventListener('focusin', focusInListener)
+
+ const keydown = createEvent('keydown')
+ keydown.key = 'Tab'
+
+ document.dispatchEvent(keydown)
+ outside.focus()
+ })
})
- it('should wrap focus around backwards on shift-tab', done => {
- fixtureEl.innerHTML = [
- 'outside ',
- ''
- ].join('')
-
- const trapElement = fixtureEl.querySelector('div')
- const focustrap = new FocusTrap({ trapElement })
- focustrap.activate()
-
- const first = document.getElementById('first')
- const inside = document.getElementById('inside')
- const last = document.getElementById('last')
- const outside = document.getElementById('outside')
-
- spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
- spyOn(last, 'focus').and.callThrough()
-
- const focusInListener = () => {
- expect(last.focus).toHaveBeenCalled()
- last.removeEventListener('focusin', focusInListener)
- done()
- }
-
- last.addEventListener('focusin', focusInListener)
-
- const keydown = createEvent('keydown')
- keydown.key = 'Tab'
- keydown.shiftKey = true
-
- document.dispatchEvent(keydown)
- outside.focus()
+ it('should wrap focus around backwards on shift-tab', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ 'outside ',
+ ''
+ ].join('')
+
+ const trapElement = fixtureEl.querySelector('div')
+ const focustrap = new FocusTrap({ trapElement })
+ focustrap.activate()
+
+ const first = document.getElementById('first')
+ const inside = document.getElementById('inside')
+ const last = document.getElementById('last')
+ const outside = document.getElementById('outside')
+
+ spyOn(SelectorEngine, 'focusableChildren').and.callFake(() => [first, inside, last])
+ spyOn(last, 'focus').and.callThrough()
+
+ const focusInListener = () => {
+ expect(last.focus).toHaveBeenCalled()
+ last.removeEventListener('focusin', focusInListener)
+ resolve()
+ }
+
+ last.addEventListener('focusin', focusInListener)
+
+ const keydown = createEvent('keydown')
+ keydown.key = 'Tab'
+ keydown.shiftKey = true
+
+ document.dispatchEvent(keydown)
+ outside.focus()
+ })
})
- it('should force focus on itself if there is no focusable content', done => {
- fixtureEl.innerHTML = [
- 'outside ',
- '
'
- ].join('')
+ it('should force focus on itself if there is no focusable content', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ 'outside ',
+ '
'
+ ].join('')
- const trapElement = fixtureEl.querySelector('div')
- const focustrap = new FocusTrap({ trapElement })
- focustrap.activate()
+ const trapElement = fixtureEl.querySelector('div')
+ const focustrap = new FocusTrap({ trapElement })
+ focustrap.activate()
- const focusInListener = () => {
- expect(focustrap._config.trapElement.focus).toHaveBeenCalled()
- document.removeEventListener('focusin', focusInListener)
- done()
- }
+ const focusInListener = () => {
+ expect(focustrap._config.trapElement.focus).toHaveBeenCalled()
+ document.removeEventListener('focusin', focusInListener)
+ resolve()
+ }
- spyOn(focustrap._config.trapElement, 'focus')
+ spyOn(focustrap._config.trapElement, 'focus')
- document.addEventListener('focusin', focusInListener)
+ document.addEventListener('focusin', focusInListener)
- const focusInEvent = createEvent('focusin', { bubbles: true })
- Object.defineProperty(focusInEvent, 'target', {
- value: document.getElementById('outside')
- })
+ const focusInEvent = createEvent('focusin', { bubbles: true })
+ Object.defineProperty(focusInEvent, 'target', {
+ value: document.getElementById('outside')
+ })
- document.dispatchEvent(focusInEvent)
+ document.dispatchEvent(focusInEvent)
+ })
})
})
diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js
index 9d8c5ed986..0d60ca9894 100644
--- a/js/tests/unit/util/index.spec.js
+++ b/js/tests/unit/util/index.spec.js
@@ -1,5 +1,6 @@
import * as Util from '../../../src/util/index'
import { clearFixture, getFixture } from '../../helpers/fixture'
+import { noop } from '../../../src/util/index'
describe('Util', () => {
let fixtureEl
@@ -154,18 +155,20 @@ describe('Util', () => {
})
describe('triggerTransitionEnd', () => {
- it('should trigger transitionend event', done => {
- fixtureEl.innerHTML = '
'
+ it('should trigger transitionend event', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = '
'
- const el = fixtureEl.querySelector('div')
- const spy = spyOn(el, 'dispatchEvent').and.callThrough()
+ const el = fixtureEl.querySelector('div')
+ const spy = spyOn(el, 'dispatchEvent').and.callThrough()
- el.addEventListener('transitionend', () => {
- expect(spy).toHaveBeenCalled()
- done()
- })
+ el.addEventListener('transitionend', () => {
+ expect(spy).toHaveBeenCalled()
+ resolve()
+ })
- Util.triggerTransitionEnd(el)
+ Util.triggerTransitionEnd(el)
+ })
})
})
@@ -611,9 +614,9 @@ describe('Util', () => {
})
it('should define a plugin on the jQuery instance', () => {
- const pluginMock = function () {}
+ const pluginMock = Util.noop
pluginMock.NAME = 'test'
- pluginMock.jQueryInterface = function () {}
+ pluginMock.jQueryInterface = Util.noop
Util.defineJQueryPlugin(pluginMock)
expect(fakejQuery.fn.test).toEqual(pluginMock.jQueryInterface)
@@ -658,96 +661,104 @@ describe('Util', () => {
expect(callbackSpy).toHaveBeenCalled()
})
- it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', done => {
- const el = document.createElement('div')
- const callbackSpy = jasmine.createSpy('callback spy')
+ it('should execute a function after a computed CSS transition duration and there was no transitionend event dispatched', () => {
+ return new Promise(resolve => {
+ const el = document.createElement('div')
+ const callbackSpy = jasmine.createSpy('callback spy')
- spyOn(window, 'getComputedStyle').and.returnValue({
- transitionDuration: '0.05s',
- transitionDelay: '0s'
- })
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
- Util.executeAfterTransition(callbackSpy, el)
+ Util.executeAfterTransition(callbackSpy, el)
- setTimeout(() => {
- expect(callbackSpy).toHaveBeenCalled()
- done()
- }, 70)
+ setTimeout(() => {
+ expect(callbackSpy).toHaveBeenCalled()
+ resolve()
+ }, 70)
+ })
})
- it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', done => {
- const el = document.createElement('div')
- const callbackSpy = jasmine.createSpy('callback spy')
+ it('should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched', () => {
+ return new Promise(resolve => {
+ const el = document.createElement('div')
+ const callbackSpy = jasmine.createSpy('callback spy')
- spyOn(window, 'getComputedStyle').and.returnValue({
- transitionDuration: '0.05s',
- transitionDelay: '0s'
- })
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
- Util.executeAfterTransition(callbackSpy, el)
+ Util.executeAfterTransition(callbackSpy, el)
- setTimeout(() => {
- el.dispatchEvent(new TransitionEvent('transitionend'))
- }, 50)
+ setTimeout(() => {
+ el.dispatchEvent(new TransitionEvent('transitionend'))
+ }, 50)
- setTimeout(() => {
- expect(callbackSpy).toHaveBeenCalledTimes(1)
- done()
- }, 70)
+ setTimeout(() => {
+ expect(callbackSpy).toHaveBeenCalledTimes(1)
+ resolve()
+ }, 70)
+ })
})
- it('should not trigger a transitionend event if another transitionend event had already happened', done => {
- const el = document.createElement('div')
+ it('should not trigger a transitionend event if another transitionend event had already happened', () => {
+ return new Promise(resolve => {
+ const el = document.createElement('div')
- spyOn(window, 'getComputedStyle').and.returnValue({
- transitionDuration: '0.05s',
- transitionDelay: '0s'
- })
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
- Util.executeAfterTransition(() => {}, el)
+ Util.executeAfterTransition(noop, el)
- // simulate a event dispatched by the browser
- el.dispatchEvent(new TransitionEvent('transitionend'))
+ // simulate a event dispatched by the browser
+ el.dispatchEvent(new TransitionEvent('transitionend'))
- const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()
+ const dispatchSpy = spyOn(el, 'dispatchEvent').and.callThrough()
- setTimeout(() => {
- // setTimeout should not have triggered another transitionend event.
- expect(dispatchSpy).not.toHaveBeenCalled()
- done()
- }, 70)
+ setTimeout(() => {
+ // setTimeout should not have triggered another transitionend event.
+ expect(dispatchSpy).not.toHaveBeenCalled()
+ resolve()
+ }, 70)
+ })
})
- it('should ignore transitionend events from nested elements', done => {
- fixtureEl.innerHTML = [
- ''
- ].join('')
+ it('should ignore transitionend events from nested elements', () => {
+ return new Promise(resolve => {
+ fixtureEl.innerHTML = [
+ ''
+ ].join('')
- const outer = fixtureEl.querySelector('.outer')
- const nested = fixtureEl.querySelector('.nested')
- const callbackSpy = jasmine.createSpy('callback spy')
+ const outer = fixtureEl.querySelector('.outer')
+ const nested = fixtureEl.querySelector('.nested')
+ const callbackSpy = jasmine.createSpy('callback spy')
- spyOn(window, 'getComputedStyle').and.returnValue({
- transitionDuration: '0.05s',
- transitionDelay: '0s'
- })
+ spyOn(window, 'getComputedStyle').and.returnValue({
+ transitionDuration: '0.05s',
+ transitionDelay: '0s'
+ })
- Util.executeAfterTransition(callbackSpy, outer)
+ Util.executeAfterTransition(callbackSpy, outer)
- nested.dispatchEvent(new TransitionEvent('transitionend', {
- bubbles: true
- }))
+ nested.dispatchEvent(new TransitionEvent('transitionend', {
+ bubbles: true
+ }))
- setTimeout(() => {
- expect(callbackSpy).not.toHaveBeenCalled()
- }, 20)
+ setTimeout(() => {
+ expect(callbackSpy).not.toHaveBeenCalled()
+ }, 20)
- setTimeout(() => {
- expect(callbackSpy).toHaveBeenCalled()
- done()
- }, 70)
+ setTimeout(() => {
+ expect(callbackSpy).toHaveBeenCalled()
+ resolve()
+ }, 70)
+ })
})
})
diff --git a/js/tests/unit/util/scrollbar.spec.js b/js/tests/unit/util/scrollbar.spec.js
index fc3a6f4e87..6fcf5718bb 100644
--- a/js/tests/unit/util/scrollbar.spec.js
+++ b/js/tests/unit/util/scrollbar.spec.js
@@ -101,7 +101,7 @@ describe('ScrollBar', () => {
})
describe('hide - reset', () => {
- it('should adjust the inline padding of fixed elements which are full-width', done => {
+ it('should adjust the inline padding of fixed elements which are full-width', () => {
fixtureEl.innerHTML = [
'',
'
',
@@ -134,10 +134,9 @@ describe('ScrollBar', () => {
expect(getPaddingAttr(fixedEl2)).toBeNull()
expect(currentPadding).toEqual(originalPadding)
expect(currentPadding2).toEqual(originalPadding2)
- done()
})
- it('should remove padding & margin if not existed before adjustment', done => {
+ it('should remove padding & margin if not existed before adjustment', () => {
fixtureEl.innerHTML = [
'
',
'
',
@@ -155,10 +154,9 @@ describe('ScrollBar', () => {
expect(fixedEl.getAttribute('style').includes('padding-right')).toBeFalse()
expect(stickyEl.getAttribute('style').includes('margin-right')).toBeFalse()
- done()
})
- it('should adjust the inline margin and padding of sticky elements', done => {
+ it('should adjust the inline margin and padding of sticky elements', () => {
fixtureEl.innerHTML = [
'
',
'
',
@@ -184,7 +182,6 @@ describe('ScrollBar', () => {
expect(getMarginX(stickyTopEl)).toEqual(originalMargin)
expect(getPaddingAttr(stickyTopEl)).toBeNull()
expect(getPaddingX(stickyTopEl)).toEqual(originalPadding)
- done()
})
it('should not adjust the inline margin and padding of sticky and fixed elements when element do not have full width', () => {
diff --git a/js/tests/unit/util/swipe.spec.js b/js/tests/unit/util/swipe.spec.js
index 93131b8fdd..054aab6958 100644
--- a/js/tests/unit/util/swipe.spec.js
+++ b/js/tests/unit/util/swipe.spec.js
@@ -78,74 +78,80 @@ describe('Swipe', () => {
})
describe('Config', () => {
- it('Test leftCallback', done => {
- const spyRight = jasmine.createSpy('spy')
- clearPointerEvents()
- defineDocumentElementOntouchstart()
- // eslint-disable-next-line no-new
- new Swipe(swipeEl, {
- leftCallback: () => {
- expect(spyRight).not.toHaveBeenCalled()
- restorePointerEvents()
- done()
- },
- rightCallback: spyRight
- })
-
- mockSwipeGesture(swipeEl, {
- pos: [300, 10],
- deltaX: -300
+ it('Test leftCallback', () => {
+ return new Promise(resolve => {
+ const spyRight = jasmine.createSpy('spy')
+ clearPointerEvents()
+ defineDocumentElementOntouchstart()
+ // eslint-disable-next-line no-new
+ new Swipe(swipeEl, {
+ leftCallback: () => {
+ expect(spyRight).not.toHaveBeenCalled()
+ restorePointerEvents()
+ resolve()
+ },
+ rightCallback: spyRight
+ })
+
+ mockSwipeGesture(swipeEl, {
+ pos: [300, 10],
+ deltaX: -300
+ })
})
})
- it('Test rightCallback', done => {
- const spyLeft = jasmine.createSpy('spy')
- clearPointerEvents()
- defineDocumentElementOntouchstart()
- // eslint-disable-next-line no-new
- new Swipe(swipeEl, {
- rightCallback: () => {
- expect(spyLeft).not.toHaveBeenCalled()
- restorePointerEvents()
- done()
- },
- leftCallback: spyLeft
- })
-
- mockSwipeGesture(swipeEl, {
- pos: [10, 10],
- deltaX: 300
+ it('Test rightCallback', () => {
+ return new Promise(resolve => {
+ const spyLeft = jasmine.createSpy('spy')
+ clearPointerEvents()
+ defineDocumentElementOntouchstart()
+ // eslint-disable-next-line no-new
+ new Swipe(swipeEl, {
+ rightCallback: () => {
+ expect(spyLeft).not.toHaveBeenCalled()
+ restorePointerEvents()
+ resolve()
+ },
+ leftCallback: spyLeft
+ })
+
+ mockSwipeGesture(swipeEl, {
+ pos: [10, 10],
+ deltaX: 300
+ })
})
})
- it('Test endCallback', done => {
- clearPointerEvents()
- defineDocumentElementOntouchstart()
- let isFirstTime = true
-
- const callback = () => {
- if (isFirstTime) {
- isFirstTime = false
- return
- }
+ it('Test endCallback', () => {
+ return new Promise(resolve => {
+ clearPointerEvents()
+ defineDocumentElementOntouchstart()
+ let isFirstTime = true
- expect().nothing()
- restorePointerEvents()
- done()
- }
+ const callback = () => {
+ if (isFirstTime) {
+ isFirstTime = false
+ return
+ }
- // eslint-disable-next-line no-new
- new Swipe(swipeEl, {
- endCallback: callback
- })
- mockSwipeGesture(swipeEl, {
- pos: [10, 10],
- deltaX: 300
- })
+ expect().nothing()
+ restorePointerEvents()
+ resolve()
+ }
- mockSwipeGesture(swipeEl, {
- pos: [300, 10],
- deltaX: -300
+ // eslint-disable-next-line no-new
+ new Swipe(swipeEl, {
+ endCallback: callback
+ })
+ mockSwipeGesture(swipeEl, {
+ pos: [10, 10],
+ deltaX: 300
+ })
+
+ mockSwipeGesture(swipeEl, {
+ pos: [300, 10],
+ deltaX: -300
+ })
})
})
})
@@ -170,53 +176,57 @@ describe('Swipe', () => {
expect(swipe._handleSwipe).not.toHaveBeenCalled()
})
- it('should allow swipeRight and call "rightCallback" with pointer events', done => {
- if (!supportPointerEvent) {
- expect().nothing()
- done()
- return
- }
-
- const style = '#fixture .pointer-event { touch-action: none !important; }'
- fixtureEl.innerHTML += style
-
- defineDocumentElementOntouchstart()
- // eslint-disable-next-line no-new
- new Swipe(swipeEl, {
- rightCallback: () => {
- deleteDocumentElementOntouchstart()
+ it('should allow swipeRight and call "rightCallback" with pointer events', () => {
+ return new Promise(resolve => {
+ if (!supportPointerEvent) {
expect().nothing()
- done()
+ resolve()
+ return
}
- })
- mockSwipeGesture(swipeEl, { deltaX: 300 }, 'pointer')
- })
+ const style = '#fixture .pointer-event { touch-action: none !important; }'
+ fixtureEl.innerHTML += style
- it('should allow swipeLeft and call "leftCallback" with pointer events', done => {
- if (!supportPointerEvent) {
- expect().nothing()
- done()
- return
- }
+ defineDocumentElementOntouchstart()
+ // eslint-disable-next-line no-new
+ new Swipe(swipeEl, {
+ rightCallback: () => {
+ deleteDocumentElementOntouchstart()
+ expect().nothing()
+ resolve()
+ }
+ })
- const style = '#fixture .pointer-event { touch-action: none !important; }'
- fixtureEl.innerHTML += style
+ mockSwipeGesture(swipeEl, { deltaX: 300 }, 'pointer')
+ })
+ })
- defineDocumentElementOntouchstart()
- // eslint-disable-next-line no-new
- new Swipe(swipeEl, {
- leftCallback: () => {
+ it('should allow swipeLeft and call "leftCallback" with pointer events', () => {
+ return new Promise(resolve => {
+ if (!supportPointerEvent) {
expect().nothing()
- deleteDocumentElementOntouchstart()
- done()
+ resolve()
+ return
}
- })
- mockSwipeGesture(swipeEl, {
- pos: [300, 10],
- deltaX: -300
- }, 'pointer')
+ const style = '#fixture .pointer-event { touch-action: none !important; }'
+ fixtureEl.innerHTML += style
+
+ defineDocumentElementOntouchstart()
+ // eslint-disable-next-line no-new
+ new Swipe(swipeEl, {
+ leftCallback: () => {
+ expect().nothing()
+ deleteDocumentElementOntouchstart()
+ resolve()
+ }
+ })
+
+ mockSwipeGesture(swipeEl, {
+ pos: [300, 10],
+ deltaX: -300
+ }, 'pointer')
+ })
})
})
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 567c09e2e7..5eae3f92fb 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -43,10 +43,6 @@
Alert Bootstrap Visual Test
-
-
-
-
-
+