| Server IP : 199.250.214.225 / Your IP : 3.149.251.232 Web Server : Apache System : Linux vps64074.inmotionhosting.com 3.10.0-1160.105.1.vz7.214.3 #1 SMP Tue Jan 9 19:45:01 MSK 2024 x86_64 User : nicngo5 ( 1001) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : OFF Directory : /home/nicngo5/funds.upgrade.nicn.gov.ng/funds-upgraded/node_modules/alpinejs/test/ |
Upload File : |
import Alpine from 'alpinejs'
import { wait } from '@testing-library/dom'
const timeout = ms => new Promise(resolve => setTimeout(resolve, ms))
global.MutationObserver = class {
observe() {}
}
test('transition in', async () => {
// Hijack "requestAnimationFrame" for finer-tuned control in this test.
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
// Hijack "getComputeStyle" because js-dom is weird with it.
// (hardcoding 10ms transition time for later assertions)
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return { transitionDuration: '.01s' }
});
document.body.innerHTML = `
<div x-data="{ show: false }">
<button x-on:click="show = ! show"></button>
<span
x-show="show"
x-transition:enter="enter"
x-transition:enter-start="enter-start"
x-transition:enter-end="enter-end"
></span>
</div>
`
Alpine.start()
await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
document.querySelector('button').click()
// Wait out the intial Alpine refresh debounce.
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 5)
)
expect(document.querySelector('span').classList.contains('enter')).toEqual(true)
expect(document.querySelector('span').classList.contains('enter-start')).toEqual(true)
expect(document.querySelector('span').classList.contains('enter-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
frameStack.pop()()
expect(document.querySelector('span').classList.contains('enter')).toEqual(true)
expect(document.querySelector('span').classList.contains('enter-start')).toEqual(true)
expect(document.querySelector('span').classList.contains('enter-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
frameStack.pop()()
expect(document.querySelector('span').classList.contains('enter')).toEqual(true)
expect(document.querySelector('span').classList.contains('enter-start')).toEqual(false)
expect(document.querySelector('span').classList.contains('enter-end')).toEqual(true)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
await new Promise((resolve) =>
setTimeout(() => {
expect(document.querySelector('span').classList.contains('enter')).toEqual(false)
expect(document.querySelector('span').classList.contains('enter-start')).toEqual(false)
expect(document.querySelector('span').classList.contains('enter-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
resolve();
}, 10)
)
})
test('transition out', async () => {
// Hijack "requestAnimationFrame" for finer-tuned control in this test.
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
// Hijack "getComputeStyle" because js-dom is weird with it.
// (hardcoding 10ms transition time for later assertions)
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return { transitionDuration: '.01s' }
});
document.body.innerHTML = `
<div x-data="{ show: true }">
<button x-on:click="show = ! show"></button>
<span
x-show="show"
x-transition:leave="leave"
x-transition:leave-start="leave-start"
x-transition:leave-end="leave-end"
></span>
</div>
`
Alpine.start()
await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual(null) })
document.querySelector('button').click()
// Wait out the intial Alpine refresh debounce.
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 5)
)
expect(document.querySelector('span').classList.contains('leave')).toEqual(true)
expect(document.querySelector('span').classList.contains('leave-start')).toEqual(true)
expect(document.querySelector('span').classList.contains('leave-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
frameStack.pop()()
expect(document.querySelector('span').classList.contains('leave')).toEqual(true)
expect(document.querySelector('span').classList.contains('leave-start')).toEqual(true)
expect(document.querySelector('span').classList.contains('leave-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
frameStack.pop()()
expect(document.querySelector('span').classList.contains('leave')).toEqual(true)
expect(document.querySelector('span').classList.contains('leave-start')).toEqual(false)
expect(document.querySelector('span').classList.contains('leave-end')).toEqual(true)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
await timeout(10)
expect(document.querySelector('span').classList.contains('leave')).toEqual(false)
expect(document.querySelector('span').classList.contains('leave-start')).toEqual(false)
expect(document.querySelector('span').classList.contains('leave-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
})
test('if only transition leave directives are present, don\'t transition in at all', async () => {
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
document.body.innerHTML = `
<div x-data="{ show: false }">
<button x-on:click="show = ! show"></button>
<span x-show="show"
x-transition:leave="leave"
x-transition:leave-start="leave-start"
x-transition:leave-end="leave-end"
></span>
</div>
`
Alpine.start()
await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
document.querySelector('button').click()
await timeout(10)
expect(frameStack.length).toEqual(0)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
})
test('if only transition enter directives are present, don\'t transition out at all', async () => {
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
document.body.innerHTML = `
<div x-data="{ show: true }">
<button x-on:click="show = ! show"></button>
<span x-show="show"
x-transition:enter="enter"
x-transition:enter-start="enter-start"
x-transition:enter-end="enter-end"
></span>
</div>
`
Alpine.start()
await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual(null) })
document.querySelector('button').click()
await timeout(10)
expect(frameStack.length).toEqual(0)
expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
})
test('original class attribute classes are preserved after transition finishes', async () => {
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return { transitionDuration: '.01s' }
});
document.body.innerHTML = `
<div x-data="{ show: false }">
<button x-on:click="show = ! show"></button>
<span
x-show="show"
class="enter"
x-transition:enter="enter"
></span>
</div>
`
Alpine.start()
await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
document.querySelector('button').click()
// Wait out the intial Alpine refresh debounce.
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 5)
)
expect(document.querySelector('span').classList.contains('enter')).toEqual(true)
expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
frameStack.pop()()
expect(document.querySelector('span').classList.contains('enter')).toEqual(true)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
frameStack.pop()()
expect(document.querySelector('span').classList.contains('enter')).toEqual(true)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
await new Promise((resolve) =>
setTimeout(() => {
expect(document.querySelector('span').classList.contains('enter')).toEqual(true)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
resolve();
}, 10)
)
})
test('transition in not called when item is already visible', async () => {
// Hijack "requestAnimationFrame" for finer-tuned control in this test.
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
// Hijack "getComputeStyle" because js-dom is weird with it.
// (hardcoding 10ms transition time for later assertions)
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return { transitionDuration: '.01s' }
});
document.body.innerHTML = `
<div x-data="{ show: true, foo: 'bar' }">
<button x-on:click="foo = 'bob'"></button>
<span
x-show="show"
x-transition:enter="enter"
x-transition:enter-start="enter-start"
x-transition:enter-end="enter-end"
></span>
</div>
`
Alpine.start()
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
document.querySelector('button').click()
// Wait out the intial Alpine refresh debounce.
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 5)
)
// No animation queued
expect(frameStack.pop()).toEqual(undefined)
expect(document.querySelector('span').classList.contains('enter')).toEqual(false)
expect(document.querySelector('span').classList.contains('enter-start')).toEqual(false)
expect(document.querySelector('span').classList.contains('enter-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual(null)
})
test('transition out not called when item is already hidden', async () => {
// Hijack "requestAnimationFrame" for finer-tuned control in this test.
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
// Hijack "getComputeStyle" because js-dom is weird with it.
// (hardcoding 10ms transition time for later assertions)
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return { transitionDuration: '.01s' }
});
document.body.innerHTML = `
<div x-data="{ show: false, foo: 'bar' }">
<button x-on:click="foo = 'bob'"></button>
<span
x-show="show"
x-transition:leave="leave"
x-transition:leave-start="leave-start"
x-transition:leave-end="leave-end"
></span>
</div>
`
Alpine.start()
await new Promise(resolve => setTimeout(resolve, 1))
expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
document.querySelector('button').click()
// Wait out the intial Alpine refresh debounce.
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 5)
)
// No animation queued
expect(frameStack.pop()).toEqual(undefined)
expect(document.querySelector('span').classList.contains('leave')).toEqual(false)
expect(document.querySelector('span').classList.contains('leave-start')).toEqual(false)
expect(document.querySelector('span').classList.contains('leave-end')).toEqual(false)
expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;')
})
test('transition with x-show.transition helper', async () => {
await assertTransitionHelperStyleAttributeValues('x-show.transition.in', [
'display: none; opacity: 0; transform: scale(0.95); transform-origin: center; transition-property: opacity transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 0; transform: scale(0.95); transform-origin: center; transition-property: opacity transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 1; transform: scale(1); transform-origin: center; transition-property: opacity transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'display: none;',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.out', [
null,
null,
'opacity: 1; transform: scale(1); transform-origin: center; transition-property: opacity transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 1; transform: scale(1); transform-origin: center; transition-property: opacity transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 0; transform: scale(0.95); transform-origin: center; transition-property: opacity transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition', [
'display: none; opacity: 0; transform: scale(0.95); transform-origin: center; transition-property: opacity transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 0; transform: scale(0.95); transform-origin: center; transition-property: opacity transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 1; transform: scale(1); transform-origin: center; transition-property: opacity transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'opacity: 1; transform: scale(1); transform-origin: center; transition-property: opacity transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 1; transform: scale(1); transform-origin: center; transition-property: opacity transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 0; transform: scale(0.95); transform-origin: center; transition-property: opacity transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.opacity', [
'display: none; opacity: 0; transition-property: opacity; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 0; transition-property: opacity; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 1; transition-property: opacity; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'opacity: 1; transition-property: opacity; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 1; transition-property: opacity; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'opacity: 0; transition-property: opacity; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.scale', [
'display: none; transform: scale(0.95); transform-origin: center; transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.95); transform-origin: center; transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.95); transform-origin: center; transition-property: transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.scale.85', [
'display: none; transform: scale(0.85); transform-origin: center; transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: center; transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: center; transition-property: transform; transition-duration: 0.075s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.scale.85.duration.200ms', [
'display: none; transform: scale(0.85); transform-origin: center; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: center; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: center; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: center; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.scale.85.duration.200ms.origin.top', [
'display: none; transform: scale(0.85); transform-origin: top; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: top; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: top; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'transform: scale(1); transform-origin: top; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: top; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: top; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.scale.85.duration.200ms.origin.top.left', [
'display: none; transform: scale(0.85); transform-origin: top left; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: top left; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: top left; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'transform: scale(1); transform-origin: top left; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: top left; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: top left; transition-property: transform; transition-duration: 0.1s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
await assertTransitionHelperStyleAttributeValues('x-show.transition.in.scale.85.duration.200ms.origin.top.left.out.scale.75.duration.500ms.origin.bottom.right', [
'display: none; transform: scale(0.85); transform-origin: top left; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.85); transform-origin: top left; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: top left; transition-property: transform; transition-duration: 0.2s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'',
'transform: scale(1); transform-origin: bottom right; transition-property: transform; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(1); transform-origin: bottom right; transition-property: transform; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'transform: scale(0.75); transform-origin: bottom right; transition-property: transform; transition-duration: 0.5s; transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);',
'display: none;',
])
})
async function assertTransitionHelperStyleAttributeValues(xShowDirective, styleAttributeExpectations) {
// Hijack "requestAnimationFrame" for finer-tuned control in this test.
var frameStack = []
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
frameStack.push(callback)
});
// Hijack "getComputeStyle" because js-dom is weird with it.
// (hardcoding 10ms transition time for later assertions)
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return { transitionDuration: '.02s' }
});
document.body.innerHTML = `
<div x-data="{ show: false }">
<button x-on:click="show = ! show"></button>
<span ${xShowDirective}="show"></span>
</div>
`
Alpine.start()
document.querySelector('button').click()
// Wait out the intial Alpine refresh debounce.
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 5)
)
let index = 0
expect(document.querySelector('span').getAttribute('style')).toEqual(styleAttributeExpectations[index])
while(frameStack.length) {
frameStack.pop()()
expect(document.querySelector('span').getAttribute('style')).toEqual(styleAttributeExpectations[++index])
}
await new Promise(resolve => setTimeout(resolve, 30))
expect(document.querySelector('span').getAttribute('style')).toEqual(styleAttributeExpectations[++index])
document.querySelector('button').click()
// Wait out the intial Alpine refresh debounce.
await new Promise(resolve => setTimeout(resolve, 5))
expect(document.querySelector('span').getAttribute('style')).toEqual(styleAttributeExpectations[++index])
while(frameStack.length) {
frameStack.pop()()
expect(document.querySelector('span').getAttribute('style')).toEqual(styleAttributeExpectations[++index])
}
await new Promise(resolve => setTimeout(resolve, 50))
expect(document.querySelector('span').getAttribute('style')).toEqual(styleAttributeExpectations[++index])
}
test('x-transition supports css animation', async () => {
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
setTimeout(callback, 0)
});
// (hardcoding 10ms animation time for later assertions)
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return {
transitionDuration: '0s',
animationDuration: '.1s'
}
});
document.body.innerHTML = `
<div x-data="{ show: false }">
<button x-on:click="show = ! show"></button>
<span
x-show="show"
x-transition:enter="animation-enter"
x-transition:leave="animation-leave"
></span>
</div>
`
Alpine.start()
await wait(() => { expect(document.querySelector('span').getAttribute('style')).toEqual('display: none;') })
// Testing animation enter
document.querySelector('button').click()
// Wait for the first requestAnimationFrame
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 0)
)
expect(document.querySelector('span').classList.contains('animation-enter')).toEqual(true)
// The class should still be there since the animationDuration property is 100ms
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 99)
)
expect(document.querySelector('span').classList.contains('animation-enter')).toEqual(true)
// The class shouldn't be there anymore
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 10)
)
expect(document.querySelector('span').classList.contains('animation-enter')).toEqual(false)
// Testing animation enter
document.querySelector('button').click()
// Wait for the first requestAnimationFrame
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 0)
)
expect(document.querySelector('span').classList.contains('animation-leave')).toEqual(true)
// The class should still be there since the animationDuration property is 100ms
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 99)
)
expect(document.querySelector('span').classList.contains('animation-leave')).toEqual(true)
// The class shouldn't be there anymore
await new Promise((resolve) =>
setTimeout(() => {
resolve();
}, 10)
)
expect(document.querySelector('span').classList.contains('animation-leave')).toEqual(false)
})
test('x-transition do not overlap', async () => {
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
setTimeout(callback, 0)
});
document.body.innerHTML = `
<div x-data="{ show: true }">
<button x-on:click="show = ! show"></button>
<span x-show.transition="show"></span>
</div>
`
Alpine.start()
// Initial state
expect(document.querySelector('span').style.display).toEqual("")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
// Trigger transition out
document.querySelector('button').click()
// Trigger transition in before the previous one has finished
await timeout(10)
document.querySelector('button').click()
// Check the element is still visible and style properties are correct
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
// Hide the element
document.querySelector('button').click()
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("none")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
// Trigger transition in
document.querySelector('button').click()
// Trigger transition out before the previous one has finished
await timeout(10)
document.querySelector('button').click()
// Check the element is hidden and style properties are correct
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("none")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
})
test('x-transition using classes do not overlap', async () => {
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
setTimeout(callback, 0)
});
jest.spyOn(window, 'getComputedStyle').mockImplementation(el => {
return { transitionDuration: '.1s' }
});
document.body.innerHTML = `
<div x-data="{ show: true }">
<button x-on:click="show = ! show"></button>
<span x-show="show"
x-transition:enter="enter"
x-transition:leave="leave">
</span>
</div>
`
Alpine.start()
// Initial state
expect(document.querySelector('span').style.display).toEqual("")
const emptyClassList = document.querySelector('span').classList
// Trigger transition out
document.querySelector('button').click()
// Trigger transition in before the previous one has finished
await timeout(10)
document.querySelector('button').click()
// Check the element is still visible and class property is correct
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("")
expect(document.querySelector('span').classList).toEqual(emptyClassList)
// Hide the element
document.querySelector('button').click()
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("none")
expect(document.querySelector('span').classList).toEqual(emptyClassList)
// Trigger transition in
document.querySelector('button').click()
// Trigger transition out before the previous one has finished
await timeout(10)
document.querySelector('button').click()
// Check the element is hidden and class property is correct
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("none")
expect(document.querySelector('span').classList).toEqual(emptyClassList)
})
test('x-transition with parent x-show does not overlap', async () => {
jest.spyOn(window, 'requestAnimationFrame').mockImplementation((callback) => {
setTimeout(callback, 0)
});
document.body.innerHTML = `
<div x-data="{ show: true }">
<button x-on:click="show = ! show"></button>
<h1 x-show="show">
<span x-show.transition="show"></span>
</h1>
</div>
`
Alpine.start()
// Initial state
expect(document.querySelector('span').style.display).toEqual("")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
expect(document.querySelector('h1').style.display).toEqual("")
expect(document.querySelector('h1').style.opacity).toEqual("")
expect(document.querySelector('h1').style.transform).toEqual("")
expect(document.querySelector('h1').style.transformOrigin).toEqual("")
// Trigger transition out
document.querySelector('button').click()
// Trigger transition in before the previous one has finished
await timeout(10)
document.querySelector('button').click()
// Check the element is still visible and style properties are correct
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
expect(document.querySelector('h1').style.display).toEqual("")
expect(document.querySelector('h1').style.opacity).toEqual("")
expect(document.querySelector('h1').style.transform).toEqual("")
expect(document.querySelector('h1').style.transformOrigin).toEqual("")
// Hide the element
document.querySelector('button').click()
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("none")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
expect(document.querySelector('h1').style.display).toEqual("none")
expect(document.querySelector('h1').style.opacity).toEqual("")
expect(document.querySelector('h1').style.transform).toEqual("")
expect(document.querySelector('h1').style.transformOrigin).toEqual("")
// Trigger transition in
document.querySelector('button').click()
// Trigger transition out before the previous one has finished
await timeout(10)
document.querySelector('button').click()
// Check the element is hidden and style properties are correct
await timeout(200)
expect(document.querySelector('span').style.display).toEqual("none")
expect(document.querySelector('span').style.opacity).toEqual("")
expect(document.querySelector('span').style.transform).toEqual("")
expect(document.querySelector('span').style.transformOrigin).toEqual("")
expect(document.querySelector('h1').style.display).toEqual("none")
expect(document.querySelector('h1').style.opacity).toEqual("")
expect(document.querySelector('h1').style.transform).toEqual("")
expect(document.querySelector('h1').style.transformOrigin).toEqual("")
})