2019-10-02 11:43:54 +02:00
import * as Util from '../../../src/util/index'
2021-05-13 17:17:20 +02:00
import { clearFixture , getFixture } from '../../helpers/fixture'
2022-01-30 13:30:04 +01:00
import { noop } from '../../../src/util/index'
2019-03-13 15:23:50 +01:00
describe ( 'Util' , ( ) => {
let fixtureEl
beforeAll ( ( ) => {
fixtureEl = getFixture ( )
} )
afterEach ( ( ) => {
clearFixture ( )
} )
describe ( 'getUID' , ( ) => {
it ( 'should generate uid' , ( ) => {
const uid = Util . getUID ( 'bs' )
const uid2 = Util . getUID ( 'bs' )
expect ( uid ) . not . toEqual ( uid2 )
} )
} )
describe ( 'getSelectorFromElement' , ( ) => {
2020-07-22 21:33:11 +02:00
it ( 'should get selector from data-bs-target' , ( ) => {
2019-03-13 15:23:50 +01:00
fixtureEl . innerHTML = [
2020-07-22 21:33:11 +02:00
'<div id="test" data-bs-target=".target"></div>' ,
2019-03-13 15:23:50 +01:00
'<div class="target"></div>'
] . join ( '' )
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getSelectorFromElement ( testEl ) ) . toEqual ( '.target' )
} )
2020-07-22 21:33:11 +02:00
it ( 'should get selector from href if no data-bs-target set' , ( ) => {
2019-03-13 15:23:50 +01:00
fixtureEl . innerHTML = [
'<a id="test" href=".target"></a>' ,
'<div class="target"></div>'
] . join ( '' )
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getSelectorFromElement ( testEl ) ) . toEqual ( '.target' )
} )
2020-07-22 21:33:11 +02:00
it ( 'should get selector from href if data-bs-target equal to #' , ( ) => {
2019-03-13 15:23:50 +01:00
fixtureEl . innerHTML = [
2020-07-22 21:33:11 +02:00
'<a id="test" data-bs-target="#" href=".target"></a>' ,
2019-03-13 15:23:50 +01:00
'<div class="target"></div>'
] . join ( '' )
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getSelectorFromElement ( testEl ) ) . toEqual ( '.target' )
} )
2021-02-03 20:58:54 +01:00
it ( 'should return null if a selector from a href is a url without an anchor' , ( ) => {
fixtureEl . innerHTML = [
'<a id="test" data-bs-target="#" href="foo/bar.html"></a>' ,
'<div class="target"></div>'
] . join ( '' )
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getSelectorFromElement ( testEl ) ) . toBeNull ( )
} )
it ( 'should return the anchor if a selector from a href is a url' , ( ) => {
fixtureEl . innerHTML = [
'<a id="test" data-bs-target="#" href="foo/bar.html#target"></a>' ,
'<div id="target"></div>'
] . join ( '' )
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getSelectorFromElement ( testEl ) ) . toEqual ( '#target' )
} )
2019-03-13 15:23:50 +01:00
it ( 'should return null if selector not found' , ( ) => {
fixtureEl . innerHTML = '<a id="test" href=".target"></a>'
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getSelectorFromElement ( testEl ) ) . toBeNull ( )
} )
2019-07-23 21:15:00 +02:00
it ( 'should return null if no selector' , ( ) => {
fixtureEl . innerHTML = '<div></div>'
const testEl = fixtureEl . querySelector ( 'div' )
expect ( Util . getSelectorFromElement ( testEl ) ) . toBeNull ( )
} )
} )
describe ( 'getElementFromSelector' , ( ) => {
2020-07-22 21:33:11 +02:00
it ( 'should get element from data-bs-target' , ( ) => {
2019-07-23 21:15:00 +02:00
fixtureEl . innerHTML = [
2020-07-22 21:33:11 +02:00
'<div id="test" data-bs-target=".target"></div>' ,
2019-07-23 21:15:00 +02:00
'<div class="target"></div>'
] . join ( '' )
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getElementFromSelector ( testEl ) ) . toEqual ( fixtureEl . querySelector ( '.target' ) )
} )
2020-07-22 21:33:11 +02:00
it ( 'should get element from href if no data-bs-target set' , ( ) => {
2019-07-23 21:15:00 +02:00
fixtureEl . innerHTML = [
'<a id="test" href=".target"></a>' ,
'<div class="target"></div>'
] . join ( '' )
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getElementFromSelector ( testEl ) ) . toEqual ( fixtureEl . querySelector ( '.target' ) )
} )
it ( 'should return null if element not found' , ( ) => {
fixtureEl . innerHTML = '<a id="test" href=".target"></a>'
const testEl = fixtureEl . querySelector ( '#test' )
expect ( Util . getElementFromSelector ( testEl ) ) . toBeNull ( )
} )
it ( 'should return null if no selector' , ( ) => {
fixtureEl . innerHTML = '<div></div>'
const testEl = fixtureEl . querySelector ( 'div' )
expect ( Util . getElementFromSelector ( testEl ) ) . toBeNull ( )
} )
2019-03-13 15:23:50 +01:00
} )
describe ( 'getTransitionDurationFromElement' , ( ) => {
it ( 'should get transition from element' , ( ) => {
fixtureEl . innerHTML = '<div style="transition: all 300ms ease-out;"></div>'
expect ( Util . getTransitionDurationFromElement ( fixtureEl . querySelector ( 'div' ) ) ) . toEqual ( 300 )
} )
it ( 'should return 0 if the element is undefined or null' , ( ) => {
expect ( Util . getTransitionDurationFromElement ( null ) ) . toEqual ( 0 )
expect ( Util . getTransitionDurationFromElement ( undefined ) ) . toEqual ( 0 )
} )
it ( 'should return 0 if the element do not possess transition' , ( ) => {
fixtureEl . innerHTML = '<div></div>'
expect ( Util . getTransitionDurationFromElement ( fixtureEl . querySelector ( 'div' ) ) ) . toEqual ( 0 )
} )
} )
describe ( 'triggerTransitionEnd' , ( ) => {
2022-01-30 13:30:04 +01:00
it ( 'should trigger transitionend event' , ( ) => {
return new Promise ( resolve => {
fixtureEl . innerHTML = '<div></div>'
2019-03-13 15:23:50 +01:00
2022-01-30 13:30:04 +01:00
const el = fixtureEl . querySelector ( 'div' )
const spy = spyOn ( el , 'dispatchEvent' ) . and . callThrough ( )
2019-03-13 15:23:50 +01:00
2022-01-30 13:30:04 +01:00
el . addEventListener ( 'transitionend' , ( ) => {
expect ( spy ) . toHaveBeenCalled ( )
resolve ( )
} )
2019-03-13 15:23:50 +01:00
2022-01-30 13:30:04 +01:00
Util . triggerTransitionEnd ( el )
} )
2019-03-13 15:23:50 +01:00
} )
} )
describe ( 'isElement' , ( ) => {
2021-05-13 17:17:20 +02:00
it ( 'should detect if the parameter is an element or not and return Boolean' , ( ) => {
2021-12-09 15:01:29 +01:00
fixtureEl . innerHTML = [
'<div id="foo" class="test"></div>' ,
'<div id="bar" class="test"></div>'
] . join ( '' )
2019-03-13 15:23:50 +01:00
2021-05-13 17:17:20 +02:00
const el = fixtureEl . querySelector ( '#foo' )
2019-03-13 15:23:50 +01:00
2021-10-14 17:16:54 +02:00
expect ( Util . isElement ( el ) ) . toBeTrue ( )
expect ( Util . isElement ( { } ) ) . toBeFalse ( )
expect ( Util . isElement ( fixtureEl . querySelectorAll ( '.test' ) ) ) . toBeFalse ( )
2019-03-13 15:23:50 +01:00
} )
it ( 'should detect jQuery element' , ( ) => {
fixtureEl . innerHTML = '<div></div>'
2021-05-13 17:17:20 +02:00
const el = fixtureEl . querySelector ( 'div' )
2019-03-13 15:23:50 +01:00
const fakejQuery = {
2021-05-13 17:17:20 +02:00
0 : el ,
jquery : 'foo'
}
2021-10-14 17:16:54 +02:00
expect ( Util . isElement ( fakejQuery ) ) . toBeTrue ( )
2021-05-13 17:17:20 +02:00
} )
} )
describe ( 'getElement' , ( ) => {
it ( 'should try to parse element' , ( ) => {
2021-12-09 15:01:29 +01:00
fixtureEl . innerHTML = [
'<div id="foo" class="test"></div>' ,
'<div id="bar" class="test"></div>'
] . join ( '' )
2021-05-13 17:17:20 +02:00
const el = fixtureEl . querySelector ( 'div' )
expect ( Util . getElement ( el ) ) . toEqual ( el )
expect ( Util . getElement ( '#foo' ) ) . toEqual ( el )
expect ( Util . getElement ( '#fail' ) ) . toBeNull ( )
expect ( Util . getElement ( { } ) ) . toBeNull ( )
expect ( Util . getElement ( [ ] ) ) . toBeNull ( )
expect ( Util . getElement ( ) ) . toBeNull ( )
expect ( Util . getElement ( null ) ) . toBeNull ( )
expect ( Util . getElement ( fixtureEl . querySelectorAll ( '.test' ) ) ) . toBeNull ( )
const fakejQueryObject = {
0 : el ,
jquery : 'foo'
2019-03-13 15:23:50 +01:00
}
2021-05-13 17:17:20 +02:00
expect ( Util . getElement ( fakejQueryObject ) ) . toEqual ( el )
2019-03-13 15:23:50 +01:00
} )
} )
describe ( 'isVisible' , ( ) => {
it ( 'should return false if the element is not defined' , ( ) => {
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( null ) ) . toBeFalse ( )
expect ( Util . isVisible ( undefined ) ) . toBeFalse ( )
2019-03-13 15:23:50 +01:00
} )
it ( 'should return false if the element provided is not a dom element' , ( ) => {
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( { } ) ) . toBeFalse ( )
2019-03-13 15:23:50 +01:00
} )
it ( 'should return false if the element is not visible with display none' , ( ) => {
fixtureEl . innerHTML = '<div style="display: none;"></div>'
const div = fixtureEl . querySelector ( 'div' )
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( div ) ) . toBeFalse ( )
2019-03-13 15:23:50 +01:00
} )
it ( 'should return false if the element is not visible with visibility hidden' , ( ) => {
fixtureEl . innerHTML = '<div style="visibility: hidden;"></div>'
const div = fixtureEl . querySelector ( 'div' )
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( div ) ) . toBeFalse ( )
2019-03-13 15:23:50 +01:00
} )
2021-05-20 15:50:53 +02:00
it ( 'should return false if an ancestor element is display none' , ( ) => {
2019-07-22 14:46:03 +02:00
fixtureEl . innerHTML = [
'<div style="display: none;">' ,
2021-05-20 15:50:53 +02:00
' <div>' ,
' <div>' ,
' <div class="content"></div>' ,
' </div>' ,
' </div>' ,
2019-07-22 14:46:03 +02:00
'</div>'
] . join ( '' )
2019-03-13 15:23:50 +01:00
2019-07-22 14:46:03 +02:00
const div = fixtureEl . querySelector ( '.content' )
2019-03-13 15:23:50 +01:00
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( div ) ) . toBeFalse ( )
2019-03-13 15:23:50 +01:00
} )
2021-05-20 15:50:53 +02:00
it ( 'should return false if an ancestor element is visibility hidden' , ( ) => {
fixtureEl . innerHTML = [
'<div style="visibility: hidden;">' ,
' <div>' ,
' <div>' ,
' <div class="content"></div>' ,
' </div>' ,
' </div>' ,
'</div>'
] . join ( '' )
const div = fixtureEl . querySelector ( '.content' )
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( div ) ) . toBeFalse ( )
2021-05-20 15:50:53 +02:00
} )
it ( 'should return true if an ancestor element is visibility hidden, but reverted' , ( ) => {
fixtureEl . innerHTML = [
'<div style="visibility: hidden;">' ,
' <div style="visibility: visible;">' ,
' <div>' ,
' <div class="content"></div>' ,
' </div>' ,
' </div>' ,
'</div>'
] . join ( '' )
const div = fixtureEl . querySelector ( '.content' )
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( div ) ) . toBeTrue ( )
2021-05-20 15:50:53 +02:00
} )
2019-03-13 15:23:50 +01:00
it ( 'should return true if the element is visible' , ( ) => {
fixtureEl . innerHTML = [
'<div>' ,
' <div id="element"></div>' ,
'</div>'
] . join ( '' )
const div = fixtureEl . querySelector ( '#element' )
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( div ) ) . toBeTrue ( )
2019-03-13 15:23:50 +01:00
} )
2021-05-20 15:50:53 +02:00
it ( 'should return false if the element is hidden, but not via display or visibility' , ( ) => {
fixtureEl . innerHTML = [
'<details>' ,
' <div id="element"></div>' ,
'</details>'
] . join ( '' )
const div = fixtureEl . querySelector ( '#element' )
2021-10-14 17:16:54 +02:00
expect ( Util . isVisible ( div ) ) . toBeFalse ( )
2021-05-20 15:50:53 +02:00
} )
2022-01-13 09:55:05 +01:00
it ( 'should return true if its a closed details element' , ( ) => {
fixtureEl . innerHTML = '<details id="element"></details>'
const div = fixtureEl . querySelector ( '#element' )
expect ( Util . isVisible ( div ) ) . toBeTrue ( )
} )
it ( 'should return true if the element is visible inside an open details element' , ( ) => {
fixtureEl . innerHTML = [
'<details open>' ,
' <div id="element"></div>' ,
'</details>'
] . join ( '' )
const div = fixtureEl . querySelector ( '#element' )
expect ( Util . isVisible ( div ) ) . toBeTrue ( )
} )
it ( 'should return true if the element is a visible summary in a closed details element' , ( ) => {
fixtureEl . innerHTML = [
'<details>' ,
' <summary id="element-1">' ,
' <span id="element-2"></span>' ,
' </summary>' ,
'</details>'
] . join ( '' )
const element1 = fixtureEl . querySelector ( '#element-1' )
const element2 = fixtureEl . querySelector ( '#element-2' )
expect ( Util . isVisible ( element1 ) ) . toBeTrue ( )
expect ( Util . isVisible ( element2 ) ) . toBeTrue ( )
} )
2019-03-13 15:23:50 +01:00
} )
2021-03-16 17:35:03 +01:00
describe ( 'isDisabled' , ( ) => {
it ( 'should return true if the element is not defined' , ( ) => {
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( null ) ) . toBeTrue ( )
expect ( Util . isDisabled ( undefined ) ) . toBeTrue ( )
expect ( Util . isDisabled ( ) ) . toBeTrue ( )
2021-03-16 17:35:03 +01:00
} )
it ( 'should return true if the element provided is not a dom element' , ( ) => {
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( { } ) ) . toBeTrue ( )
expect ( Util . isDisabled ( 'test' ) ) . toBeTrue ( )
2021-03-16 17:35:03 +01:00
} )
it ( 'should return true if the element has disabled attribute' , ( ) => {
fixtureEl . innerHTML = [
'<div>' ,
' <div id="element" disabled="disabled"></div>' ,
' <div id="element1" disabled="true"></div>' ,
' <div id="element2" disabled></div>' ,
'</div>'
] . join ( '' )
const div = fixtureEl . querySelector ( '#element' )
const div1 = fixtureEl . querySelector ( '#element1' )
const div2 = fixtureEl . querySelector ( '#element2' )
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( div ) ) . toBeTrue ( )
expect ( Util . isDisabled ( div1 ) ) . toBeTrue ( )
expect ( Util . isDisabled ( div2 ) ) . toBeTrue ( )
2021-03-16 17:35:03 +01:00
} )
2021-03-17 06:44:15 +01:00
it ( 'should return false if the element has disabled attribute with "false" value, or doesn\'t have attribute' , ( ) => {
2021-03-16 17:35:03 +01:00
fixtureEl . innerHTML = [
'<div>' ,
' <div id="element" disabled="false"></div>' ,
2021-03-17 06:44:15 +01:00
' <div id="element1" ></div>' ,
2021-03-16 17:35:03 +01:00
'</div>'
] . join ( '' )
const div = fixtureEl . querySelector ( '#element' )
2021-03-17 06:44:15 +01:00
const div1 = fixtureEl . querySelector ( '#element1' )
2021-03-16 17:35:03 +01:00
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( div ) ) . toBeFalse ( )
expect ( Util . isDisabled ( div1 ) ) . toBeFalse ( )
2021-03-16 17:35:03 +01:00
} )
it ( 'should return false if the element is not disabled ' , ( ) => {
fixtureEl . innerHTML = [
'<div>' ,
' <button id="button"></button>' ,
' <select id="select"></select>' ,
' <select id="input"></select>' ,
'</div>'
] . join ( '' )
const el = selector => fixtureEl . querySelector ( selector )
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( el ( '#button' ) ) ) . toBeFalse ( )
expect ( Util . isDisabled ( el ( '#select' ) ) ) . toBeFalse ( )
expect ( Util . isDisabled ( el ( '#input' ) ) ) . toBeFalse ( )
2021-03-16 17:35:03 +01:00
} )
2021-11-26 08:16:59 +01:00
2021-03-16 17:35:03 +01:00
it ( 'should return true if the element has disabled attribute' , ( ) => {
fixtureEl . innerHTML = [
'<div>' ,
2022-07-04 13:12:10 +02:00
' <input id="input" disabled="disabled">' ,
' <input id="input1" disabled="disabled">' ,
2021-03-16 17:35:03 +01:00
' <button id="button" disabled="true"></button>' ,
' <button id="button1" disabled="disabled"></button>' ,
' <button id="button2" disabled></button>' ,
' <select id="select" disabled></select>' ,
' <select id="input" disabled></select>' ,
'</div>'
] . join ( '' )
const el = selector => fixtureEl . querySelector ( selector )
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( el ( '#input' ) ) ) . toBeTrue ( )
expect ( Util . isDisabled ( el ( '#input1' ) ) ) . toBeTrue ( )
expect ( Util . isDisabled ( el ( '#button' ) ) ) . toBeTrue ( )
expect ( Util . isDisabled ( el ( '#button1' ) ) ) . toBeTrue ( )
expect ( Util . isDisabled ( el ( '#button2' ) ) ) . toBeTrue ( )
expect ( Util . isDisabled ( el ( '#input' ) ) ) . toBeTrue ( )
2021-03-16 17:35:03 +01:00
} )
it ( 'should return true if the element has class "disabled"' , ( ) => {
fixtureEl . innerHTML = [
'<div>' ,
' <div id="element" class="disabled"></div>' ,
'</div>'
] . join ( '' )
const div = fixtureEl . querySelector ( '#element' )
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( div ) ) . toBeTrue ( )
2021-03-16 17:35:03 +01:00
} )
it ( 'should return true if the element has class "disabled" but disabled attribute is false' , ( ) => {
fixtureEl . innerHTML = [
'<div>' ,
2022-07-04 13:12:10 +02:00
' <input id="input" class="disabled" disabled="false">' ,
2021-03-16 17:35:03 +01:00
'</div>'
] . join ( '' )
const div = fixtureEl . querySelector ( '#input' )
2021-10-14 17:16:54 +02:00
expect ( Util . isDisabled ( div ) ) . toBeTrue ( )
2021-03-16 17:35:03 +01:00
} )
} )
2019-03-13 15:23:50 +01:00
describe ( 'findShadowRoot' , ( ) => {
it ( 'should return null if shadow dom is not available' , ( ) => {
// Only for newer browsers
if ( ! document . documentElement . attachShadow ) {
expect ( ) . nothing ( )
return
}
fixtureEl . innerHTML = '<div></div>'
const div = fixtureEl . querySelector ( 'div' )
spyOn ( document . documentElement , 'attachShadow' ) . and . returnValue ( null )
2021-10-14 17:16:54 +02:00
expect ( Util . findShadowRoot ( div ) ) . toBeNull ( )
2019-03-13 15:23:50 +01:00
} )
it ( 'should return null when we do not find a shadow root' , ( ) => {
// Only for newer browsers
if ( ! document . documentElement . attachShadow ) {
expect ( ) . nothing ( )
return
}
spyOn ( document , 'getRootNode' ) . and . returnValue ( undefined )
2021-10-14 17:16:54 +02:00
expect ( Util . findShadowRoot ( document ) ) . toBeNull ( )
2019-03-13 15:23:50 +01:00
} )
it ( 'should return the shadow root when found' , ( ) => {
// Only for newer browsers
if ( ! document . documentElement . attachShadow ) {
expect ( ) . nothing ( )
return
}
fixtureEl . innerHTML = '<div></div>'
const div = fixtureEl . querySelector ( 'div' )
const shadowRoot = div . attachShadow ( {
mode : 'open'
} )
expect ( Util . findShadowRoot ( shadowRoot ) ) . toEqual ( shadowRoot )
shadowRoot . innerHTML = '<button>Shadow Button</button>'
expect ( Util . findShadowRoot ( shadowRoot . firstChild ) ) . toEqual ( shadowRoot )
} )
} )
describe ( 'noop' , ( ) => {
2021-03-27 17:08:45 +01:00
it ( 'should be a function' , ( ) => {
2021-10-14 17:16:54 +02:00
expect ( Util . noop ) . toEqual ( jasmine . any ( Function ) )
2019-03-13 15:23:50 +01:00
} )
} )
describe ( 'reflow' , ( ) => {
it ( 'should return element offset height to force the reflow' , ( ) => {
fixtureEl . innerHTML = '<div></div>'
const div = fixtureEl . querySelector ( 'div' )
2021-07-20 16:20:43 +02:00
const spy = spyOnProperty ( div , 'offsetHeight' )
Util . reflow ( div )
expect ( spy ) . toHaveBeenCalled ( )
2019-03-13 15:23:50 +01:00
} )
} )
2019-08-02 15:51:05 +02:00
describe ( 'getjQuery' , ( ) => {
const fakejQuery = { trigger ( ) { } }
beforeEach ( ( ) => {
Object . defineProperty ( window , 'jQuery' , {
value : fakejQuery ,
writable : true
} )
} )
afterEach ( ( ) => {
window . jQuery = undefined
} )
it ( 'should return jQuery object when present' , ( ) => {
expect ( Util . getjQuery ( ) ) . toEqual ( fakejQuery )
} )
2020-07-22 21:33:11 +02:00
it ( 'should not return jQuery object when present if data-bs-no-jquery' , ( ) => {
document . body . setAttribute ( 'data-bs-no-jquery' , '' )
2019-08-02 15:51:05 +02:00
expect ( window . jQuery ) . toEqual ( fakejQuery )
2021-10-14 17:16:54 +02:00
expect ( Util . getjQuery ( ) ) . toBeNull ( )
2019-08-02 15:51:05 +02:00
2020-07-22 21:33:11 +02:00
document . body . removeAttribute ( 'data-bs-no-jquery' )
2019-08-02 15:51:05 +02:00
} )
it ( 'should not return jQuery if not present' , ( ) => {
window . jQuery = undefined
2021-10-14 17:16:54 +02:00
expect ( Util . getjQuery ( ) ) . toBeNull ( )
2019-08-02 15:51:05 +02:00
} )
} )
2020-11-01 14:32:36 +01:00
describe ( 'onDOMContentLoaded' , ( ) => {
2021-06-22 19:19:55 +02:00
it ( 'should execute callbacks when DOMContentLoaded is fired and should not add more than one listener' , ( ) => {
2020-11-01 14:32:36 +01:00
const spy = jasmine . createSpy ( )
2021-06-22 19:19:55 +02:00
const spy2 = jasmine . createSpy ( )
2022-05-31 10:18:32 +02:00
const spyAdd = spyOn ( document , 'addEventListener' ) . and . callThrough ( )
2020-11-01 14:32:36 +01:00
spyOnProperty ( document , 'readyState' ) . and . returnValue ( 'loading' )
2021-06-22 19:19:55 +02:00
2020-11-01 14:32:36 +01:00
Util . onDOMContentLoaded ( spy )
2021-06-22 19:19:55 +02:00
Util . onDOMContentLoaded ( spy2 )
document . dispatchEvent ( new Event ( 'DOMContentLoaded' , {
2020-11-01 14:32:36 +01:00
bubbles : true ,
cancelable : true
} ) )
2021-06-22 19:19:55 +02:00
2020-11-01 14:32:36 +01:00
expect ( spy ) . toHaveBeenCalled ( )
2021-06-22 19:19:55 +02:00
expect ( spy2 ) . toHaveBeenCalled ( )
2022-05-31 10:18:32 +02:00
expect ( spyAdd ) . toHaveBeenCalledTimes ( 1 )
2020-11-01 14:32:36 +01:00
} )
it ( 'should execute callback if readyState is not "loading"' , ( ) => {
const spy = jasmine . createSpy ( )
Util . onDOMContentLoaded ( spy )
expect ( spy ) . toHaveBeenCalled ( )
} )
} )
2020-12-08 07:16:50 +01:00
describe ( 'defineJQueryPlugin' , ( ) => {
const fakejQuery = { fn : { } }
beforeEach ( ( ) => {
Object . defineProperty ( window , 'jQuery' , {
value : fakejQuery ,
writable : true
} )
} )
afterEach ( ( ) => {
window . jQuery = undefined
} )
it ( 'should define a plugin on the jQuery instance' , ( ) => {
2022-01-30 13:30:04 +01:00
const pluginMock = Util . noop
2021-05-11 09:49:30 +02:00
pluginMock . NAME = 'test'
2022-01-30 13:30:04 +01:00
pluginMock . jQueryInterface = Util . noop
2020-12-08 07:16:50 +01:00
2021-05-11 09:49:30 +02:00
Util . defineJQueryPlugin ( pluginMock )
2021-10-14 17:16:54 +02:00
expect ( fakejQuery . fn . test ) . toEqual ( pluginMock . jQueryInterface )
expect ( fakejQuery . fn . test . Constructor ) . toEqual ( pluginMock )
expect ( fakejQuery . fn . test . noConflict ) . toEqual ( jasmine . any ( Function ) )
2020-12-08 07:16:50 +01:00
} )
} )
2021-04-14 22:28:50 +02:00
describe ( 'execute' , ( ) => {
it ( 'should execute if arg is function' , ( ) => {
const spy = jasmine . createSpy ( 'spy' )
Util . execute ( spy )
expect ( spy ) . toHaveBeenCalled ( )
} )
2022-10-07 14:25:00 +02:00
it ( 'should execute if arg is function & return the result' , ( ) => {
const functionFoo = ( num1 , num2 = 10 ) => num1 + num2
const resultFoo = Util . execute ( functionFoo , [ 4 , 5 ] )
expect ( resultFoo ) . toBe ( 9 )
const resultFoo1 = Util . execute ( functionFoo , [ 4 ] )
expect ( resultFoo1 ) . toBe ( 14 )
const functionBar = ( ) => 'foo'
const resultBar = Util . execute ( functionBar )
expect ( resultBar ) . toBe ( 'foo' )
} )
it ( 'should not execute if arg is not function & return default argument' , ( ) => {
const foo = 'bar'
expect ( Util . execute ( foo ) ) . toBe ( 'bar' )
expect ( Util . execute ( foo , [ ] , 4 ) ) . toBe ( 4 )
} )
2021-04-14 22:28:50 +02:00
} )
2021-05-19 00:23:52 +02:00
2021-06-03 13:44:16 +02:00
describe ( 'executeAfterTransition' , ( ) => {
it ( 'should immediately execute a function when waitForTransition parameter is false' , ( ) => {
const el = document . createElement ( 'div' )
const callbackSpy = jasmine . createSpy ( 'callback spy' )
const eventListenerSpy = spyOn ( el , 'addEventListener' )
Util . executeAfterTransition ( callbackSpy , el , false )
expect ( callbackSpy ) . toHaveBeenCalled ( )
expect ( eventListenerSpy ) . not . toHaveBeenCalled ( )
} )
it ( 'should execute a function when a transitionend event is dispatched' , ( ) => {
const el = document . createElement ( 'div' )
const callbackSpy = jasmine . createSpy ( 'callback spy' )
spyOn ( window , 'getComputedStyle' ) . and . returnValue ( {
transitionDuration : '0.05s' ,
transitionDelay : '0s'
} )
Util . executeAfterTransition ( callbackSpy , el )
el . dispatchEvent ( new TransitionEvent ( 'transitionend' ) )
expect ( callbackSpy ) . toHaveBeenCalled ( )
} )
2022-01-30 13:30:04 +01:00
it ( 'should execute a function after a computed CSS transition duration and there was no transitionend event dispatched' , ( ) => {
return new Promise ( resolve => {
const el = document . createElement ( 'div' )
const callbackSpy = jasmine . createSpy ( 'callback spy' )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
spyOn ( window , 'getComputedStyle' ) . and . returnValue ( {
transitionDuration : '0.05s' ,
transitionDelay : '0s'
} )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
Util . executeAfterTransition ( callbackSpy , el )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
setTimeout ( ( ) => {
expect ( callbackSpy ) . toHaveBeenCalled ( )
resolve ( )
} , 70 )
} )
2021-06-03 13:44:16 +02:00
} )
2022-01-30 13:30:04 +01:00
it ( 'should not execute a function a second time after a computed CSS transition duration and if a transitionend event has already been dispatched' , ( ) => {
return new Promise ( resolve => {
const el = document . createElement ( 'div' )
const callbackSpy = jasmine . createSpy ( 'callback spy' )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
spyOn ( window , 'getComputedStyle' ) . and . returnValue ( {
transitionDuration : '0.05s' ,
transitionDelay : '0s'
} )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
Util . executeAfterTransition ( callbackSpy , el )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
setTimeout ( ( ) => {
el . dispatchEvent ( new TransitionEvent ( 'transitionend' ) )
} , 50 )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
setTimeout ( ( ) => {
expect ( callbackSpy ) . toHaveBeenCalledTimes ( 1 )
resolve ( )
} , 70 )
} )
2021-06-03 13:44:16 +02:00
} )
2022-01-30 13:30:04 +01:00
it ( 'should not trigger a transitionend event if another transitionend event had already happened' , ( ) => {
return new Promise ( resolve => {
const el = document . createElement ( 'div' )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
spyOn ( window , 'getComputedStyle' ) . and . returnValue ( {
transitionDuration : '0.05s' ,
transitionDelay : '0s'
} )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
Util . executeAfterTransition ( noop , el )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
// simulate a event dispatched by the browser
el . dispatchEvent ( new TransitionEvent ( 'transitionend' ) )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
const dispatchSpy = spyOn ( el , 'dispatchEvent' ) . and . callThrough ( )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
setTimeout ( ( ) => {
// setTimeout should not have triggered another transitionend event.
expect ( dispatchSpy ) . not . toHaveBeenCalled ( )
resolve ( )
} , 70 )
} )
2021-06-03 13:44:16 +02:00
} )
2022-01-30 13:30:04 +01:00
it ( 'should ignore transitionend events from nested elements' , ( ) => {
return new Promise ( resolve => {
fixtureEl . innerHTML = [
'<div class="outer">' ,
' <div class="nested"></div>' ,
'</div>'
] . join ( '' )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
const outer = fixtureEl . querySelector ( '.outer' )
const nested = fixtureEl . querySelector ( '.nested' )
const callbackSpy = jasmine . createSpy ( 'callback spy' )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
spyOn ( window , 'getComputedStyle' ) . and . returnValue ( {
transitionDuration : '0.05s' ,
transitionDelay : '0s'
} )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
Util . executeAfterTransition ( callbackSpy , outer )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
nested . dispatchEvent ( new TransitionEvent ( 'transitionend' , {
bubbles : true
} ) )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
setTimeout ( ( ) => {
expect ( callbackSpy ) . not . toHaveBeenCalled ( )
} , 20 )
2021-06-03 13:44:16 +02:00
2022-01-30 13:30:04 +01:00
setTimeout ( ( ) => {
expect ( callbackSpy ) . toHaveBeenCalled ( )
resolve ( )
} , 70 )
} )
2021-06-03 13:44:16 +02:00
} )
} )
2021-05-19 00:23:52 +02:00
describe ( 'getNextActiveElement' , ( ) => {
2021-05-22 09:58:52 +02:00
it ( 'should return first element if active not exists or not given and shouldGetNext is either true, or false with cycling being disabled' , ( ) => {
2021-05-19 00:23:52 +02:00
const array = [ 'a' , 'b' , 'c' , 'd' ]
expect ( Util . getNextActiveElement ( array , '' , true , true ) ) . toEqual ( 'a' )
expect ( Util . getNextActiveElement ( array , 'g' , true , true ) ) . toEqual ( 'a' )
2021-05-22 09:58:52 +02:00
expect ( Util . getNextActiveElement ( array , '' , true , false ) ) . toEqual ( 'a' )
expect ( Util . getNextActiveElement ( array , 'g' , true , false ) ) . toEqual ( 'a' )
expect ( Util . getNextActiveElement ( array , '' , false , false ) ) . toEqual ( 'a' )
expect ( Util . getNextActiveElement ( array , 'g' , false , false ) ) . toEqual ( 'a' )
} )
it ( 'should return last element if active not exists or not given and shouldGetNext is false but cycling is enabled' , ( ) => {
const array = [ 'a' , 'b' , 'c' , 'd' ]
expect ( Util . getNextActiveElement ( array , '' , false , true ) ) . toEqual ( 'd' )
expect ( Util . getNextActiveElement ( array , 'g' , false , true ) ) . toEqual ( 'd' )
2021-05-19 00:23:52 +02:00
} )
it ( 'should return next element or same if is last' , ( ) => {
const array = [ 'a' , 'b' , 'c' , 'd' ]
expect ( Util . getNextActiveElement ( array , 'a' , true , true ) ) . toEqual ( 'b' )
expect ( Util . getNextActiveElement ( array , 'b' , true , true ) ) . toEqual ( 'c' )
expect ( Util . getNextActiveElement ( array , 'd' , true , false ) ) . toEqual ( 'd' )
} )
it ( 'should return next element or first, if is last and "isCycleAllowed = true"' , ( ) => {
const array = [ 'a' , 'b' , 'c' , 'd' ]
expect ( Util . getNextActiveElement ( array , 'c' , true , true ) ) . toEqual ( 'd' )
expect ( Util . getNextActiveElement ( array , 'd' , true , true ) ) . toEqual ( 'a' )
} )
it ( 'should return previous element or same if is first' , ( ) => {
const array = [ 'a' , 'b' , 'c' , 'd' ]
expect ( Util . getNextActiveElement ( array , 'b' , false , true ) ) . toEqual ( 'a' )
expect ( Util . getNextActiveElement ( array , 'd' , false , true ) ) . toEqual ( 'c' )
expect ( Util . getNextActiveElement ( array , 'a' , false , false ) ) . toEqual ( 'a' )
} )
it ( 'should return next element or first, if is last and "isCycleAllowed = true"' , ( ) => {
const array = [ 'a' , 'b' , 'c' , 'd' ]
expect ( Util . getNextActiveElement ( array , 'd' , false , true ) ) . toEqual ( 'c' )
expect ( Util . getNextActiveElement ( array , 'a' , false , true ) ) . toEqual ( 'd' )
} )
} )
2019-03-13 15:23:50 +01:00
} )