diff --git a/package-lock.json b/package-lock.json index 6b3dfe6..e59d747 100644 --- a/package-lock.json +++ b/package-lock.json @@ -696,9 +696,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz", - "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.22.4.tgz", + "integrity": "sha512-Fxamp4aEZnfPOcGA8KSNEohV8hX7zVHOemC8jVBoBUHu5zpJK/Eu3uJwt6BMgy9fkvzxDaurgj96F/NiLukF2w==", "cpu": [ "arm" ], @@ -709,9 +709,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz", - "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.22.4.tgz", + "integrity": "sha512-VXoK5UMrgECLYaMuGuVTOx5kcuap1Jm8g/M83RnCHBKOqvPPmROFJGQaZhGccnsFtfXQ3XYa4/jMCJvZnbJBdA==", "cpu": [ "arm64" ], @@ -722,9 +722,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz", - "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.22.4.tgz", + "integrity": "sha512-xMM9ORBqu81jyMKCDP+SZDhnX2QEVQzTcC6G18KlTQEzWK8r/oNZtKuZaCcHhnsa6fEeOBionoyl5JsAbE/36Q==", "cpu": [ "arm64" ], @@ -735,9 +735,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz", - "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.22.4.tgz", + "integrity": "sha512-aJJyYKQwbHuhTUrjWjxEvGnNNBCnmpHDvrb8JFDbeSH3m2XdHcxDd3jthAzvmoI8w/kSjd2y0udT+4okADsZIw==", "cpu": [ "x64" ], @@ -748,9 +748,22 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz", - "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.22.4.tgz", + "integrity": "sha512-j63YtCIRAzbO+gC2L9dWXRh5BFetsv0j0va0Wi9epXDgU/XUi5dJKo4USTttVyK7fGw2nPWK0PbAvyliz50SCQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm-musleabihf": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.22.4.tgz", + "integrity": "sha512-dJnWUgwWBX1YBRsuKKMOlXCzh2Wu1mlHzv20TpqEsfdZLb3WoJW2kIEsGwLkroYf24IrPAvOT/ZQ2OYMV6vlrg==", "cpu": [ "arm" ], @@ -761,9 +774,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz", - "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.22.4.tgz", + "integrity": "sha512-AdPRoNi3NKVLolCN/Sp4F4N1d98c4SBnHMKoLuiG6RXgoZ4sllseuGioszumnPGmPM2O7qaAX/IJdeDU8f26Aw==", "cpu": [ "arm64" ], @@ -774,9 +787,9 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz", - "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.22.4.tgz", + "integrity": "sha512-Gl0AxBtDg8uoAn5CCqQDMqAx22Wx22pjDOjBdmG0VIWX3qUBHzYmOKh8KXHL4UpogfJ14G4wk16EQogF+v8hmA==", "cpu": [ "arm64" ], @@ -786,10 +799,23 @@ "linux" ] }, + "node_modules/@rollup/rollup-linux-powerpc64le-gnu": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.22.4.tgz", + "integrity": "sha512-3aVCK9xfWW1oGQpTsYJJPF6bfpWfhbRnhdlyhak2ZiyFLDaayz0EP5j9V1RVLAAxlmWKTDfS9wyRyY3hvhPoOg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz", - "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.22.4.tgz", + "integrity": "sha512-ePYIir6VYnhgv2C5Xe9u+ico4t8sZWXschR6fMgoPUK31yQu7hTEJb7bCqivHECwIClJfKgE7zYsh1qTP3WHUA==", "cpu": [ "riscv64" ], @@ -799,10 +825,23 @@ "linux" ] }, + "node_modules/@rollup/rollup-linux-s390x-gnu": { + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.22.4.tgz", + "integrity": "sha512-GqFJ9wLlbB9daxhVlrTe61vJtEY99/xB3C8e4ULVsVfflcpmR6c8UZXjtkMA6FhNONhj2eA5Tk9uAVw5orEs4Q==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz", - "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.22.4.tgz", + "integrity": "sha512-87v0ol2sH9GE3cLQLNEy0K/R0pz1nvg76o8M5nhMR0+Q+BBGLnb35P0fVz4CQxHYXaAOhE8HhlkaZfsdUOlHwg==", "cpu": [ "x64" ], @@ -813,9 +852,9 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz", - "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.22.4.tgz", + "integrity": "sha512-UV6FZMUgePDZrFjrNGIWzDo/vABebuXBhJEqrHxrGiU6HikPy0Z3LfdtciIttEUQfuDdCn8fqh7wiFJjCNwO+g==", "cpu": [ "x64" ], @@ -826,9 +865,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz", - "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.22.4.tgz", + "integrity": "sha512-BjI+NVVEGAXjGWYHz/vv0pBqfGoUH0IGZ0cICTn7kB9PyjrATSkX+8WkguNjWoj2qSr1im/+tTGRaY+4/PdcQw==", "cpu": [ "arm64" ], @@ -839,9 +878,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz", - "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.22.4.tgz", + "integrity": "sha512-SiWG/1TuUdPvYmzmYnmd3IEifzR61Tragkbx9D3+R8mzQqDBz8v+BvZNDlkiTtI9T15KYZhP0ehn3Dld4n9J5g==", "cpu": [ "ia32" ], @@ -852,9 +891,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz", - "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.22.4.tgz", + "integrity": "sha512-j8pPKp53/lq9lMXN57S8cFz0MynJk8OWNuUnXct/9KCpKU7DgU3bYMJhwWmcqC0UU29p8Lr0/7KEVcaM6bf47Q==", "cpu": [ "x64" ], @@ -4288,9 +4327,9 @@ } }, "node_modules/rollup": { - "version": "4.13.0", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz", - "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==", + "version": "4.22.4", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.22.4.tgz", + "integrity": "sha512-vD8HJ5raRcWOyymsR6Z3o6+RzfEPCnVLMFJ6vRslO1jt4LO6dUo5Qnpg7y4RkZFM2DMe3WUirkI5c16onjrc6A==", "dev": true, "dependencies": { "@types/estree": "1.0.5" @@ -4303,19 +4342,22 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.13.0", - "@rollup/rollup-android-arm64": "4.13.0", - "@rollup/rollup-darwin-arm64": "4.13.0", - "@rollup/rollup-darwin-x64": "4.13.0", - "@rollup/rollup-linux-arm-gnueabihf": "4.13.0", - "@rollup/rollup-linux-arm64-gnu": "4.13.0", - "@rollup/rollup-linux-arm64-musl": "4.13.0", - "@rollup/rollup-linux-riscv64-gnu": "4.13.0", - "@rollup/rollup-linux-x64-gnu": "4.13.0", - "@rollup/rollup-linux-x64-musl": "4.13.0", - "@rollup/rollup-win32-arm64-msvc": "4.13.0", - "@rollup/rollup-win32-ia32-msvc": "4.13.0", - "@rollup/rollup-win32-x64-msvc": "4.13.0", + "@rollup/rollup-android-arm-eabi": "4.22.4", + "@rollup/rollup-android-arm64": "4.22.4", + "@rollup/rollup-darwin-arm64": "4.22.4", + "@rollup/rollup-darwin-x64": "4.22.4", + "@rollup/rollup-linux-arm-gnueabihf": "4.22.4", + "@rollup/rollup-linux-arm-musleabihf": "4.22.4", + "@rollup/rollup-linux-arm64-gnu": "4.22.4", + "@rollup/rollup-linux-arm64-musl": "4.22.4", + "@rollup/rollup-linux-powerpc64le-gnu": "4.22.4", + "@rollup/rollup-linux-riscv64-gnu": "4.22.4", + "@rollup/rollup-linux-s390x-gnu": "4.22.4", + "@rollup/rollup-linux-x64-gnu": "4.22.4", + "@rollup/rollup-linux-x64-musl": "4.22.4", + "@rollup/rollup-win32-arm64-msvc": "4.22.4", + "@rollup/rollup-win32-ia32-msvc": "4.22.4", + "@rollup/rollup-win32-x64-msvc": "4.22.4", "fsevents": "~2.3.2" } }, diff --git a/src/alert.js b/src/alert.js index f97e8b7..7f73d0a 100644 --- a/src/alert.js +++ b/src/alert.js @@ -12,7 +12,7 @@ export default class extends Controller { enter(this.element) }, this.showDelayValue) - // Auto dimiss if defined + // Auto dismiss if defined if (this.hasDismissAfterValue) { setTimeout(() => { this.close() diff --git a/src/transition.js b/src/transition.js index b654381..bcd4b70 100644 --- a/src/transition.js +++ b/src/transition.js @@ -7,9 +7,9 @@ // transition(this.element, false) export async function transition(element, state, transitionOptions = {}) { if (!!state) { - enter(element, transitionOptions) + await enter(element, transitionOptions) } else { - leave(element, transitionOptions) + await leave(element, transitionOptions) } } @@ -22,62 +22,121 @@ export async function transition(element, state, transitionOptions = {}) { // data-transition-leave-to="bg-opacity-0" export async function enter(element, transitionOptions = {}) { const transitionClasses = element.dataset.transitionEnter || transitionOptions.enter || 'enter' - const fromClasses = - element.dataset.transitionEnterFrom || transitionOptions.enterFrom || 'enter-from' + const fromClasses = element.dataset.transitionEnterFrom || transitionOptions.enterFrom || 'enter-from' const toClasses = element.dataset.transitionEnterTo || transitionOptions.enterTo || 'enter-to' const toggleClass = element.dataset.toggleClass || transitionOptions.toggleClass || 'hidden' - // Prepare transition - element.classList.add(...transitionClasses.split(' ')) - element.classList.add(...fromClasses.split(' ')) - element.classList.remove(...toClasses.split(' ')) - element.classList.remove(...toggleClass.split(' ')) - - await nextFrame() - - element.classList.remove(...fromClasses.split(' ')) - element.classList.add(...toClasses.split(' ')) - - try { - await afterTransition(element) - } finally { - element.classList.remove(...transitionClasses.split(' ')) - } + return performTransitions(element, { + firstFrame() { + element.classList.add(...transitionClasses.split(' ')) + element.classList.add(...fromClasses.split(' ')) + element.classList.remove(...toClasses.split(' ')) + element.classList.remove(...toggleClass.split(' ')) + }, + secondFrame() { + element.classList.remove(...fromClasses.split(' ')) + element.classList.add(...toClasses.split(' ')) + }, + ending() { + element.classList.remove(...transitionClasses.split(' ')) + } + }) } export async function leave(element, transitionOptions = {}) { const transitionClasses = element.dataset.transitionLeave || transitionOptions.leave || 'leave' - const fromClasses = - element.dataset.transitionLeaveFrom || transitionOptions.leaveFrom || 'leave-from' + const fromClasses = element.dataset.transitionLeaveFrom || transitionOptions.leaveFrom || 'leave-from' const toClasses = element.dataset.transitionLeaveTo || transitionOptions.leaveTo || 'leave-to' const toggleClass = element.dataset.toggleClass || transitionOptions.toggle || 'hidden' - // Prepare transition - element.classList.add(...transitionClasses.split(' ')) - element.classList.add(...fromClasses.split(' ')) - element.classList.remove(...toClasses.split(' ')) - - await nextFrame() + return performTransitions(element, { + firstFrame() { + element.classList.add(...fromClasses.split(' ')) + element.classList.remove(...toClasses.split(' ')) + element.classList.add(...transitionClasses.split(' ')) + }, + secondFrame() { + element.classList.remove(...fromClasses.split(' ')) + element.classList.add(...toClasses.split(' ')) + }, + ending() { + element.classList.remove(...transitionClasses.split(' ')) + element.classList.add(...toggleClass.split(' ')) + } + }) +} - element.classList.remove(...fromClasses.split(' ')) - element.classList.add(...toClasses.split(' ')) +function setupTransition(element) { + element._stimulus_transition = { + timeout: null, + interrupted: false + } +} - try { - await afterTransition(element) - } finally { - element.classList.remove(...transitionClasses.split(' ')) - element.classList.add(...toggleClass.split(' ')) +export function cancelTransition(element) { + if(element._stimulus_transition && element._stimulus_transition.interrupt) { + element._stimulus_transition.interrupt() } } -function nextFrame() { - return new Promise(resolve => { +function performTransitions(element, transitionStages) { + if (element._stimulus_transition) cancelTransition(element) + + let interrupted, firstStageComplete, secondStageComplete + setupTransition(element) + + element._stimulus_transition.cleanup = () => { + if(! firstStageComplete) transitionStages.firstFrame() + if(! secondStageComplete) transitionStages.secondFrame() + + transitionStages.ending() + element._stimulus_transition = null + } + + element._stimulus_transition.interrupt = () => { + interrupted = true + if(element._stimulus_transition.timeout) { + clearTimeout(element._stimulus_transition.timeout) + } + element._stimulus_transition.cleanup() + } + + return new Promise((resolve) => { + if(interrupted) return + requestAnimationFrame(() => { - requestAnimationFrame(resolve) + if(interrupted) return + + transitionStages.firstFrame() + firstStageComplete = true + + requestAnimationFrame(() => { + if(interrupted) return + + transitionStages.secondFrame() + secondStageComplete = true + + if(element._stimulus_transition) { + element._stimulus_transition.timeout = setTimeout(() => { + if(interrupted) { + resolve() + return + } + + element._stimulus_transition.cleanup() + resolve() + }, getAnimationDuration(element)) + } + }) }) }) } -function afterTransition(element) { - return Promise.all(element.getAnimations().map(animation => animation.finished)) +function getAnimationDuration(element) { + let duration = Number(getComputedStyle(element).transitionDuration.replace(/,.*/, '').replace('s', '')) * 1000 + let delay = Number(getComputedStyle(element).transitionDelay.replace(/,.*/, '').replace('s', '')) * 1000 + + if (duration === 0) duration = Number(getComputedStyle(element).animationDuration.replace('s', '')) * 1000 + + return duration + delay } diff --git a/test/alert_test.js b/test/alert_test.js index 7a1c19a..43224b2 100644 --- a/test/alert_test.js +++ b/test/alert_test.js @@ -19,6 +19,8 @@ describe('AlertController', () => { await loadFixture('alerts/alert_default.html') expect(fetchElement().className.includes("hidden")).to.equal(false) + // Timeout so click() doesn't happen before setTimeout runs in controller. + await aTimeout(0) const closeButton = document.querySelector("[data-action='alert#close']") closeButton.click() diff --git a/test/dropdown_test.js b/test/dropdown_test.js index fd3f6f4..8882386 100644 --- a/test/dropdown_test.js +++ b/test/dropdown_test.js @@ -1,4 +1,4 @@ -import { html, fixture, expect, nextFrame } from '@open-wc/testing' +import { fixture, expect, nextFrame } from '@open-wc/testing' import { fetchFixture } from './test_helpers' import { Application } from '@hotwired/stimulus' @@ -19,6 +19,7 @@ describe('DropdownController', () => { const button = document.querySelector('[data-action="dropdown#toggle:stop"]') button.click() await nextFrame() + await nextFrame() expect(menu.className.includes('hidden')).to.equal(false) }) }) diff --git a/test/popover_test.js b/test/popover_test.js index 2043ccc..a60db5f 100644 --- a/test/popover_test.js +++ b/test/popover_test.js @@ -36,10 +36,11 @@ describe('PopoverController', () => { }) target.dispatchEvent(mouseover) await nextFrame() + await nextFrame() expect(target.className.includes('hidden')).to.equal(false) }) - it('mouseOut adds hidden class', (done) => { + it('mouseOut adds hidden class', async () => { const target = document.querySelector('[data-popover-target="content"]') target.className.replace('hidden', '') const event = new MouseEvent('mouseleave', { @@ -47,14 +48,16 @@ describe('PopoverController', () => { bubbles: true, cancelable: true, }) + target.dispatchEvent(event) - setTimeout(() => { - expect(target.className.includes('transition-opacity')).to.equal(true) - }, 10) - setTimeout(() => { - expect(target.className.includes('hidden')).to.equal(true) - done() - }, 101) + + await nextFrame() + await nextFrame() + expect(target.className.includes('transition-opacity')).to.equal(true) + + await nextFrame() + expect(target.className.includes('hidden')).to.equal(true) + expect(target.className.includes('transition-opacity')).to.not.equal(true) }) }) }) diff --git a/test/toggle_test.js b/test/toggle_test.js index 940ed16..043abae 100644 --- a/test/toggle_test.js +++ b/test/toggle_test.js @@ -86,6 +86,8 @@ describe('ToggleController', () => { await nextFrame() action.click() await nextFrame() + await nextFrame() + await nextFrame() expect(target.className.includes('class1')).to.equal(true) expect(target.className.includes('class2')).to.equal(true) diff --git a/test/transition_test.js b/test/transition_test.js new file mode 100644 index 0000000..cbacd91 --- /dev/null +++ b/test/transition_test.js @@ -0,0 +1,146 @@ +import { html, fixture, expect, nextFrame, aTimeout } from '@open-wc/testing' +import { enter, leave, cancelTransition } from '../src/transition' +import { Application } from '@hotwired/stimulus' +import Popover from '../src/popover' + +describe('Transition', () => { + beforeEach(async () => { + await fixture(html` +
+ Hover me +
+ This popover shows on hover +
+
+ `) + + const application = Application.start() + application.register('popover', Popover) + }) + + it('should clean up after a completed transition', async () => { + const target = document.querySelector('[data-popover-target="content"]') + + await enter(target, {}) + + expect(target._stimulus_transition).to.be.null + expect(target.className.includes('hidden')).to.be.false + + await leave(target, {}) + + expect(target.className.split(' ')).to.have.members(['foo', 'hidden', 'opacity-0']) + expect(target._stimulus_transition).to.be.null + }) + + it('cancels a transition that is already running', async () => { + const target = document.querySelector('[data-popover-target="content"]') + + enter(target) + await nextFrame() + expect(target.className.includes('hidden')).to.be.false + + await leave(target, {}) + expect(target.className.includes('hidden')).to.be.true + }) + + describe('has different stages', () => { + it('should cancel and clean up when canceled before the first stage', async () => { + const target = document.querySelector('[data-popover-target="content"]') + + await leave(target) + enter(target, {}) + + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-0', 'hidden']) + + cancelTransition(target) + + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-100']) + expect(target._stimulus_transition).to.be.null + }) + + it('should cancel and clean up when canceled before second stage', async () => { + const target = document.querySelector('[data-popover-target="content"]') + + await leave(target) + enter(target, {}) + await nextFrame() + + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-0', 'transition-opacity', 'ease-in-out', 'duration-100']) + + cancelTransition(target) + + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-100']) + expect(target._stimulus_transition).to.be.null + }) + + it('should cancel and clean up when canceled after second stage', async () => { + const target = document.querySelector('[data-popover-target="content"]') + + await leave(target) + enter(target, {}) + await nextFrame() + await nextFrame() + + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-100', 'transition-opacity', 'ease-in-out', 'duration-100']) + + cancelTransition(target) + + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-100']) + expect(target._stimulus_transition).to.be.null + }) + }) + + describe('leave()', () => { + it('parses, adds, and removes the transition classes correctly', async () => { + const target = document.querySelector('[data-popover-target="content"]') + + await enter(target, {}) + leave(target, {}) + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-100']) + + await nextFrame() + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-100', 'transition-opacity', 'ease-in-out', 'duration-100']) + + await nextFrame() + expect(target.className.split(' ')).to.have.members(['foo', 'transition-opacity', 'ease-in-out', 'duration-100', 'opacity-0']) + + await aTimeout(100) + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-0', 'hidden']) + }) + }) + + describe('enter()', () => { + it('parses, adds, and removes the transition classes correctly', async () => { + const target = document.querySelector('[data-popover-target="content"]') + + await leave(target, {}) + enter(target, {}) + expect(target.className.split(' ')).to.have.members(['foo', 'hidden', 'opacity-0']) + + await nextFrame() + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-0', 'transition-opacity', 'ease-in-out', 'duration-100']) + + await nextFrame() + expect(target.className.split(' ')).to.have.members(['foo', 'transition-opacity', 'ease-in-out', 'duration-100', 'opacity-100']) + + await aTimeout(100) + expect(target.className.split(' ')).to.have.members(['foo', 'opacity-100']) + }) + }) + + describe('cancelTransition()', () => { + it("doesn't error when a canceling a transition that is already finished", async () => { + const target = document.querySelector('[data-popover-target="content"]') + await enter(target, {}) + expect(() => cancelTransition(target)).to.not.throw() + }) + }) +})