diff options
author | XhmikosR <xhmikosr@gmail.com> | 2017-12-16 15:00:38 +0300 |
---|---|---|
committer | XhmikosR <xhmikosr@gmail.com> | 2018-01-11 19:48:46 +0300 |
commit | 80d0943b95984bfaf4997d2198d467876d294bd8 (patch) | |
tree | fa2eb4c869753b6e20c771a928da460587f38fdf /js | |
parent | 6d336502c7e26c4cc5b35f1d7a19c067b774cb1f (diff) |
Comply to the new rules.
Diffstat (limited to 'js')
-rw-r--r-- | js/src/alert.js | 21 | ||||
-rw-r--r-- | js/src/button.js | 29 | ||||
-rw-r--r-- | js/src/carousel.js | 48 | ||||
-rw-r--r-- | js/src/collapse.js | 45 | ||||
-rw-r--r-- | js/src/dropdown.js | 75 | ||||
-rw-r--r-- | js/src/index.js | 4 | ||||
-rw-r--r-- | js/src/modal.js | 49 | ||||
-rw-r--r-- | js/src/popover.js | 40 | ||||
-rw-r--r-- | js/src/scrollspy.js | 76 | ||||
-rw-r--r-- | js/src/tab.js | 40 | ||||
-rw-r--r-- | js/src/tooltip.js | 87 | ||||
-rw-r--r-- | js/src/util.js | 19 | ||||
-rw-r--r-- | js/tests/unit/alert.js | 17 | ||||
-rw-r--r-- | js/tests/unit/button.js | 53 | ||||
-rw-r--r-- | js/tests/unit/carousel.js | 898 | ||||
-rw-r--r-- | js/tests/unit/collapse.js | 153 | ||||
-rw-r--r-- | js/tests/unit/dropdown.js | 800 | ||||
-rw-r--r-- | js/tests/unit/modal.js | 19 | ||||
-rw-r--r-- | js/tests/unit/popover.js | 18 | ||||
-rw-r--r-- | js/tests/unit/scrollspy.js | 580 | ||||
-rw-r--r-- | js/tests/unit/tab.js | 270 | ||||
-rw-r--r-- | js/tests/unit/tooltip.js | 156 | ||||
-rw-r--r-- | js/tests/unit/util.js | 14 |
23 files changed, 1773 insertions, 1738 deletions
diff --git a/js/src/alert.js b/js/src/alert.js index 9f17d5ed0e..147701bfe2 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -1,7 +1,6 @@ import $ from 'jquery' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): alert.js @@ -10,8 +9,6 @@ import Util from './util' */ const Alert = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -42,7 +39,6 @@ const Alert = (($) => { SHOW : 'show' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -50,20 +46,17 @@ const Alert = (($) => { */ class Alert { - constructor(element) { this._element = element } - - // getters + // Getters static get VERSION() { return VERSION } - - // public + // Public close(element) { element = element || this._element @@ -83,8 +76,7 @@ const Alert = (($) => { this._element = null } - - // private + // Private _getRootElement(element) { const selector = Util.getSelectorFromElement(element) @@ -129,8 +121,7 @@ const Alert = (($) => { .remove() } - - // static + // Static static _jQueryInterface(config) { return this.each(function () { @@ -157,10 +148,8 @@ const Alert = (($) => { alertInstance.close(this) } } - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -173,7 +162,6 @@ const Alert = (($) => { Alert._handleDismiss(new Alert()) ) - /** * ------------------------------------------------------------------------ * jQuery @@ -188,7 +176,6 @@ const Alert = (($) => { } return Alert - })($) export default Alert diff --git a/js/src/button.js b/js/src/button.js index 56688e2462..445e78938b 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -8,8 +8,6 @@ import $ from 'jquery' */ const Button = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -39,11 +37,10 @@ const Button = (($) => { const Event = { CLICK_DATA_API : `click${EVENT_KEY}${DATA_API_KEY}`, - FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` - + `blur${EVENT_KEY}${DATA_API_KEY}` + FOCUS_BLUR_DATA_API : `focus${EVENT_KEY}${DATA_API_KEY} ` + + `blur${EVENT_KEY}${DATA_API_KEY}` } - /** * ------------------------------------------------------------------------ * Class Definition @@ -51,25 +48,22 @@ const Button = (($) => { */ class Button { - constructor(element) { this._element = element } - - // getters + // Getters static get VERSION() { return VERSION } - - // public + // Public toggle() { let triggerChangeEvent = true let addAriaPressed = true - const rootElement = $(this._element).closest( + const rootElement = $(this._element).closest( Selector.DATA_TOGGLE )[0] @@ -81,7 +75,6 @@ const Button = (($) => { if (input.checked && $(this._element).hasClass(ClassName.ACTIVE)) { triggerChangeEvent = false - } else { const activeElement = $(rootElement).find(Selector.ACTIVE)[0] @@ -105,7 +98,6 @@ const Button = (($) => { input.focus() addAriaPressed = false } - } if (addAriaPressed) { @@ -123,8 +115,7 @@ const Button = (($) => { this._element = null } - - // static + // Static static _jQueryInterface(config) { return this.each(function () { @@ -140,10 +131,8 @@ const Button = (($) => { } }) } - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -167,22 +156,20 @@ const Button = (($) => { $(button).toggleClass(ClassName.FOCUS, /^focus(in)?$/.test(event.type)) }) - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Button._jQueryInterface + $.fn[NAME] = Button._jQueryInterface $.fn[NAME].Constructor = Button - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Button._jQueryInterface } return Button - })($) export default Button diff --git a/js/src/carousel.js b/js/src/carousel.js index 083f2548e4..895d4dd3bf 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -1,7 +1,6 @@ import $ from 'jquery' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): carousel.js @@ -10,8 +9,6 @@ import Util from './util' */ const Carousel = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -84,7 +81,6 @@ const Carousel = (($) => { DATA_RIDE : '[data-ride="carousel"]' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -92,7 +88,6 @@ const Carousel = (($) => { */ class Carousel { - constructor(element, config) { this._items = null this._interval = null @@ -110,8 +105,7 @@ const Carousel = (($) => { this._addEventListeners() } - - // getters + // Getters static get VERSION() { return VERSION @@ -121,8 +115,7 @@ const Carousel = (($) => { return Default } - - // public + // Public next() { if (!this._isSliding) { @@ -198,9 +191,9 @@ const Carousel = (($) => { return } - const direction = index > activeIndex ? - Direction.NEXT : - Direction.PREV + const direction = index > activeIndex + ? Direction.NEXT + : Direction.PREV this._slide(direction, this._items[index]) } @@ -219,8 +212,7 @@ const Carousel = (($) => { this._indicatorsElement = null } - - // private + // Private _getConfig(config) { config = { @@ -242,7 +234,7 @@ const Carousel = (($) => { .on(Event.MOUSEENTER, (event) => this.pause(event)) .on(Event.MOUSELEAVE, (event) => this.cycle(event)) 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 // would stop cycling until user tapped out of it; // here, we listen for touchend, explicitly pause the carousel @@ -275,7 +267,6 @@ const Carousel = (($) => { this.next() break default: - return } } @@ -299,11 +290,10 @@ const Carousel = (($) => { const delta = direction === Direction.PREV ? -1 : 1 const itemIndex = (activeIndex + delta) % this._items.length - return itemIndex === -1 ? - this._items[this._items.length - 1] : this._items[itemIndex] + return itemIndex === -1 + ? this._items[this._items.length - 1] : this._items[itemIndex] } - _triggerSlideEvent(relatedTarget, eventDirectionName) { const targetIndex = this._getItemIndex(relatedTarget) const fromIndex = this._getItemIndex($(this._element).find(Selector.ACTIVE_ITEM)[0]) @@ -368,7 +358,7 @@ const Carousel = (($) => { } if (!activeElement || !nextElement) { - // some weirdness is happening, so we bail + // Some weirdness is happening, so we bail return } @@ -389,7 +379,6 @@ const Carousel = (($) => { if (Util.supportsTransitionEnd() && $(this._element).hasClass(ClassName.SLIDE)) { - $(nextElement).addClass(orderClassName) Util.reflow(nextElement) @@ -408,10 +397,8 @@ const Carousel = (($) => { this._isSliding = false setTimeout(() => $(this._element).trigger(slidEvent), 0) - }) .emulateTransitionEnd(TRANSITION_DURATION) - } else { $(activeElement).removeClass(ClassName.ACTIVE) $(nextElement).addClass(ClassName.ACTIVE) @@ -425,12 +412,11 @@ const Carousel = (($) => { } } - - // static + // Static static _jQueryInterface(config) { return this.each(function () { - let data = $(this).data(DATA_KEY) + let data = $(this).data(DATA_KEY) let _config = { ...Default, ...$(this).data() @@ -454,7 +440,7 @@ const Carousel = (($) => { data.to(config) } else if (typeof action === 'string') { if (typeof data[action] === 'undefined') { - throw new Error(`No method named "${action}"`) + throw new TypeError(`No method named "${action}"`) } data[action]() } else if (_config.interval) { @@ -495,10 +481,8 @@ const Carousel = (($) => { event.preventDefault() } - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -515,22 +499,20 @@ const Carousel = (($) => { }) }) - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Carousel._jQueryInterface + $.fn[NAME] = Carousel._jQueryInterface $.fn[NAME].Constructor = Carousel - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Carousel._jQueryInterface } return Carousel - })($) export default Carousel diff --git a/js/src/collapse.js b/js/src/collapse.js index b0c17112c6..eaaf155e1e 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -1,7 +1,6 @@ import $ from 'jquery' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): collapse.js @@ -10,8 +9,6 @@ import Util from './util' */ const Collapse = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -61,7 +58,6 @@ const Collapse = (($) => { DATA_TOGGLE : '[data-toggle="collapse"]' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -69,7 +65,6 @@ const Collapse = (($) => { */ class Collapse { - constructor(element, config) { this._isTransitioning = false this._element = element @@ -99,8 +94,7 @@ const Collapse = (($) => { } } - - // getters + // Getters static get VERSION() { return VERSION @@ -110,8 +104,7 @@ const Collapse = (($) => { return Default } - - // public + // Public toggle() { if ($(this._element).hasClass(ClassName.SHOW)) { @@ -136,7 +129,7 @@ const Collapse = (($) => { .find(Selector.ACTIVES) .filter(`[data-parent="${this._config.parent}"]`) ) - if (!actives.length) { + if (actives.length === 0) { actives = null } } @@ -169,7 +162,7 @@ const Collapse = (($) => { this._element.style[dimension] = 0 - if (this._triggerArray.length) { + if (this._triggerArray.length > 0) { $(this._triggerArray) .removeClass(ClassName.COLLAPSED) .attr('aria-expanded', true) @@ -196,7 +189,7 @@ const Collapse = (($) => { } const capitalizedDimension = dimension[0].toUpperCase() + dimension.slice(1) - const scrollSize = `scroll${capitalizedDimension}` + const scrollSize = `scroll${capitalizedDimension}` $(this._element) .one(Util.TRANSITION_END, complete) @@ -217,7 +210,7 @@ const Collapse = (($) => { return } - const dimension = this._getDimension() + const dimension = this._getDimension() this._element.style[dimension] = `${this._element.getBoundingClientRect()[dimension]}px` @@ -228,7 +221,7 @@ const Collapse = (($) => { .removeClass(ClassName.COLLAPSE) .removeClass(ClassName.SHOW) - if (this._triggerArray.length) { + if (this._triggerArray.length > 0) { for (let i = 0; i < this._triggerArray.length; i++) { const trigger = this._triggerArray[i] const selector = Util.getSelectorFromElement(trigger) @@ -236,7 +229,7 @@ const Collapse = (($) => { const $elem = $(selector) if (!$elem.hasClass(ClassName.SHOW)) { $(trigger).addClass(ClassName.COLLAPSED) - .attr('aria-expanded', false) + .attr('aria-expanded', false) } } } @@ -278,15 +271,14 @@ const Collapse = (($) => { this._isTransitioning = null } - - // private + // Private _getConfig(config) { config = { ...Default, ...config } - config.toggle = Boolean(config.toggle) // coerce string values + config.toggle = Boolean(config.toggle) // Coerce string values Util.typeCheckConfig(NAME, config, DefaultType) return config } @@ -301,7 +293,7 @@ const Collapse = (($) => { if (Util.isElement(this._config.parent)) { parent = this._config.parent - // it's a jQuery object + // It's a jQuery object if (typeof this._config.parent.jquery !== 'undefined') { parent = this._config.parent[0] } @@ -326,7 +318,7 @@ const Collapse = (($) => { if (element) { const isOpen = $(element).hasClass(ClassName.SHOW) - if (triggerArray.length) { + if (triggerArray.length > 0) { $(triggerArray) .toggleClass(ClassName.COLLAPSED, !isOpen) .attr('aria-expanded', isOpen) @@ -334,8 +326,7 @@ const Collapse = (($) => { } } - - // static + // Static static _getTargetFromElement(element) { const selector = Util.getSelectorFromElement(element) @@ -363,16 +354,14 @@ const Collapse = (($) => { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } data[config]() } }) } - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -395,22 +384,20 @@ const Collapse = (($) => { }) }) - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Collapse._jQueryInterface + $.fn[NAME] = Collapse._jQueryInterface $.fn[NAME].Constructor = Collapse - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Collapse._jQueryInterface } return Collapse - })($) export default Collapse diff --git a/js/src/dropdown.js b/js/src/dropdown.js index a2505c0b54..863f7812e5 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -2,7 +2,6 @@ import $ from 'jquery' import Popper from 'popper.js' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): dropdown.js @@ -11,7 +10,6 @@ import Util from './util' */ const Dropdown = (($) => { - /** * ------------------------------------------------------------------------ * Constants @@ -85,7 +83,6 @@ const Dropdown = (($) => { boundary : '(string|element)' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -93,7 +90,6 @@ const Dropdown = (($) => { */ class Dropdown { - constructor(element, config) { this._element = element this._popper = null @@ -104,8 +100,7 @@ const Dropdown = (($) => { this._addEventListeners() } - - // getters + // Getters static get VERSION() { return VERSION @@ -119,7 +114,7 @@ const Dropdown = (($) => { return DefaultType } - // public + // Public toggle() { if (this._element.disabled || $(this._element).hasClass(ClassName.DISABLED)) { @@ -136,7 +131,7 @@ const Dropdown = (($) => { } const relatedTarget = { - relatedTarget : this._element + relatedTarget: this._element } const showEvent = $.Event(Event.SHOW, relatedTarget) @@ -153,10 +148,10 @@ const Dropdown = (($) => { * Popper - https://popper.js.org */ 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 - // 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 ($(this._menu).hasClass(ClassName.MENULEFT) || $(this._menu).hasClass(ClassName.MENURIGHT)) { element = parent @@ -171,13 +166,12 @@ const Dropdown = (($) => { 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; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html if ('ontouchstart' in document.documentElement && - !$(parent).closest(Selector.NAVBAR_NAV).length) { + $(parent).closest(Selector.NAVBAR_NAV).length === 0) { $('body').children().on('mouseover', null, $.noop) } @@ -208,7 +202,7 @@ const Dropdown = (($) => { } } - // private + // Private _addEventListeners() { $(this._element).on(Event.CLICK, (event) => { @@ -244,7 +238,7 @@ const Dropdown = (($) => { _getPlacement() { const $parentDropdown = $(this._element).parent() - let placement = AttachmentMap.BOTTOM + let placement = AttachmentMap.BOTTOM // Handle dropup if ($parentDropdown.hasClass(ClassName.DROPUP)) { @@ -280,14 +274,14 @@ const Dropdown = (($) => { offsetConf.offset = this._config.offset } const popperConfig = { - placement : this._getPlacement(), - modifiers : { - offset : offsetConf, - flip : { - enabled : this._config.flip + placement: this._getPlacement(), + modifiers: { + offset: offsetConf, + flip: { + enabled: this._config.flip }, - preventOverflow : { - boundariesElement : this._config.boundary + preventOverflow: { + boundariesElement: this._config.boundary } } } @@ -295,7 +289,7 @@ const Dropdown = (($) => { return popperConfig } - // static + // Static static _jQueryInterface(config) { return this.each(function () { @@ -309,7 +303,7 @@ const Dropdown = (($) => { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } data[config]() } @@ -324,10 +318,10 @@ const Dropdown = (($) => { const toggles = $.makeArray($(Selector.DATA_TOGGLE)) for (let i = 0; i < toggles.length; i++) { - const parent = Dropdown._getParentFromElement(toggles[i]) - const context = $(toggles[i]).data(DATA_KEY) + const parent = Dropdown._getParentFromElement(toggles[i]) + const context = $(toggles[i]).data(DATA_KEY) const relatedTarget = { - relatedTarget : toggles[i] + relatedTarget: toggles[i] } if (!context) { @@ -340,8 +334,8 @@ const Dropdown = (($) => { } if (event && (event.type === 'click' && - /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) - && $.contains(parent, event.target)) { + /input|textarea/i.test(event.target.tagName) || event.type === 'keyup' && event.which === TAB_KEYCODE) && + $.contains(parent, event.target)) { continue } @@ -351,7 +345,7 @@ const Dropdown = (($) => { 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 if ('ontouchstart' in document.documentElement) { $('body').children().off('mouseover', null, $.noop) @@ -386,8 +380,8 @@ const Dropdown = (($) => { // - If key is other than escape // - If key is not up or down => not a dropdown command // - If trigger inside the menu => not a dropdown command - if (/input|textarea/i.test(event.target.tagName) ? - event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE && + if (/input|textarea/i.test(event.target.tagName) + ? event.which === SPACE_KEYCODE || event.which !== ESCAPE_KEYCODE && (event.which !== ARROW_DOWN_KEYCODE && event.which !== ARROW_UP_KEYCODE || $(event.target).closest(Selector.MENU).length) : !REGEXP_KEYDOWN.test(event.which)) { return @@ -405,7 +399,6 @@ const Dropdown = (($) => { if (!isActive && (event.which !== ESCAPE_KEYCODE || event.which !== SPACE_KEYCODE) || isActive && (event.which === ESCAPE_KEYCODE || event.which === SPACE_KEYCODE)) { - if (event.which === ESCAPE_KEYCODE) { const toggle = $(parent).find(Selector.DATA_TOGGLE)[0] $(toggle).trigger('focus') @@ -417,17 +410,17 @@ const Dropdown = (($) => { const items = $(parent).find(Selector.VISIBLE_ITEMS).get() - if (!items.length) { + if (items.length === 0) { return } 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-- } - if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) { // down + if (event.which === ARROW_DOWN_KEYCODE && index < items.length - 1) { // Down index++ } @@ -437,10 +430,8 @@ const Dropdown = (($) => { items[index].focus() } - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -448,7 +439,7 @@ const Dropdown = (($) => { */ $(document) - .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) + .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Dropdown._dataApiKeydownHandler) .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler) .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus) .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) { @@ -460,22 +451,20 @@ const Dropdown = (($) => { e.stopPropagation() }) - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Dropdown._jQueryInterface + $.fn[NAME] = Dropdown._jQueryInterface $.fn[NAME].Constructor = Dropdown - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Dropdown._jQueryInterface } return Dropdown - })($, Popper) export default Dropdown diff --git a/js/src/index.js b/js/src/index.js index 51d09b4e29..db504319c0 100644 --- a/js/src/index.js +++ b/js/src/index.js @@ -20,12 +20,12 @@ import Util from './util' (($) => { 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 minMajor = 1 - const ltMajor = 2 + const ltMajor = 2 const minMinor = 9 const minPatch = 1 const maxMajor = 4 diff --git a/js/src/modal.js b/js/src/modal.js index e98277a6dd..ef5994f986 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -1,7 +1,6 @@ import $ from 'jquery' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): modal.js @@ -10,8 +9,6 @@ import Util from './util' */ const Modal = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -73,7 +70,6 @@ const Modal = (($) => { NAVBAR_TOGGLER : '.navbar-toggler' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -81,7 +77,6 @@ const Modal = (($) => { */ class Modal { - constructor(element, config) { this._config = this._getConfig(config) this._element = element @@ -94,8 +89,7 @@ const Modal = (($) => { this._scrollbarWidth = 0 } - - // getters + // Getters static get VERSION() { return VERSION @@ -105,8 +99,7 @@ const Modal = (($) => { return Default } - - // public + // Public toggle(relatedTarget) { return this._isShown ? this.hide() : this.show(relatedTarget) @@ -196,7 +189,6 @@ const Modal = (($) => { $(this._dialog).off(Event.MOUSEDOWN_DISMISS) if (transition) { - $(this._element) .one(Util.TRANSITION_END, (event) => this._hideModal(event)) .emulateTransitionEnd(TRANSITION_DURATION) @@ -224,7 +216,7 @@ const Modal = (($) => { this._adjustDialog() } - // private + // Private _getConfig(config) { config = { @@ -241,7 +233,7 @@ const Modal = (($) => { if (!this._element.parentNode || 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) } @@ -282,11 +274,11 @@ const Modal = (($) => { _enforceFocus() { $(document) - .off(Event.FOCUSIN) // guard against infinite focus loop + .off(Event.FOCUSIN) // Guard against infinite focus loop .on(Event.FOCUSIN, (event) => { if (document !== event.target && this._element !== event.target && - !$(this._element).has(event.target).length) { + $(this._element).has(event.target).length === 0) { this._element.focus() } }) @@ -300,7 +292,6 @@ const Modal = (($) => { this.hide() } }) - } else if (!this._isShown) { $(this._element).off(Event.KEYDOWN_DISMISS) } @@ -334,8 +325,8 @@ const Modal = (($) => { } _showBackdrop(callback) { - const animate = $(this._element).hasClass(ClassName.FADE) ? - ClassName.FADE : '' + const animate = $(this._element).hasClass(ClassName.FADE) + ? ClassName.FADE : '' if (this._isShown && this._config.backdrop) { const doAnimate = Util.supportsTransitionEnd() && animate @@ -382,7 +373,6 @@ const Modal = (($) => { $(this._backdrop) .one(Util.TRANSITION_END, callback) .emulateTransitionEnd(BACKDROP_TRANSITION_DURATION) - } else if (!this._isShown && this._backdrop) { $(this._backdrop).removeClass(ClassName.SHOW) @@ -401,13 +391,11 @@ const Modal = (($) => { } else { callbackRemove() } - } else if (callback) { callback() } } - // ---------------------------------------------------------------------- // the following methods are used to handle overflowing modals // todo (fat): these should probably be refactored out of modal.js @@ -503,12 +491,11 @@ const Modal = (($) => { return scrollbarWidth } - - // static + // Static static _jQueryInterface(config, relatedTarget) { return this.each(function () { - let data = $(this).data(DATA_KEY) + let data = $(this).data(DATA_KEY) const _config = { ...Modal.Default, ...$(this).data(), @@ -522,7 +509,7 @@ const Modal = (($) => { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } data[config](relatedTarget) } else if (_config.show) { @@ -530,10 +517,8 @@ const Modal = (($) => { } }) } - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -548,8 +533,8 @@ const Modal = (($) => { target = $(selector)[0] } - const config = $(target).data(DATA_KEY) ? - 'toggle' : { + const config = $(target).data(DATA_KEY) + ? 'toggle' : { ...$(target).data(), ...$(this).data() } @@ -560,7 +545,7 @@ const Modal = (($) => { const $target = $(target).one(Event.SHOW, (showEvent) => { if (showEvent.isDefaultPrevented()) { - // only register focus restorer if modal will actually get shown + // Only register focus restorer if modal will actually get shown return } @@ -574,22 +559,20 @@ const Modal = (($) => { Modal._jQueryInterface.call($(target), config, this) }) - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Modal._jQueryInterface + $.fn[NAME] = Modal._jQueryInterface $.fn[NAME].Constructor = Modal - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Modal._jQueryInterface } return Modal - })($) export default Modal diff --git a/js/src/popover.js b/js/src/popover.js index f557e8bcd2..02d6827329 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -1,7 +1,6 @@ import $ from 'jquery' import Tooltip from './tooltip' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): popover.js @@ -10,8 +9,6 @@ import Tooltip from './tooltip' */ const Popover = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -31,10 +28,10 @@ const Popover = (($) => { placement : 'right', trigger : 'click', content : '', - template : '<div class="popover" role="tooltip">' - + '<div class="arrow"></div>' - + '<h3 class="popover-header"></h3>' - + '<div class="popover-body"></div></div>' + template : '<div class="popover" role="tooltip">' + + '<div class="arrow"></div>' + + '<h3 class="popover-header"></h3>' + + '<div class="popover-body"></div></div>' } const DefaultType = { @@ -65,7 +62,6 @@ const Popover = (($) => { MOUSELEAVE : `mouseleave${EVENT_KEY}` } - /** * ------------------------------------------------------------------------ * Class Definition @@ -73,9 +69,7 @@ const Popover = (($) => { */ class Popover extends Tooltip { - - - // getters + // Getters static get VERSION() { return VERSION @@ -105,8 +99,7 @@ const Popover = (($) => { return DefaultType } - - // overrides + // Overrides isWithContent() { return this.getTitle() || this._getContent() @@ -124,7 +117,7 @@ const Popover = (($) => { setContent() { 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()) let content = this._getContent() if (typeof content === 'function') { @@ -135,11 +128,11 @@ const Popover = (($) => { $tip.removeClass(`${ClassName.FADE} ${ClassName.SHOW}`) } - // private + // Private _getContent() { - return this.element.getAttribute('data-content') - || this.config.content + return this.element.getAttribute('data-content') || + this.config.content } _cleanTipClass() { @@ -150,12 +143,11 @@ const Popover = (($) => { } } - - // static + // Static static _jQueryInterface(config) { return this.each(function () { - let data = $(this).data(DATA_KEY) + let data = $(this).data(DATA_KEY) const _config = typeof config === 'object' ? config : null if (!data && /destroy|hide/.test(config)) { @@ -169,7 +161,7 @@ const Popover = (($) => { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } data[config]() } @@ -177,22 +169,20 @@ const Popover = (($) => { } } - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Popover._jQueryInterface + $.fn[NAME] = Popover._jQueryInterface $.fn[NAME].Constructor = Popover - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Popover._jQueryInterface } return Popover - })($) export default Popover diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 9a2562a7c1..da2941351b 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -1,7 +1,6 @@ import $ from 'jquery' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): scrollspy.js @@ -10,8 +9,6 @@ import Util from './util' */ const ScrollSpy = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -66,7 +63,6 @@ const ScrollSpy = (($) => { POSITION : 'position' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -74,14 +70,13 @@ const ScrollSpy = (($) => { */ class ScrollSpy { - constructor(element, config) { this._element = element this._scrollElement = element.tagName === 'BODY' ? window : element this._config = this._getConfig(config) - this._selector = `${this._config.target} ${Selector.NAV_LINKS},` - + `${this._config.target} ${Selector.LIST_ITEMS},` - + `${this._config.target} ${Selector.DROPDOWN_ITEMS}` + this._selector = `${this._config.target} ${Selector.NAV_LINKS},` + + `${this._config.target} ${Selector.LIST_ITEMS},` + + `${this._config.target} ${Selector.DROPDOWN_ITEMS}` this._offsets = [] this._targets = [] this._activeTarget = null @@ -93,8 +88,7 @@ const ScrollSpy = (($) => { this._process() } - - // getters + // Getters static get VERSION() { return VERSION @@ -104,18 +98,17 @@ const ScrollSpy = (($) => { return Default } - - // public + // Public refresh() { - const autoMethod = this._scrollElement !== this._scrollElement.window ? - OffsetMethod.POSITION : OffsetMethod.OFFSET + const autoMethod = this._scrollElement === this._scrollElement.window + ? OffsetMethod.OFFSET : OffsetMethod.POSITION - const offsetMethod = this._config.method === 'auto' ? - autoMethod : this._config.method + const offsetMethod = this._config.method === 'auto' + ? autoMethod : this._config.method - const offsetBase = offsetMethod === OffsetMethod.POSITION ? - this._getScrollTop() : 0 + const offsetBase = offsetMethod === OffsetMethod.POSITION + ? this._getScrollTop() : 0 this._offsets = [] this._targets = [] @@ -136,7 +129,7 @@ const ScrollSpy = (($) => { if (target) { const targetBCR = target.getBoundingClientRect() if (targetBCR.width || targetBCR.height) { - // todo (fat): remove sketch reliance on jQuery position/offset + // TODO (fat): remove sketch reliance on jQuery position/offset return [ $(target)[offsetMethod]().top + offsetBase, targetSelector @@ -145,8 +138,8 @@ const ScrollSpy = (($) => { } return null }) - .filter((item) => item) - .sort((a, b) => a[0] - b[0]) + .filter((item) => item) + .sort((a, b) => a[0] - b[0]) .forEach((item) => { this._offsets.push(item[0]) this._targets.push(item[1]) @@ -167,8 +160,7 @@ const ScrollSpy = (($) => { this._scrollHeight = null } - - // private + // Private _getConfig(config) { config = { @@ -191,8 +183,8 @@ const ScrollSpy = (($) => { } _getScrollTop() { - return this._scrollElement === window ? - this._scrollElement.pageYOffset : this._scrollElement.scrollTop + return this._scrollElement === window + ? this._scrollElement.pageYOffset : this._scrollElement.scrollTop } _getScrollHeight() { @@ -203,16 +195,16 @@ const ScrollSpy = (($) => { } _getOffsetHeight() { - return this._scrollElement === window ? - window.innerHeight : this._scrollElement.getBoundingClientRect().height + return this._scrollElement === window + ? window.innerHeight : this._scrollElement.getBoundingClientRect().height } _process() { const scrollTop = this._getScrollTop() + this._config.offset const scrollHeight = this._getScrollHeight() - const maxScroll = this._config.offset - + scrollHeight - - this._getOffsetHeight() + const maxScroll = this._config.offset + + scrollHeight - + this._getOffsetHeight() if (this._scrollHeight !== scrollHeight) { this.refresh() @@ -234,9 +226,9 @@ const ScrollSpy = (($) => { } for (let i = this._offsets.length; i--;) { - const isActiveTarget = this._activeTarget !== this._targets[i] - && scrollTop >= this._offsets[i] - && (typeof this._offsets[i + 1] === 'undefined' || + const isActiveTarget = this._activeTarget !== this._targets[i] && + scrollTop >= this._offsets[i] && + (typeof this._offsets[i + 1] === 'undefined' || scrollTop < this._offsets[i + 1]) if (isActiveTarget) { @@ -252,7 +244,7 @@ const ScrollSpy = (($) => { let queries = this._selector.split(',') // eslint-disable-next-line arrow-body-style - queries = queries.map((selector) => { + queries = queries.map((selector) => { return `${selector}[data-target="${target}"],` + `${selector}[href="${target}"]` }) @@ -281,12 +273,11 @@ const ScrollSpy = (($) => { $(this._selector).filter(Selector.ACTIVE).removeClass(ClassName.ACTIVE) } - - // static + // Static static _jQueryInterface(config) { return this.each(function () { - let data = $(this).data(DATA_KEY) + let data = $(this).data(DATA_KEY) const _config = typeof config === 'object' && config if (!data) { @@ -296,17 +287,14 @@ const ScrollSpy = (($) => { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } data[config]() } }) } - - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -322,22 +310,20 @@ const ScrollSpy = (($) => { } }) - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = ScrollSpy._jQueryInterface + $.fn[NAME] = ScrollSpy._jQueryInterface $.fn[NAME].Constructor = ScrollSpy - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return ScrollSpy._jQueryInterface } return ScrollSpy - })($) export default ScrollSpy diff --git a/js/src/tab.js b/js/src/tab.js index e501568e7e..0ae060c468 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -1,7 +1,6 @@ import $ from 'jquery' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): tab.js @@ -10,8 +9,6 @@ import Util from './util' */ const Tab = (($) => { - - /** * ------------------------------------------------------------------------ * Constants @@ -52,7 +49,6 @@ const Tab = (($) => { DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active' } - /** * ------------------------------------------------------------------------ * Class Definition @@ -60,20 +56,17 @@ const Tab = (($) => { */ class Tab { - constructor(element) { this._element = element } - - // getters + // Getters static get VERSION() { return VERSION } - - // public + // Public show() { if (this._element.parentNode && @@ -86,7 +79,7 @@ const Tab = (($) => { let target let previous const listElement = $(this._element).closest(Selector.NAV_LIST_GROUP)[0] - const selector = Util.getSelectorFromElement(this._element) + const selector = Util.getSelectorFromElement(this._element) if (listElement) { const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE @@ -147,8 +140,7 @@ const Tab = (($) => { this._element = null } - - // private + // Private _activate(element, container, callback) { let activeElements @@ -158,10 +150,10 @@ const Tab = (($) => { activeElements = $(container).children(Selector.ACTIVE) } - const active = activeElements[0] - const isTransitioning = callback - && Util.supportsTransitionEnd() - && (active && $(active).hasClass(ClassName.FADE)) + const active = activeElements[0] + const isTransitioning = callback && + Util.supportsTransitionEnd() && + (active && $(active).hasClass(ClassName.FADE)) const complete = () => this._transitionComplete( element, @@ -205,7 +197,6 @@ const Tab = (($) => { if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { - const dropdownElement = $(element).closest(Selector.DROPDOWN)[0] if (dropdownElement) { $(dropdownElement).find(Selector.DROPDOWN_TOGGLE).addClass(ClassName.ACTIVE) @@ -219,13 +210,12 @@ const Tab = (($) => { } } - - // static + // Static static _jQueryInterface(config) { return this.each(function () { const $this = $(this) - let data = $this.data(DATA_KEY) + let data = $this.data(DATA_KEY) if (!data) { data = new Tab(this) @@ -234,16 +224,14 @@ const Tab = (($) => { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } data[config]() } }) } - } - /** * ------------------------------------------------------------------------ * Data Api implementation @@ -256,22 +244,20 @@ const Tab = (($) => { Tab._jQueryInterface.call($(this), 'show') }) - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Tab._jQueryInterface + $.fn[NAME] = Tab._jQueryInterface $.fn[NAME].Constructor = Tab - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Tab._jQueryInterface } return Tab - })($) export default Tab diff --git a/js/src/tooltip.js b/js/src/tooltip.js index c26cdc387e..403f7e5b16 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -2,7 +2,6 @@ import $ from 'jquery' import Popper from 'popper.js' import Util from './util' - /** * -------------------------------------------------------------------------- * Bootstrap (v4.0.0-beta.3): tooltip.js @@ -11,7 +10,6 @@ import Util from './util' */ const Tooltip = (($) => { - /** * ------------------------------------------------------------------------ * Constants @@ -52,9 +50,9 @@ const Tooltip = (($) => { const Default = { animation : true, - template : '<div class="tooltip" role="tooltip">' - + '<div class="arrow"></div>' - + '<div class="tooltip-inner"></div></div>', + template : '<div class="tooltip" role="tooltip">' + + '<div class="arrow"></div>' + + '<div class="tooltip-inner"></div></div>', trigger : 'hover focus', title : '', delay : 0, @@ -111,14 +109,13 @@ const Tooltip = (($) => { */ class Tooltip { - constructor(element, config) { /** * Check for Popper dependency * Popper - https://popper.js.org */ 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 @@ -128,17 +125,15 @@ const Tooltip = (($) => { this._activeTrigger = {} this._popper = null - // protected + // Protected this.element = element this.config = this._getConfig(config) this.tip = null this._setListeners() - } - - // getters + // Getters static get VERSION() { return VERSION @@ -168,8 +163,7 @@ const Tooltip = (($) => { return DefaultType } - - // public + // Public enable() { this._isEnabled = true @@ -207,9 +201,7 @@ const Tooltip = (($) => { } else { context._leave(null, context) } - } else { - if ($(this.getTipElement()).hasClass(ClassName.SHOW)) { this._leave(null, this) return @@ -275,9 +267,9 @@ const Tooltip = (($) => { $(tip).addClass(ClassName.FADE) } - const placement = typeof this.config.placement === 'function' ? - this.config.placement.call(this, tip, this.element) : - this.config.placement + const placement = typeof this.config.placement === 'function' + ? this.config.placement.call(this, tip, this.element) + : this.config.placement const attachment = this._getAttachment(placement) this.addAttachmentClass(attachment) @@ -313,14 +305,14 @@ const Tooltip = (($) => { this._handlePopperPlacementChange(data) } }, - onUpdate : (data) => { + onUpdate: (data) => { this._handlePopperPlacementChange(data) } }) $(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; // only needed because of broken event delegation on iOS // https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html @@ -355,7 +347,7 @@ const Tooltip = (($) => { hide(callback) { const tip = this.getTipElement() const hideEvent = $.Event(this.constructor.Event.HIDE) - const complete = () => { + const complete = () => { if (this._hoverState !== HoverState.SHOW && tip.parentNode) { tip.parentNode.removeChild(tip) } @@ -380,7 +372,7 @@ const Tooltip = (($) => { $(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 if ('ontouchstart' in document.documentElement) { $('body').children().off('mouseover', null, $.noop) @@ -392,17 +384,14 @@ const Tooltip = (($) => { if (Util.supportsTransitionEnd() && $(this.tip).hasClass(ClassName.FADE)) { - $(tip) .one(Util.TRANSITION_END, complete) .emulateTransitionEnd(TRANSITION_DURATION) - } else { complete() } this._hoverState = '' - } update() { @@ -411,7 +400,7 @@ const Tooltip = (($) => { } } - // protected + // Protected isWithContent() { return Boolean(this.getTitle()) @@ -435,7 +424,7 @@ const Tooltip = (($) => { setElementContent($element, content) { const html = this.config.html 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 (!$(content).parent().is($element)) { $element.empty().append(content) @@ -452,16 +441,15 @@ const Tooltip = (($) => { let title = this.element.getAttribute('data-original-title') if (!title) { - title = typeof this.config.title === 'function' ? - this.config.title.call(this.element) : - this.config.title + title = typeof this.config.title === 'function' + ? this.config.title.call(this.element) + : this.config.title } return title } - - // private + // Private _getAttachment(placement) { return AttachmentMap[placement.toUpperCase()] @@ -477,14 +465,13 @@ const Tooltip = (($) => { this.config.selector, (event) => this.toggle(event) ) - } else if (trigger !== Trigger.MANUAL) { - const eventIn = trigger === Trigger.HOVER ? - this.constructor.Event.MOUSEENTER : - this.constructor.Event.FOCUSIN - const eventOut = trigger === Trigger.HOVER ? - this.constructor.Event.MOUSELEAVE : - this.constructor.Event.FOCUSOUT + const eventIn = trigger === Trigger.HOVER + ? this.constructor.Event.MOUSEENTER + : this.constructor.Event.FOCUSIN + const eventOut = trigger === Trigger.HOVER + ? this.constructor.Event.MOUSELEAVE + : this.constructor.Event.FOCUSOUT $(this.element) .on( @@ -508,8 +495,8 @@ const Tooltip = (($) => { if (this.config.selector) { this.config = { ...this.config, - trigger : 'manual', - selector : '' + trigger: 'manual', + selector: '' } } else { this._fixTitle() @@ -627,8 +614,8 @@ const Tooltip = (($) => { if (typeof config.delay === 'number') { config.delay = { - show : config.delay, - hide : config.delay + show: config.delay, + hide: config.delay } } @@ -677,7 +664,7 @@ const Tooltip = (($) => { } _fixTransition() { - const tip = this.getTipElement() + const tip = this.getTipElement() const initConfigAnimation = this.config.animation if (tip.getAttribute('x-placement') !== null) { return @@ -689,11 +676,11 @@ const Tooltip = (($) => { this.config.animation = initConfigAnimation } - // static + // Static static _jQueryInterface(config) { return this.each(function () { - let data = $(this).data(DATA_KEY) + let data = $(this).data(DATA_KEY) const _config = typeof config === 'object' && config if (!data && /dispose|hide/.test(config)) { @@ -707,7 +694,7 @@ const Tooltip = (($) => { if (typeof config === 'string') { if (typeof data[config] === 'undefined') { - throw new Error(`No method named "${config}"`) + throw new TypeError(`No method named "${config}"`) } data[config]() } @@ -715,22 +702,20 @@ const Tooltip = (($) => { } } - /** * ------------------------------------------------------------------------ * jQuery * ------------------------------------------------------------------------ */ - $.fn[NAME] = Tooltip._jQueryInterface + $.fn[NAME] = Tooltip._jQueryInterface $.fn[NAME].Constructor = Tooltip - $.fn[NAME].noConflict = function () { + $.fn[NAME].noConflict = function () { $.fn[NAME] = JQUERY_NO_CONFLICT return Tooltip._jQueryInterface } return Tooltip - })($, Popper) export default Tooltip diff --git a/js/src/util.js b/js/src/util.js index 0ffbb76a3e..373b8adac5 100644 --- a/js/src/util.js +++ b/js/src/util.js @@ -8,8 +8,6 @@ import $ from 'jquery' */ const Util = (($) => { - - /** * ------------------------------------------------------------------------ * Private TransitionEnd Helpers @@ -20,7 +18,7 @@ const Util = (($) => { const MAX_UID = 1000000 - // shoutout AngusCroll (https://goo.gl/pxwQGp) + // Shoutout AngusCroll (https://goo.gl/pxwQGp) function toType(obj) { return {}.toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() } @@ -75,10 +73,10 @@ const Util = (($) => { } 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 - selector = typeof $.escapeSelector === 'function' ? $.escapeSelector(selector).substr(1) : - selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1') + selector = typeof $.escapeSelector === 'function' ? $.escapeSelector(selector).substr(1) + : selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1') return selector } @@ -107,7 +105,7 @@ const Util = (($) => { selector = element.getAttribute('href') || '' } - // if it's an ID + // If it's an ID if (selector.charAt(0) === '#') { selector = escapeId(selector) } @@ -115,7 +113,7 @@ const Util = (($) => { try { const $selector = $(document).find(selector) return $selector.length > 0 ? selector : null - } catch (error) { + } catch (err) { return null } }, @@ -141,8 +139,8 @@ const Util = (($) => { if (Object.prototype.hasOwnProperty.call(configTypes, property)) { const expectedTypes = configTypes[property] const value = config[property] - const valueType = value && Util.isElement(value) ? - 'element' : toType(value) + const valueType = value && Util.isElement(value) + ? 'element' : toType(value) if (!new RegExp(expectedTypes).test(valueType)) { throw new Error( @@ -158,7 +156,6 @@ const Util = (($) => { setTransitionEndSupport() return Util - })($) export default Util diff --git a/js/tests/unit/alert.js b/js/tests/unit/alert.js index aee2b70d5f..2dcaeb6d00 100644 --- a/js/tests/unit/alert.js +++ b/js/tests/unit/alert.js @@ -34,10 +34,10 @@ $(function () { QUnit.test('should fade element out on clicking .close', function (assert) { assert.expect(1) - var alertHTML = '<div class="alert alert-danger fade show">' - + '<a class="close" href="#" data-dismiss="alert">×</a>' - + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' - + '</div>' + var alertHTML = '<div class="alert alert-danger fade show">' + + '<a class="close" href="#" data-dismiss="alert">×</a>' + + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + + '</div>' var $alert = $(alertHTML).bootstrapAlert().appendTo($('#qunit-fixture')) @@ -48,10 +48,10 @@ $(function () { QUnit.test('should remove element when clicking .close', function (assert) { assert.expect(2) - var alertHTML = '<div class="alert alert-danger fade show">' - + '<a class="close" href="#" data-dismiss="alert">×</a>' - + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' - + '</div>' + var alertHTML = '<div class="alert alert-danger fade show">' + + '<a class="close" href="#" data-dismiss="alert">×</a>' + + '<p><strong>Holy guacamole!</strong> Best check yo self, you\'re not looking too good.</p>' + + '</div>' var $alert = $(alertHTML).appendTo('#qunit-fixture').bootstrapAlert() assert.notEqual($('#qunit-fixture').find('.alert').length, 0, 'element added to dom') @@ -75,5 +75,4 @@ $(function () { }) .bootstrapAlert('close') }) - }) diff --git a/js/tests/unit/button.js b/js/tests/unit/button.js index 54a434d84a..cc2719c3a0 100644 --- a/js/tests/unit/button.js +++ b/js/tests/unit/button.js @@ -87,11 +87,11 @@ $(function () { assert.expect(1) var done = assert.async() - var groupHTML = '<div class="btn-group" data-toggle="buttons">' - + '<label class="btn btn-primary">' - + '<input type="radio" id="radio" autocomplete="off">Radio' - + '</label>' - + '</div>' + var groupHTML = '<div class="btn-group" data-toggle="buttons">' + + '<label class="btn btn-primary">' + + '<input type="radio" id="radio" autocomplete="off">Radio' + + '</label>' + + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') $group.find('input').on('change', function (e) { @@ -105,17 +105,17 @@ $(function () { QUnit.test('should check for closest matching toggle', function (assert) { assert.expect(12) - var groupHTML = '<div class="btn-group" data-toggle="buttons">' - + '<label class="btn btn-primary active">' - + '<input type="radio" name="options" id="option1" checked="true"> Option 1' - + '</label>' - + '<label class="btn btn-primary">' - + '<input type="radio" name="options" id="option2"> Option 2' - + '</label>' - + '<label class="btn btn-primary">' - + '<input type="radio" name="options" id="option3"> Option 3' - + '</label>' - + '</div>' + var groupHTML = '<div class="btn-group" data-toggle="buttons">' + + '<label class="btn btn-primary active">' + + '<input type="radio" name="options" id="option1" checked="true"> Option 1' + + '</label>' + + '<label class="btn btn-primary">' + + '<input type="radio" name="options" id="option2"> Option 2' + + '</label>' + + '<label class="btn btn-primary">' + + '<input type="radio" name="options" id="option3"> Option 3' + + '</label>' + + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') var $btn1 = $group.children().eq(0) @@ -131,7 +131,7 @@ $(function () { assert.ok($btn2.hasClass('active'), 'btn2 has active class') 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.find('input').prop('checked'), 'btn1 is not checked') 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) { assert.expect(2) - 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="radio" name="options" autocomplete="off"> Radio</label>' - + '</div>' + 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="radio" name="options" autocomplete="off"> Radio</label>' + + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') var $btn1 = $group.children().eq(0) @@ -158,11 +158,11 @@ $(function () { QUnit.test('should handle disabled attribute on non-button elements', function (assert) { assert.expect(2) - var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' - + '<label class="btn btn-danger disabled" aria-disabled="true" disabled>' - + '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' - + '</label>' - + '</div>' + var groupHTML = '<div class="btn-group disabled" data-toggle="buttons" aria-disabled="true" disabled>' + + '<label class="btn btn-danger disabled" aria-disabled="true" disabled>' + + '<input type="checkbox" aria-disabled="true" autocomplete="off" disabled class="disabled"/>' + + '</label>' + + '</div>' var $group = $(groupHTML).appendTo('#qunit-fixture') var $btn = $group.children().eq(0) @@ -172,5 +172,4 @@ $(function () { assert.ok($btn.is(':not(.active)'), 'button did not become active') assert.ok(!$input.is(':checked'), 'checkbox did not get checked') }) - }) diff --git a/js/tests/unit/carousel.js b/js/tests/unit/carousel.js index 48752cb917..12bb89e4f4 100644 --- a/js/tests/unit/carousel.js +++ b/js/tests/unit/carousel.js @@ -30,8 +30,7 @@ $(function () { $el.bootstrapCarousel() try { $el.bootstrapCarousel('noMethod') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'No method named "noMethod"') } }) @@ -55,8 +54,8 @@ $(function () { try { $('<div/>').bootstrapCarousel(config) - } catch (e) { - message = e.message + } catch (err) { + message = err.message } assert.ok(message === expectedMessage, 'correct error message') @@ -68,14 +67,13 @@ $(function () { try { $('<div/>').bootstrapCarousel(config) - } catch (e) { - message = e.message + } catch (err) { + message = err.message } assert.ok(message === expectedMessage, 'correct error message') }) - QUnit.test('should not fire slid when slide is prevented', function (assert) { assert.expect(1) var done = assert.async() @@ -93,26 +91,26 @@ $(function () { QUnit.test('should reset when slide is prevented', function (assert) { assert.expect(6) - var carouselHTML = '<div id="carousel-example-generic" class="carousel slide">' - + '<ol class="carousel-indicators">' - + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' - + '</ol>' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item">' - + '<div class="carousel-caption"/>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' - + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' - + '</div>' + var carouselHTML = '<div id="carousel-example-generic" class="carousel slide">' + + '<ol class="carousel-indicators">' + + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + + '</ol>' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item">' + + '<div class="carousel-caption"/>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + + '</div>' var $carousel = $(carouselHTML) var done = assert.async() @@ -139,39 +137,39 @@ $(function () { QUnit.test('should fire slide event with direction', function (assert) { assert.expect(4) - var carouselHTML = '<div id="myCarousel" class="carousel slide">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>First Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Second Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Third Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + '</div>' + var carouselHTML = '<div id="myCarousel" class="carousel slide">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>First Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Second Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Third Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + '</div>' var $carousel = $(carouselHTML) var done = assert.async() @@ -194,39 +192,39 @@ $(function () { QUnit.test('should fire slid event with direction', function (assert) { assert.expect(4) - var carouselHTML = '<div id="myCarousel" class="carousel slide">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>First Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Second Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Third Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + '</div>' + var carouselHTML = '<div id="myCarousel" class="carousel slide">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>First Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Second Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Third Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + '</div>' var $carousel = $(carouselHTML) var done = assert.async() @@ -249,39 +247,39 @@ $(function () { QUnit.test('should fire slide event with relatedTarget', function (assert) { assert.expect(2) - var template = '<div id="myCarousel" class="carousel slide">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>First Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Second Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Third Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + '</div>' + var template = '<div id="myCarousel" class="carousel slide">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>First Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Second Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Third Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + '</div>' var done = assert.async() @@ -296,39 +294,39 @@ $(function () { QUnit.test('should fire slid event with relatedTarget', function (assert) { assert.expect(2) - var template = '<div id="myCarousel" class="carousel slide">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>First Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Second Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Third Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + '</div>' + var template = '<div id="myCarousel" class="carousel slide">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>First Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Second Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Third Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + '</div>' var done = assert.async() @@ -343,30 +341,30 @@ $(function () { QUnit.test('should fire slid and slide events with from and to', function (assert) { assert.expect(4) - var template = '<div id="myCarousel" class="carousel slide">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>First Thumbnail label</h4>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Second Thumbnail label</h4>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Third Thumbnail label</h4>' - + '</div>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + '</div>' + var template = '<div id="myCarousel" class="carousel slide">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>First Thumbnail label</h4>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Second Thumbnail label</h4>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Third Thumbnail label</h4>' + + '</div>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + '</div>' var done = assert.async() $(template) @@ -386,39 +384,39 @@ $(function () { QUnit.test('should set interval from data attribute', function (assert) { assert.expect(4) - var templateHTML = '<div id="myCarousel" class="carousel slide">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>First Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Second Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '<div class="carousel-item">' - + '<img alt="">' - + '<div class="carousel-caption">' - + '<h4>Third Thumbnail label</h4>' - + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' - + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' - + 'ultricies vehicula ut id elit.</p>' - + '</div>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel slide">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>First Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Second Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '<div class="carousel-item">' + + '<img alt="">' + + '<div class="carousel-caption">' + + '<h4>Third Thumbnail label</h4>' + + '<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec ' + + 'id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ' + + 'ultricies vehicula ut id elit.</p>' + + '</div>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + '<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + '</div>' var $carousel = $(templateHTML) $carousel.attr('data-interval', 1814) @@ -448,19 +446,19 @@ $(function () { QUnit.test('should skip over non-items when using item indices', function (assert) { assert.expect(2) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '</div>' - + '<script type="text/x-metamorph" id="thingy"/>' - + '<div class="carousel-item">' - + '<img alt="">' - + '</div>' - + '<div class="carousel-item">' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '</div>' + + '<script type="text/x-metamorph" id="thingy"/>' + + '<div class="carousel-item">' + + '<img alt="">' + + '</div>' + + '<div class="carousel-item">' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() @@ -474,19 +472,19 @@ $(function () { QUnit.test('should skip over non-items when using next/prev methods', function (assert) { assert.expect(2) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' - + '<div class="carousel-inner">' - + '<div class="carousel-item active">' - + '<img alt="">' - + '</div>' - + '<script type="text/x-metamorph" id="thingy"/>' - + '<div class="carousel-item">' - + '<img alt="">' - + '</div>' - + '<div class="carousel-item">' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="1814">' + + '<div class="carousel-inner">' + + '<div class="carousel-item active">' + + '<img alt="">' + + '</div>' + + '<script type="text/x-metamorph" id="thingy"/>' + + '<div class="carousel-item">' + + '<img alt="">' + + '</div>' + + '<div class="carousel-item">' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() @@ -500,72 +498,80 @@ $(function () { QUnit.test('should go to previous item if left arrow key is pressed', function (assert) { assert.expect(2) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' - + '<div class="carousel-inner">' - + '<div id="first" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '<div id="second" class="carousel-item active">' - + '<img alt="">' - + '</div>' - + '<div id="third" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + + '<div class="carousel-inner">' + + '<div id="first" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '<div id="second" class="carousel-item active">' + + '<img alt="">' + + '</div>' + + '<div id="third" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') - $template.trigger($.Event('keydown', { which: 37 })) + $template.trigger($.Event('keydown', { + which: 37 + })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') }) QUnit.test('should go to next item if right arrow key is pressed', function (assert) { assert.expect(2) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' - + '<div class="carousel-inner">' - + '<div id="first" class="carousel-item active">' - + '<img alt="">' - + '</div>' - + '<div id="second" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '<div id="third" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + + '<div class="carousel-inner">' + + '<div id="first" class="carousel-item active">' + + '<img alt="">' + + '</div>' + + '<div id="second" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '<div id="third" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') - $template.trigger($.Event('keydown', { which: 39 })) + $template.trigger($.Event('keydown', { + which: 39 + })) assert.strictEqual($template.find('.carousel-item')[1], $template.find('.active')[0], 'second item active') }) QUnit.test('should not prevent keydown if key is not ARROW_LEFT or ARROW_RIGHT', function (assert) { assert.expect(2) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' - + '<div class="carousel-inner">' - + '<div id="first" class="carousel-item active">' - + '<img alt="">' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + + '<div class="carousel-inner">' + + '<div id="first" class="carousel-item active">' + + '<img alt="">' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() var done = assert.async() - var eventArrowDown = $.Event('keydown', { which: 40 }) - var eventArrowUp = $.Event('keydown', { which: 38 }) + var eventArrowDown = $.Event('keydown', { + which: 40 + }) + var eventArrowUp = $.Event('keydown', { + which: 38 + }) $template.one('keydown', function (event) { assert.strictEqual(event.isDefaultPrevented(), false) @@ -583,51 +589,55 @@ $(function () { QUnit.test('should support disabling the keyboard navigation', function (assert) { assert.expect(3) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">' - + '<div class="carousel-inner">' - + '<div id="first" class="carousel-item active">' - + '<img alt="">' - + '</div>' - + '<div id="second" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '<div id="third" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false" data-keyboard="false">' + + '<div class="carousel-inner">' + + '<div id="first" class="carousel-item active">' + + '<img alt="">' + + '</div>' + + '<div id="second" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '<div id="third" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) $template.bootstrapCarousel() assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') - $template.trigger($.Event('keydown', { which: 39 })) + $template.trigger($.Event('keydown', { + which: 39 + })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press') - $template.trigger($.Event('keydown', { which: 37 })) + $template.trigger($.Event('keydown', { + which: 37 + })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press') }) QUnit.test('should ignore keyboard events within <input>s and <textarea>s', function (assert) { assert.expect(7) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' - + '<div class="carousel-inner">' - + '<div id="first" class="carousel-item active">' - + '<img alt="">' - + '<input type="text" id="in-put">' - + '<textarea id="text-area"></textarea>' - + '</div>' - + '<div id="second" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '<div id="third" class="carousel-item">' - + '<img alt="">' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + + '<div class="carousel-inner">' + + '<div id="first" class="carousel-item active">' + + '<img alt="">' + + '<input type="text" id="in-put">' + + '<textarea id="text-area"></textarea>' + + '</div>' + + '<div id="second" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '<div id="third" class="carousel-item">' + + '<img alt="">' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) var $input = $template.find('#in-put') var $textarea = $template.find('#text-area') @@ -639,45 +649,53 @@ $(function () { assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item active') - - $input.trigger($.Event('keydown', { which: 39 })) + $input.trigger($.Event('keydown', { + which: 39 + })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <input>') - $input.trigger($.Event('keydown', { which: 37 })) + $input.trigger($.Event('keydown', { + which: 37 + })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <input>') - - $textarea.trigger($.Event('keydown', { which: 39 })) + $textarea.trigger($.Event('keydown', { + which: 39 + })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after right arrow press in <textarea>') - $textarea.trigger($.Event('keydown', { which: 37 })) + $textarea.trigger($.Event('keydown', { + which: 37 + })) assert.strictEqual($template.find('.carousel-item')[0], $template.find('.active')[0], 'first item still active after left arrow press in <textarea>') }) QUnit.test('should wrap around from end to start when wrap option is true', function (assert) { assert.expect(3) - var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">' - + '<ol class="carousel-indicators">' - + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' - + '</ol>' - + '<div class="carousel-inner">' - + '<div class="carousel-item active" id="one">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="two">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="three">' - + '<div class="carousel-caption"/>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' - + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' - + '</div>' + var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">' + + '<ol class="carousel-indicators">' + + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + + '</ol>' + + '<div class="carousel-inner">' + + '<div class="carousel-item active" id="one">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="two">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="three">' + + '<div class="carousel-caption"/>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + + '</div>' var $carousel = $(carouselHTML) - var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') } + var getActiveId = function () { + return $carousel.find('.carousel-item.active').attr('id') + } var done = assert.async() @@ -701,26 +719,26 @@ $(function () { QUnit.test('should wrap around from start to end when wrap option is true', function (assert) { assert.expect(1) - var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">' - + '<ol class="carousel-indicators">' - + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' - + '</ol>' - + '<div class="carousel-inner">' - + '<div class="carousel-item active" id="one">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="two">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="three">' - + '<div class="carousel-caption"/>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' - + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' - + '</div>' + var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="true">' + + '<ol class="carousel-indicators">' + + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + + '</ol>' + + '<div class="carousel-inner">' + + '<div class="carousel-item active" id="one">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="two">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="three">' + + '<div class="carousel-caption"/>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + + '</div>' var $carousel = $(carouselHTML) var done = assert.async() @@ -735,28 +753,30 @@ $(function () { QUnit.test('should stay at the end when the next method is called and wrap is false', function (assert) { assert.expect(3) - var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">' - + '<ol class="carousel-indicators">' - + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' - + '</ol>' - + '<div class="carousel-inner">' - + '<div class="carousel-item active" id="one">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="two">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="three">' - + '<div class="carousel-caption"/>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' - + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' - + '</div>' + var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">' + + '<ol class="carousel-indicators">' + + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + + '</ol>' + + '<div class="carousel-inner">' + + '<div class="carousel-item active" id="one">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="two">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="three">' + + '<div class="carousel-caption"/>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + + '</div>' var $carousel = $(carouselHTML) - var getActiveId = function () { return $carousel.find('.carousel-item.active').attr('id') } + var getActiveId = function () { + return $carousel.find('.carousel-item.active').attr('id') + } var done = assert.async() @@ -781,26 +801,26 @@ $(function () { QUnit.test('should stay at the start when the prev method is called and wrap is false', function (assert) { assert.expect(1) - var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">' - + '<ol class="carousel-indicators">' - + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' - + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' - + '</ol>' - + '<div class="carousel-inner">' - + '<div class="carousel-item active" id="one">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="two">' - + '<div class="carousel-caption"/>' - + '</div>' - + '<div class="carousel-item" id="three">' - + '<div class="carousel-caption"/>' - + '</div>' - + '</div>' - + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' - + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' - + '</div>' + var carouselHTML = '<div id="carousel-example-generic" class="carousel slide" data-wrap="false">' + + '<ol class="carousel-indicators">' + + '<li data-target="#carousel-example-generic" data-slide-to="0" class="active"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="1"/>' + + '<li data-target="#carousel-example-generic" data-slide-to="2"/>' + + '</ol>' + + '<div class="carousel-inner">' + + '<div class="carousel-item active" id="one">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="two">' + + '<div class="carousel-caption"/>' + + '</div>' + + '<div class="carousel-item" id="three">' + + '<div class="carousel-caption"/>' + + '</div>' + + '</div>' + + '<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"/>' + + '<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"/>' + + '</div>' var $carousel = $(carouselHTML) $carousel @@ -813,16 +833,16 @@ $(function () { QUnit.test('should not prevent keydown for inputs and textareas', function (assert) { assert.expect(2) - var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' - + '<div class="carousel-inner">' - + '<div id="first" class="carousel-item">' - + '<input type="text" id="inputText" />' - + '</div>' - + '<div id="second" class="carousel-item active">' - + '<textarea id="txtArea"></textarea>' - + '</div>' - + '</div>' - + '</div>' + var templateHTML = '<div id="myCarousel" class="carousel" data-interval="false">' + + '<div class="carousel-inner">' + + '<div id="first" class="carousel-item">' + + '<input type="text" id="inputText" />' + + '</div>' + + '<div id="second" class="carousel-item active">' + + '<textarea id="txtArea"></textarea>' + + '</div>' + + '</div>' + + '</div>' var $template = $(templateHTML) var done = assert.async() $template.appendTo('#qunit-fixture') @@ -830,7 +850,9 @@ $(function () { var $textArea = $template.find('#txtArea') $template.bootstrapCarousel() - var eventKeyDown = $.Event('keydown', { which: 65 }) // 65 for "a" + var eventKeyDown = $.Event('keydown', { + which: 65 + }) // 65 for "a" $inputText.on('keydown', function (event) { assert.strictEqual(event.isDefaultPrevented(), false) }) @@ -846,20 +868,20 @@ $(function () { QUnit.test('Should not go to the next item when the carousel is not visible', function (assert) { assert.expect(2) var done = assert.async() - var html = '<div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">' - + ' <div class="carousel-inner">' - + ' <div id="firstItem" class="carousel-item active">' - + ' <img alt="">' - + ' </div>' - + ' <div class="carousel-item">' - + ' <img alt="">' - + ' </div>' - + ' <div class="carousel-item">' - + ' <img alt="">' - + ' </div>' - + ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + ' <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + '</div>' + var html = '<div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">' + + ' <div class="carousel-inner">' + + ' <div id="firstItem" class="carousel-item active">' + + ' <img alt="">' + + ' </div>' + + ' <div class="carousel-item">' + + ' <img alt="">' + + ' </div>' + + ' <div class="carousel-item">' + + ' <img alt="">' + + ' </div>' + + ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + ' <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + '</div>' var $html = $(html) $html .appendTo('#qunit-fixture') @@ -883,22 +905,22 @@ $(function () { QUnit.test('Should not go to the next item when the parent of the carousel is not visible', function (assert) { assert.expect(2) var done = assert.async() - var html = '<div id="parent" style="display: none;">' - + ' <div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">' - + ' <div class="carousel-inner">' - + ' <div id="firstItem" class="carousel-item active">' - + ' <img alt="">' - + ' </div>' - + ' <div class="carousel-item">' - + ' <img alt="">' - + ' </div>' - + ' <div class="carousel-item">' - + ' <img alt="">' - + ' </div>' - + ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' - + ' <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' - + ' </div>' - + '</div>' + var html = '<div id="parent" style="display: none;">' + + ' <div id="myCarousel" class="carousel slide" data-interval="50" style="display: none;">' + + ' <div class="carousel-inner">' + + ' <div id="firstItem" class="carousel-item active">' + + ' <img alt="">' + + ' </div>' + + ' <div class="carousel-item">' + + ' <img alt="">' + + ' </div>' + + ' <div class="carousel-item">' + + ' <img alt="">' + + ' </div>' + + ' <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>' + + ' <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>' + + ' </div>' + + '</div>' var $html = $(html) $html.appendTo('#qunit-fixture') var $parent = $html.find('#parent') diff --git a/js/tests/unit/collapse.js b/js/tests/unit/collapse.js index f34225dd3b..b9e3c4757c 100644 --- a/js/tests/unit/collapse.js +++ b/js/tests/unit/collapse.js @@ -30,8 +30,7 @@ $(function () { $el.bootstrapCollapse() try { $el.bootstrapCollapse('noMethod') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'No method named "noMethod"') } }) @@ -52,7 +51,6 @@ $(function () { assert.ok(!/height/i.test($el.attr('style')), 'has height reset') }) - QUnit.test('should show multiple collapsed elements', function (assert) { assert.expect(4) var done = assert.async() @@ -279,11 +277,11 @@ $(function () { assert.expect(3) var done = assert.async() - var accordionHTML = '<div id="accordion">' - + '<div class="card"/>' - + '<div class="card"/>' - + '<div class="card"/>' - + '</div>' + var accordionHTML = '<div id="accordion">' + + '<div class="card"/>' + + '<div class="card"/>' + + '<div class="card"/>' + + '</div>' var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $target1 = $('<a role="button" data-toggle="collapse" href="#body1" />').appendTo($groups.eq(0)) @@ -313,11 +311,11 @@ $(function () { assert.expect(3) var done = assert.async() - var accordionHTML = '<div class="accordion">' - + '<div class="card"/>' - + '<div class="card"/>' - + '<div class="card"/>' - + '</div>' + var accordionHTML = '<div class="accordion">' + + '<div class="card"/>' + + '<div class="card"/>' + + '<div class="card"/>' + + '</div>' var $groups = $(accordionHTML).appendTo('#qunit-fixture').find('.card') var $target1 = $('<a role="button" data-toggle="collapse" href="#body1"/>').appendTo($groups.eq(0)) @@ -415,11 +413,11 @@ $(function () { assert.expect(3) var done = assert.async() - var accordionHTML = '<div id="accordion">' - + '<div class="card"/>' - + '<div class="card"/>' - + '<div class="card"/>' - + '</div>' + var accordionHTML = '<div id="accordion">' + + '<div class="card"/>' + + '<div class="card"/>' + + '<div class="card"/>' + + '</div>' 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)) @@ -449,10 +447,10 @@ $(function () { assert.expect(1) var done = assert.async() - var accordionHTML = '<div id="accordion">' - + '<div class="card"/>' - + '<div class="card"/>' - + '</div>' + var accordionHTML = '<div id="accordion">' + + '<div class="card"/>' + + '<div class="card"/>' + + '</div>' var showFired = false 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) { assert.expect(4) var done = assert.async() - var accordionHTML = '<div id="accordion">' - + '<div class="item">' - + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' - + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' - + '</div>' - + '<div class="item">' - + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' - + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' - + '</div>' - + '</div>' + var accordionHTML = '<div id="accordion">' + + '<div class="item">' + + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' + + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' + + '</div>' + + '<div class="item">' + + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' + + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' + + '</div>' + + '</div>' $(accordionHTML).appendTo('#qunit-fixture') var $trigger = $('#linkTrigger') @@ -546,22 +544,22 @@ $(function () { QUnit.test('should allow accordion to contain nested elements', function (assert) { assert.expect(4) var done = assert.async() - var accordionHTML = '<div id="accordion">' - + '<div class="row">' - + '<div class="col-lg-6">' - + '<div class="item">' - + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' - + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' - + '</div>' - + '</div>' - + '<div class="col-lg-6">' - + '<div class="item">' - + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' - + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' - + '</div>' - + '</div>' - + '</div>' - + '</div>' + var accordionHTML = '<div id="accordion">' + + '<div class="row">' + + '<div class="col-lg-6">' + + '<div class="item">' + + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' + + '<div id="collapseOne" class="collapse" role="tabpanel" aria-labelledby="headingThree" data-parent="#accordion"></div>' + + '</div>' + + '</div>' + + '<div class="col-lg-6">' + + '<div class="item">' + + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' + + '<div id="collapseTwo" class="collapse show" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion"></div>' + + '</div>' + + '</div>' + + '</div>' + + '</div>' $(accordionHTML).appendTo('#qunit-fixture') var $trigger = $('#linkTrigger') @@ -584,14 +582,14 @@ $(function () { QUnit.test('should allow accordion to target multiple elements', function (assert) { assert.expect(8) var done = assert.async() - var accordionHTML = '<div id="accordion">' - + '<a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>' - + '<a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>' - + '<div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' - + '<div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' - + '<div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' - + '<div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' - + '</div>' + var accordionHTML = '<div id="accordion">' + + '<a id="linkTriggerOne" data-toggle="collapse" data-target=".collapseOne" href="#" aria-expanded="false" aria-controls="collapseOne"></a>' + + '<a id="linkTriggerTwo" data-toggle="collapse" data-target=".collapseTwo" href="#" aria-expanded="false" aria-controls="collapseTwo"></a>' + + '<div id="collapseOneOne" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' + + '<div id="collapseOneTwo" class="collapse collapseOne" role="tabpanel" data-parent="#accordion"></div>' + + '<div id="collapseTwoOne" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' + + '<div id="collapseTwoTwo" class="collapse collapseTwo" role="tabpanel" data-parent="#accordion"></div>' + + '</div>' $(accordionHTML).appendTo('#qunit-fixture') var $trigger = $('#linkTriggerOne') @@ -659,24 +657,24 @@ $(function () { QUnit.test('should collapse accordion children but not nested accordion children', function (assert) { assert.expect(9) var done = assert.async() - $('<div id="accordion">' - + '<div class="item">' - + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' - + '<div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' - + '<div id="nestedAccordion">' - + '<div class="item">' - + '<a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>' - + '<div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' - + '</div>' - + '</div>' - + '</div>' - + '</div>' - + '</div>' - + '<div class="item">' - + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' - + '<div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>' - + '</div>' - + '</div>').appendTo('#qunit-fixture') + $('<div id="accordion">' + + '<div class="item">' + + '<a id="linkTrigger" data-toggle="collapse" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"></a>' + + '<div id="collapseOne" data-parent="#accordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' + + '<div id="nestedAccordion">' + + '<div class="item">' + + '<a id="nestedLinkTrigger" data-toggle="collapse" href="#nestedCollapseOne" aria-expanded="false" aria-controls="nestedCollapseOne"></a>' + + '<div id="nestedCollapseOne" data-parent="#nestedAccordion" class="collapse" role="tabpanel" aria-labelledby="headingThree">' + + '</div>' + + '</div>' + + '</div>' + + '</div>' + + '</div>' + + '<div class="item">' + + '<a id="linkTriggerTwo" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"></a>' + + '<div id="collapseTwo" data-parent="#accordion" class="collapse show" role="tabpanel" aria-labelledby="headingTwo"></div>' + + '</div>' + + '</div>').appendTo('#qunit-fixture') var $trigger = $('#linkTrigger') var $triggerTwo = $('#linkTriggerTwo') var $nestedTrigger = $('#nestedLinkTrigger') @@ -684,7 +682,6 @@ $(function () { var $collapseTwo = $('#collapseTwo') var $nestedCollapseOne = $('#nestedCollapseOne') - $collapseOne.one('shown.bs.collapse', function () { assert.ok($collapseOne.hasClass('show'), '#collapseOne is shown') assert.ok(!$collapseTwo.hasClass('show'), '#collapseTwo is not shown') @@ -828,8 +825,7 @@ $(function () { parent: $('.my-collapse') }) assert.ok(true, 'collapse correctly created') - } - catch (e) { + } catch (err) { assert.ok(false, 'collapse not created') } }) @@ -850,8 +846,7 @@ $(function () { parent: $('.my-collapse')[0] }) assert.ok(true, 'collapse correctly created') - } - catch (e) { + } catch (err) { assert.ok(false, 'collapse not created') } }) diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index 41c53a98ad..97ceb65961 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -30,8 +30,7 @@ $(function () { $el.bootstrapDropdown() try { $el.bootstrapDropdown('noMethod') - } - catch (err) { + } catch (err) { 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) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<button disabled href="#" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown</button>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' $(dropdownHTML).appendTo('#qunit-fixture') var $dropdown = $('#qunit-fixture').find('[data-toggle="dropdown"]').bootstrapDropdown() $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) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() $dropdown .parent('.dropdown') @@ -92,15 +91,15 @@ $(function () { QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() $dropdown .parent('.dropdown') @@ -114,21 +113,21 @@ $(function () { QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) - .appendTo('#qunit-fixture') - .find('[data-toggle="dropdown"]') - .bootstrapDropdown() + .appendTo('#qunit-fixture') + .find('[data-toggle="dropdown"]') + .bootstrapDropdown() $dropdown .parent('.dropdown') .on('shown.bs.dropdown', function () { @@ -141,17 +140,17 @@ $(function () { QUnit.test('should set aria-expanded="false" on target when dropdown menu is hidden', function (assert) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" aria-expanded="false" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -171,17 +170,17 @@ $(function () { QUnit.test('should not open dropdown if target is disabled via class', function (assert) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<button href="#" class="btn dropdown-toggle disabled" data-toggle="dropdown">Dropdown</button>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' $(dropdownHTML).appendTo('#qunit-fixture') 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) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() $dropdown .parent('.dropdown') @@ -219,17 +218,17 @@ $(function () { QUnit.test('should test if element has a # before assuming it\'s a selector', function (assert) { assert.expect(1) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="/foo/" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() $dropdown .parent('.dropdown') @@ -240,21 +239,20 @@ $(function () { $dropdown.trigger('click') }) - QUnit.test('should remove "show" class if body is clicked', function (assert) { assert.expect(2) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -275,53 +273,53 @@ $(function () { QUnit.test('should remove "show" class if tabbing outside of menu', function (assert) { assert.expect(2) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="dropdown-divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="dropdown-divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) - .appendTo('#qunit-fixture') - .find('[data-toggle="dropdown"]') - .bootstrapDropdown() + .appendTo('#qunit-fixture') + .find('[data-toggle="dropdown"]') + .bootstrapDropdown() $dropdown - .parent('.dropdown') - .on('shown.bs.dropdown', function () { - assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click') - var e = $.Event('keyup') - e.which = 9 // Tab - $(document.body).trigger(e) - }).on('hidden.bs.dropdown', function () { - assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed') - done() - }) + .parent('.dropdown') + .on('shown.bs.dropdown', function () { + assert.ok($dropdown.parent('.dropdown').hasClass('show'), '"show" class added on click') + var e = $.Event('keyup') + e.which = 9 // Tab + $(document.body).trigger(e) + }).on('hidden.bs.dropdown', function () { + assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), '"show" class removed') + done() + }) $dropdown.trigger('click') }) QUnit.test('should remove "show" class if body is clicked, with multiple dropdowns', function (assert) { assert.expect(7) var done = assert.async() - var dropdownHTML = '<div class="nav">' - + '<div class="dropdown" id="testmenu">' - + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#sub1">Submenu 1</a>' - + '</div>' - + '</div>' - + '</div>' - + '<div class="btn-group">' - + '<button class="btn">Actions</button>' - + '<button class="btn dropdown-toggle" data-toggle="dropdown"></button>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Action 1</a>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="nav">' + + '<div class="dropdown" id="testmenu">' + + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#sub1">Submenu 1</a>' + + '</div>' + + '</div>' + + '</div>' + + '<div class="btn-group">' + + '<button class="btn">Actions</button>' + + '<button class="btn dropdown-toggle" data-toggle="dropdown"></button>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Action 1</a>' + + '</div>' + + '</div>' var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]') var $first = $dropdowns.first() var $last = $dropdowns.last() @@ -329,45 +327,45 @@ $(function () { assert.strictEqual($dropdowns.length, 2, 'two dropdowns') $first.parent('.dropdown') - .on('shown.bs.dropdown', function () { - assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') - $(document.body).trigger('click') - }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') - $last.trigger('click') - }) + .on('shown.bs.dropdown', function () { + assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') + $(document.body).trigger('click') + }).on('hidden.bs.dropdown', function () { + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') + $last.trigger('click') + }) $last.parent('.btn-group') - .on('shown.bs.dropdown', function () { - assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') - $(document.body).trigger('click') - }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') - done() - }) + .on('shown.bs.dropdown', function () { + assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') + $(document.body).trigger('click') + }).on('hidden.bs.dropdown', function () { + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') + done() + }) $first.trigger('click') }) QUnit.test('should remove "show" class if body if tabbing outside of menu, with multiple dropdowns', function (assert) { assert.expect(7) var done = assert.async() - var dropdownHTML = '<div class="nav">' - + '<div class="dropdown" id="testmenu">' - + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#sub1">Submenu 1</a>' - + '</div>' - + '</div>' - + '</div>' - + '<div class="btn-group">' - + '<button class="btn">Actions</button>' - + '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Action 1</a>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="nav">' + + '<div class="dropdown" id="testmenu">' + + '<a class="dropdown-toggle" data-toggle="dropdown" href="#testmenu">Test menu <span class="caret"/></a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#sub1">Submenu 1</a>' + + '</div>' + + '</div>' + + '</div>' + + '<div class="btn-group">' + + '<button class="btn">Actions</button>' + + '<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></button>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Action 1</a>' + + '</div>' + + '</div>' var $dropdowns = $(dropdownHTML).appendTo('#qunit-fixture').find('[data-toggle="dropdown"]') var $first = $dropdowns.first() var $last = $dropdowns.last() @@ -375,44 +373,44 @@ $(function () { assert.strictEqual($dropdowns.length, 2, 'two dropdowns') $first.parent('.dropdown') - .on('shown.bs.dropdown', function () { - assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') - var e = $.Event('keyup') - e.which = 9 // Tab - $(document.body).trigger(e) - }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') - $last.trigger('click') - }) + .on('shown.bs.dropdown', function () { + assert.strictEqual($first.parents('.show').length, 1, '"show" class added on click') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') + var e = $.Event('keyup') + e.which = 9 // Tab + $(document.body).trigger(e) + }).on('hidden.bs.dropdown', function () { + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') + $last.trigger('click') + }) $last.parent('.btn-group') - .on('shown.bs.dropdown', function () { - assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click') - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') - var e = $.Event('keyup') - e.which = 9 // Tab - $(document.body).trigger(e) - }).on('hidden.bs.dropdown', function () { - assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') - done() - }) + .on('shown.bs.dropdown', function () { + assert.strictEqual($last.parent('.show').length, 1, '"show" class added on click') + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 1, 'only one dropdown is shown') + var e = $.Event('keyup') + e.which = 9 // Tab + $(document.body).trigger(e) + }).on('hidden.bs.dropdown', function () { + assert.strictEqual($('#qunit-fixture .dropdown-menu.show').length, 0, '"show" class removed') + done() + }) $first.trigger('click') }) QUnit.test('should fire show and hide event', function (assert) { assert.expect(2) - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -434,20 +432,19 @@ $(function () { $(document.body).trigger('click') }) - QUnit.test('should fire shown and hidden event', function (assert) { assert.expect(2) - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -471,17 +468,17 @@ $(function () { QUnit.test('should fire shown and hidden event with a relatedTarget', function (assert) { assert.expect(2) - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -505,19 +502,19 @@ $(function () { assert.expect(3) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '<input type="text" id="input">' - + '<textarea id="textarea"/>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '<input type="text" id="input">' + + '<textarea id="textarea"/>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -531,10 +528,14 @@ $(function () { .on('shown.bs.dropdown', function () { 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') - $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') done() @@ -546,15 +547,15 @@ $(function () { QUnit.test('should skip disabled element when using keyboard navigation', function (assert) { assert.expect(2) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item disabled" href="#">Disabled link</a>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item disabled" href="#">Disabled link</a>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -564,8 +565,12 @@ $(function () { .parent('.dropdown') .on('shown.bs.dropdown', function () { assert.ok(true, 'shown was fired') - $dropdown.trigger($.Event('keydown', { which: 40 })) - $dropdown.trigger($.Event('keydown', { which: 40 })) + $dropdown.trigger($.Event('keydown', { + which: 40 + })) + $dropdown.trigger($.Event('keydown', { + which: 40 + })) assert.ok(!$(document.activeElement).is('.disabled'), '.disabled is not focused') done() }) @@ -575,15 +580,15 @@ $(function () { QUnit.test('should focus next/previous element when using keyboard navigation', function (assert) { assert.expect(4) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a id="item1" class="dropdown-item" href="#">A link</a>' - + '<a id="item2" class="dropdown-item" href="#">Another link</a>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a id="item1" class="dropdown-item" href="#">A link</a>' + + '<a id="item2" class="dropdown-item" href="#">Another link</a>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -593,29 +598,34 @@ $(function () { .parent('.dropdown') .on('shown.bs.dropdown', function () { 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') - $(document.activeElement).trigger($.Event('keydown', { which: 40 })) + $(document.activeElement).trigger($.Event('keydown', { + which: 40 + })) 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') done() }) $dropdown.trigger('click') - }) QUnit.test('should not close the dropdown if the user clicks on a text field', function (assert) { assert.expect(2) var done = assert.async() - var dropdownHTML = '<div class="dropdown">' - + '<button type="button" data-toggle="dropdown">Dropdown</button>' - + '<div class="dropdown-menu">' - + '<input id="textField" type="text" />' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="dropdown">' + + '<button type="button" data-toggle="dropdown">Dropdown</button>' + + '<div class="dropdown-menu">' + + '<input id="textField" type="text" />' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .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) { assert.expect(2) var done = assert.async() - var dropdownHTML = '<div class="dropdown">' - + '<button type="button" data-toggle="dropdown">Dropdown</button>' - + '<div class="dropdown-menu">' - + '<textarea id="textArea"></textarea>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="dropdown">' + + '<button type="button" data-toggle="dropdown">Dropdown</button>' + + '<div class="dropdown-menu">' + + '<textarea id="textArea"></textarea>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -668,16 +678,16 @@ $(function () { QUnit.test('Dropdown should not use Popper.js in navbar', function (assert) { assert.expect(1) var done = assert.async() - var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' - + '<div class="dropdown">' - + ' <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">' - + ' <a class="dropdown-item" href="#">Action</a>' - + ' <a class="dropdown-item" href="#">Another action</a>' - + ' <a class="dropdown-item" href="#">Something else here</a>' - + ' </div>' - + '</div>' - + '</nav>' + var html = '<nav class="navbar navbar-expand-md navbar-light bg-light">' + + '<div class="dropdown">' + + ' <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">' + + ' <a class="dropdown-item" href="#">Action</a>' + + ' <a class="dropdown-item" href="#">Another action</a>' + + ' <a class="dropdown-item" href="#">Something else here</a>' + + ' </div>' + + '</div>' + + '</nav>' $(html).appendTo('#qunit-fixture') var $triggerDropdown = $('#qunit-fixture') @@ -698,19 +708,19 @@ $(function () { assert.expect(7) var done = assert.async() - var dropdownHTML = '<div class="tabs">' - + '<div class="dropdown">' - + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item" href="#">Secondary link</a>' - + '<a class="dropdown-item" href="#">Something else here</a>' - + '<div class="divider"/>' - + '<a class="dropdown-item" href="#">Another link</a>' - + '<input type="text" id="input">' - + '<textarea id="textarea"/>' - + '</div>' - + '</div>' - + '</div>' + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '<div class="divider"/>' + + '<a class="dropdown-item" href="#">Another link</a>' + + '<input type="text" id="input">' + + '<textarea id="textarea"/>' + + '</div>' + + '</div>' + + '</div>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') .find('[data-toggle="dropdown"]') @@ -723,25 +733,39 @@ $(function () { .parent('.dropdown') .on('shown.bs.dropdown', function () { // 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') - $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') // 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') - $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') // 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') - $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') // 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') done() }) @@ -754,17 +778,17 @@ $(function () { var done = assert.async() var dropdownHTML = - '<ul class="nav tabs">' - + ' <li class="dropdown">' - + ' <input type="text" id="input" data-toggle="dropdown">' - + ' <div class="dropdown-menu" role="menu">' - + ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' - + ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' - + ' <div class="divider"></div>' - + ' <a class="dropdown-item" href="#">Another link</a>' - + ' </div>' - + ' </li>' - + '</ul>' + '<ul class="nav tabs">' + + ' <li class="dropdown">' + + ' <input type="text" id="input" data-toggle="dropdown">' + + ' <div class="dropdown-menu" role="menu">' + + ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' + + ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' + + ' <div class="divider"></div>' + + ' <a class="dropdown-item" href="#">Another link</a>' + + ' </div>' + + ' </li>' + + '</ul>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') @@ -774,40 +798,46 @@ $(function () { var $input = $('#input') $dropdown - .parent('.dropdown') - .one('shown.bs.dropdown', function () { - assert.ok(true, 'shown was fired') - - // Key space - $input.trigger('focus').trigger($.Event('keydown', { which: 32 })) - assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') - assert.ok($(document.activeElement).is($input), 'input is still focused') - - // Key escape - $input.trigger('focus').trigger($.Event('keydown', { which: 27 })) - assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') - - $dropdown .parent('.dropdown') .one('shown.bs.dropdown', function () { + assert.ok(true, 'shown was fired') - // Key down - $input.trigger('focus').trigger($.Event('keydown', { which: 40 })) - assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + // Key space + $input.trigger('focus').trigger($.Event('keydown', { + which: 32 + })) + assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') + assert.ok($(document.activeElement).is($input), 'input is still focused') + + // Key escape + $input.trigger('focus').trigger($.Event('keydown', { + which: 27 + })) + assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') $dropdown - .parent('.dropdown') - .one('shown.bs.dropdown', function () { - - // Key up - $input.trigger('focus').trigger($.Event('keydown', { which: 38 })) - assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') - done() - }).bootstrapDropdown('toggle') + .parent('.dropdown') + .one('shown.bs.dropdown', function () { + // Key down + $input.trigger('focus').trigger($.Event('keydown', { + which: 40 + })) + assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + + $dropdown + .parent('.dropdown') + .one('shown.bs.dropdown', function () { + // Key up + $input.trigger('focus').trigger($.Event('keydown', { + which: 38 + })) + assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + done() + }).bootstrapDropdown('toggle') + $input.trigger('click') + }) $input.trigger('click') }) - $input.trigger('click') - }) $input.trigger('click') }) @@ -816,17 +846,17 @@ $(function () { var done = assert.async() var dropdownHTML = - '<ul class="nav tabs">' - + ' <li class="dropdown">' - + ' <textarea id="textarea" data-toggle="dropdown"></textarea>' - + ' <div class="dropdown-menu" role="menu">' - + ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' - + ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' - + ' <div class="divider"></div>' - + ' <a class="dropdown-item" href="#">Another link</a>' - + ' </div>' - + ' </li>' - + '</ul>' + '<ul class="nav tabs">' + + ' <li class="dropdown">' + + ' <textarea id="textarea" data-toggle="dropdown"></textarea>' + + ' <div class="dropdown-menu" role="menu">' + + ' <a id="item1" class="dropdown-item" href="#">Secondary link</a>' + + ' <a id="item2" class="dropdown-item" href="#">Something else here</a>' + + ' <div class="divider"></div>' + + ' <a class="dropdown-item" href="#">Another link</a>' + + ' </div>' + + ' </li>' + + '</ul>' var $dropdown = $(dropdownHTML) .appendTo('#qunit-fixture') @@ -836,40 +866,46 @@ $(function () { var $textarea = $('#textarea') $dropdown - .parent('.dropdown') - .one('shown.bs.dropdown', function () { - assert.ok(true, 'shown was fired') - - // Key space - $textarea.trigger('focus').trigger($.Event('keydown', { which: 32 })) - assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') - assert.ok($(document.activeElement).is($textarea), 'textarea is still focused') - - // Key escape - $textarea.trigger('focus').trigger($.Event('keydown', { which: 27 })) - assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') - - $dropdown .parent('.dropdown') .one('shown.bs.dropdown', function () { + assert.ok(true, 'shown was fired') - // Key down - $textarea.trigger('focus').trigger($.Event('keydown', { which: 40 })) - assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + // Key space + $textarea.trigger('focus').trigger($.Event('keydown', { + which: 32 + })) + assert.ok($dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is shown') + assert.ok($(document.activeElement).is($textarea), 'textarea is still focused') + + // Key escape + $textarea.trigger('focus').trigger($.Event('keydown', { + which: 27 + })) + assert.ok(!$dropdown.parent('.dropdown').hasClass('show'), 'dropdown menu is not shown') $dropdown - .parent('.dropdown') - .one('shown.bs.dropdown', function () { - - // Key up - $textarea.trigger('focus').trigger($.Event('keydown', { which: 38 })) - assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') - done() - }).bootstrapDropdown('toggle') + .parent('.dropdown') + .one('shown.bs.dropdown', function () { + // Key down + $textarea.trigger('focus').trigger($.Event('keydown', { + which: 40 + })) + assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + + $dropdown + .parent('.dropdown') + .one('shown.bs.dropdown', function () { + // Key up + $textarea.trigger('focus').trigger($.Event('keydown', { + which: 38 + })) + assert.ok(document.activeElement === $('#item1')[0], 'item1 is focused') + done() + }).bootstrapDropdown('toggle') + $textarea.trigger('click') + }) $textarea.trigger('click') }) - $textarea.trigger('click') - }) $textarea.trigger('click') }) }) diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js index 73935df1f6..c8b321a7c2 100644 --- a/js/tests/unit/modal.js +++ b/js/tests/unit/modal.js @@ -47,8 +47,7 @@ $(function () { $el.bootstrapModal() try { $el.bootstrapModal('noMethod') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'No method named "noMethod"') } }) @@ -213,7 +212,9 @@ $(function () { .on('shown.bs.modal', function () { assert.ok($('#modal-test').length, 'modal inserted into dom') assert.ok($('#modal-test').is(':visible'), 'modal visible') - $div.trigger($.Event('keydown', { which: 27 })) + $div.trigger($.Event('keydown', { + which: 27 + })) setTimeout(function () { assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') @@ -233,7 +234,9 @@ $(function () { .on('shown.bs.modal', function () { assert.ok($('#modal-test').length, 'modal inserted into dom') assert.ok($('#modal-test').is(':visible'), 'modal visible') - $div.trigger($.Event('keyup', { which: 27 })) + $div.trigger($.Event('keyup', { + which: 27 + })) setTimeout(function () { assert.ok($div.is(':visible'), 'modal still visible') @@ -289,7 +292,7 @@ $(function () { $('#close').trigger('click') }) .one('hidden.bs.modal', function () { - // after one open-close cycle + // After one open-close cycle assert.ok(!$('#modal-test').is(':visible'), 'modal hidden') $(this) .one('shown.bs.modal', function () { @@ -416,8 +419,8 @@ $(function () { var originalPadding = $body.css('padding-right') // Hide scrollbars to prevent the body overflowing - $body.css('overflow', 'hidden') // real scrollbar (for in-browser testing) - $('html').css('padding-right', '0px') // simulated scrollbar (for PhantomJS) + $body.css('overflow', 'hidden') // Real scrollbar (for in-browser testing) + $('html').css('padding-right', '0px') // Simulated scrollbar (for PhantomJS) $('<div id="modal-test"/>') .on('shown.bs.modal', function () { @@ -425,7 +428,7 @@ $(function () { assert.strictEqual(currentPadding, originalPadding, 'body padding should not be adjusted') $(this).bootstrapModal('hide') - // restore scrollbars + // Restore scrollbars $body.css('overflow', 'auto') $('html').css('padding-right', '16px') done() diff --git a/js/tests/unit/popover.js b/js/tests/unit/popover.js index 972da78282..b75837811f 100644 --- a/js/tests/unit/popover.js +++ b/js/tests/unit/popover.js @@ -31,8 +31,7 @@ $(function () { $el.bootstrapPopover() try { $el.bootstrapPopover('noMethod') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'No method named "noMethod"') } }) @@ -109,7 +108,11 @@ $(function () { var content = $('<i>¯\\_(ツ)_/¯</i>').get(0) var $popover = $('<a href="#" rel="tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapPopover({ html: true, title: title, content: content }) + .bootstrapPopover({ + html: true, + title: title, + content: content + }) $popover.bootstrapPopover('show') @@ -127,7 +130,10 @@ $(function () { var content = $('<i>¯\\_(ツ)_/¯</i>').get(0) var $popover = $('<a href="#" rel="tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapPopover({ title: title, content: content }) + .bootstrapPopover({ + title: title, + content: content + }) $popover.bootstrapPopover('show') @@ -138,7 +144,6 @@ $(function () { assert.ok(!$.contains($('.popover').get(0), content), 'content node copied, not moved') }) - QUnit.test('should not duplicate HTML object', function (assert) { assert.expect(6) var $div = $('<div/>').html('loves writing tests (╯°□°)╯︵ ┻━┻') @@ -331,8 +336,7 @@ $(function () { try { $('<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') done() } diff --git a/js/tests/unit/scrollspy.js b/js/tests/unit/scrollspy.js index 7bdeb4a8d7..095e744b76 100644 --- a/js/tests/unit/scrollspy.js +++ b/js/tests/unit/scrollspy.js @@ -30,8 +30,7 @@ $(function () { $el.bootstrapScrollspy() try { $el.bootstrapScrollspy('noMethod') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'No method named "noMethod"') } }) @@ -48,38 +47,40 @@ $(function () { assert.expect(1) var done = assert.async() - var sectionHTML = '<div id="root" class="active">' - + '<div class="topbar">' - + '<div class="topbar-inner">' - + '<div class="container" id="ss-target">' - + '<ul class="nav">' - + '<li class="nav-item"><a href="#masthead">Overview</a></li>' - + '<li class="nav-item"><a href="#detail">Detail</a></li>' - + '</ul>' - + '</div>' - + '</div>' - + '</div>' - + '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' - + '<div style="height: 200px;">' - + '<h4 id="masthead">Overview</h4>' - + '<p style="height: 200px">' - + 'Ad leggings keytar, brunch id art party dolor labore.' - + '</p>' - + '</div>' - + '<div style="height: 200px;">' - + '<h4 id="detail">Detail</h4>' - + '<p style="height: 200px">' - + 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' - + '</p>' - + '</div>' - + '</div>' - + '</div>' + var sectionHTML = '<div id="root" class="active">' + + '<div class="topbar">' + + '<div class="topbar-inner">' + + '<div class="container" id="ss-target">' + + '<ul class="nav">' + + '<li class="nav-item"><a href="#masthead">Overview</a></li>' + + '<li class="nav-item"><a href="#detail">Detail</a></li>' + + '</ul>' + + '</div>' + + '</div>' + + '</div>' + + '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' + + '<div style="height: 200px;">' + + '<h4 id="masthead">Overview</h4>' + + '<p style="height: 200px">' + + 'Ad leggings keytar, brunch id art party dolor labore.' + + '</p>' + + '</div>' + + '<div style="height: 200px;">' + + '<h4 id="detail">Detail</h4>' + + '<p style="height: 200px">' + + 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' + + '</p>' + + '</div>' + + '</div>' + + '</div>' var $section = $(sectionHTML).appendTo('#qunit-fixture') var $scrollspy = $section .show() .find('#scrollspy-example') - .bootstrapScrollspy({ target: '#ss-target' }) + .bootstrapScrollspy({ + target: '#ss-target' + }) $scrollspy.one('scroll', function () { assert.ok($section.hasClass('active'), '"active" class still on root node') @@ -93,38 +94,40 @@ $(function () { assert.expect(1) var done = assert.async() - var sectionHTML = '<div id="root" class="active">' - + '<div class="topbar">' - + '<div class="topbar-inner">' - + '<div class="container" id="ss-target">' - + '<ul class="nav">' - + '<li class="nav-item"><a href="#masthead">Overview</a></li>' - + '<li class="nav-item"><a href="#detail">Detail</a></li>' - + '</ul>' - + '</div>' - + '</div>' - + '</div>' - + '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' - + '<div style="height: 200px;">' - + '<h4 id="masthead">Overview</h4>' - + '<p style="height: 200px">' - + 'Ad leggings keytar, brunch id art party dolor labore.' - + '</p>' - + '</div>' - + '<div style="height: 200px;">' - + '<h4 id="detail">Detail</h4>' - + '<p style="height: 200px">' - + 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' - + '</p>' - + '</div>' - + '</div>' - + '</div>' + var sectionHTML = '<div id="root" class="active">' + + '<div class="topbar">' + + '<div class="topbar-inner">' + + '<div class="container" id="ss-target">' + + '<ul class="nav">' + + '<li class="nav-item"><a href="#masthead">Overview</a></li>' + + '<li class="nav-item"><a href="#detail">Detail</a></li>' + + '</ul>' + + '</div>' + + '</div>' + + '</div>' + + '<div id="scrollspy-example" style="height: 100px; overflow: auto;">' + + '<div style="height: 200px;">' + + '<h4 id="masthead">Overview</h4>' + + '<p style="height: 200px">' + + 'Ad leggings keytar, brunch id art party dolor labore.' + + '</p>' + + '</div>' + + '<div style="height: 200px;">' + + '<h4 id="detail">Detail</h4>' + + '<p style="height: 200px">' + + 'Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard.' + + '</p>' + + '</div>' + + '</div>' + + '</div>' var $section = $(sectionHTML).appendTo('#qunit-fixture') var $scrollspy = $section .show() .find('#scrollspy-example') - .bootstrapScrollspy({ target: document.getElementById('#ss-target') }) + .bootstrapScrollspy({ + target: document.getElementById('#ss-target') + }) $scrollspy.one('scroll', function () { assert.ok($section.hasClass('active'), '"active" class still on root node') @@ -138,25 +141,28 @@ $(function () { assert.expect(3) var done = assert.async() - var sectionHTML = '<div id="header" style="height: 500px;"></div>' - + '<nav id="navigation" class="navbar">' - + '<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"><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>' - + '</ul>' - + '</nav>' - + '<div id="content" style="height: 200px; overflow-y: auto;">' - + '<div id="one" style="height: 500px;"></div>' - + '<div id="two" style="height: 300px;"></div>' - + '<div id="three" style="height: 10px;"></div>' - + '</div>' + var sectionHTML = '<div id="header" style="height: 500px;"></div>' + + '<nav id="navigation" class="navbar">' + + '<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"><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>' + + '</ul>' + + '</nav>' + + '<div id="content" style="height: 200px; overflow-y: auto;">' + + '<div id="one" style="height: 500px;"></div>' + + '<div id="two" style="height: 300px;"></div>' + + '<div id="three" style="height: 10px;"></div>' + + '</div>' var $section = $(sectionHTML).appendTo('#qunit-fixture') var $scrollspy = $section .show() .filter('#content') - $scrollspy.bootstrapScrollspy({ target: '#navigation', offset: $scrollspy.position().top }) + $scrollspy.bootstrapScrollspy({ + target: '#navigation', + offset: $scrollspy.position().top + }) $scrollspy.one('scroll', function () { 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) { assert.expect(2) var navbarHtml = - '<nav class="navbar">' - + '<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-2" href="#div-2">div 2</a></li>' - + '</ul>' - + '</nav>' + '<nav class="navbar">' + + '<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-2" href="#div-2">div 2</a></li>' + + '</ul>' + + '</nav>' var contentHtml = - '<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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' - + '</div>' + '<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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' + + '</div>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '.navbar' }) + .bootstrapScrollspy({ + offset: 0, + target: '.navbar' + }) var done = assert.async() var testElementIsActiveAfterScroll = function (element, target) { @@ -201,29 +210,36 @@ $(function () { } $.when(testElementIsActiveAfterScroll('#a-1', '#div-1')) - .then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') }) - .then(function () { done() }) + .then(function () { + return testElementIsActiveAfterScroll('#a-2', '#div-2') + }) + .then(function () { + done() + }) }) QUnit.test('should add the active class to the correct element (nav markup)', function (assert) { assert.expect(2) var navbarHtml = - '<nav class="navbar">' - + '<nav class="nav">' - + '<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>' - + '</nav>' - + '</nav>' + '<nav class="navbar">' + + '<nav class="nav">' + + '<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>' + + '</nav>' + + '</nav>' var contentHtml = - '<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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' - + '</div>' + '<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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' + + '</div>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '.navbar' }) + .bootstrapScrollspy({ + offset: 0, + target: '.navbar' + }) var done = assert.async() var testElementIsActiveAfterScroll = function (element, target) { @@ -238,29 +254,36 @@ $(function () { } $.when(testElementIsActiveAfterScroll('#a-1', '#div-1')) - .then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') }) - .then(function () { done() }) + .then(function () { + 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) { assert.expect(2) var navbarHtml = - '<nav class="navbar">' - + '<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-2" href="#div-2">div 2</a>' - + '</div>' - + '</nav>' + '<nav class="navbar">' + + '<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-2" href="#div-2">div 2</a>' + + '</div>' + + '</nav>' var contentHtml = - '<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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' - + '</div>' + '<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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' + + '</div>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '.navbar' }) + .bootstrapScrollspy({ + offset: 0, + target: '.navbar' + }) var done = assert.async() var testElementIsActiveAfterScroll = function (element, target) { @@ -275,38 +298,47 @@ $(function () { } $.when(testElementIsActiveAfterScroll('#a-1', '#div-1')) - .then(function () { return testElementIsActiveAfterScroll('#a-2', '#div-2') }) - .then(function () { done() }) + .then(function () { + 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) { assert.expect(6) var times = 0 var done = assert.async() - var navbarHtml = '<nav id="navigation" class="navbar">' - + '<ul class="nav">' - + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>' - + '<ul class="nav">' - + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' - + '</ul>' - + '</li>' - + '</ul>' - + '</nav>' - - 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' - + '</div>' - + '</div>' + var navbarHtml = '<nav id="navigation" class="navbar">' + + '<ul class="nav">' + + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a>' + + '<ul class="nav">' + + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' + + '</ul>' + + '</li>' + + '</ul>' + + '</nav>' + + 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' + + '</div>' + + '</div>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '#navigation' }) + .bootstrapScrollspy({ + offset: 0, + target: '#navigation' + }) function testActiveElements() { - if (++times > 3) { return done() } + if (++times > 3) { + return done() + } $content.one('scroll', function () { assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') @@ -324,29 +356,34 @@ $(function () { assert.expect(6) var times = 0 var done = assert.async() - var navbarHtml = '<nav id="navigation" class="navbar">' - + '<nav class="nav">' - + '<a id="a-1" class="nav-link" href="#div-1">div 1</a>' - + '<nav class="nav">' - + '<a id="a-2" class="nav-link" href="#div-2">div 2</a>' - + '</nav>' - + '</nav>' - + '</nav>' - - 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' - + '</div>' - + '</div>' + var navbarHtml = '<nav id="navigation" class="navbar">' + + '<nav class="nav">' + + '<a id="a-1" class="nav-link" href="#div-1">div 1</a>' + + '<nav class="nav">' + + '<a id="a-2" class="nav-link" href="#div-2">div 2</a>' + + '</nav>' + + '</nav>' + + '</nav>' + + 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' + + '</div>' + + '</div>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '#navigation' }) + .bootstrapScrollspy({ + offset: 0, + target: '#navigation' + }) function testActiveElements() { - if (++times > 3) { return done() } + if (++times > 3) { + return done() + } $content.one('scroll', function () { assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') @@ -360,34 +397,38 @@ $(function () { testActiveElements() }) - QUnit.test('should add the active class correctly when there are nested elements (nav nav-item markup)', function (assert) { assert.expect(6) var times = 0 var done = assert.async() - var navbarHtml = '<nav id="navigation" class="navbar">' - + '<ul class="nav">' - + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>' - + '<ul class="nav">' - + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' - + '</ul>' - + '</ul>' - + '</nav>' - - 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' - + '</div>' - + '</div>' + var navbarHtml = '<nav id="navigation" class="navbar">' + + '<ul class="nav">' + + '<li class="nav-item"><a id="a-1" class="nav-link" href="#div-1">div 1</a></li>' + + '<ul class="nav">' + + '<li class="nav-item"><a id="a-2" class="nav-link" href="#div-2">div 2</a></li>' + + '</ul>' + + '</ul>' + + '</nav>' + + 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' + + '</div>' + + '</div>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '#navigation' }) + .bootstrapScrollspy({ + offset: 0, + target: '#navigation' + }) function testActiveElements() { - if (++times > 3) { return done() } + if (++times > 3) { + return done() + } $content.one('scroll', function () { assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') @@ -405,29 +446,34 @@ $(function () { assert.expect(6) var times = 0 var done = assert.async() - var navbarHtml = '<nav id="navigation" class="navbar">' - + '<div class="list-group">' - + '<a id="a-1" class="list-group-item" href="#div-1">div 1</a>' - + '<div class="list-group">' - + '<a id="a-2" class="list-group-item" href="#div-2">div 2</a>' - + '</div>' - + '</div>' - + '</nav>' - - 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' - + '</div>' - + '</div>' + var navbarHtml = '<nav id="navigation" class="navbar">' + + '<div class="list-group">' + + '<a id="a-1" class="list-group-item" href="#div-1">div 1</a>' + + '<div class="list-group">' + + '<a id="a-2" class="list-group-item" href="#div-2">div 2</a>' + + '</div>' + + '</div>' + + '</nav>' + + 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-2" style="height: 200px; padding: 0; margin: 0">div 2</div>' + + '</div>' + + '</div>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '#navigation' }) + .bootstrapScrollspy({ + offset: 0, + target: '#navigation' + }) function testActiveElements() { - if (++times > 3) { return done() } + if (++times > 3) { + return done() + } $content.one('scroll', function () { assert.ok($('#a-1').hasClass('active'), 'nav item for outer element has "active" class') @@ -445,23 +491,23 @@ $(function () { assert.expect(3) var done = assert.async() - var sectionHTML = '<div id="header" style="height: 500px;"></div>' - + '<nav id="navigation" class="navbar">' - + '<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="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>' - + '</ul>' - + '</nav>' + var sectionHTML = '<div id="header" style="height: 500px;"></div>' + + '<nav id="navigation" class="navbar">' + + '<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="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>' + + '</ul>' + + '</nav>' $(sectionHTML).appendTo('#qunit-fixture') - var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' - + '<div id="spacer" style="height: 100px;"/>' - + '<div id="one" style="height: 100px;"/>' - + '<div id="two" style="height: 100px;"/>' - + '<div id="three" style="height: 100px;"/>' - + '<div id="spacer" style="height: 100px;"/>' - + '</div>' + var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' + + '<div id="spacer" style="height: 100px;"/>' + + '<div id="one" style="height: 100px;"/>' + + '<div id="two" style="height: 100px;"/>' + + '<div id="three" style="height: 100px;"/>' + + '<div id="spacer" style="height: 100px;"/>' + + '</div>' var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture') $scrollspy @@ -486,25 +532,25 @@ $(function () { assert.expect(4) var done = assert.async() - var sectionHTML = '<div id="header" style="height: 500px;"></div>' - + '<nav id="navigation" class="navbar">' - + '<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="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>' - + '</ul>' - + '</nav>' + var sectionHTML = '<div id="header" style="height: 500px;"></div>' + + '<nav id="navigation" class="navbar">' + + '<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="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>' + + '</ul>' + + '</nav>' $(sectionHTML).appendTo('#qunit-fixture') var negativeHeight = -10 var startOfSectionTwo = 101 - var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' - + '<div id="one" style="height: 100px;"/>' - + '<div id="two" style="height: 100px;"/>' - + '<div id="three" style="height: 100px;"/>' - + '<div id="spacer" style="height: 100px;"/>' - + '</div>' + var scrollspyHTML = '<div id="content" style="height: 200px; overflow-y: auto;">' + + '<div id="one" style="height: 100px;"/>' + + '<div id="two" style="height: 100px;"/>' + + '<div id="three" style="height: 100px;"/>' + + '<div id="spacer" style="height: 100px;"/>' + + '</div>' var $scrollspy = $(scrollspyHTML).appendTo('#qunit-fixture') $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) { assert.expect(5) var navbarHtml = - '<nav class="navbar">' - + '<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-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-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>' - + '</ul>' - + '</nav>' + '<nav class="navbar">' + + '<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-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-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>' + + '</ul>' + + '</nav>' var contentHtml = - '<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-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-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>' + '<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-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-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>' $(navbarHtml).appendTo('#qunit-fixture') var $content = $(contentHtml) .appendTo('#qunit-fixture') - .bootstrapScrollspy({ offset: 0, target: '.navbar' }) + .bootstrapScrollspy({ + offset: 0, + target: '.navbar' + }) var testElementIsActiveAfterScroll = function (element, target) { var deferred = $.Deferred() @@ -565,11 +614,21 @@ $(function () { var done = assert.async() $.when(testElementIsActiveAfterScroll('#li-100-5', '#div-100-5')) - .then(function () { return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4') }) - .then(function () { 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() }) + .then(function () { + return testElementIsActiveAfterScroll('#li-100-4', '#div-100-4') + }) + .then(function () { + 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) { @@ -577,29 +636,32 @@ $(function () { var testOffsetMethod = function (type) { var $navbar = $( - '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' - + '<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-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>' - + '</ul>' - + '</nav>' + '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' + + '<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-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>' + + '</ul>' + + '</nav>' ) 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 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-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' - + '</div>' + '<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-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>' ) $navbar.appendTo('#qunit-fixture') $content.appendTo('#qunit-fixture') if (type === 'js') { - $content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'offset' }) - } - else if (type === 'data') { + $content.bootstrapScrollspy({ + target: '.navbar', + offset: 0, + method: 'offset' + }) + } else if (type === 'data') { $(window).trigger('load') } @@ -621,27 +683,34 @@ $(function () { var testOffsetMethod = function (type) { var $navbar = $( - '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' - + '<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-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>' - + '</ul>' - + '</nav>' + '<nav class="navbar"' + (type === 'data' ? ' id="navbar-offset-method-menu"' : '') + '>' + + '<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-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>' + + '</ul>' + + '</nav>' ) 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 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-3" style="position: relative; height: 250px; padding: 0; margin: 0">div 3</div>' - + '</div>' + '<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-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>' ) $navbar.appendTo('#qunit-fixture') $content.appendTo('#qunit-fixture') - if (type === 'js') { $content.bootstrapScrollspy({ target: '.navbar', offset: 0, method: 'position' }) } - else if (type === 'data') { $(window).trigger('load') } + if (type === 'js') { + $content.bootstrapScrollspy({ + target: '.navbar', + offset: 0, + method: 'position' + }) + } else if (type === 'data') { + $(window).trigger('load') + } var $target = $('#div-' + type + 'm-2') var scrollspy = $content.data('bs.scrollspy') @@ -655,5 +724,4 @@ $(function () { testOffsetMethod('js') testOffsetMethod('data') }) - }) diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index ee88bad305..5fb8d8d078 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -30,8 +30,7 @@ $(function () { $el.bootstrapTab() try { $el.bootstrapTab('noMethod') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'No method named "noMethod"') } }) @@ -46,10 +45,10 @@ $(function () { QUnit.test('should activate element by tab id', function (assert) { assert.expect(2) - var tabsHTML = '<ul class="nav">' - + '<li><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ul>' + var tabsHTML = '<ul class="nav">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' $('<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) { assert.expect(2) - var pillsHTML = '<ul class="nav nav-pills">' - + '<li><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ul>' + var pillsHTML = '<ul class="nav nav-pills">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' $('<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) { assert.expect(2) - var pillsHTML = '<ol class="nav nav-pills">' - + '<li><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ol>' + var pillsHTML = '<ol class="nav nav-pills">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ol>' $('<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) { assert.expect(0) - 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="#profile" class="nav-link" role="tab">Profile</a></li>' - + '</ul>' - + '<div class="tab-content">' - + '<div class="tab-pane active" id="home" role="tabpanel"></div>' - + '<div class="tab-pane" id="profile" role="tabpanel"></div>' - + '</div>' + 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="#profile" class="nav-link" role="tab">Profile</a></li>' + + '</ul>' + + '<div class="tab-content">' + + '<div class="tab-pane active" id="home" role="tabpanel"></div>' + + '<div class="tab-pane" id="profile" role="tabpanel"></div>' + + '</div>' $(tabsHTML) .find('a.active') @@ -161,14 +160,14 @@ $(function () { QUnit.test('should not fire shown when tab is disabled', function (assert) { assert.expect(0) - 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="#profile" class="nav-link disabled" role="tab">Profile</a></li>' - + '</ul>' - + '<div class="tab-content">' - + '<div class="tab-pane active" id="home" role="tabpanel"></div>' - + '<div class="tab-pane" id="profile" role="tabpanel"></div>' - + '</div>' + 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="#profile" class="nav-link disabled" role="tab">Profile</a></li>' + + '</ul>' + + '<div class="tab-content">' + + '<div class="tab-pane active" id="home" role="tabpanel"></div>' + + '<div class="tab-pane" id="profile" role="tabpanel"></div>' + + '</div>' $(tabsHTML) .find('a.disabled') @@ -183,116 +182,116 @@ $(function () { var done = assert.async() var dropHTML = - '<ul class="drop nav">' - + ' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' - + ' <ul class="dropdown-menu nav">' - + ' <li><a href="#1-1" data-toggle="tab">1-1</a></li>' - + ' <li><a href="#1-2" data-toggle="tab">1-2</a></li>' - + ' </ul>' - + ' </li>' - + '</ul>' + '<ul class="drop nav">' + + ' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>' + + ' <ul class="dropdown-menu nav">' + + ' <li><a href="#1-1" data-toggle="tab">1-1</a></li>' + + ' <li><a href="#1-2" data-toggle="tab">1-2</a></li>' + + ' </ul>' + + ' </li>' + + '</ul>' $(dropHTML) .find('ul > li:first-child a') - .bootstrapTab('show') + .bootstrapTab('show') .end() .find('ul > li:last-child a') - .on('show.bs.tab', function (e) { - assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget') - }) - .on('shown.bs.tab', function (e) { - assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget') - done() - }) - .bootstrapTab('show') + .on('show.bs.tab', function (e) { + assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget') + }) + .on('shown.bs.tab', function (e) { + assert.strictEqual(e.relatedTarget.hash, '#1-1', 'references correct element as relatedTarget') + done() + }) + .bootstrapTab('show') }) QUnit.test('should fire hide and hidden events', function (assert) { assert.expect(2) var done = assert.async() - var tabsHTML = '<ul class="nav">' - + '<li><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ul>' + var tabsHTML = '<ul class="nav">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' $(tabsHTML) .find('li:first-child a') - .on('hide.bs.tab', function () { - assert.ok(true, 'hide event fired') - }) - .bootstrapTab('show') + .on('hide.bs.tab', function () { + assert.ok(true, 'hide event fired') + }) + .bootstrapTab('show') .end() .find('li:last-child a') - .bootstrapTab('show') + .bootstrapTab('show') $(tabsHTML) .find('li:first-child a') - .on('hidden.bs.tab', function () { - assert.ok(true, 'hidden event fired') - done() - }) - .bootstrapTab('show') + .on('hidden.bs.tab', function () { + assert.ok(true, 'hidden event fired') + done() + }) + .bootstrapTab('show') .end() .find('li:last-child a') - .bootstrapTab('show') + .bootstrapTab('show') }) QUnit.test('should not fire hidden when hide is prevented', function (assert) { assert.expect(1) var done = assert.async() - var tabsHTML = '<ul class="nav">' - + '<li><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ul>' + var tabsHTML = '<ul class="nav">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' $(tabsHTML) .find('li:first-child a') - .on('hide.bs.tab', function (e) { - e.preventDefault() - assert.ok(true, 'hide event fired') - done() - }) - .on('hidden.bs.tab', function () { - assert.ok(false, 'hidden event fired') - }) - .bootstrapTab('show') + .on('hide.bs.tab', function (e) { + e.preventDefault() + assert.ok(true, 'hide event fired') + done() + }) + .on('hidden.bs.tab', function () { + assert.ok(false, 'hidden event fired') + }) + .bootstrapTab('show') .end() .find('li:last-child a') - .bootstrapTab('show') + .bootstrapTab('show') }) QUnit.test('hide and hidden events contain correct relatedTarget', function (assert) { assert.expect(2) var done = assert.async() - var tabsHTML = '<ul class="nav">' - + '<li><a href="#home">Home</a></li>' - + '<li><a href="#profile">Profile</a></li>' - + '</ul>' + var tabsHTML = '<ul class="nav">' + + '<li><a href="#home">Home</a></li>' + + '<li><a href="#profile">Profile</a></li>' + + '</ul>' $(tabsHTML) .find('li:first-child a') - .on('hide.bs.tab', function (e) { - assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget') - }) - .on('hidden.bs.tab', function (e) { - assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget') - done() - }) - .bootstrapTab('show') + .on('hide.bs.tab', function (e) { + assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget') + }) + .on('hidden.bs.tab', function (e) { + assert.strictEqual(e.relatedTarget.hash, '#profile', 'references correct element as relatedTarget') + done() + }) + .bootstrapTab('show') .end() .find('li:last-child a') - .bootstrapTab('show') + .bootstrapTab('show') }) QUnit.test('selected tab should have aria-selected', function (assert) { assert.expect(8) - 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" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' - + '</ul>' + 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" href="#profile" toggle="tab" aria-selected="false">Profile</a></li>' + + '</ul>' var $tabs = $(tabsHTML).appendTo('#qunit-fixture') $tabs.find('li:first-child a').bootstrapTab('show') @@ -314,10 +313,10 @@ $(function () { QUnit.test('selected tab should deactivate previous selected tab', function (assert) { assert.expect(2) - 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" href="#profile" data-toggle="tab">Profile</a></li>' - + '</ul>' + 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" href="#profile" data-toggle="tab">Profile</a></li>' + + '</ul>' var $tabs = $(tabsHTML).appendTo('#qunit-fixture') $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) { assert.expect(3) - 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="#profile" data-toggle="tab">Profile</a></li>' - + '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' - + '<div class="dropdown-menu">' - + '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' - + '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' - + '</div>' - + '</li>' - + '</ul>' + 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="#profile" data-toggle="tab">Profile</a></li>' + + '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>' + + '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>' + + '</div>' + + '</li>' + + '</ul>' var $tabs = $(tabsHTML).appendTo('#qunit-fixture') $tabs.find('li:first-child a').trigger('click') @@ -349,25 +348,25 @@ $(function () { assert.expect(2) var done = assert.async() var tabsHTML = - '<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 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>' - + '</nav>' - + '<div class="tab-content">' - + ' <div class="tab-pane" id="x-tab1" role="tabpanel">' - + ' <nav class="nav nav-tabs" role="tablist">' - + ' <a href="#nested-tab1" class="nav-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>' - + ' </nav>' - + ' <div class="tab-content">' - + ' <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>' - + ' </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>' + '<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 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>' + + '</nav>' + + '<div class="tab-content">' + + ' <div class="tab-pane" id="x-tab1" role="tabpanel">' + + ' <nav class="nav nav-tabs" role="tablist">' + + ' <a href="#nested-tab1" class="nav-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>' + + ' </nav>' + + ' <div class="tab-content">' + + ' <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>' + + ' </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>' $(tabsHTML).appendTo('#qunit-fixture') @@ -380,21 +379,20 @@ $(function () { assert.ok($('#x-tab1').hasClass('active')) $('#tabNested2').trigger($.Event('click')) }) - .trigger($.Event('click')) + .trigger($.Event('click')) }) QUnit.test('should not remove fade class if no active pane is present', function (assert) { assert.expect(6) var done = assert.async() - 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-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' - + '</ul>' - + '<div class="tab-content">' - + '<div class="tab-pane fade" id="home" role="tabpanel"></div>' - + '<div class="tab-pane fade" id="profile" role="tabpanel"></div>' - + '</div>' - + 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-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>' + + '</ul>' + + '<div class="tab-content">' + + '<div class="tab-pane fade" id="home" role="tabpanel"></div>' + + '<div class="tab-pane fade" id="profile" role="tabpanel"></div>' + + '</div>' $(tabsHTML).appendTo('#qunit-fixture') $('#tab-profile') diff --git a/js/tests/unit/tooltip.js b/js/tests/unit/tooltip.js index e4e6bdd6cc..bdccd3a38d 100644 --- a/js/tests/unit/tooltip.js +++ b/js/tests/unit/tooltip.js @@ -31,8 +31,7 @@ $(function () { $el.bootstrapTooltip() try { $el.bootstrapTooltip('noMethod') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'No method named "noMethod"') } }) @@ -105,13 +104,15 @@ $(function () { assert.expect(2) var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ placement: 'bottom' }) + .bootstrapTooltip({ + placement: 'bottom' + }) $tooltip.bootstrapTooltip('show') assert .ok($('.tooltip') - .is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied') + .is('.fade.bs-tooltip-bottom.show'), 'has correct classes applied') $tooltip.bootstrapTooltip('hide') @@ -122,7 +123,9 @@ $(function () { assert.expect(2) var $tooltip = $('<a href="#" rel="tooltip" title="<b>@fat</b>"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ html: true }) + .bootstrapTooltip({ + html: true + }) $tooltip.bootstrapTooltip('show') assert.notEqual($('.tooltip b').length, 0, 'b tag was inserted') @@ -136,7 +139,9 @@ $(function () { var title = document.createTextNode('<3 writing tests') var $tooltip = $('<a href="#" rel="tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ title: title }) + .bootstrapTooltip({ + title: title + }) $tooltip.bootstrapTooltip('show') @@ -150,7 +155,10 @@ $(function () { var title = document.createTextNode('<3 writing tests') var $tooltip = $('<a href="#" rel="tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ html: true, title: title }) + .bootstrapTooltip({ + html: true, + title: title + }) $tooltip.bootstrapTooltip('show') @@ -159,12 +167,13 @@ $(function () { assert.ok($.contains($('.tooltip').get(0), title), 'title node moved, not copied') }) - QUnit.test('should respect custom classes', function (assert) { assert.expect(2) var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .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') assert.ok($('.tooltip').hasClass('some-class'), 'custom class is present') @@ -191,8 +200,7 @@ $(function () { try { $('<div title="tooltip title" style="display: none"/>').bootstrapTooltip('show') - } - catch (err) { + } catch (err) { assert.strictEqual(err.message, 'Please use show on visible elements') done() } @@ -297,7 +305,7 @@ $(function () { assert.expect(7) var $tooltip = $('<div/>') .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($._data($tooltip[0], 'events').mouseover && $._data($tooltip[0], 'events').mouseout, 'tooltip has hover events') @@ -332,7 +340,9 @@ $(function () { assert.expect(1) $('<a href="#" rel="tooltip" title="tooltip on toggle"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ trigger: 'manual' }) + .bootstrapTooltip({ + trigger: 'manual' + }) .bootstrapTooltip('toggle') assert.ok($('.tooltip').is('.fade.show'), 'tooltip is faded active') @@ -342,7 +352,9 @@ $(function () { assert.expect(1) $('<a href="#" rel="tooltip" title="tooltip on toggle">@ResentedHook</a>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ trigger: 'manual' }) + .bootstrapTooltip({ + trigger: 'manual' + }) .bootstrapTooltip('show') $('.tooltip').bootstrapTooltip('toggle') @@ -353,7 +365,9 @@ $(function () { assert.expect(3) var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ container: 'body' }) + .bootstrapTooltip({ + container: 'body' + }) .bootstrapTooltip('show') 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) { assert.expect(2) var done = assert.async() - var styles = '<style>' - + '.bs-tooltip-right { white-space: nowrap; }' - + '.bs-tooltip-right .tooltip-inner { max-width: none; }' - + '</style>' + var styles = '<style>' + + '.bs-tooltip-right { white-space: nowrap; }' + + '.bs-tooltip-right .tooltip-inner { max-width: none; }' + + '</style>' var $styles = $(styles).appendTo('head') var $container = $('<div/>').appendTo('#qunit-fixture') @@ -440,7 +454,9 @@ $(function () { .one('show.bs.tooltip', function () { $(this).remove() }) - .bootstrapTooltip({ placement: 'top' }) + .bootstrapTooltip({ + placement: 'top' + }) try { $tooltip.bootstrapTooltip('show') @@ -456,11 +472,11 @@ $(function () { assert.expect(1) var done = assert.async() - var containerHTML = '<div id="test">' - + '<p style="margin-top: 200px">' - + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>' - + '</p>' - + '</div>' + var containerHTML = '<div id="test">' + + '<p style="margin-top: 200px">' + + '<a href="#" title="very very very very very very very long tooltip">Hover me</a>' + + '</p>' + + '</div>' var $container = $(containerHTML) .css({ @@ -484,8 +500,7 @@ $(function () { var $tooltip = $($(this).data('bs.tooltip').tip) if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { 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)) } done() @@ -499,7 +514,9 @@ $(function () { var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: 150 }) + .bootstrapTooltip({ + delay: 150 + }) setTimeout(function () { 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"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: 150 }) + .bootstrapTooltip({ + delay: 150 + }) setTimeout(function () { 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"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: { show: 0, hide: 150 } }) + .bootstrapTooltip({ + delay: { + show: 0, + hide: 150 + } + }) setTimeout(function () { assert.ok($('.tooltip').is('.fade.show'), '1ms: tooltip faded active') @@ -566,7 +590,9 @@ $(function () { var $tooltip = $('<a href="#" rel="tooltip" title="Another tooltip"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: 150 }) + .bootstrapTooltip({ + delay: 150 + }) setTimeout(function () { 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"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: { show: 150, hide: 0 } }) + .bootstrapTooltip({ + delay: { + show: 150, + hide: 0 + } + }) setTimeout(function () { 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"/>') .appendTo('#qunit-fixture') - .bootstrapTooltip({ delay: { show: 0, hide: 150 } }) + .bootstrapTooltip({ + delay: { + show: 0, + hide: 150 + } + }) setTimeout(function () { 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') done() }, 200) - }, 0) $tooltip.trigger('mouseenter') @@ -643,7 +678,10 @@ $(function () { html: true, animation: false, trigger: 'hover', - delay: { show: 0, hide: 500 }, + delay: { + show: 0, + hide: 500 + }, container: $tooltip, title: titleHtml }) @@ -671,7 +709,10 @@ $(function () { html: true, animation: false, trigger: 'hover', - delay: { show: 0, hide: 500 }, + delay: { + show: 0, + hide: 500 + }, title: titleHtml }) @@ -708,28 +749,33 @@ $(function () { assert.expect(41) var $el = $('<button>Trigger</button>') .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 = $(tooltip.getTipElement()) - function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' } + function showingTooltip() { + return $tooltip.hasClass('show') || tooltip._hoverState === 'show' + } var tests = [ - ['mouseenter', 'mouseleave'], + ['mouseenter', 'mouseleave'], - ['focusin', 'focusout'], + ['focusin', 'focusout'], - ['click', 'click'], + ['click', 'click'], - ['mouseenter', 'focusin', 'focusout', 'mouseleave'], - ['mouseenter', 'focusin', 'mouseleave', 'focusout'], + ['mouseenter', 'focusin', 'focusout', 'mouseleave'], + ['mouseenter', 'focusin', 'mouseleave', 'focusout'], - ['focusin', 'mouseenter', 'mouseleave', 'focusout'], - ['focusin', 'mouseenter', 'focusout', 'mouseleave'], + ['focusin', 'mouseenter', 'mouseleave', 'focusout'], + ['focusin', 'mouseenter', 'focusout', 'mouseleave'], - ['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'], - ['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'], - ['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout'] + ['click', 'focusin', 'mouseenter', 'focusout', 'mouseleave', 'click'], + ['mouseenter', 'click', 'focusin', 'focusout', 'mouseleave', 'click'], + ['mouseenter', 'focusin', 'click', 'click', 'mouseleave', 'focusout'] ] assert.ok(!showingTooltip()) @@ -746,12 +792,17 @@ $(function () { assert.expect(3) var $el = $('<a href="#" rel="tooltip" title="Test tooltip"/>') .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 = $(tooltip.getTipElement()) - function showingTooltip() { return $tooltip.hasClass('show') || tooltip._hoverState === 'show' } + function showingTooltip() { + return $tooltip.hasClass('show') || tooltip._hoverState === 'show' + } $el.trigger('click') assert.ok(showingTooltip(), 'tooltip is faded in') @@ -778,7 +829,9 @@ $(function () { $(templateHTML).appendTo('#qunit-fixture') $('#tooltipTest') - .bootstrapTooltip({ trigger: 'manuel' }) + .bootstrapTooltip({ + trigger: 'manuel' + }) .on('shown.bs.tooltip', function () { $('#modal-test').modal('hide') }) @@ -839,7 +892,6 @@ $(function () { done() }) - $trigger.bootstrapTooltip('disable') $trigger.trigger($.Event('click')) setTimeout(function () { diff --git a/js/tests/unit/util.js b/js/tests/unit/util.js index 7f590cc330..e56bef18eb 100644 --- a/js/tests/unit/util.js +++ b/js/tests/unit/util.js @@ -9,16 +9,16 @@ $(function () { var $el = $('<div data-target="body"></div>').appendTo($('#qunit-fixture')) assert.strictEqual(Util.getSelectorFromElement($el[0]), 'body') - // not found element + // Not found element var $el2 = $('<div data-target="#fakeDiv"></div>').appendTo($('#qunit-fixture')) 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')) $('<div id="collapse:Example"></div>').appendTo($('#qunit-fixture')) 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 delete $.escapeSelector assert.ok(typeof $.escapeSelector === 'undefined', '$.escapeSelector undefined') @@ -30,8 +30,8 @@ $(function () { assert.expect(1) var namePlugin = 'collapse' var defaultType = { - toggle : 'boolean', - parent : '(string|element)' + toggle: 'boolean', + parent: '(string|element)' } var config = { toggle: true, @@ -40,8 +40,8 @@ $(function () { try { Util.typeCheckConfig(namePlugin, config, defaultType) - } catch (e) { - assert.strictEqual(e.message, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".') + } catch (err) { + assert.strictEqual(err.message, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".') } }) |