root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

Comply to the new rules.

This commit is contained in:
XhmikosR 2017-12-16 14:00:38 +02:00
parent 6d336502c7
commit 80d0943b95
32 changed files with 1798 additions and 1760 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
assets/js/src/application.js
View File

@ -16,7 +16,6 @@
'use strict' 'use strict'
$(function () { $(function () {
// Tooltip and popover demos // Tooltip and popover demos
$('.tooltip-demo').tooltip({ $('.tooltip-demo').tooltip({
selector: '[data-toggle="tooltip"]', selector: '[data-toggle="tooltip"]',
@ -60,7 +59,7 @@
$('.btn-clipboard') $('.btn-clipboard')
.tooltip() .tooltip()
.on('mouseleave', function () { .on('mouseleave', function () {
// explicitly hide tooltip, since after clicking it remains // Explicitly hide tooltip, since after clicking it remains
// focused (as it's a button), so tooltip would otherwise // focused (as it's a button), so tooltip would otherwise
// remain visible until focus is moved away // remain visible until focus is moved away
$(this).tooltip('hide') $(this).tooltip('hide')

2
assets/js/src/pwa.js
View File

@ -1,6 +1,6 @@
/* eslint no-console:off */ /* eslint no-console:off */
(function setupSW() { (function () {
'use strict' 'use strict'
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {

32
build/change-version.js
View File

@ -18,8 +18,13 @@ const sh = require('shelljs')
sh.config.fatal = true sh.config.fatal = true
// Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37 // Blame TC39... https://github.com/benjamingr/RegExp.escape/issues/37
RegExp.quote = (string) => string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&') function regExpQuote(string) {
RegExp.quoteReplacement = (string) => string.replace(/[$]/g, '$$') return string.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&')
}
function regExpQuoteReplacement(string) {
return string.replace(/[$]/g, '$$')
}
const DRY_RUN = false const DRY_RUN = false
@ -39,13 +44,9 @@ function walkAsync(directory, excludedDirectories, fileCallback, errback) {
process.nextTick(errback, err) process.nextTick(errback, err)
return return
} }
if (stats.isSymbolicLink()) { if (stats.isDirectory()) {
return
}
else if (stats.isDirectory()) {
process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback) process.nextTick(walkAsync, filepath, excludedDirectories, fileCallback, errback)
} } else if (stats.isFile()) {
else if (stats.isFile()) {
process.nextTick(fileCallback, filepath) process.nextTick(fileCallback, filepath)
} }
}) })
@ -54,18 +55,17 @@ function walkAsync(directory, excludedDirectories, fileCallback, errback) {
} }
function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) { function replaceRecursively(directory, excludedDirectories, allowedExtensions, original, replacement) {
original = new RegExp(RegExp.quote(original), 'g') original = new RegExp(regExpQuote(original), 'g')
replacement = RegExp.quoteReplacement(replacement) replacement = regExpQuoteReplacement(replacement)
const updateFile = !DRY_RUN ? (filepath) => { const updateFile = DRY_RUN ? (filepath) => {
if (allowedExtensions.has(path.parse(filepath).ext)) { if (allowedExtensions.has(path.parse(filepath).ext)) {
sh.sed('-i', original, replacement, filepath) console.log(`FILE: ${filepath}`)
} else {
console.log(`EXCLUDED:${filepath}`)
} }
} : (filepath) => { } : (filepath) => {
if (allowedExtensions.has(path.parse(filepath).ext)) { if (allowedExtensions.has(path.parse(filepath).ext)) {
console.log(`FILE: ${filepath}`) sh.sed('-i', original, replacement, filepath)
}
else {
console.log(`EXCLUDED:${filepath}`)
} }
} }
walkAsync(directory, excludedDirectories, updateFile, (err) => { walkAsync(directory, excludedDirectories, updateFile, (err) => {

2
build/generate-sri.js
View File

@ -55,6 +55,6 @@ files.forEach((file) => {
console.log(`${file.configPropertyName}: ${integrity}`) console.log(`${file.configPropertyName}: ${integrity}`)
sh.sed('-i', new RegExp(`(\\s${file.configPropertyName}:\\s+"|')(\\S+)("|')`), '$1' + integrity + '$3', configFile) sh.sed('-i', new RegExp(`(\\s${file.configPropertyName}:\\s+"|')(\\S+)("|')`), `$1${integrity}$3`, configFile)
}) })
}) })

4
build/postcss.config.js
View File

@ -7,6 +7,8 @@ module.exports = (ctx) => ({
sourcesContent: true sourcesContent: true
}, },
plugins: { plugins: {
autoprefixer: { cascade: false } autoprefixer: {
cascade: false
}
} }
}) })

9
build/rollup.config.js
View File

@ -3,6 +3,7 @@
const path = require('path') const path = require('path')
const babel = require('rollup-plugin-babel') const babel = require('rollup-plugin-babel')
const resolve = require('rollup-plugin-node-resolve') const resolve = require('rollup-plugin-node-resolve')
const pkg = require(path.resolve(__dirname, '../package.json')) const pkg = require(path.resolve(__dirname, '../package.json'))
const BUNDLE = process.env.BUNDLE === 'true' const BUNDLE = process.env.BUNDLE === 'true'
const year = new Date().getFullYear() const year = new Date().getFullYear()
@ -11,8 +12,8 @@ let fileDest = 'bootstrap.js'
const external = ['jquery', 'popper.js'] const external = ['jquery', 'popper.js']
const plugins = [ const plugins = [
babel({ babel({
exclude: 'node_modules/**', // only transpile our source code exclude: 'node_modules/**', // Only transpile our source code
externalHelpersWhitelist: [ // include only required helpers externalHelpersWhitelist: [ // Include only required helpers
'defineProperties', 'defineProperties',
'createClass', 'createClass',
'inheritsLoose', 'inheritsLoose',
@ -21,13 +22,13 @@ const plugins = [
}) })
] ]
const globals = { const globals = {
jquery: 'jQuery', // ensure we use jQuery which is always available even in noConflict mode jquery: 'jQuery', // Ensure we use jQuery which is always available even in noConflict mode
'popper.js': 'Popper' 'popper.js': 'Popper'
} }
if (BUNDLE) { if (BUNDLE) {
fileDest = 'bootstrap.bundle.js' fileDest = 'bootstrap.bundle.js'
// remove last entry in external array to bundle Popper // Remove last entry in external array to bundle Popper
external.pop() external.pop()
delete globals['popper.js'] delete globals['popper.js']
plugins.push(resolve()) plugins.push(resolve())

2
build/saucelabs-unit-test.js
View File

@ -91,7 +91,7 @@ jsUnitSaucelabs.on('tunnelCreated', () => {
if (typeof success !== 'undefined') { if (typeof success !== 'undefined') {
const taskIds = success['js tests'] const taskIds = success['js tests']
if (!taskIds || !taskIds.length) { if (!taskIds || taskIds.length === 0) {
throw new Error('Error starting tests through Sauce Labs API') throw new Error('Error starting tests through Sauce Labs API')
} }

1
build/workbox.js
View File

@ -4,6 +4,7 @@ const fs = require('fs')
const path = require('path') const path = require('path')
const swBuild = require('workbox-build') const swBuild = require('workbox-build')
const config = require('./workbox.config.json') const config = require('./workbox.config.json')
const buildPrefix = '_gh_pages/' const buildPrefix = '_gh_pages/'
const workboxSWSrcPath = require.resolve('workbox-sw') const workboxSWSrcPath = require.resolve('workbox-sw')

21
js/src/alert.js
View File

@ -1,7 +1,6 @@
import $ from 'jquery' import $ from 'jquery'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): alert.js * Bootstrap (v4.0.0-beta.3): alert.js
@ -10,8 +9,6 @@ import Util from './util'
*/ */
const Alert = (($) => { const Alert = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -42,7 +39,6 @@ const Alert = (($) => {
SHOW : 'show' SHOW : 'show'
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -50,20 +46,17 @@ const Alert = (($) => {
*/ */
class Alert { class Alert {
constructor(element) { constructor(element) {
this._element = element this._element = element
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
} }
// Public
// public
close(element) { close(element) {
element = element || this._element element = element || this._element
@ -83,8 +76,7 @@ const Alert = (($) => {
this._element = null this._element = null
} }
// Private
// private
_getRootElement(element) { _getRootElement(element) {
const selector = Util.getSelectorFromElement(element) const selector = Util.getSelectorFromElement(element)
@ -129,8 +121,7 @@ const Alert = (($) => {
.remove() .remove()
} }
// Static
// static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -157,10 +148,8 @@ const Alert = (($) => {
alertInstance.close(this) alertInstance.close(this)
} }
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -173,7 +162,6 @@ const Alert = (($) => {
Alert._handleDismiss(new Alert()) Alert._handleDismiss(new Alert())
) )
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -188,7 +176,6 @@ const Alert = (($) => {
} }
return Alert return Alert
})($) })($)
export default Alert export default Alert

23
js/src/button.js
View File

@ -8,8 +8,6 @@ import $ from 'jquery'
*/ */
const Button = (($) => { const Button = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -39,11 +37,10 @@ const Button = (($) => {
const Event = { const Event = {
CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`, CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`,
FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` +
+ `blur${EVENT_KEY}${DATA_API_KEY}` `blur${EVENT_KEY}${DATA_API_KEY}`
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -51,20 +48,17 @@ const Button = (($) => {
*/ */
class Button { class Button {
constructor(element) { constructor(element) {
this._element = element this._element = element
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
} }
// Public
// public
toggle() { toggle() {
let triggerChangeEvent = true let triggerChangeEvent = true
@ -81,7 +75,6 @@ const Button = (($) => {
if (input.checked && if (input.checked &&
$(this._element).hasClass(ClassName.ACTIVE)) { $(this._element).hasClass(ClassName.ACTIVE)) {
triggerChangeEvent = false triggerChangeEvent = false
} else { } else {
const activeElement = $(rootElement).find(Selector.ACTIVE)[0] const activeElement = $(rootElement).find(Selector.ACTIVE)[0]
@ -105,7 +98,6 @@ const Button = (($) => {
input.focus() input.focus()
addAriaPressed = false addAriaPressed = false
} }
} }
if (addAriaPressed) { if (addAriaPressed) {
@ -123,8 +115,7 @@ const Button = (($) => {
this._element = null this._element = null
} }
// Static
// static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -140,10 +131,8 @@ const Button = (($) => {
} }
}) })
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -167,7 +156,6 @@ const Button = (($) => {
$(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type)) $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type))
}) })
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -182,7 +170,6 @@ const Button = (($) => {
} }
return Button return Button
})($) })($)
export default Button export default Button

42
js/src/carousel.js
View File

@ -1,7 +1,6 @@
import $ from 'jquery' import $ from 'jquery'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): carousel.js * Bootstrap (v4.0.0-beta.3): carousel.js
@ -10,8 +9,6 @@ import Util from './util'
*/ */
const Carousel = (($) => { const Carousel = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -84,7 +81,6 @@ const Carousel = (($) => {
DATA_RIDE : '[data-ride="carousel"]' DATA_RIDE : '[data-ride="carousel"]'
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -92,7 +88,6 @@ const Carousel = (($) => {
*/ */
class Carousel { class Carousel {
constructor(element, config) { constructor(element, config) {
this._items = null this._items = null
this._interval = null this._interval = null
@ -110,8 +105,7 @@ const Carousel = (($) => {
this._addEventListeners() this._addEventListeners()
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
@ -121,8 +115,7 @@ const Carousel = (($) => {
return Default return Default
} }
// Public
// public
next() { next() {
if (!this._isSliding) { if (!this._isSliding) {
@ -198,9 +191,9 @@ const Carousel = (($) => {
return return
} }
const direction = index > activeIndex ? const direction = index > activeIndex
Direction.NEXT : ? Direction.NEXT
Direction.PREV : Direction.PREV
this._slide(direction, this._items[index]) this._slide(direction, this._items[index])
} }
@ -219,8 +212,7 @@ const Carousel = (($) => {
this._indicatorsElement = null this._indicatorsElement = null
} }
// Private
// private
_getConfig(config) { _getConfig(config) {
config = { config = {
@ -242,7 +234,7 @@ const Carousel = (($) => {
.on(Event.MOUSEENTER, (event) => this.pause(event)) .on(Event.MOUSEENTER, (event) => this.pause(event))
.on(Event.MOUSELEAVE, (event) => this.cycle(event)) .on(Event.MOUSELEAVE, (event) => this.cycle(event))
if ('ontouchstart' in document.documentElement) { if ('ontouchstart' in document.documentElement) {
// if it's a touch-enabled device, mouseenter/leave are fired as // If it's a touch-enabled device, mouseenter/leave are fired as
// part of the mouse compatibility events on first tap - the carousel // part of the mouse compatibility events on first tap - the carousel
// would stop cycling until user tapped out of it; // would stop cycling until user tapped out of it;
// here, we listen for touchend, explicitly pause the carousel // here, we listen for touchend, explicitly pause the carousel
@ -275,7 +267,6 @@ const Carousel = (($) => {
this.next() this.next()
break break
default: default:
return
} }
} }
@ -299,11 +290,10 @@ const Carousel = (($) => {
const delta = direction === Direction.PREV ? -1 : 1 const delta = direction === Direction.PREV ? -1 : 1
const itemIndex = (activeIndex + delta) % this._items.length const itemIndex = (activeIndex + delta) % this._items.length
return itemIndex === -1 ? return itemIndex === -1
this._items[this._items.length - 1] : this._items[itemIndex] ? this._items[this._items.length - 1] : this._items[itemIndex]
} }
_triggerSlideEvent(relatedTarget, eventDirectionName) { _triggerSlideEvent(relatedTarget, eventDirectionName) {
const targetIndex = this._getItemIndex(relatedTarget) const targetIndex = this._getItemIndex(relatedTarget)
const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]) const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0])
@ -368,7 +358,7 @@ const Carousel = (($) => {
} }
if (!activeElement || !nextElement) { if (!activeElement || !nextElement) {
// some weirdness is happening, so we bail // Some weirdness is happening, so we bail
return return
} }
@ -389,7 +379,6 @@ const Carousel = (($) => {
if (Util.supportsTransitionEnd() && if (Util.supportsTransitionEnd() &&
$(this._element).hasClass(ClassName.SLIDE)) { $(this._element).hasClass(ClassName.SLIDE)) {
$(nextElement).addClass(orderClassName) $(nextElement).addClass(orderClassName)
Util.reflow(nextElement) Util.reflow(nextElement)
@ -408,10 +397,8 @@ const Carousel = (($) => {
this._isSliding = false this._isSliding = false
setTimeout(() => $(this._element).trigger(slidEvent), 0) setTimeout(() => $(this._element).trigger(slidEvent), 0)
}) })
.emulateTransitionEnd(TRANSITION_DURATION) .emulateTransitionEnd(TRANSITION_DURATION)
} else { } else {
$(activeElement).removeClass(ClassName.ACTIVE) $(activeElement).removeClass(ClassName.ACTIVE)
$(nextElement).addClass(ClassName.ACTIVE) $(nextElement).addClass(ClassName.ACTIVE)
@ -425,8 +412,7 @@ const Carousel = (($) => {
} }
} }
// Static
// static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -454,7 +440,7 @@ const Carousel = (($) => {
data.to(config) data.to(config)
} else if (typeof action === 'string') { } else if (typeof action === 'string') {
if (typeof data[action] === 'undefined') { if (typeof data[action] === 'undefined') {
throw new Error(`No method named "${action}"`) throw new TypeError(`No method named "${action}"`)
} }
data[action]() data[action]()
} else if (_config.interval) { } else if (_config.interval) {
@ -495,10 +481,8 @@ const Carousel = (($) => {
event.preventDefault() event.preventDefault()
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -515,7 +499,6 @@ const Carousel = (($) => {
}) })
}) })
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -530,7 +513,6 @@ const Carousel = (($) => {
} }
return Carousel return Carousel
})($) })($)
export default Carousel export default Carousel

35
js/src/collapse.js
View File

@ -1,7 +1,6 @@
import $ from 'jquery' import $ from 'jquery'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): collapse.js * Bootstrap (v4.0.0-beta.3): collapse.js
@ -10,8 +9,6 @@ import Util from './util'
*/ */
const Collapse = (($) => { const Collapse = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -61,7 +58,6 @@ const Collapse = (($) => {
DATA_TOGGLE : '[data-toggle="collapse"]' DATA_TOGGLE : '[data-toggle="collapse"]'
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -69,7 +65,6 @@ const Collapse = (($) => {
*/ */
class Collapse { class Collapse {
constructor(element, config) { constructor(element, config) {
this._isTransitioning = false this._isTransitioning = false
this._element = element this._element = element
@ -99,8 +94,7 @@ const Collapse = (($) => {
} }
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
@ -110,8 +104,7 @@ const Collapse = (($) => {
return Default return Default
} }
// Public
// public
toggle() { toggle() {
if ($(this._element).hasClass(ClassName.SHOW)) { if ($(this._element).hasClass(ClassName.SHOW)) {
@ -136,7 +129,7 @@ const Collapse = (($) => {
.find(Selector.ACTIVES) .find(Selector.ACTIVES)
.filter(`[data-parent="${this._config.parent}"]`) .filter(`[data-parent="${this._config.parent}"]`)
) )
if (!actives.length) { if (actives.length === 0) {
actives = null actives = null
} }
} }
@ -169,7 +162,7 @@ const Collapse = (($) => {
this._element.style[dimension] = 0 this._element.style[dimension] = 0
if (this._triggerArray.length) { if (this._triggerArray.length > 0) {
$(this._triggerArray) $(this._triggerArray)
.removeClass(ClassName.COLLAPSED) .removeClass(ClassName.COLLAPSED)
.attr('aria-expanded', true) .attr('aria-expanded', true)
@ -228,7 +221,7 @@ const Collapse = (($) => {
.removeClass(ClassName.COLLAPSE) .removeClass(ClassName.COLLAPSE)
.removeClass(ClassName.SHOW) .removeClass(ClassName.SHOW)
if (this._triggerArray.length) { if (this._triggerArray.length > 0) {
for (let i = 0; i < this._triggerArray.length; i++) { for (let i = 0; i < this._triggerArray.length; i++) {
const trigger = this._triggerArray[i] const trigger = this._triggerArray[i]
const selector = Util.getSelectorFromElement(trigger) const selector = Util.getSelectorFromElement(trigger)
@ -278,15 +271,14 @@ const Collapse = (($) => {
this._isTransitioning = null this._isTransitioning = null
} }
// Private
// private
_getConfig(config) { _getConfig(config) {
config = { config = {
...Default, ...Default,
...config ...config
} }
config.toggle = Boolean(config.toggle) // coerce string values config.toggle = Boolean(config.toggle) // Coerce string values
Util.typeCheckConfig(NAME, config, DefaultType) Util.typeCheckConfig(NAME, config, DefaultType)
return config return config
} }
@ -301,7 +293,7 @@ const Collapse = (($) => {
if (Util.isElement(this._config.parent)) { if (Util.isElement(this._config.parent)) {
parent = this._config.parent parent = this._config.parent
// it's a jQuery object // It's a jQuery object
if (typeof this._config.parent.jquery !== 'undefined') { if (typeof this._config.parent.jquery !== 'undefined') {
parent = this._config.parent[0] parent = this._config.parent[0]
} }
@ -326,7 +318,7 @@ const Collapse = (($) => {
if (element) { if (element) {
const isOpen = $(element).hasClass(ClassName.SHOW) const isOpen = $(element).hasClass(ClassName.SHOW)
if (triggerArray.length) { if (triggerArray.length > 0) {
$(triggerArray) $(triggerArray)
.toggleClass(ClassName.COLLAPSED, !isOpen) .toggleClass(ClassName.COLLAPSED, !isOpen)
.attr('aria-expanded', isOpen) .attr('aria-expanded', isOpen)
@ -334,8 +326,7 @@ const Collapse = (($) => {
} }
} }
// Static
// static
static _getTargetFromElement(element) { static _getTargetFromElement(element) {
const selector = Util.getSelectorFromElement(element) const selector = Util.getSelectorFromElement(element)
@ -363,16 +354,14 @@ const Collapse = (($) => {
if (typeof config === 'string') { if (typeof config === 'string') {
if (typeof data[config] === 'undefined') { if (typeof data[config] === 'undefined') {
throw new Error(`No method named "${config}"`) throw new TypeError(`No method named "${config}"`)
} }
data[config]() data[config]()
} }
}) })
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -395,7 +384,6 @@ const Collapse = (($) => {
}) })
}) })
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -410,7 +398,6 @@ const Collapse = (($) => {
} }
return Collapse return Collapse
})($) })($)
export default Collapse export default Collapse

45
js/src/dropdown.js
View File

@ -2,7 +2,6 @@ import $ from 'jquery'
import Popper from 'popper.js' import Popper from 'popper.js'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): dropdown.js * Bootstrap (v4.0.0-beta.3): dropdown.js
@ -11,7 +10,6 @@ import Util from './util'
*/ */
const Dropdown = (($) => { const Dropdown = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -85,7 +83,6 @@ const Dropdown = (($) => {
boundary : '(string|element)' boundary : '(string|element)'
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -93,7 +90,6 @@ const Dropdown = (($) => {
*/ */
class Dropdown { class Dropdown {
constructor(element, config) { constructor(element, config) {
this._element = element this._element = element
this._popper = null this._popper = null
@ -104,8 +100,7 @@ const Dropdown = (($) => {
this._addEventListeners() this._addEventListeners()
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
@ -119,7 +114,7 @@ const Dropdown = (($) => {
return DefaultType return DefaultType
} }
// public // Public
toggle() { toggle() {
if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) { if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) {
@ -153,10 +148,10 @@ const Dropdown = (($) => {
* Popper - https://popper.js.org * Popper - https://popper.js.org
*/ */
if (typeof Popper === 'undefined') { if (typeof Popper === 'undefined') {
throw new Error('Bootstrap dropdown require Popper.js (https://popper.js.org)') throw new TypeError('Bootstrap dropdown require Popper.js (https://popper.js.org)')
} }
let element = this._element let element = this._element
// for dropup with alignment we use the parent as popper container // For dropup with alignment we use the parent as popper container
if ($(parent).hasClass(ClassName.DROPUP)) { if ($(parent).hasClass(ClassName.DROPUP)) {
if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) { if ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) {
element = parent element = parent
@ -171,13 +166,12 @@ const Dropdown = (($) => {
this._popper = new Popper(element, this._menu, this._getPopperConfig()) this._popper = new Popper(element, this._menu, this._getPopperConfig())
} }
// If this is a touch-enabled device we add extra
// if this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children; // empty mouseover listeners to the body's immediate children;
// only needed because of broken event delegation on iOS // only needed because of broken event delegation on iOS
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
if ('ontouchstart' in document.documentElement && if ('ontouchstart' in document.documentElement &&
!$(parent).closest(Selector.NAVBAR_NAV).length) { $(parent).closest(Selector.NAVBAR_NAV).length === 0) {
$('body').children().on('mouseover', null, $.noop) $('body').children().on('mouseover', null, $.noop)
} }
@ -208,7 +202,7 @@ const Dropdown = (($) => {
} }
} }
// private // Private
_addEventListeners() { _addEventListeners() {
$(this._element).on(Event.CLICK, (event) => { $(this._element).on(Event.CLICK, (event) => {
@ -295,7 +289,7 @@ const Dropdown = (($) => {
return popperConfig return popperConfig
} }
// static // Static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -309,7 +303,7 @@ const Dropdown = (($) => {
if (typeof config === 'string') { if (typeof config === 'string') {
if (typeof data[config] === 'undefined') { if (typeof data[config] === 'undefined') {
throw new Error(`No method named "${config}"`) throw new TypeError(`No method named "${config}"`)
} }
data[config]() data[config]()
} }
@ -340,8 +334,8 @@ const Dropdown = (($) => {
} }
if (event && (event.type === 'click' && if (event && (event.type === 'click' &&
/input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) &&
&& $.contains(parent, event.target)) { $.contains(parent, event.target)) {
continue continue
} }
@ -351,7 +345,7 @@ const Dropdown = (($) => {
continue continue
} }
// if this is a touch-enabled device we remove the extra // If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support // empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) { if ('ontouchstart' in document.documentElement) {
$('body').children().off('mouseover', null, $.noop) $('body').children().off('mouseover', null, $.noop)
@ -386,8 +380,8 @@ const Dropdown = (($) => {
// - If key is other than escape // - If key is other than escape
// - If key is not up or down => not a dropdown command // - If key is not up or down => not a dropdown command
// - If trigger inside the menu => not a dropdown command // - If trigger inside the menu => not a dropdown command
if (/input|textarea/i.test(event.target.tagName) ? if (/input|textarea/i.test(event.target.tagName)
event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE && ? event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE &&
(event.which !== ARROW_DOWN_KEYCODE && event.which !== ARROW_UP_KEYCODE || (event.which !== ARROW_DOWN_KEYCODE && event.which !== ARROW_UP_KEYCODE ||
$(event.target).closest(Selector.MENU).length) : !REGEXP_KEYDOWN.test(event.which)) { $(event.target).closest(Selector.MENU).length) : !REGEXP_KEYDOWN.test(event.which)) {
return return
@ -405,7 +399,6 @@ const Dropdown = (($) => {
if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) || if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) ||
isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) { isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) {
if (event.which === ESCAPE_KEYCODE) { if (event.which === ESCAPE_KEYCODE) {
const toggle = $(parent).find(Selector.DATA_TOGGLE)[0] const toggle = $(parent).find(Selector.DATA_TOGGLE)[0]
$(toggle).trigger('focus') $(toggle).trigger('focus')
@ -417,17 +410,17 @@ const Dropdown = (($) => {
const items = $(parent).find(Selector.VISIBLE_ITEMS).get() const items = $(parent).find(Selector.VISIBLE_ITEMS).get()
if (!items.length) { if (items.length === 0) {
return return
} }
let index = items.indexOf(event.target) let index = items.indexOf(event.target)
if (event.which === ARROW_UP_KEYCODE && index > 0) { // up if (event.which === ARROW_UP_KEYCODE && index > 0) { // Up
index-- index--
} }
if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) { // down if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) { // Down
index++ index++
} }
@ -437,10 +430,8 @@ const Dropdown = (($) => {
items[index].focus() items[index].focus()
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -460,7 +451,6 @@ const Dropdown = (($) => {
e.stopPropagation() e.stopPropagation()
}) })
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -475,7 +465,6 @@ const Dropdown = (($) => {
} }
return Dropdown return Dropdown
})($, Popper) })($, Popper)
export default Dropdown export default Dropdown

2
js/src/index.js
View File

@ -20,7 +20,7 @@ import Util from './util'
(($) => { (($) => {
if (typeof $ === 'undefined') { if (typeof $ === 'undefined') {
throw new Error('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.') throw new TypeError('Bootstrap\'s JavaScript requires jQuery. jQuery must be included before Bootstrap\'s JavaScript.')
} }
const version = $.fn.jquery.split(' ')[0].split('.') const version = $.fn.jquery.split(' ')[0].split('.')

43
js/src/modal.js
View File

@ -1,7 +1,6 @@
import $ from 'jquery' import $ from 'jquery'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): modal.js * Bootstrap (v4.0.0-beta.3): modal.js
@ -10,8 +9,6 @@ import Util from './util'
*/ */
const Modal = (($) => { const Modal = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -73,7 +70,6 @@ const Modal = (($) => {
NAVBAR_TOGGLER : '.navbar-toggler' NAVBAR_TOGGLER : '.navbar-toggler'
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -81,7 +77,6 @@ const Modal = (($) => {
*/ */
class Modal { class Modal {
constructor(element, config) { constructor(element, config) {
this._config = this._getConfig(config) this._config = this._getConfig(config)
this._element = element this._element = element
@ -94,8 +89,7 @@ const Modal = (($) => {
this._scrollbarWidth = 0 this._scrollbarWidth = 0
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
@ -105,8 +99,7 @@ const Modal = (($) => {
return Default return Default
} }
// Public
// public
toggle(relatedTarget) { toggle(relatedTarget) {
return this._isShown ? this.hide() : this.show(relatedTarget) return this._isShown ? this.hide() : this.show(relatedTarget)
@ -196,7 +189,6 @@ const Modal = (($) => {
$(this._dialog).off(Event.MOUSEDOWN_DISMISS) $(this._dialog).off(Event.MOUSEDOWN_DISMISS)
if (transition) { if (transition) {
$(this._element) $(this._element)
.one(Util.TRANSITION_END, (event) => this._hideModal(event)) .one(Util.TRANSITION_END, (event) => this._hideModal(event))
.emulateTransitionEnd(TRANSITION_DURATION) .emulateTransitionEnd(TRANSITION_DURATION)
@ -224,7 +216,7 @@ const Modal = (($) => {
this._adjustDialog() this._adjustDialog()
} }
// private // Private
_getConfig(config) { _getConfig(config) {
config = { config = {
@ -241,7 +233,7 @@ const Modal = (($) => {
if (!this._element.parentNode || if (!this._element.parentNode ||
this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
// don't move modals dom position // Don't move modal's DOM position
document.body.appendChild(this._element) document.body.appendChild(this._element)
} }
@ -282,11 +274,11 @@ const Modal = (($) => {
_enforceFocus() { _enforceFocus() {
$(document) $(document)
.off(Event.FOCUSIN) // guard against infinite focus loop .off(Event.FOCUSIN) // Guard against infinite focus loop
.on(Event.FOCUSIN, (event) => { .on(Event.FOCUSIN, (event) => {
if (document !== event.target && if (document !== event.target &&
this._element !== event.target && this._element !== event.target &&
!$(this._element).has(event.target).length) { $(this._element).has(event.target).length === 0) {
this._element.focus() this._element.focus()
} }
}) })
@ -300,7 +292,6 @@ const Modal = (($) => {
this.hide() this.hide()
} }
}) })
} else if (!this._isShown) { } else if (!this._isShown) {
$(this._element).off(Event.KEYDOWN_DISMISS) $(this._element).off(Event.KEYDOWN_DISMISS)
} }
@ -334,8 +325,8 @@ const Modal = (($) => {
} }
_showBackdrop(callback) { _showBackdrop(callback) {
const animate = $(this._element).hasClass(ClassName.FADE) ? const animate = $(this._element).hasClass(ClassName.FADE)
ClassName.FADE : '' ? ClassName.FADE : ''
if (this._isShown && this._config.backdrop) { if (this._isShown && this._config.backdrop) {
const doAnimate = Util.supportsTransitionEnd() && animate const doAnimate = Util.supportsTransitionEnd() && animate
@ -382,7 +373,6 @@ const Modal = (($) => {
$(this._backdrop) $(this._backdrop)
.one(Util.TRANSITION_END, callback) .one(Util.TRANSITION_END, callback)
.emulateTransitionEnd(BACKDROP_TRANSITION_DURATION) .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION)
} else if (!this._isShown && this._backdrop) { } else if (!this._isShown && this._backdrop) {
$(this._backdrop).removeClass(ClassName.SHOW) $(this._backdrop).removeClass(ClassName.SHOW)
@ -401,13 +391,11 @@ const Modal = (($) => {
} else { } else {
callbackRemove() callbackRemove()
} }
} else if (callback) { } else if (callback) {
callback() callback()
} }
} }
// ---------------------------------------------------------------------- // ----------------------------------------------------------------------
// the following methods are used to handle overflowing modals // the following methods are used to handle overflowing modals
// todo (fat): these should probably be refactored out of modal.js // todo (fat): these should probably be refactored out of modal.js
@ -503,8 +491,7 @@ const Modal = (($) => {
return scrollbarWidth return scrollbarWidth
} }
// Static
// static
static _jQueryInterface(config, relatedTarget) { static _jQueryInterface(config, relatedTarget) {
return this.each(function () { return this.each(function () {
@ -522,7 +509,7 @@ const Modal = (($) => {
if (typeof config === 'string') { if (typeof config === 'string') {
if (typeof data[config] === 'undefined') { if (typeof data[config] === 'undefined') {
throw new Error(`No method named "${config}"`) throw new TypeError(`No method named "${config}"`)
} }
data[config](relatedTarget) data[config](relatedTarget)
} else if (_config.show) { } else if (_config.show) {
@ -530,10 +517,8 @@ const Modal = (($) => {
} }
}) })
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -548,8 +533,8 @@ const Modal = (($) => {
target = $(selector)[0] target = $(selector)[0]
} }
const config = $(target).data(DATA_KEY) ? const config = $(target).data(DATA_KEY)
'toggle' : { ? 'toggle' : {
...$(target).data(), ...$(target).data(),
...$(this).data() ...$(this).data()
} }
@ -560,7 +545,7 @@ const Modal = (($) => {
const $target = $(target).one(Event.SHOW, (showEvent) => { const $target = $(target).one(Event.SHOW, (showEvent) => {
if (showEvent.isDefaultPrevented()) { if (showEvent.isDefaultPrevented()) {
// only register focus restorer if modal will actually get shown // Only register focus restorer if modal will actually get shown
return return
} }
@ -574,7 +559,6 @@ const Modal = (($) => {
Modal._jQueryInterface.call($(target), config, this) Modal._jQueryInterface.call($(target), config, this)
}) })
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -589,7 +573,6 @@ const Modal = (($) => {
} }
return Modal return Modal
})($) })($)
export default Modal export default Modal

34
js/src/popover.js
View File

@ -1,7 +1,6 @@
import $ from 'jquery' import $ from 'jquery'
import Tooltip from './tooltip' import Tooltip from './tooltip'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): popover.js * Bootstrap (v4.0.0-beta.3): popover.js
@ -10,8 +9,6 @@ import Tooltip from './tooltip'
*/ */
const Popover = (($) => { const Popover = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -31,10 +28,10 @@ const Popover = (($) => {
placement : 'right', placement : 'right',
trigger : 'click', trigger : 'click',
content : '', content : '',
template : '<div class="popover" role="tooltip">' template : '<div class="popover" role="tooltip">' +
+ '<div class="arrow"></div>' '<div class="arrow"></div>' +
+ '<h3 class="popover-header"></h3>' '<h3 class="popover-header"></h3>' +
+ '<div class="popover-body"></div></div>' '<div class="popover-body"></div></div>'
} }
const DefaultType = { const DefaultType = {
@ -65,7 +62,6 @@ const Popover = (($) => {
MOUSELEAVE : `mouseleave${EVENT_KEY}` MOUSELEAVE : `mouseleave${EVENT_KEY}`
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -73,9 +69,7 @@ const Popover = (($) => {
*/ */
class Popover extends Tooltip { class Popover extends Tooltip {
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
@ -105,8 +99,7 @@ const Popover = (($) => {
return DefaultType return DefaultType
} }
// Overrides
// overrides
isWithContent() { isWithContent() {
return this.getTitle() || this._getContent() return this.getTitle() || this._getContent()
@ -124,7 +117,7 @@ const Popover = (($) => {
setContent() { setContent() {
const $tip = $(this.getTipElement()) const $tip = $(this.getTipElement())
// we use append for html objects to maintain js events // We use append for html objects to maintain js events
this.setElementContent($tip.find(Selector.TITLE), this.getTitle()) this.setElementContent($tip.find(Selector.TITLE), this.getTitle())
let content = this._getContent() let content = this._getContent()
if (typeof content === 'function') { if (typeof content === 'function') {
@ -135,11 +128,11 @@ const Popover = (($) => {
$tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`) $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`)
} }
// private // Private
_getContent() { _getContent() {
return this.element.getAttribute('data-content') return this.element.getAttribute('data-content') ||
|| this.config.content this.config.content
} }
_cleanTipClass() { _cleanTipClass() {
@ -150,8 +143,7 @@ const Popover = (($) => {
} }
} }
// Static
// static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -169,7 +161,7 @@ const Popover = (($) => {
if (typeof config === 'string') { if (typeof config === 'string') {
if (typeof data[config] === 'undefined') { if (typeof data[config] === 'undefined') {
throw new Error(`No method named "${config}"`) throw new TypeError(`No method named "${config}"`)
} }
data[config]() data[config]()
} }
@ -177,7 +169,6 @@ const Popover = (($) => {
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -192,7 +183,6 @@ const Popover = (($) => {
} }
return Popover return Popover
})($) })($)
export default Popover export default Popover

64
js/src/scrollspy.js
View File

@ -1,7 +1,6 @@
import $ from 'jquery' import $ from 'jquery'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): scrollspy.js * Bootstrap (v4.0.0-beta.3): scrollspy.js
@ -10,8 +9,6 @@ import Util from './util'
*/ */
const ScrollSpy = (($) => { const ScrollSpy = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -66,7 +63,6 @@ const ScrollSpy = (($) => {
POSITION : 'position' POSITION : 'position'
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -74,14 +70,13 @@ const ScrollSpy = (($) => {
*/ */
class ScrollSpy { class ScrollSpy {
constructor(element, config) { constructor(element, config) {
this._element = element this._element = element
this._scrollElement = element.tagName === 'BODY' ? window : element this._scrollElement = element.tagName === 'BODY' ? window : element
this._config = this._getConfig(config) this._config = this._getConfig(config)
this._selector = `${this._config.target} ${Selector.NAV_LINKS},` this._selector = `${this._config.target} ${Selector.NAV_LINKS},` +
+ `${this._config.target} ${Selector.LIST_ITEMS},` `${this._config.target} ${Selector.LIST_ITEMS},` +
+ `${this._config.target} ${Selector.DROPDOWN_ITEMS}` `${this._config.target} ${Selector.DROPDOWN_ITEMS}`
this._offsets = [] this._offsets = []
this._targets = [] this._targets = []
this._activeTarget = null this._activeTarget = null
@ -93,8 +88,7 @@ const ScrollSpy = (($) => {
this._process() this._process()
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
@ -104,18 +98,17 @@ const ScrollSpy = (($) => {
return Default return Default
} }
// Public
// public
refresh() { refresh() {
const autoMethod = this._scrollElement !== this._scrollElement.window ? const autoMethod = this._scrollElement === this._scrollElement.window
OffsetMethod.POSITION : OffsetMethod.OFFSET ? OffsetMethod.OFFSET : OffsetMethod.POSITION
const offsetMethod = this._config.method === 'auto' ? const offsetMethod = this._config.method === 'auto'
autoMethod : this._config.method ? autoMethod : this._config.method
const offsetBase = offsetMethod === OffsetMethod.POSITION ? const offsetBase = offsetMethod === OffsetMethod.POSITION
this._getScrollTop() : 0 ? this._getScrollTop() : 0
this._offsets = [] this._offsets = []
this._targets = [] this._targets = []
@ -136,7 +129,7 @@ const ScrollSpy = (($) => {
if (target) { if (target) {
const targetBCR = target.getBoundingClientRect() const targetBCR = target.getBoundingClientRect()
if (targetBCR.width || targetBCR.height) { if (targetBCR.width || targetBCR.height) {
// todo (fat): remove sketch reliance on jQuery position/offset // TODO (fat): remove sketch reliance on jQuery position/offset
return [ return [
$(target)[offsetMethod]().top + offsetBase, $(target)[offsetMethod]().top + offsetBase,
targetSelector targetSelector
@ -167,8 +160,7 @@ const ScrollSpy = (($) => {
this._scrollHeight = null this._scrollHeight = null
} }
// Private
// private
_getConfig(config) { _getConfig(config) {
config = { config = {
@ -191,8 +183,8 @@ const ScrollSpy = (($) => {
} }
_getScrollTop() { _getScrollTop() {
return this._scrollElement === window ? return this._scrollElement === window
this._scrollElement.pageYOffset : this._scrollElement.scrollTop ? this._scrollElement.pageYOffset : this._scrollElement.scrollTop
} }
_getScrollHeight() { _getScrollHeight() {
@ -203,16 +195,16 @@ const ScrollSpy = (($) => {
} }
_getOffsetHeight() { _getOffsetHeight() {
return this._scrollElement === window ? return this._scrollElement === window
window.innerHeight : this._scrollElement.getBoundingClientRect().height ? window.innerHeight : this._scrollElement.getBoundingClientRect().height
} }
_process() { _process() {
const scrollTop = this._getScrollTop() + this._config.offset const scrollTop = this._getScrollTop() + this._config.offset
const scrollHeight = this._getScrollHeight() const scrollHeight = this._getScrollHeight()
const maxScroll = this._config.offset const maxScroll = this._config.offset +
+ scrollHeight scrollHeight -
- this._getOffsetHeight() this._getOffsetHeight()
if (this._scrollHeight !== scrollHeight) { if (this._scrollHeight !== scrollHeight) {
this.refresh() this.refresh()
@ -234,9 +226,9 @@ const ScrollSpy = (($) => {
} }
for (let i = this._offsets.length; i--;) { for (let i = this._offsets.length; i--;) {
const isActiveTarget = this._activeTarget !== this._targets[i] const isActiveTarget = this._activeTarget !== this._targets[i] &&
&& scrollTop >= this._offsets[i] scrollTop >= this._offsets[i] &&
&& (typeof this._offsets[i + 1] === 'undefined' || (typeof this._offsets[i + 1] === 'undefined' ||
scrollTop < this._offsets[i + 1]) scrollTop < this._offsets[i + 1])
if (isActiveTarget) { if (isActiveTarget) {
@ -281,8 +273,7 @@ const ScrollSpy = (($) => {
$(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE) $(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE)
} }
// Static
// static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -296,17 +287,14 @@ const ScrollSpy = (($) => {
if (typeof config === 'string') { if (typeof config === 'string') {
if (typeof data[config] === 'undefined') { if (typeof data[config] === 'undefined') {
throw new Error(`No method named "${config}"`) throw new TypeError(`No method named "${config}"`)
} }
data[config]() data[config]()
} }
}) })
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -322,7 +310,6 @@ const ScrollSpy = (($) => {
} }
}) })
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -337,7 +324,6 @@ const ScrollSpy = (($) => {
} }
return ScrollSpy return ScrollSpy
})($) })($)
export default ScrollSpy export default ScrollSpy

30
js/src/tab.js
View File

@ -1,7 +1,6 @@
import $ from 'jquery' import $ from 'jquery'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): tab.js * Bootstrap (v4.0.0-beta.3): tab.js
@ -10,8 +9,6 @@ import Util from './util'
*/ */
const Tab = (($) => { const Tab = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -52,7 +49,6 @@ const Tab = (($) => {
DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Class Definition * Class Definition
@ -60,20 +56,17 @@ const Tab = (($) => {
*/ */
class Tab { class Tab {
constructor(element) { constructor(element) {
this._element = element this._element = element
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
} }
// Public
// public
show() { show() {
if (this._element.parentNode && if (this._element.parentNode &&
@ -147,8 +140,7 @@ const Tab = (($) => {
this._element = null this._element = null
} }
// Private
// private
_activate(element, container, callback) { _activate(element, container, callback) {
let activeElements let activeElements
@ -159,9 +151,9 @@ const Tab = (($) => {
} }
const active = activeElements[0] const active = activeElements[0]
const isTransitioning = callback const isTransitioning = callback &&
&& Util.supportsTransitionEnd() Util.supportsTransitionEnd() &&
&& (active && $(active).hasClass(ClassName.FADE)) (active && $(active).hasClass(ClassName.FADE))
const complete = () => this._transitionComplete( const complete = () => this._transitionComplete(
element, element,
@ -205,7 +197,6 @@ const Tab = (($) => {
if (element.parentNode && if (element.parentNode &&
$(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0] const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]
if (dropdownElement) { if (dropdownElement) {
$(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE) $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE)
@ -219,8 +210,7 @@ const Tab = (($) => {
} }
} }
// Static
// static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -234,16 +224,14 @@ const Tab = (($) => {
if (typeof config === 'string') { if (typeof config === 'string') {
if (typeof data[config] === 'undefined') { if (typeof data[config] === 'undefined') {
throw new Error(`No method named "${config}"`) throw new TypeError(`No method named "${config}"`)
} }
data[config]() data[config]()
} }
}) })
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Data Api implementation * Data Api implementation
@ -256,7 +244,6 @@ const Tab = (($) => {
Tab._jQueryInterface.call($(this), 'show') Tab._jQueryInterface.call($(this), 'show')
}) })
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -271,7 +258,6 @@ const Tab = (($) => {
} }
return Tab return Tab
})($) })($)
export default Tab export default Tab

67
js/src/tooltip.js
View File

@ -2,7 +2,6 @@ import $ from 'jquery'
import Popper from 'popper.js' import Popper from 'popper.js'
import Util from './util' import Util from './util'
/** /**
* -------------------------------------------------------------------------- * --------------------------------------------------------------------------
* Bootstrap (v4.0.0-beta.3): tooltip.js * Bootstrap (v4.0.0-beta.3): tooltip.js
@ -11,7 +10,6 @@ import Util from './util'
*/ */
const Tooltip = (($) => { const Tooltip = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Constants * Constants
@ -52,9 +50,9 @@ const Tooltip = (($) => {
const Default = { const Default = {
animation : true, animation : true,
template : '<div class="tooltip" role="tooltip">' template : '<div class="tooltip" role="tooltip">' +
+ '<div class="arrow"></div>' '<div class="arrow"></div>' +
+ '<div class="tooltip-inner"></div></div>', '<div class="tooltip-inner"></div></div>',
trigger : 'hover focus', trigger : 'hover focus',
title : '', title : '',
delay : 0, delay : 0,
@ -111,14 +109,13 @@ const Tooltip = (($) => {
*/ */
class Tooltip { class Tooltip {
constructor(element, config) { constructor(element, config) {
/** /**
* Check for Popper dependency * Check for Popper dependency
* Popper - https://popper.js.org * Popper - https://popper.js.org
*/ */
if (typeof Popper === 'undefined') { if (typeof Popper === 'undefined') {
throw new Error('Bootstrap tooltips require Popper.js (https://popper.js.org)') throw new TypeError('Bootstrap tooltips require Popper.js (https://popper.js.org)')
} }
// private // private
@ -128,17 +125,15 @@ const Tooltip = (($) => {
this._activeTrigger = {} this._activeTrigger = {}
this._popper = null this._popper = null
// protected // Protected
this.element = element this.element = element
this.config = this._getConfig(config) this.config = this._getConfig(config)
this.tip = null this.tip = null
this._setListeners() this._setListeners()
} }
// Getters
// getters
static get VERSION() { static get VERSION() {
return VERSION return VERSION
@ -168,8 +163,7 @@ const Tooltip = (($) => {
return DefaultType return DefaultType
} }
// Public
// public
enable() { enable() {
this._isEnabled = true this._isEnabled = true
@ -207,9 +201,7 @@ const Tooltip = (($) => {
} else { } else {
context._leave(null, context) context._leave(null, context)
} }
} else { } else {
if ($(this.getTipElement()).hasClass(ClassName.SHOW)) { if ($(this.getTipElement()).hasClass(ClassName.SHOW)) {
this._leave(null, this) this._leave(null, this)
return return
@ -275,9 +267,9 @@ const Tooltip = (($) => {
$(tip).addClass(ClassName.FADE) $(tip).addClass(ClassName.FADE)
} }
const placement = typeof this.config.placement === 'function' ? const placement = typeof this.config.placement === 'function'
this.config.placement.call(this, tip, this.element) : ? this.config.placement.call(this, tip, this.element)
this.config.placement : this.config.placement
const attachment = this._getAttachment(placement) const attachment = this._getAttachment(placement)
this.addAttachmentClass(attachment) this.addAttachmentClass(attachment)
@ -320,7 +312,7 @@ const Tooltip = (($) => {
$(tip).addClass(ClassName.SHOW) $(tip).addClass(ClassName.SHOW)
// if this is a touch-enabled device we add extra // If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children; // empty mouseover listeners to the body's immediate children;
// only needed because of broken event delegation on iOS // only needed because of broken event delegation on iOS
// https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
@ -380,7 +372,7 @@ const Tooltip = (($) => {
$(tip).removeClass(ClassName.SHOW) $(tip).removeClass(ClassName.SHOW)
// if this is a touch-enabled device we remove the extra // If this is a touch-enabled device we remove the extra
// empty mouseover listeners we added for iOS support // empty mouseover listeners we added for iOS support
if ('ontouchstart' in document.documentElement) { if ('ontouchstart' in document.documentElement) {
$('body').children().off('mouseover', null, $.noop) $('body').children().off('mouseover', null, $.noop)
@ -392,17 +384,14 @@ const Tooltip = (($) => {
if (Util.supportsTransitionEnd() && if (Util.supportsTransitionEnd() &&
$(this.tip).hasClass(ClassName.FADE)) { $(this.tip).hasClass(ClassName.FADE)) {
$(tip) $(tip)
.one(Util.TRANSITION_END, complete) .one(Util.TRANSITION_END, complete)
.emulateTransitionEnd(TRANSITION_DURATION) .emulateTransitionEnd(TRANSITION_DURATION)
} else { } else {
complete() complete()
} }
this._hoverState = '' this._hoverState = ''
} }
update() { update() {
@ -411,7 +400,7 @@ const Tooltip = (($) => {
} }
} }
// protected // Protected
isWithContent() { isWithContent() {
return Boolean(this.getTitle()) return Boolean(this.getTitle())
@ -435,7 +424,7 @@ const Tooltip = (($) => {
setElementContent($element, content) { setElementContent($element, content) {
const html = this.config.html const html = this.config.html
if (typeof content === 'object' && (content.nodeType || content.jquery)) { if (typeof content === 'object' && (content.nodeType || content.jquery)) {
// content is a DOM node or a jQuery // Content is a DOM node or a jQuery
if (html) { if (html) {
if (!$(content).parent().is($element)) { if (!$(content).parent().is($element)) {
$element.empty().append(content) $element.empty().append(content)
@ -452,16 +441,15 @@ const Tooltip = (($) => {
let title = this.element.getAttribute('data-original-title') let title = this.element.getAttribute('data-original-title')
if (!title) { if (!title) {
title = typeof this.config.title === 'function' ? title = typeof this.config.title === 'function'
this.config.title.call(this.element) : ? this.config.title.call(this.element)
this.config.title : this.config.title
} }
return title return title
} }
// Private
// private
_getAttachment(placement) { _getAttachment(placement) {
return AttachmentMap[placement.toUpperCase()] return AttachmentMap[placement.toUpperCase()]
@ -477,14 +465,13 @@ const Tooltip = (($) => {
this.config.selector, this.config.selector,
(event) => this.toggle(event) (event) => this.toggle(event)
) )
} else if (trigger !== Trigger.MANUAL) { } else if (trigger !== Trigger.MANUAL) {
const eventIn = trigger === Trigger.HOVER ? const eventIn = trigger === Trigger.HOVER
this.constructor.Event.MOUSEENTER : ? this.constructor.Event.MOUSEENTER
this.constructor.Event.FOCUSIN : this.constructor.Event.FOCUSIN
const eventOut = trigger === Trigger.HOVER ? const eventOut = trigger === Trigger.HOVER
this.constructor.Event.MOUSELEAVE : ? this.constructor.Event.MOUSELEAVE
this.constructor.Event.FOCUSOUT : this.constructor.Event.FOCUSOUT
$(this.element) $(this.element)
.on( .on(
@ -689,7 +676,7 @@ const Tooltip = (($) => {
this.config.animation = initConfigAnimation this.config.animation = initConfigAnimation
} }
// static // Static
static _jQueryInterface(config) { static _jQueryInterface(config) {
return this.each(function () { return this.each(function () {
@ -707,7 +694,7 @@ const Tooltip = (($) => {
if (typeof config === 'string') { if (typeof config === 'string') {
if (typeof data[config] === 'undefined') { if (typeof data[config] === 'undefined') {
throw new Error(`No method named "${config}"`) throw new TypeError(`No method named "${config}"`)
} }
data[config]() data[config]()
} }
@ -715,7 +702,6 @@ const Tooltip = (($) => {
} }
} }
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* jQuery * jQuery
@ -730,7 +716,6 @@ const Tooltip = (($) => {
} }
return Tooltip return Tooltip
})($, Popper) })($, Popper)
export default Tooltip export default Tooltip

19
js/src/util.js
View File

@ -8,8 +8,6 @@ import $ from 'jquery'
*/ */
const Util = (($) => { const Util = (($) => {
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Private TransitionEnd Helpers * Private TransitionEnd Helpers
@ -20,7 +18,7 @@ const Util = (($) => {
const MAX_UID = 1000000 const MAX_UID = 1000000
// shoutout AngusCroll (https://goo.gl/pxwQGp) // Shoutout AngusCroll (https://goo.gl/pxwQGp)
function toType(obj) { function toType(obj) {
return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
} }
@ -75,10 +73,10 @@ const Util = (($) => {
} }
function escapeId(selector) { function escapeId(selector) {
// we escape IDs in case of special selectors (selector = '#myId:something') // We escape IDs in case of special selectors (selector = '#myId:something')
// $.escapeSelector does not exist in jQuery < 3 // $.escapeSelector does not exist in jQuery < 3
selector = typeof $.escapeSelector === 'function' ? $.escapeSelector(selector).substr(1) : selector = typeof $.escapeSelector === 'function' ? $.escapeSelector(selector).substr(1)
selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1') : selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1')
return selector return selector
} }
@ -107,7 +105,7 @@ const Util = (($) => {
selector = element.getAttribute('href') || '' selector = element.getAttribute('href') || ''
} }
// if it's an ID // If it's an ID
if (selector.charAt(0) === '#') { if (selector.charAt(0) === '#') {
selector = escapeId(selector) selector = escapeId(selector)
} }
@ -115,7 +113,7 @@ const Util = (($) => {
try { try {
const $selector = $(document).find(selector) const $selector = $(document).find(selector)
return $selector.length > 0 ? selector : null return $selector.length > 0 ? selector : null
} catch (error) { } catch (err) {
return null return null
} }
}, },
@ -141,8 +139,8 @@ const Util = (($) => {
if (Object.prototype.hasOwnProperty.call(configTypes, property)) { if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
const expectedTypes = configTypes[property] const expectedTypes = configTypes[property]
const value = config[property] const value = config[property]
const valueType = value && Util.isElement(value) ? const valueType = value && Util.isElement(value)
'element' : toType(value) ? 'element' : toType(value)
if (!new RegExp(expectedTypes).test(valueType)) { if (!new RegExp(expectedTypes).test(valueType)) {
throw new Error( throw new Error(
@ -158,7 +156,6 @@ const Util = (($) => {
setTransitionEndSupport() setTransitionEndSupport()
return Util return Util
})($) })($)
export default Util export default Util

17
js/tests/unit/alert.js
View File

@ -34,10 +34,10 @@ $(function () {
QUnit.test('should fade element out on clicking .close', function (assert) { QUnit.test('should fade element out on clicking .close', function (assert) {
assert.expect(1) assert.expect(1)
var alertHTML = '<div class="alert alert-danger fade show">' var alertHTML = '<div class="alert alert-danger fade show">' +
+ '<a class="close" href="#" data-dismiss="alert">×</a>' '<a class="close" href="#" data-dismiss="alert">×</a>' +
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
+ '</div>' '</div>'
var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture')) var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture'))
@ -48,10 +48,10 @@ $(function () {
QUnit.test('should remove element when clicking .close', function (assert) { QUnit.test('should remove element when clicking .close', function (assert) {
assert.expect(2) assert.expect(2)
var alertHTML = '<div class="alert alert-danger fade show">' var alertHTML = '<div class="alert alert-danger fade show">' +
+ '<a class="close" href="#" data-dismiss="alert">×</a>' '<a class="close" href="#" data-dismiss="alert">×</a>' +
+ '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' +
+ '</div>' '</div>'
var $alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert() var $alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert()
assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom') assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom')
@ -75,5 +75,4 @@ $(function () {
}) })
.bootstrapAlert('close') .bootstrapAlert('close')
}) })
}) })

53
js/tests/unit/button.js
View File

@ -87,11 +87,11 @@ $(function () {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var groupHTML = '<div class="btn-group" data-toggle="buttons">' var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
+ '<label class="btn btn-primary">' '<label class="btn btn-primary">' +
+ '<input type="radio" id="radio" autocomplete="off">Radio' '<input type="radio" id="radio" autocomplete="off">Radio' +
+ '</label>' '</label>' +
+ '</div>' '</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture') var $group = $(groupHTML).appendTo('#qunit-fixture')
$group.find('input').on('change', function (e) { $group.find('input').on('change', function (e) {
@ -105,17 +105,17 @@ $(function () {
QUnit.test('should check for closest matching toggle', function (assert) { QUnit.test('should check for closest matching toggle', function (assert) {
assert.expect(12) assert.expect(12)
var groupHTML = '<div class="btn-group" data-toggle="buttons">' var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
+ '<label class="btn btn-primary active">' '<label class="btn btn-primary active">' +
+ '<input type="radio" name="options" id="option1" checked="true"> Option 1' '<input type="radio" name="options" id="option1" checked="true"> Option 1' +
+ '</label>' '</label>' +
+ '<label class="btn btn-primary">' '<label class="btn btn-primary">' +
+ '<input type="radio" name="options" id="option2"> Option 2' '<input type="radio" name="options" id="option2"> Option 2' +
+ '</label>' '</label>' +
+ '<label class="btn btn-primary">' '<label class="btn btn-primary">' +
+ '<input type="radio" name="options" id="option3"> Option 3' '<input type="radio" name="options" id="option3"> Option 3' +
+ '</label>' '</label>' +
+ '</div>' '</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture') var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn1 = $group.children().eq(0) var $btn1 = $group.children().eq(0)
@ -131,7 +131,7 @@ $(function () {
assert.ok($btn2.hasClass('active'), 'btn2 has active class') assert.ok($btn2.hasClass('active'), 'btn2 has active class')
assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked') assert.ok($btn2.find('input').prop('checked'), 'btn2 is checked')
$btn2.find('input').trigger('click') // clicking an already checked radio should not un-check it $btn2.find('input').trigger('click') // Clicking an already checked radio should not un-check it
assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class') assert.ok(!$btn1.hasClass('active'), 'btn1 does not have active class')
assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked') assert.ok(!$btn1.find('input').prop('checked'), 'btn1 is not checked')
assert.ok($btn2.hasClass('active'), 'btn2 has active class') assert.ok($btn2.hasClass('active'), 'btn2 has active class')
@ -140,10 +140,10 @@ $(function () {
QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) { QUnit.test('should not add aria-pressed on labels for radio/checkbox inputs in a data-toggle="buttons" group', function (assert) {
assert.expect(2) assert.expect(2)
var groupHTML = '<div class="btn-group" data-toggle="buttons">' var groupHTML = '<div class="btn-group" data-toggle="buttons">' +
+ '<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>' '<label class="btn btn-primary"><input type="checkbox" autocomplete="off"> Checkbox</label>' +
+ '<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>' '<label class="btn btn-primary"><input type="radio" name="options" autocomplete="off"> Radio</label>' +
+ '</div>' '</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture') var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn1 = $group.children().eq(0) var $btn1 = $group.children().eq(0)
@ -158,11 +158,11 @@ $(function () {
QUnit.test('should handle disabled attribute on non-button elements', function (assert) { QUnit.test('should handle disabled attribute on non-button elements', function (assert) {
assert.expect(2) assert.expect(2)
var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' +
+ '<label class="btn btn-danger disabled" aria-disabled="true" disabled>' '<label class="btn btn-danger disabled" aria-disabled="true" disabled>' +
+ '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' +
+ '</label>' '</label>' +
+ '</div>' '</div>'
var $group = $(groupHTML).appendTo('#qunit-fixture') var $group = $(groupHTML).appendTo('#qunit-fixture')
var $btn = $group.children().eq(0) var $btn = $group.children().eq(0)
@ -172,5 +172,4 @@ $(function () {
assert.ok($btn.is(':not(.active)'), 'button did not become active') assert.ok($btn.is(':not(.active)'), 'button did not become active')
assert.ok(!$input.is(':checked'), 'checkbox did not get checked') assert.ok(!$input.is(':checked'), 'checkbox did not get checked')
}) })
}) })

898
js/tests/unit/carousel.js
View File

File diff suppressed because it is too large Load Diff

153
js/tests/unit/collapse.js
View File

@ -30,8 +30,7 @@ $(function () {
$el.bootstrapCollapse() $el.bootstrapCollapse()
try { try {
$el.bootstrapCollapse('noMethod') $el.bootstrapCollapse('noMethod')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"') assert.strictEqual(err.message, 'No method named "noMethod"')
} }
}) })
@ -52,7 +51,6 @@ $(function () {
assert.ok(!/height/i.test($el.attr('style')), 'has height reset') assert.ok(!/height/i.test($el.attr('style')), 'has height reset')
}) })
QUnit.test('should show multiple collapsed elements', function (assert) { QUnit.test('should show multiple collapsed elements', function (assert) {
assert.expect(4) assert.expect(4)
var done = assert.async() var done = assert.async()
@ -279,11 +277,11 @@ $(function () {
assert.expect(3) assert.expect(3)
var done = assert.async() var done = assert.async()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div id="accordion">' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '</div>' '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" />').appendTo($groups.eq(0)) var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" />').appendTo($groups.eq(0))
@ -313,11 +311,11 @@ $(function () {
assert.expect(3) assert.expect(3)
var done = assert.async() var done = assert.async()
var accordionHTML = '<div class="accordion">' var accordionHTML = '<div class="accordion">' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '</div>' '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0)) var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0))
@ -415,11 +413,11 @@ $(function () {
assert.expect(3) assert.expect(3)
var done = assert.async() var done = assert.async()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div id="accordion">' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '</div>' '</div>'
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
var $target1 = $('<a role="button" data-toggle="collapse" aria-expanded="true" href="#body1"/>').appendTo($groups.eq(0)) var $target1 = $('<a role="button" data-toggle="collapse" aria-expanded="true" href="#body1"/>').appendTo($groups.eq(0))
@ -449,10 +447,10 @@ $(function () {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div id="accordion">' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '<div class="card"/>' '<div class="card"/>' +
+ '</div>' '</div>'
var showFired = false var showFired = false
var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card')
@ -514,16 +512,16 @@ $(function () {
QUnit.test('should allow accordion to use children other than card', function (assert) { QUnit.test('should allow accordion to use children other than card', function (assert) {
assert.expect(4) assert.expect(4)
var done = assert.async() var done = assert.async()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div id="accordion">' +
+ '<div class="item">' '<div class="item">' +
+ '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' +
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' +
+ '</div>' '</div>' +
+ '<div class="item">' '<div class="item">' +
+ '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' +
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(accordionHTML).appendTo('#qunit-fixture') $(accordionHTML).appendTo('#qunit-fixture')
var $trigger = $('#linkTrigger') var $trigger = $('#linkTrigger')
@ -546,22 +544,22 @@ $(function () {
QUnit.test('should allow accordion to contain nested elements', function (assert) { QUnit.test('should allow accordion to contain nested elements', function (assert) {
assert.expect(4) assert.expect(4)
var done = assert.async() var done = assert.async()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div id="accordion">' +
+ '<div class="row">' '<div class="row">' +
+ '<div class="col-lg-6">' '<div class="col-lg-6">' +
+ '<div class="item">' '<div class="item">' +
+ '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' +
+ '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '<div class="col-lg-6">' '<div class="col-lg-6">' +
+ '<div class="item">' '<div class="item">' +
+ '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' +
+ '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(accordionHTML).appendTo('#qunit-fixture') $(accordionHTML).appendTo('#qunit-fixture')
var $trigger = $('#linkTrigger') var $trigger = $('#linkTrigger')
@ -584,14 +582,14 @@ $(function () {
QUnit.test('should allow accordion to target multiple elements', function (assert) { QUnit.test('should allow accordion to target multiple elements', function (assert) {
assert.expect(8) assert.expect(8)
var done = assert.async() var done = assert.async()
var accordionHTML = '<div id="accordion">' var accordionHTML = '<div id="accordion">' +
+ '<a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>' '<a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>' +
+ '<a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>' '<a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>' +
+ '<div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' '<div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' +
+ '<div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' '<div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' +
+ '<div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' '<div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' +
+ '<div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' '<div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' +
+ '</div>' '</div>'
$(accordionHTML).appendTo('#qunit-fixture') $(accordionHTML).appendTo('#qunit-fixture')
var $trigger = $('#linkTriggerOne') var $trigger = $('#linkTriggerOne')
@ -659,24 +657,24 @@ $(function () {
QUnit.test('should collapse accordion children but not nested accordion children', function (assert) { QUnit.test('should collapse accordion children but not nested accordion children', function (assert) {
assert.expect(9) assert.expect(9)
var done = assert.async() var done = assert.async()
$('<div id="accordion">' $('<div id="accordion">' +
+ '<div class="item">' '<div class="item">' +
+ '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' +
+ '<div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' '<div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' +
+ '<div id="nestedAccordion">' '<div id="nestedAccordion">' +
+ '<div class="item">' '<div class="item">' +
+ '<a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>' '<a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>' +
+ '<div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' '<div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '<div class="item">' '<div class="item">' +
+ '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' +
+ '<div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>' '<div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>' +
+ '</div>' '</div>' +
+ '</div>').appendTo('#qunit-fixture') '</div>').appendTo('#qunit-fixture')
var $trigger = $('#linkTrigger') var $trigger = $('#linkTrigger')
var $triggerTwo = $('#linkTriggerTwo') var $triggerTwo = $('#linkTriggerTwo')
var $nestedTrigger = $('#nestedLinkTrigger') var $nestedTrigger = $('#nestedLinkTrigger')
@ -684,7 +682,6 @@ $(function () {
var $collapseTwo = $('#collapseTwo') var $collapseTwo = $('#collapseTwo')
var $nestedCollapseOne = $('#nestedCollapseOne') var $nestedCollapseOne = $('#nestedCollapseOne')
$collapseOne.one('shown.bs.collapse', function () { $collapseOne.one('shown.bs.collapse', function () {
assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown') assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown')
assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown') assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown')
@ -828,8 +825,7 @@ $(function () {
parent: $('.my-collapse') parent: $('.my-collapse')
}) })
assert.ok(true, 'collapse correctly created') assert.ok(true, 'collapse correctly created')
} } catch (err) {
catch (e) {
assert.ok(false, 'collapse not created') assert.ok(false, 'collapse not created')
} }
}) })
@ -850,8 +846,7 @@ $(function () {
parent: $('.my-collapse')[0] parent: $('.my-collapse')[0]
}) })
assert.ok(true, 'collapse correctly created') assert.ok(true, 'collapse correctly created')
} } catch (err) {
catch (e) {
assert.ok(false, 'collapse not created') assert.ok(false, 'collapse not created')
} }
}) })

612
js/tests/unit/dropdown.js
View File

@ -30,8 +30,7 @@ $(function () {
$el.bootstrapDropdown() $el.bootstrapDropdown()
try { try {
$el.bootstrapDropdown('noMethod') $el.bootstrapDropdown('noMethod')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"') assert.strictEqual(err.message, 'No method named "noMethod"')
} }
}) })
@ -47,17 +46,17 @@ $(function () {
QUnit.test('should not open dropdown if target is disabled via attribute', function (assert) { QUnit.test('should not open dropdown if target is disabled via attribute', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(dropdownHTML).appendTo('#qunit-fixture') $(dropdownHTML).appendTo('#qunit-fixture')
var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown() var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown.on('click', function () { $dropdown.on('click', function () {
@ -70,15 +69,15 @@ $(function () {
QUnit.test('should not add class position-static to dropdown if boundary not set', function (assert) { QUnit.test('should not add class position-static to dropdown if boundary not set', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
@ -92,15 +91,15 @@ $(function () {
QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) { QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
@ -114,17 +113,17 @@ $(function () {
QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) { QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -141,17 +140,17 @@ $(function () {
QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) { QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -171,17 +170,17 @@ $(function () {
QUnit.test('should not open dropdown if target is disabled via class', function (assert) { QUnit.test('should not open dropdown if target is disabled via class', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(dropdownHTML).appendTo('#qunit-fixture') $(dropdownHTML).appendTo('#qunit-fixture')
var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown() var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown()
@ -195,17 +194,17 @@ $(function () {
QUnit.test('should add class show to menu if clicked', function (assert) { QUnit.test('should add class show to menu if clicked', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
@ -219,17 +218,17 @@ $(function () {
QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) { QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown()
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
@ -240,21 +239,20 @@ $(function () {
$dropdown.trigger('click') $dropdown.trigger('click')
}) })
QUnit.test('should remove "show" class if body is clicked', function (assert) { QUnit.test('should remove "show" class if body is clicked', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -275,17 +273,17 @@ $(function () {
QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) { QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="dropdown-divider"/>' '<div class="dropdown-divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -307,21 +305,21 @@ $(function () {
QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) { QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) {
assert.expect(7) assert.expect(7)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="nav">' var dropdownHTML = '<div class="nav">' +
+ '<div class="dropdown" id="testmenu">' '<div class="dropdown" id="testmenu">' +
+ '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#sub1">Submenu 1</a>' '<a class="dropdown-item" href="#sub1">Submenu 1</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '<div class="btn-group">' '<div class="btn-group">' +
+ '<button class="btn">Actions</button>' '<button class="btn">Actions</button>' +
+ '<button class="btn dropdown-toggle" data-toggle="dropdown"></button>' '<button class="btn dropdown-toggle" data-toggle="dropdown"></button>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Action 1</a>' '<a class="dropdown-item" href="#">Action 1</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]') var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
var $first = $dropdowns.first() var $first = $dropdowns.first()
var $last = $dropdowns.last() var $last = $dropdowns.last()
@ -353,21 +351,21 @@ $(function () {
QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) { QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) {
assert.expect(7) assert.expect(7)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="nav">' var dropdownHTML = '<div class="nav">' +
+ '<div class="dropdown" id="testmenu">' '<div class="dropdown" id="testmenu">' +
+ '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#sub1">Submenu 1</a>' '<a class="dropdown-item" href="#sub1">Submenu 1</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '<div class="btn-group">' '<div class="btn-group">' +
+ '<button class="btn">Actions</button>' '<button class="btn">Actions</button>' +
+ '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>' '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Action 1</a>' '<a class="dropdown-item" href="#">Action 1</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]') var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]')
var $first = $dropdowns.first() var $first = $dropdowns.first()
var $last = $dropdowns.last() var $last = $dropdowns.last()
@ -402,17 +400,17 @@ $(function () {
QUnit.test('should fire show and hide event', function (assert) { QUnit.test('should fire show and hide event', function (assert) {
assert.expect(2) assert.expect(2)
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -434,20 +432,19 @@ $(function () {
$(document.body).trigger('click') $(document.body).trigger('click')
}) })
QUnit.test('should fire shown and hidden event', function (assert) { QUnit.test('should fire shown and hidden event', function (assert) {
assert.expect(2) assert.expect(2)
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -471,17 +468,17 @@ $(function () {
QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) { QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) {
assert.expect(2) assert.expect(2)
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -505,19 +502,19 @@ $(function () {
assert.expect(3) assert.expect(3)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '<input type="text" id="input">' '<input type="text" id="input">' +
+ '<textarea id="textarea"/>' '<textarea id="textarea"/>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -531,10 +528,14 @@ $(function () {
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired') assert.ok(true, 'shown was fired')
$input.trigger('focus').trigger($.Event('keydown', { which: 38 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 38
}))
assert.ok($(document.activeElement).is($input), 'input still focused') assert.ok($(document.activeElement).is($input), 'input still focused')
$textarea.trigger('focus').trigger($.Event('keydown', { which: 38 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 38
}))
assert.ok($(document.activeElement).is($textarea), 'textarea still focused') assert.ok($(document.activeElement).is($textarea), 'textarea still focused')
done() done()
@ -546,15 +547,15 @@ $(function () {
QUnit.test('should skip disabled element when using keyboard navigation', function (assert) { QUnit.test('should skip disabled element when using keyboard navigation', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item disabled" href="#">Disabled link</a>' '<a class="dropdown-item disabled" href="#">Disabled link</a>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -564,8 +565,12 @@ $(function () {
.parent('.dropdown') .parent('.dropdown')
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired') assert.ok(true, 'shown was fired')
$dropdown.trigger($.Event('keydown', { which: 40 })) $dropdown.trigger($.Event('keydown', {
$dropdown.trigger($.Event('keydown', { which: 40 })) which: 40
}))
$dropdown.trigger($.Event('keydown', {
which: 40
}))
assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused') assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused')
done() done()
}) })
@ -575,15 +580,15 @@ $(function () {
QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) { QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) {
assert.expect(4) assert.expect(4)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a id="item1" class="dropdown-item" href="#">A link</a>' '<a id="item1" class="dropdown-item" href="#">A link</a>' +
+ '<a id="item2" class="dropdown-item" href="#">Another link</a>' '<a id="item2" class="dropdown-item" href="#">Another link</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -593,29 +598,34 @@ $(function () {
.parent('.dropdown') .parent('.dropdown')
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
assert.ok(true, 'shown was fired') assert.ok(true, 'shown was fired')
$dropdown.trigger($.Event('keydown', { which: 40 })) $dropdown.trigger($.Event('keydown', {
which: 40
}))
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
$(document.activeElement).trigger($.Event('keydown', { which: 40 })) $(document.activeElement).trigger($.Event('keydown', {
which: 40
}))
assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused') assert.ok($(document.activeElement).is($('#item2')), 'item2 is focused')
$(document.activeElement).trigger($.Event('keydown', { which: 38 })) $(document.activeElement).trigger($.Event('keydown', {
which: 38
}))
assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused') assert.ok($(document.activeElement).is($('#item1')), 'item1 is focused')
done() done()
}) })
$dropdown.trigger('click') $dropdown.trigger('click')
}) })
QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) { QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="dropdown">' var dropdownHTML = '<div class="dropdown">' +
+ '<button type="button" data-toggle="dropdown">Dropdown</button>' '<button type="button" data-toggle="dropdown">Dropdown</button>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<input id="textField" type="text" />' '<input id="textField" type="text" />' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -639,12 +649,12 @@ $(function () {
QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) { QUnit.test('should not close the dropdown if the user clicks on a textarea', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="dropdown">' var dropdownHTML = '<div class="dropdown">' +
+ '<button type="button" data-toggle="dropdown">Dropdown</button>' '<button type="button" data-toggle="dropdown">Dropdown</button>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<textarea id="textArea"></textarea>' '<textarea id="textArea"></textarea>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -668,16 +678,16 @@ $(function () {
QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) { QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ ' <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>' ' <a class="nav-link dropdown-toggle" href="#" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>' +
+ ' <div class="dropdown-menu" aria-labelledby="dropdown">' ' <div class="dropdown-menu" aria-labelledby="dropdown">' +
+ ' <a class="dropdown-item" href="#">Action</a>' ' <a class="dropdown-item" href="#">Action</a>' +
+ ' <a class="dropdown-item" href="#">Another action</a>' ' <a class="dropdown-item" href="#">Another action</a>' +
+ ' <a class="dropdown-item" href="#">Something else here</a>' ' <a class="dropdown-item" href="#">Something else here</a>' +
+ ' </div>' ' </div>' +
+ '</div>' '</div>' +
+ '</nav>' '</nav>'
$(html).appendTo('#qunit-fixture') $(html).appendTo('#qunit-fixture')
var $triggerDropdown = $('#qunit-fixture') var $triggerDropdown = $('#qunit-fixture')
@ -698,19 +708,19 @@ $(function () {
assert.expect(7) assert.expect(7)
var done = assert.async() var done = assert.async()
var dropdownHTML = '<div class="tabs">' var dropdownHTML = '<div class="tabs">' +
+ '<div class="dropdown">' '<div class="dropdown">' +
+ '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item" href="#">Secondary link</a>' '<a class="dropdown-item" href="#">Secondary link</a>' +
+ '<a class="dropdown-item" href="#">Something else here</a>' '<a class="dropdown-item" href="#">Something else here</a>' +
+ '<div class="divider"/>' '<div class="divider"/>' +
+ '<a class="dropdown-item" href="#">Another link</a>' '<a class="dropdown-item" href="#">Another link</a>' +
+ '<input type="text" id="input">' '<input type="text" id="input">' +
+ '<textarea id="textarea"/>' '<textarea id="textarea"/>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.find('[data-toggle="dropdown"]') .find('[data-toggle="dropdown"]')
@ -723,25 +733,39 @@ $(function () {
.parent('.dropdown') .parent('.dropdown')
.on('shown.bs.dropdown', function () { .on('shown.bs.dropdown', function () {
// Space key // Space key
$input.trigger('focus').trigger($.Event('keydown', { which: 32 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 32
}))
assert.ok($(document.activeElement)[0] === $input[0], 'input still focused') assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')
$textarea.trigger('focus').trigger($.Event('keydown', { which: 32 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 32
}))
assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused') assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')
// Key up // Key up
$input.trigger('focus').trigger($.Event('keydown', { which: 38 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 38
}))
assert.ok($(document.activeElement)[0] === $input[0], 'input still focused') assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')
$textarea.trigger('focus').trigger($.Event('keydown', { which: 38 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 38
}))
assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused') assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')
// Key down // Key down
$input.trigger('focus').trigger($.Event('keydown', { which: 40 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 40
}))
assert.ok($(document.activeElement)[0] === $input[0], 'input still focused') assert.ok($(document.activeElement)[0] === $input[0], 'input still focused')
$textarea.trigger('focus').trigger($.Event('keydown', { which: 40 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 40
}))
assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused') assert.ok($(document.activeElement)[0] === $textarea[0], 'textarea still focused')
// Key escape // Key escape
$input.trigger('focus').trigger($.Event('keydown', { which: 27 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 27
}))
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
done() done()
}) })
@ -754,17 +778,17 @@ $(function () {
var done = assert.async() var done = assert.async()
var dropdownHTML = var dropdownHTML =
'<ul class="nav tabs">' '<ul class="nav tabs">' +
+ ' <li class="dropdown">' ' <li class="dropdown">' +
+ ' <input type="text" id="input" data-toggle="dropdown">' ' <input type="text" id="input" data-toggle="dropdown">' +
+ ' <div class="dropdown-menu" role="menu">' ' <div class="dropdown-menu" role="menu">' +
+ ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' +
+ ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' +
+ ' <div class="divider"></div>' ' <div class="divider"></div>' +
+ ' <a class="dropdown-item" href="#">Another link</a>' ' <a class="dropdown-item" href="#">Another link</a>' +
+ ' </div>' ' </div>' +
+ ' </li>' ' </li>' +
+ '</ul>' '</ul>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
@ -779,28 +803,34 @@ $(function () {
assert.ok(true, 'shown was fired') assert.ok(true, 'shown was fired')
// Key space // Key space
$input.trigger('focus').trigger($.Event('keydown', { which: 32 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 32
}))
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
assert.ok($(document.activeElement).is($input), 'input is still focused') assert.ok($(document.activeElement).is($input), 'input is still focused')
// Key escape // Key escape
$input.trigger('focus').trigger($.Event('keydown', { which: 27 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 27
}))
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
.one('shown.bs.dropdown', function () { .one('shown.bs.dropdown', function () {
// Key down // Key down
$input.trigger('focus').trigger($.Event('keydown', { which: 40 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 40
}))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
.one('shown.bs.dropdown', function () { .one('shown.bs.dropdown', function () {
// Key up // Key up
$input.trigger('focus').trigger($.Event('keydown', { which: 38 })) $input.trigger('focus').trigger($.Event('keydown', {
which: 38
}))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done() done()
}).bootstrapDropdown('toggle') }).bootstrapDropdown('toggle')
@ -816,17 +846,17 @@ $(function () {
var done = assert.async() var done = assert.async()
var dropdownHTML = var dropdownHTML =
'<ul class="nav tabs">' '<ul class="nav tabs">' +
+ ' <li class="dropdown">' ' <li class="dropdown">' +
+ ' <textarea id="textarea" data-toggle="dropdown"></textarea>' ' <textarea id="textarea" data-toggle="dropdown"></textarea>' +
+ ' <div class="dropdown-menu" role="menu">' ' <div class="dropdown-menu" role="menu">' +
+ ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' +
+ ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' +
+ ' <div class="divider"></div>' ' <div class="divider"></div>' +
+ ' <a class="dropdown-item" href="#">Another link</a>' ' <a class="dropdown-item" href="#">Another link</a>' +
+ ' </div>' ' </div>' +
+ ' </li>' ' </li>' +
+ '</ul>' '</ul>'
var $dropdown = $(dropdownHTML) var $dropdown = $(dropdownHTML)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
@ -841,28 +871,34 @@ $(function () {
assert.ok(true, 'shown was fired') assert.ok(true, 'shown was fired')
// Key space // Key space
$textarea.trigger('focus').trigger($.Event('keydown', { which: 32 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 32
}))
assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown')
assert.ok($(document.activeElement).is($textarea), 'textarea is still focused') assert.ok($(document.activeElement).is($textarea), 'textarea is still focused')
// Key escape // Key escape
$textarea.trigger('focus').trigger($.Event('keydown', { which: 27 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 27
}))
assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown')
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
.one('shown.bs.dropdown', function () { .one('shown.bs.dropdown', function () {
// Key down // Key down
$textarea.trigger('focus').trigger($.Event('keydown', { which: 40 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 40
}))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
$dropdown $dropdown
.parent('.dropdown') .parent('.dropdown')
.one('shown.bs.dropdown', function () { .one('shown.bs.dropdown', function () {
// Key up // Key up
$textarea.trigger('focus').trigger($.Event('keydown', { which: 38 })) $textarea.trigger('focus').trigger($.Event('keydown', {
which: 38
}))
assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused')
done() done()
}).bootstrapDropdown('toggle') }).bootstrapDropdown('toggle')

19
js/tests/unit/modal.js
View File

@ -47,8 +47,7 @@ $(function () {
$el.bootstrapModal() $el.bootstrapModal()
try { try {
$el.bootstrapModal('noMethod') $el.bootstrapModal('noMethod')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"') assert.strictEqual(err.message, 'No method named "noMethod"')
} }
}) })
@ -213,7 +212,9 @@ $(function () {
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
assert.ok($('#modal-test').length, 'modal inserted into dom') assert.ok($('#modal-test').length, 'modal inserted into dom')
assert.ok($('#modal-test').is(':visible'), 'modal visible') assert.ok($('#modal-test').is(':visible'), 'modal visible')
$div.trigger($.Event('keydown', { which: 27 })) $div.trigger($.Event('keydown', {
which: 27
}))
setTimeout(function () { setTimeout(function () {
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
@ -233,7 +234,9 @@ $(function () {
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
assert.ok($('#modal-test').length, 'modal inserted into dom') assert.ok($('#modal-test').length, 'modal inserted into dom')
assert.ok($('#modal-test').is(':visible'), 'modal visible') assert.ok($('#modal-test').is(':visible'), 'modal visible')
$div.trigger($.Event('keyup', { which: 27 })) $div.trigger($.Event('keyup', {
which: 27
}))
setTimeout(function () { setTimeout(function () {
assert.ok($div.is(':visible'), 'modal still visible') assert.ok($div.is(':visible'), 'modal still visible')
@ -289,7 +292,7 @@ $(function () {
$('#close').trigger('click') $('#close').trigger('click')
}) })
.one('hidden.bs.modal', function () { .one('hidden.bs.modal', function () {
// after one open-close cycle // After one open-close cycle
assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') assert.ok(!$('#modal-test').is(':visible'), 'modal hidden')
$(this) $(this)
.one('shown.bs.modal', function () { .one('shown.bs.modal', function () {
@ -416,8 +419,8 @@ $(function () {
var originalPadding = $body.css('padding-right') var originalPadding = $body.css('padding-right')
// Hide scrollbars to prevent the body overflowing // Hide scrollbars to prevent the body overflowing
$body.css('overflow', 'hidden') // real scrollbar (for in-browser testing) $body.css('overflow', 'hidden') // Real scrollbar (for in-browser testing)
$('html').css('padding-right', '0px') // simulated scrollbar (for PhantomJS) $('html').css('padding-right', '0px') // Simulated scrollbar (for PhantomJS)
$('<div id="modal-test"/>') $('<div id="modal-test"/>')
.on('shown.bs.modal', function () { .on('shown.bs.modal', function () {
@ -425,7 +428,7 @@ $(function () {
assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted') assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted')
$(this).bootstrapModal('hide') $(this).bootstrapModal('hide')
// restore scrollbars // Restore scrollbars
$body.css('overflow', 'auto') $body.css('overflow', 'auto')
$('html').css('padding-right', '16px') $('html').css('padding-right', '16px')
done() done()

18
js/tests/unit/popover.js
View File

@ -31,8 +31,7 @@ $(function () {
$el.bootstrapPopover() $el.bootstrapPopover()
try { try {
$el.bootstrapPopover('noMethod') $el.bootstrapPopover('noMethod')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"') assert.strictEqual(err.message, 'No method named "noMethod"')
} }
}) })
@ -109,7 +108,11 @@ $(function () {
var content = $('<i>¯\\_(ツ)_/¯</i>').get(0) var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
var $popover = $('<a href="#" rel="tooltip"/>') var $popover = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapPopover({ html: true, title: title, content: content }) .bootstrapPopover({
html: true,
title: title,
content: content
})
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
@ -127,7 +130,10 @@ $(function () {
var content = $('<i>¯\\_(ツ)_/¯</i>').get(0) var content = $('<i>¯\\_(ツ)_/¯</i>').get(0)
var $popover = $('<a href="#" rel="tooltip"/>') var $popover = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapPopover({ title: title, content: content }) .bootstrapPopover({
title: title,
content: content
})
$popover.bootstrapPopover('show') $popover.bootstrapPopover('show')
@ -138,7 +144,6 @@ $(function () {
assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved') assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved')
}) })
QUnit.test('should not duplicate HTML object', function (assert) { QUnit.test('should not duplicate HTML object', function (assert) {
assert.expect(6) assert.expect(6)
var $div = $('<div/>').html('loves writing tests （╯°□°）╯︵ ┻━┻') var $div = $('<div/>').html('loves writing tests （╯°□°）╯︵ ┻━┻')
@ -331,8 +336,7 @@ $(function () {
try { try {
$('<div data-toggle="popover" data-title="some title" data-content="@Johann-S" style="display: none"/>').bootstrapPopover('show') $('<div data-toggle="popover" data-title="some title" data-content="@Johann-S" style="display: none"/>').bootstrapPopover('show')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'Please use show on visible elements') assert.strictEqual(err.message, 'Please use show on visible elements')
done() done()
} }

572
js/tests/unit/scrollspy.js
View File

@ -30,8 +30,7 @@ $(function () {
$el.bootstrapScrollspy() $el.bootstrapScrollspy()
try { try {
$el.bootstrapScrollspy('noMethod') $el.bootstrapScrollspy('noMethod')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"') assert.strictEqual(err.message, 'No method named "noMethod"')
} }
}) })
@ -48,38 +47,40 @@ $(function () {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var sectionHTML = '<div id="root" class="active">' var sectionHTML = '<div id="root" class="active">' +
+ '<div class="topbar">' '<div class="topbar">' +
+ '<div class="topbar-inner">' '<div class="topbar-inner">' +
+ '<div class="container" id="ss-target">' '<div class="container" id="ss-target">' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a href="#masthead">Overview</a></li>' '<li class="nav-item"><a href="#masthead">Overview</a></li>' +
+ '<li class="nav-item"><a href="#detail">Detail</a></li>' '<li class="nav-item"><a href="#detail">Detail</a></li>' +
+ '</ul>' '</ul>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' +
+ '<div style="height: 200px;">' '<div style="height: 200px;">' +
+ '<h4 id="masthead">Overview</h4>' '<h4 id="masthead">Overview</h4>' +
+ '<p style="height: 200px">' '<p style="height: 200px">' +
+ 'Ad leggings keytar, brunch id art party dolor labore.' 'Ad leggings keytar, brunch id art party dolor labore.' +
+ '</p>' '</p>' +
+ '</div>' '</div>' +
+ '<div style="height: 200px;">' '<div style="height: 200px;">' +
+ '<h4 id="detail">Detail</h4>' '<h4 id="detail">Detail</h4>' +
+ '<p style="height: 200px">' '<p style="height: 200px">' +
+ 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' +
+ '</p>' '</p>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture') var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollspy = $section var $scrollspy = $section
.show() .show()
.find('#scrollspy-example') .find('#scrollspy-example')
.bootstrapScrollspy({ target: '#ss-target' }) .bootstrapScrollspy({
target: '#ss-target'
})
$scrollspy.one('scroll', function () { $scrollspy.one('scroll', function () {
assert.ok($section.hasClass('active'), '"active" class still on root node') assert.ok($section.hasClass('active'), '"active" class still on root node')
@ -93,38 +94,40 @@ $(function () {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var sectionHTML = '<div id="root" class="active">' var sectionHTML = '<div id="root" class="active">' +
+ '<div class="topbar">' '<div class="topbar">' +
+ '<div class="topbar-inner">' '<div class="topbar-inner">' +
+ '<div class="container" id="ss-target">' '<div class="container" id="ss-target">' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a href="#masthead">Overview</a></li>' '<li class="nav-item"><a href="#masthead">Overview</a></li>' +
+ '<li class="nav-item"><a href="#detail">Detail</a></li>' '<li class="nav-item"><a href="#detail">Detail</a></li>' +
+ '</ul>' '</ul>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' +
+ '<div style="height: 200px;">' '<div style="height: 200px;">' +
+ '<h4 id="masthead">Overview</h4>' '<h4 id="masthead">Overview</h4>' +
+ '<p style="height: 200px">' '<p style="height: 200px">' +
+ 'Ad leggings keytar, brunch id art party dolor labore.' 'Ad leggings keytar, brunch id art party dolor labore.' +
+ '</p>' '</p>' +
+ '</div>' '</div>' +
+ '<div style="height: 200px;">' '<div style="height: 200px;">' +
+ '<h4 id="detail">Detail</h4>' '<h4 id="detail">Detail</h4>' +
+ '<p style="height: 200px">' '<p style="height: 200px">' +
+ 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' +
+ '</p>' '</p>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture') var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollspy = $section var $scrollspy = $section
.show() .show()
.find('#scrollspy-example') .find('#scrollspy-example')
.bootstrapScrollspy({ target: document.getElementById('#ss-target') }) .bootstrapScrollspy({
target: document.getElementById('#ss-target')
})
$scrollspy.one('scroll', function () { $scrollspy.one('scroll', function () {
assert.ok($section.hasClass('active'), '"active" class still on root node') assert.ok($section.hasClass('active'), '"active" class still on root node')
@ -138,25 +141,28 @@ $(function () {
assert.expect(3) assert.expect(3)
var done = assert.async() var done = assert.async()
var sectionHTML = '<div id="header" style="height: 500px;"></div>' var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
+ '<nav id="navigation" class="navbar">' '<nav id="navigation" class="navbar">' +
+ '<ul class="navbar-nav">' '<ul class="navbar-nav">' +
+ '<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>' '<li class="nav-item active"><a class="nav-link" id="one-link" href="#one">One</a></li>' +
+ '<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>' '<li class="nav-item"><a class="nav-link" id="two-link" href="#two">Two</a></li>' +
+ '<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>' '<li class="nav-item"><a class="nav-link" id="three-link" href="#three">Three</a></li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>' +
+ '<div id="content" style="height: 200px; overflow-y: auto;">' '<div id="content" style="height: 200px; overflow-y: auto;">' +
+ '<div id="one" style="height: 500px;"></div>' '<div id="one" style="height: 500px;"></div>' +
+ '<div id="two" style="height: 300px;"></div>' '<div id="two" style="height: 300px;"></div>' +
+ '<div id="three" style="height: 10px;"></div>' '<div id="three" style="height: 10px;"></div>' +
+ '</div>' '</div>'
var $section = $(sectionHTML).appendTo('#qunit-fixture') var $section = $(sectionHTML).appendTo('#qunit-fixture')
var $scrollspy = $section var $scrollspy = $section
.show() .show()
.filter('#content') .filter('#content')
$scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top }) $scrollspy.bootstrapScrollspy({
target: '#navigation',
offset: $scrollspy.position().top
})
$scrollspy.one('scroll', function () { $scrollspy.one('scroll', function () {
assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section') assert.ok(!$section.find('#one-link').hasClass('active'), '"active" class removed from first section')
@ -171,22 +177,25 @@ $(function () {
QUnit.test('should add the active class to the correct element', function (assert) { QUnit.test('should add the active class to the correct element', function (assert) {
assert.expect(2) assert.expect(2)
var navbarHtml = var navbarHtml =
'<nav class="navbar">' '<nav class="navbar">' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>' '<li class="nav-item"><a class="nav-link" id="a-1" href="#div-1">div 1</a></li>' +
+ '<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>' '<li class="nav-item"><a class="nav-link" id="a-2" href="#div-2">div 2</a></li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
var contentHtml = var contentHtml =
'<div class="content" style="overflow: auto; height: 50px">' '<div class="content" style="overflow: auto; height: 50px">' +
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' +
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' }) .bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var done = assert.async() var done = assert.async()
var testElementIsActiveAfterScroll = function (element, target) { var testElementIsActiveAfterScroll = function (element, target) {
@ -201,29 +210,36 @@ $(function () {
} }
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1')) $.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') }) .then(function () {
.then(function () { done() }) return testElementIsActiveAfterScroll('#a-2', '#div-2')
})
.then(function () {
done()
})
}) })
QUnit.test('should add the active class to the correct element (nav markup)', function (assert) { QUnit.test('should add the active class to the correct element (nav markup)', function (assert) {
assert.expect(2) assert.expect(2)
var navbarHtml = var navbarHtml =
'<nav class="navbar">' '<nav class="navbar">' +
+ '<nav class="nav">' '<nav class="nav">' +
+ '<a class="nav-link" id="a-1" href="#div-1">div 1</a>' '<a class="nav-link" id="a-1" href="#div-1">div 1</a>' +
+ '<a class="nav-link" id="a-2" href="#div-2">div 2</a>' '<a class="nav-link" id="a-2" href="#div-2">div 2</a>' +
+ '</nav>' '</nav>' +
+ '</nav>' '</nav>'
var contentHtml = var contentHtml =
'<div class="content" style="overflow: auto; height: 50px">' '<div class="content" style="overflow: auto; height: 50px">' +
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' +
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' }) .bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var done = assert.async() var done = assert.async()
var testElementIsActiveAfterScroll = function (element, target) { var testElementIsActiveAfterScroll = function (element, target) {
@ -238,29 +254,36 @@ $(function () {
} }
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1')) $.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') }) .then(function () {
.then(function () { done() }) return testElementIsActiveAfterScroll('#a-2', '#div-2')
})
.then(function () {
done()
})
}) })
QUnit.test('should add the active class to the correct element (list-group markup)', function (assert) { QUnit.test('should add the active class to the correct element (list-group markup)', function (assert) {
assert.expect(2) assert.expect(2)
var navbarHtml = var navbarHtml =
'<nav class="navbar">' '<nav class="navbar">' +
+ '<div class="list-group">' '<div class="list-group">' +
+ '<a class="list-group-item" id="a-1" href="#div-1">div 1</a>' '<a class="list-group-item" id="a-1" href="#div-1">div 1</a>' +
+ '<a class="list-group-item" id="a-2" href="#div-2">div 2</a>' '<a class="list-group-item" id="a-2" href="#div-2">div 2</a>' +
+ '</div>' '</div>' +
+ '</nav>' '</nav>'
var contentHtml = var contentHtml =
'<div class="content" style="overflow: auto; height: 50px">' '<div class="content" style="overflow: auto; height: 50px">' +
+ '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' '<div id="div-1" style="height: 100px; padding: 0; margin: 0">div 1</div>' +
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' }) .bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var done = assert.async() var done = assert.async()
var testElementIsActiveAfterScroll = function (element, target) { var testElementIsActiveAfterScroll = function (element, target) {
@ -275,38 +298,47 @@ $(function () {
} }
$.when(testElementIsActiveAfterScroll('#a-1', '#div-1')) $.when(testElementIsActiveAfterScroll('#a-1', '#div-1'))
.then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') }) .then(function () {
.then(function () { done() }) return testElementIsActiveAfterScroll('#a-2', '#div-2')
})
.then(function () {
done()
})
}) })
QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) { QUnit.test('should add the active class correctly when there are nested elements at 0 scroll offset', function (assert) {
assert.expect(6) assert.expect(6)
var times = 0 var times = 0
var done = assert.async() var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">' var navbarHtml = '<nav id="navigation" class="navbar">' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>' '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' +
+ '</ul>' '</ul>' +
+ '</li>' '</li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
+ '<div id="div-1" style="padding: 0; margin: 0">' '<div id="div-1" style="padding: 0; margin: 0">' +
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' }) .bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() { function testActiveElements() {
if (++times > 3) { return done() } if (++times > 3) {
return done()
}
$content.one('scroll', function () { $content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@ -324,29 +356,34 @@ $(function () {
assert.expect(6) assert.expect(6)
var times = 0 var times = 0
var done = assert.async() var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">' var navbarHtml = '<nav id="navigation" class="navbar">' +
+ '<nav class="nav">' '<nav class="nav">' +
+ '<a id="a-1" class="nav-link" href="#div-1">div 1</a>' '<a id="a-1" class="nav-link" href="#div-1">div 1</a>' +
+ '<nav class="nav">' '<nav class="nav">' +
+ '<a id="a-2" class="nav-link" href="#div-2">div 2</a>' '<a id="a-2" class="nav-link" href="#div-2">div 2</a>' +
+ '</nav>' '</nav>' +
+ '</nav>' '</nav>' +
+ '</nav>' '</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
+ '<div id="div-1" style="padding: 0; margin: 0">' '<div id="div-1" style="padding: 0; margin: 0">' +
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' }) .bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() { function testActiveElements() {
if (++times > 3) { return done() } if (++times > 3) {
return done()
}
$content.one('scroll', function () { $content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@ -360,34 +397,38 @@ $(function () {
testActiveElements() testActiveElements()
}) })
QUnit.test('should add the active class correctly when there are nested elements (nav nav-item markup)', function (assert) { QUnit.test('should add the active class correctly when there are nested elements (nav nav-item markup)', function (assert) {
assert.expect(6) assert.expect(6)
var times = 0 var times = 0
var done = assert.async() var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">' var navbarHtml = '<nav id="navigation" class="navbar">' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>' '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' +
+ '</ul>' '</ul>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
+ '<div id="div-1" style="padding: 0; margin: 0">' '<div id="div-1" style="padding: 0; margin: 0">' +
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' }) .bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() { function testActiveElements() {
if (++times > 3) { return done() } if (++times > 3) {
return done()
}
$content.one('scroll', function () { $content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@ -405,29 +446,34 @@ $(function () {
assert.expect(6) assert.expect(6)
var times = 0 var times = 0
var done = assert.async() var done = assert.async()
var navbarHtml = '<nav id="navigation" class="navbar">' var navbarHtml = '<nav id="navigation" class="navbar">' +
+ '<div class="list-group">' '<div class="list-group">' +
+ '<a id="a-1" class="list-group-item" href="#div-1">div 1</a>' '<a id="a-1" class="list-group-item" href="#div-1">div 1</a>' +
+ '<div class="list-group">' '<div class="list-group">' +
+ '<a id="a-2" class="list-group-item" href="#div-2">div 2</a>' '<a id="a-2" class="list-group-item" href="#div-2">div 2</a>' +
+ '</div>' '</div>' +
+ '</div>' '</div>' +
+ '</nav>' '</nav>'
var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' var contentHtml = '<div class="content" style="position: absolute; top: 0px; overflow: auto; height: 50px">' +
+ '<div id="div-1" style="padding: 0; margin: 0">' '<div id="div-1" style="padding: 0; margin: 0">' +
+ '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' '<div id="div-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' +
+ '</div>' '</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '#navigation' }) .bootstrapScrollspy({
offset: 0,
target: '#navigation'
})
function testActiveElements() { function testActiveElements() {
if (++times > 3) { return done() } if (++times > 3) {
return done()
}
$content.one('scroll', function () { $content.one('scroll', function () {
assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class')
@ -445,23 +491,23 @@ $(function () {
assert.expect(3) assert.expect(3)
var done = assert.async() var done = assert.async()
var sectionHTML = '<div id="header" style="height: 500px;"></div>' var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
+ '<nav id="navigation" class="navbar">' '<nav id="navigation" class="navbar">' +
+ '<ul class="navbar-nav">' '<ul class="navbar-nav">' +
+ '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' +
+ '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' +
+ '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
$(sectionHTML).appendTo('#qunit-fixture') $(sectionHTML).appendTo('#qunit-fixture')
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' +
+ '<div id="spacer" style="height: 100px;"/>' '<div id="spacer" style="height: 100px;"/>' +
+ '<div id="one" style="height: 100px;"/>' '<div id="one" style="height: 100px;"/>' +
+ '<div id="two" style="height: 100px;"/>' '<div id="two" style="height: 100px;"/>' +
+ '<div id="three" style="height: 100px;"/>' '<div id="three" style="height: 100px;"/>' +
+ '<div id="spacer" style="height: 100px;"/>' '<div id="spacer" style="height: 100px;"/>' +
+ '</div>' '</div>'
var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture') var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
$scrollspy $scrollspy
@ -486,25 +532,25 @@ $(function () {
assert.expect(4) assert.expect(4)
var done = assert.async() var done = assert.async()
var sectionHTML = '<div id="header" style="height: 500px;"></div>' var sectionHTML = '<div id="header" style="height: 500px;"></div>' +
+ '<nav id="navigation" class="navbar">' '<nav id="navigation" class="navbar">' +
+ '<ul class="navbar-nav">' '<ul class="navbar-nav">' +
+ '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' '<li class="nav-item"><a id="one-link" class="nav-link active" href="#one">One</a></li>' +
+ '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' '<li class="nav-item"><a id="two-link" class="nav-link" href="#two">Two</a></li>' +
+ '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' '<li class="nav-item"><a id="three-link" class="nav-link" href="#three">Three</a></li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
$(sectionHTML).appendTo('#qunit-fixture') $(sectionHTML).appendTo('#qunit-fixture')
var negativeHeight = -10 var negativeHeight = -10
var startOfSectionTwo = 101 var startOfSectionTwo = 101
var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' +
+ '<div id="one" style="height: 100px;"/>' '<div id="one" style="height: 100px;"/>' +
+ '<div id="two" style="height: 100px;"/>' '<div id="two" style="height: 100px;"/>' +
+ '<div id="three" style="height: 100px;"/>' '<div id="three" style="height: 100px;"/>' +
+ '<div id="spacer" style="height: 100px;"/>' '<div id="spacer" style="height: 100px;"/>' +
+ '</div>' '</div>'
var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture') var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture')
$scrollspy $scrollspy
@ -529,28 +575,31 @@ $(function () {
QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) { QUnit.test('should correctly select navigation element on backward scrolling when each target section height is 100%', function (assert) {
assert.expect(5) assert.expect(5)
var navbarHtml = var navbarHtml =
'<nav class="navbar">' '<nav class="navbar">' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>' '<li class="nav-item"><a id="li-100-1" class="nav-link" href="#div-100-1">div 1</a></li>' +
+ '<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>' '<li class="nav-item"><a id="li-100-2" class="nav-link" href="#div-100-2">div 2</a></li>' +
+ '<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>' '<li class="nav-item"><a id="li-100-3" class="nav-link" href="#div-100-3">div 3</a></li>' +
+ '<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>' '<li class="nav-item"><a id="li-100-4" class="nav-link" href="#div-100-4">div 4</a></li>' +
+ '<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>' '<li class="nav-item"><a id="li-100-5" class="nav-link" href="#div-100-5">div 5</a></li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
var contentHtml = var contentHtml =
'<div class="content" style="position: relative; overflow: auto; height: 100px">' '<div class="content" style="position: relative; overflow: auto; height: 100px">' +
+ '<div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>' '<div id="div-100-1" style="position: relative; height: 100%; padding: 0; margin: 0">div 1</div>' +
+ '<div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>' '<div id="div-100-2" style="position: relative; height: 100%; padding: 0; margin: 0">div 2</div>' +
+ '<div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>' '<div id="div-100-3" style="position: relative; height: 100%; padding: 0; margin: 0">div 3</div>' +
+ '<div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>' '<div id="div-100-4" style="position: relative; height: 100%; padding: 0; margin: 0">div 4</div>' +
+ '<div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>' '<div id="div-100-5" style="position: relative; height: 100%; padding: 0; margin: 0">div 5</div>' +
+ '</div>' '</div>'
$(navbarHtml).appendTo('#qunit-fixture') $(navbarHtml).appendTo('#qunit-fixture')
var $content = $(contentHtml) var $content = $(contentHtml)
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapScrollspy({ offset: 0, target: '.navbar' }) .bootstrapScrollspy({
offset: 0,
target: '.navbar'
})
var testElementIsActiveAfterScroll = function (element, target) { var testElementIsActiveAfterScroll = function (element, target) {
var deferred = $.Deferred() var deferred = $.Deferred()
@ -565,11 +614,21 @@ $(function () {
var done = assert.async() var done = assert.async()
$.when(testElementIsActiveAfterScroll('#li-100-5', '#div-100-5')) $.when(testElementIsActiveAfterScroll('#li-100-5', '#div-100-5'))
.then(function () { return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4') }) .then(function () {
.then(function () { return testElementIsActiveAfterScroll('#li-100-3', '#div-100-3') }) return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4')
.then(function () { return testElementIsActiveAfterScroll('#li-100-2', '#div-100-2') }) })
.then(function () { return testElementIsActiveAfterScroll('#li-100-1', '#div-100-1') }) .then(function () {
.then(function () { done() }) return testElementIsActiveAfterScroll('#li-100-3', '#div-100-3')
})
.then(function () {
return testElementIsActiveAfterScroll('#li-100-2', '#div-100-2')
})
.then(function () {
return testElementIsActiveAfterScroll('#li-100-1', '#div-100-1')
})
.then(function () {
done()
})
}) })
QUnit.test('should allow passed in option offset method: offset', function (assert) { QUnit.test('should allow passed in option offset method: offset', function (assert) {
@ -577,29 +636,32 @@ $(function () {
var testOffsetMethod = function (type) { var testOffsetMethod = function (type) {
var $navbar = $( var $navbar = $(
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>' '<li class="nav-item"><a id="li-' + type + 'm-1" class="nav-link" href="#div-' + type + 'm-1">div 1</a></li>' +
+ '<li class="nav-item"><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>' '<li class="nav-item"><a id="li-' + type + 'm-2" class="nav-link" href="#div-' + type + 'm-2">div 2</a></li>' +
+ '<li class="nav-item"><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>' '<li class="nav-item"><a id="li-' + type + 'm-3" class="nav-link" href="#div-' + type + 'm-3">div 3</a></li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
) )
var $content = $( var $content = $(
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="offset"' : '') + ' style="position: relative; overflow: auto; height: 100px">' '<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="offset"' : '') + ' style="position: relative; overflow: auto; height: 100px">' +
+ '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>' '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>' +
+ '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>' '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>' +
+ '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' +
+ '</div>' '</div>'
) )
$navbar.appendTo('#qunit-fixture') $navbar.appendTo('#qunit-fixture')
$content.appendTo('#qunit-fixture') $content.appendTo('#qunit-fixture')
if (type === 'js') { if (type === 'js') {
$content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'offset' }) $content.bootstrapScrollspy({
} target: '.navbar',
else if (type === 'data') { offset: 0,
method: 'offset'
})
} else if (type === 'data') {
$(window).trigger('load') $(window).trigger('load')
} }
@ -621,27 +683,34 @@ $(function () {
var testOffsetMethod = function (type) { var testOffsetMethod = function (type) {
var $navbar = $( var $navbar = $(
'<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' +
+ '<ul class="nav">' '<ul class="nav">' +
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>' '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-1" href="#div-' + type + 'm-1">div 1</a></li>' +
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>' '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-2" href="#div-' + type + 'm-2">div 2</a></li>' +
+ '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>' '<li class="nav-item"><a class="nav-link" id="li-' + type + 'm-3" href="#div-' + type + 'm-3">div 3</a></li>' +
+ '</ul>' '</ul>' +
+ '</nav>' '</nav>'
) )
var $content = $( var $content = $(
'<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="position"' : '') + ' style="position: relative; overflow: auto; height: 100px">' '<div class="content"' + (type === 'data' ? ' data-spy="scroll" data-target="#navbar-offset-method-menu" data-offset="0" data-method="position"' : '') + ' style="position: relative; overflow: auto; height: 100px">' +
+ '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>' '<div id="div-' + type + 'm-1" style="position: relative; height: 200px; padding: 0; margin: 0">div 1</div>' +
+ '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>' '<div id="div-' + type + 'm-2" style="position: relative; height: 150px; padding: 0; margin: 0">div 2</div>' +
+ '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' '<div id="div-' + type + 'm-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' +
+ '</div>' '</div>'
) )
$navbar.appendTo('#qunit-fixture') $navbar.appendTo('#qunit-fixture')
$content.appendTo('#qunit-fixture') $content.appendTo('#qunit-fixture')
if (type === 'js') { $content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'position' }) } if (type === 'js') {
else if (type === 'data') { $(window).trigger('load') } $content.bootstrapScrollspy({
target: '.navbar',
offset: 0,
method: 'position'
})
} else if (type === 'data') {
$(window).trigger('load')
}
var $target = $('#div-' + type + 'm-2') var $target = $('#div-' + type + 'm-2')
var scrollspy = $content.data('bs.scrollspy') var scrollspy = $content.data('bs.scrollspy')
@ -655,5 +724,4 @@ $(function () {
testOffsetMethod('js') testOffsetMethod('js')
testOffsetMethod('data') testOffsetMethod('data')
}) })
}) })

190
js/tests/unit/tab.js
View File

@ -30,8 +30,7 @@ $(function () {
$el.bootstrapTab() $el.bootstrapTab()
try { try {
$el.bootstrapTab('noMethod') $el.bootstrapTab('noMethod')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"') assert.strictEqual(err.message, 'No method named "noMethod"')
} }
}) })
@ -46,10 +45,10 @@ $(function () {
QUnit.test('should activate element by tab id', function (assert) { QUnit.test('should activate element by tab id', function (assert) {
assert.expect(2) assert.expect(2)
var tabsHTML = '<ul class="nav">' var tabsHTML = '<ul class="nav">' +
+ '<li><a href="#home">Home</a></li>' '<li><a href="#home">Home</a></li>' +
+ '<li><a href="#profile">Profile</a></li>' '<li><a href="#profile">Profile</a></li>' +
+ '</ul>' '</ul>'
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture') $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
@ -62,10 +61,10 @@ $(function () {
QUnit.test('should activate element by tab id', function (assert) { QUnit.test('should activate element by tab id', function (assert) {
assert.expect(2) assert.expect(2)
var pillsHTML = '<ul class="nav nav-pills">' var pillsHTML = '<ul class="nav nav-pills">' +
+ '<li><a href="#home">Home</a></li>' '<li><a href="#home">Home</a></li>' +
+ '<li><a href="#profile">Profile</a></li>' '<li><a href="#profile">Profile</a></li>' +
+ '</ul>' '</ul>'
$('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture') $('<ul><li id="home"/><li id="profile"/></ul>').appendTo('#qunit-fixture')
@ -78,10 +77,10 @@ $(function () {
QUnit.test('should activate element by tab id in ordered list', function (assert) { QUnit.test('should activate element by tab id in ordered list', function (assert) {
assert.expect(2) assert.expect(2)
var pillsHTML = '<ol class="nav nav-pills">' var pillsHTML = '<ol class="nav nav-pills">' +
+ '<li><a href="#home">Home</a></li>' '<li><a href="#home">Home</a></li>' +
+ '<li><a href="#profile">Profile</a></li>' '<li><a href="#profile">Profile</a></li>' +
+ '</ol>' '</ol>'
$('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture') $('<ol><li id="home"/><li id="profile"/></ol>').appendTo('#qunit-fixture')
@ -142,14 +141,14 @@ $(function () {
QUnit.test('should not fire shown when tab is already active', function (assert) { QUnit.test('should not fire shown when tab is already active', function (assert) {
assert.expect(0) assert.expect(0)
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
+ '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
+ '<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>' '<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>' +
+ '</ul>' '</ul>' +
+ '<div class="tab-content">' '<div class="tab-content">' +
+ '<div class="tab-pane active" id="home" role="tabpanel"></div>' '<div class="tab-pane active" id="home" role="tabpanel"></div>' +
+ '<div class="tab-pane" id="profile" role="tabpanel"></div>' '<div class="tab-pane" id="profile" role="tabpanel"></div>' +
+ '</div>' '</div>'
$(tabsHTML) $(tabsHTML)
.find('a.active') .find('a.active')
@ -161,14 +160,14 @@ $(function () {
QUnit.test('should not fire shown when tab is disabled', function (assert) { QUnit.test('should not fire shown when tab is disabled', function (assert) {
assert.expect(0) assert.expect(0)
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
+ '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>' +
+ '<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>' '<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>' +
+ '</ul>' '</ul>' +
+ '<div class="tab-content">' '<div class="tab-content">' +
+ '<div class="tab-pane active" id="home" role="tabpanel"></div>' '<div class="tab-pane active" id="home" role="tabpanel"></div>' +
+ '<div class="tab-pane" id="profile" role="tabpanel"></div>' '<div class="tab-pane" id="profile" role="tabpanel"></div>' +
+ '</div>' '</div>'
$(tabsHTML) $(tabsHTML)
.find('a.disabled') .find('a.disabled')
@ -183,14 +182,14 @@ $(function () {
var done = assert.async() var done = assert.async()
var dropHTML = var dropHTML =
'<ul class="drop nav">' '<ul class="drop nav">' +
+ ' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' ' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' +
+ ' <ul class="dropdown-menu nav">' ' <ul class="dropdown-menu nav">' +
+ ' <li><a href="#1-1" data-toggle="tab">1-1</a></li>' ' <li><a href="#1-1" data-toggle="tab">1-1</a></li>' +
+ ' <li><a href="#1-2" data-toggle="tab">1-2</a></li>' ' <li><a href="#1-2" data-toggle="tab">1-2</a></li>' +
+ ' </ul>' ' </ul>' +
+ ' </li>' ' </li>' +
+ '</ul>' '</ul>'
$(dropHTML) $(dropHTML)
.find('ul > li:first-child a') .find('ul > li:first-child a')
@ -211,10 +210,10 @@ $(function () {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var tabsHTML = '<ul class="nav">' var tabsHTML = '<ul class="nav">' +
+ '<li><a href="#home">Home</a></li>' '<li><a href="#home">Home</a></li>' +
+ '<li><a href="#profile">Profile</a></li>' '<li><a href="#profile">Profile</a></li>' +
+ '</ul>' '</ul>'
$(tabsHTML) $(tabsHTML)
.find('li:first-child a') .find('li:first-child a')
@ -242,10 +241,10 @@ $(function () {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var tabsHTML = '<ul class="nav">' var tabsHTML = '<ul class="nav">' +
+ '<li><a href="#home">Home</a></li>' '<li><a href="#home">Home</a></li>' +
+ '<li><a href="#profile">Profile</a></li>' '<li><a href="#profile">Profile</a></li>' +
+ '</ul>' '</ul>'
$(tabsHTML) $(tabsHTML)
.find('li:first-child a') .find('li:first-child a')
@ -267,10 +266,10 @@ $(function () {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var tabsHTML = '<ul class="nav">' var tabsHTML = '<ul class="nav">' +
+ '<li><a href="#home">Home</a></li>' '<li><a href="#home">Home</a></li>' +
+ '<li><a href="#profile">Profile</a></li>' '<li><a href="#profile">Profile</a></li>' +
+ '</ul>' '</ul>'
$(tabsHTML) $(tabsHTML)
.find('li:first-child a') .find('li:first-child a')
@ -289,10 +288,10 @@ $(function () {
QUnit.test('selected tab should have aria-selected', function (assert) { QUnit.test('selected tab should have aria-selected', function (assert) {
assert.expect(8) assert.expect(8)
var tabsHTML = '<ul class="nav nav-tabs">' var tabsHTML = '<ul class="nav nav-tabs">' +
+ '<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>' '<li><a class="nav-item active" href="#home" toggle="tab" aria-selected="true">Home</a></li>' +
+ '<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' '<li><a class="nav-item" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' +
+ '</ul>' '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture') var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:first-child a').bootstrapTab('show') $tabs.find('li:first-child a').bootstrapTab('show')
@ -314,10 +313,10 @@ $(function () {
QUnit.test('selected tab should deactivate previous selected tab', function (assert) { QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
assert.expect(2) assert.expect(2)
var tabsHTML = '<ul class="nav nav-tabs">' var tabsHTML = '<ul class="nav nav-tabs">' +
+ '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>' '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>' +
+ '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
+ '</ul>' '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture') var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:last-child a').trigger('click') $tabs.find('li:last-child a').trigger('click')
@ -327,16 +326,16 @@ $(function () {
QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) { QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
assert.expect(3) assert.expect(3)
var tabsHTML = '<ul class="nav nav-tabs">' var tabsHTML = '<ul class="nav nav-tabs">' +
+ '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>' '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>' +
+ '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>' +
+ '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' +
+ '<div class="dropdown-menu">' '<div class="dropdown-menu">' +
+ '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' +
+ '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' +
+ '</div>' '</div>' +
+ '</li>' '</li>' +
+ '</ul>' '</ul>'
var $tabs = $(tabsHTML).appendTo('#qunit-fixture') var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
$tabs.find('li:first-child a').trigger('click') $tabs.find('li:first-child a').trigger('click')
@ -349,25 +348,25 @@ $(function () {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var tabsHTML = var tabsHTML =
'<nav class="nav nav-tabs" role="tablist">' '<nav class="nav nav-tabs" role="tablist">' +
+ ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>' +
+ ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-selected="true">Tab 2</a>' +
+ ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>' +
+ '</nav>' '</nav>' +
+ '<div class="tab-content">' '<div class="tab-content">' +
+ ' <div class="tab-pane" id="x-tab1" role="tabpanel">' ' <div class="tab-pane" id="x-tab1" role="tabpanel">' +
+ ' <nav class="nav nav-tabs" role="tablist">' ' <nav class="nav nav-tabs" role="tablist">' +
+ ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-selected="true">Nested Tab 1</a>' +
+ ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>' +
+ ' </nav>' ' </nav>' +
+ ' <div class="tab-content">' ' <div class="tab-content">' +
+ ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>' ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>' +
+ ' <div class="tab-pane" id="nested-tab2" role="tabpanel">Nested Tab2 Content</div>' ' <div class="tab-pane" id="nested-tab2" role="tabpanel">Nested Tab2 Content</div>' +
+ ' </div>' ' </div>' +
+ ' </div>' ' </div>' +
+ ' <div class="tab-pane active" id="x-tab2" role="tabpanel">Tab2 Content</div>' ' <div class="tab-pane active" id="x-tab2" role="tabpanel">Tab2 Content</div>' +
+ ' <div class="tab-pane" id="x-tab3" role="tabpanel">Tab3 Content</div>' ' <div class="tab-pane" id="x-tab3" role="tabpanel">Tab3 Content</div>' +
+ '</div>' '</div>'
$(tabsHTML).appendTo('#qunit-fixture') $(tabsHTML).appendTo('#qunit-fixture')
@ -386,15 +385,14 @@ $(function () {
QUnit.test('should not remove fade class if no active pane is present', function (assert) { QUnit.test('should not remove fade class if no active pane is present', function (assert) {
assert.expect(6) assert.expect(6)
var done = assert.async() var done = assert.async()
var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' var tabsHTML = '<ul class="nav nav-tabs" role="tablist">' +
+ '<li class="nav-item"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>' '<li class="nav-item"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>' +
+ '<li class="nav-item"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' '<li class="nav-item"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' +
+ '</ul>' '</ul>' +
+ '<div class="tab-content">' '<div class="tab-content">' +
+ '<div class="tab-pane fade" id="home" role="tabpanel"></div>' '<div class="tab-pane fade" id="home" role="tabpanel"></div>' +
+ '<div class="tab-pane fade" id="profile" role="tabpanel"></div>' '<div class="tab-pane fade" id="profile" role="tabpanel"></div>' +
+ '</div>' '</div>'
$(tabsHTML).appendTo('#qunit-fixture') $(tabsHTML).appendTo('#qunit-fixture')
$('#tab-profile') $('#tab-profile')

134
js/tests/unit/tooltip.js
View File

@ -31,8 +31,7 @@ $(function () {
$el.bootstrapTooltip() $el.bootstrapTooltip()
try { try {
$el.bootstrapTooltip('noMethod') $el.bootstrapTooltip('noMethod')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'No method named "noMethod"') assert.strictEqual(err.message, 'No method named "noMethod"')
} }
}) })
@ -105,7 +104,9 @@ $(function () {
assert.expect(2) assert.expect(2)
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ placement: 'bottom' }) .bootstrapTooltip({
placement: 'bottom'
})
$tooltip.bootstrapTooltip('show') $tooltip.bootstrapTooltip('show')
@ -122,7 +123,9 @@ $(function () {
assert.expect(2) assert.expect(2)
var $tooltip = $('<a href="#" rel="tooltip" title="&lt;b&gt;@fat&lt;/b&gt;"/>') var $tooltip = $('<a href="#" rel="tooltip" title="&lt;b&gt;@fat&lt;/b&gt;"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ html: true }) .bootstrapTooltip({
html: true
})
$tooltip.bootstrapTooltip('show') $tooltip.bootstrapTooltip('show')
assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted') assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted')
@ -136,7 +139,9 @@ $(function () {
var title = document.createTextNode('<3 writing tests') var title = document.createTextNode('<3 writing tests')
var $tooltip = $('<a href="#" rel="tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ title: title }) .bootstrapTooltip({
title: title
})
$tooltip.bootstrapTooltip('show') $tooltip.bootstrapTooltip('show')
@ -150,7 +155,10 @@ $(function () {
var title = document.createTextNode('<3 writing tests') var title = document.createTextNode('<3 writing tests')
var $tooltip = $('<a href="#" rel="tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ html: true, title: title }) .bootstrapTooltip({
html: true,
title: title
})
$tooltip.bootstrapTooltip('show') $tooltip.bootstrapTooltip('show')
@ -159,12 +167,13 @@ $(function () {
assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied') assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied')
}) })
QUnit.test('should respect custom classes', function (assert) { QUnit.test('should respect custom classes', function (assert) {
assert.expect(2) assert.expect(2)
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>' }) .bootstrapTooltip({
template: '<div class="tooltip some-class"><div class="tooltip-arrow"/><div class="tooltip-inner"/></div>'
})
$tooltip.bootstrapTooltip('show') $tooltip.bootstrapTooltip('show')
assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present') assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present')
@ -191,8 +200,7 @@ $(function () {
try { try {
$('<div title="tooltip title" style="display: none"/>').bootstrapTooltip('show') $('<div title="tooltip title" style="display: none"/>').bootstrapTooltip('show')
} } catch (err) {
catch (err) {
assert.strictEqual(err.message, 'Please use show on visible elements') assert.strictEqual(err.message, 'Please use show on visible elements')
done() done()
} }
@ -297,7 +305,7 @@ $(function () {
assert.expect(7) assert.expect(7)
var $tooltip = $('<div/>') var $tooltip = $('<div/>')
.bootstrapTooltip() .bootstrapTooltip()
.on('click.foo', function () {}) .on('click.foo', function () {}) // eslint-disable-line no-empty-function
assert.ok($tooltip.data('bs.tooltip'), 'tooltip has data') assert.ok($tooltip.data('bs.tooltip'), 'tooltip has data')
assert.ok($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events') assert.ok($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events')
@ -332,7 +340,9 @@ $(function () {
assert.expect(1) assert.expect(1)
$('<a href="#" rel="tooltip" title="tooltip on toggle"/>') $('<a href="#" rel="tooltip" title="tooltip on toggle"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'manual' }) .bootstrapTooltip({
trigger: 'manual'
})
.bootstrapTooltip('toggle') .bootstrapTooltip('toggle')
assert.ok($('.tooltip').is('.fade.show'), 'tooltip is faded active') assert.ok($('.tooltip').is('.fade.show'), 'tooltip is faded active')
@ -342,7 +352,9 @@ $(function () {
assert.expect(1) assert.expect(1)
$('<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>') $('<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'manual' }) .bootstrapTooltip({
trigger: 'manual'
})
.bootstrapTooltip('show') .bootstrapTooltip('show')
$('.tooltip').bootstrapTooltip('toggle') $('.tooltip').bootstrapTooltip('toggle')
@ -353,7 +365,9 @@ $(function () {
assert.expect(3) assert.expect(3)
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ container: 'body' }) .bootstrapTooltip({
container: 'body'
})
.bootstrapTooltip('show') .bootstrapTooltip('show')
assert.notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body') assert.notEqual($('body > .tooltip').length, 0, 'tooltip is direct descendant of body')
@ -366,10 +380,10 @@ $(function () {
QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) { QUnit.test('should add position class before positioning so that position-specific styles are taken into account', function (assert) {
assert.expect(2) assert.expect(2)
var done = assert.async() var done = assert.async()
var styles = '<style>' var styles = '<style>' +
+ '.bs-tooltip-right { white-space: nowrap; }' '.bs-tooltip-right { white-space: nowrap; }' +
+ '.bs-tooltip-right .tooltip-inner { max-width: none; }' '.bs-tooltip-right .tooltip-inner { max-width: none; }' +
+ '</style>' '</style>'
var $styles = $(styles).appendTo('head') var $styles = $(styles).appendTo('head')
var $container = $('<div/>').appendTo('#qunit-fixture') var $container = $('<div/>').appendTo('#qunit-fixture')
@ -440,7 +454,9 @@ $(function () {
.one('show.bs.tooltip', function () { .one('show.bs.tooltip', function () {
$(this).remove() $(this).remove()
}) })
.bootstrapTooltip({ placement: 'top' }) .bootstrapTooltip({
placement: 'top'
})
try { try {
$tooltip.bootstrapTooltip('show') $tooltip.bootstrapTooltip('show')
@ -456,11 +472,11 @@ $(function () {
assert.expect(1) assert.expect(1)
var done = assert.async() var done = assert.async()
var containerHTML = '<div id="test">' var containerHTML = '<div id="test">' +
+ '<p style="margin-top: 200px">' '<p style="margin-top: 200px">' +
+ '<a href="#" title="very very very very very very very long tooltip">Hover me</a>' '<a href="#" title="very very very very very very very long tooltip">Hover me</a>' +
+ '</p>' '</p>' +
+ '</div>' '</div>'
var $container = $(containerHTML) var $container = $(containerHTML)
.css({ .css({
@ -484,8 +500,7 @@ $(function () {
var $tooltip = $($(this).data('bs.tooltip').tip) var $tooltip = $($(this).data('bs.tooltip').tip)
if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($(this).offset().top)) assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) <= Math.round($(this).offset().top))
} } else {
else {
assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top)) assert.ok(Math.round($tooltip.offset().top + $tooltip.outerHeight()) >= Math.round($(this).offset().top))
} }
done() done()
@ -499,7 +514,9 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 }) .bootstrapTooltip({
delay: 150
})
setTimeout(function () { setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip is not faded active') assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip is not faded active')
@ -519,7 +536,9 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 }) .bootstrapTooltip({
delay: 150
})
setTimeout(function () { setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active') assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
@ -540,7 +559,12 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 150 } }) .bootstrapTooltip({
delay: {
show: 0,
hide: 150
}
})
setTimeout(function () { setTimeout(function () {
assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active') assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active')
@ -566,7 +590,9 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: 150 }) .bootstrapTooltip({
delay: 150
})
setTimeout(function () { setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active') assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
@ -587,7 +613,12 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 150, hide: 0 } }) .bootstrapTooltip({
delay: {
show: 150,
hide: 0
}
})
setTimeout(function () { setTimeout(function () {
assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active') assert.ok(!$('.tooltip').is('.fade.show'), '100ms: tooltip not faded active')
@ -608,7 +639,12 @@ $(function () {
var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ delay: { show: 0, hide: 150 } }) .bootstrapTooltip({
delay: {
show: 0,
hide: 150
}
})
setTimeout(function () { setTimeout(function () {
assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active') assert.ok($($tooltip.data('bs.tooltip').tip).is('.fade.show'), '1ms: tooltip faded active')
@ -623,7 +659,6 @@ $(function () {
assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.show'), '200ms: tooltip removed') assert.ok(!$($tooltip.data('bs.tooltip').tip).is('.show'), '200ms: tooltip removed')
done() done()
}, 200) }, 200)
}, 0) }, 0)
$tooltip.trigger('mouseenter') $tooltip.trigger('mouseenter')
@ -643,7 +678,10 @@ $(function () {
html: true, html: true,
animation: false, animation: false,
trigger: 'hover', trigger: 'hover',
delay: { show: 0, hide: 500 }, delay: {
show: 0,
hide: 500
},
container: $tooltip, container: $tooltip,
title: titleHtml title: titleHtml
}) })
@ -671,7 +709,10 @@ $(function () {
html: true, html: true,
animation: false, animation: false,
trigger: 'hover', trigger: 'hover',
delay: { show: 0, hide: 500 }, delay: {
show: 0,
hide: 500
},
title: titleHtml title: titleHtml
}) })
@ -708,11 +749,16 @@ $(function () {
assert.expect(41) assert.expect(41)
var $el = $('<button>Trigger</button>') var $el = $('<button>Trigger</button>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'click hover focus', animation: false }) .bootstrapTooltip({
trigger: 'click hover focus',
animation: false
})
var tooltip = $el.data('bs.tooltip') var tooltip = $el.data('bs.tooltip')
var $tooltip = $(tooltip.getTipElement()) var $tooltip = $(tooltip.getTipElement())
function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' } function showingTooltip() {
return $tooltip.hasClass('show') || tooltip._hoverState === 'show'
}
var tests = [ var tests = [
['mouseenter', 'mouseleave'], ['mouseenter', 'mouseleave'],
@ -746,12 +792,17 @@ $(function () {
assert.expect(3) assert.expect(3)
var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>') var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>')
.appendTo('#qunit-fixture') .appendTo('#qunit-fixture')
.bootstrapTooltip({ trigger: 'click hover focus', animation: false }) .bootstrapTooltip({
trigger: 'click hover focus',
animation: false
})
var tooltip = $el.data('bs.tooltip') var tooltip = $el.data('bs.tooltip')
var $tooltip = $(tooltip.getTipElement()) var $tooltip = $(tooltip.getTipElement())
function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' } function showingTooltip() {
return $tooltip.hasClass('show') || tooltip._hoverState === 'show'
}
$el.trigger('click') $el.trigger('click')
assert.ok(showingTooltip(), 'tooltip is faded in') assert.ok(showingTooltip(), 'tooltip is faded in')
@ -778,7 +829,9 @@ $(function () {
$(templateHTML).appendTo('#qunit-fixture') $(templateHTML).appendTo('#qunit-fixture')
$('#tooltipTest') $('#tooltipTest')
.bootstrapTooltip({ trigger: 'manuel' }) .bootstrapTooltip({
trigger: 'manuel'
})
.on('shown.bs.tooltip', function () { .on('shown.bs.tooltip', function () {
$('#modal-test').modal('hide') $('#modal-test').modal('hide')
}) })
@ -839,7 +892,6 @@ $(function () {
done() done()
}) })
$trigger.bootstrapTooltip('disable') $trigger.bootstrapTooltip('disable')
$trigger.trigger($.Event('click')) $trigger.trigger($.Event('click'))
setTimeout(function () { setTimeout(function () {

10
js/tests/unit/util.js
View File

@ -9,16 +9,16 @@ $(function () {
var $el = $('<div data-target="body"></div>').appendTo($('#qunit-fixture')) var $el = $('<div data-target="body"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getSelectorFromElement($el[0]), 'body') assert.strictEqual(Util.getSelectorFromElement($el[0]), 'body')
// not found element // Not found element
var $el2 = $('<div data-target="#fakeDiv"></div>').appendTo($('#qunit-fixture')) var $el2 = $('<div data-target="#fakeDiv"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getSelectorFromElement($el2[0]), null) assert.strictEqual(Util.getSelectorFromElement($el2[0]), null)
// should escape ID and find the correct element // Should escape ID and find the correct element
var $el3 = $('<div data-target="#collapse:Example"></div>').appendTo($('#qunit-fixture')) var $el3 = $('<div data-target="#collapse:Example"></div>').appendTo($('#qunit-fixture'))
$('<div id="collapse:Example"></div>').appendTo($('#qunit-fixture')) $('<div id="collapse:Example"></div>').appendTo($('#qunit-fixture'))
assert.strictEqual(Util.getSelectorFromElement($el3[0]), '#collapse\\:Example') assert.strictEqual(Util.getSelectorFromElement($el3[0]), '#collapse\\:Example')
// if $.escapeSelector doesn't exist in older jQuery versions (< 3) // If $.escapeSelector doesn't exist in older jQuery versions (< 3)
var tmpEscapeSelector = $.escapeSelector var tmpEscapeSelector = $.escapeSelector
delete $.escapeSelector delete $.escapeSelector
assert.ok(typeof $.escapeSelector === 'undefined', '$.escapeSelector undefined') assert.ok(typeof $.escapeSelector === 'undefined', '$.escapeSelector undefined')
@ -40,8 +40,8 @@ $(function () {
try { try {
Util.typeCheckConfig(namePlugin, config, defaultType) Util.typeCheckConfig(namePlugin, config, defaultType)
} catch (e) { } catch (err) {
assert.strictEqual(e.message, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".') assert.strictEqual(err.message, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')
} }
}) })