57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
|
import assert from 'node:assert/strict'
|
||
|
|
import test from 'node:test'
|
||
|
|
import { effectScope, nextTick, ref } from 'vue'
|
||
|
|
|
||
|
|
import { useMinimumVisibleState } from '../src/composables/useMinimumVisibleState.js'
|
||
|
|
|
||
|
|
function wait(ms) {
|
||
|
|
return new Promise((resolve) => globalThis.setTimeout(resolve, ms))
|
||
|
|
}
|
||
|
|
|
||
|
|
test('minimum visible state stays visible after a fast loading toggle', async () => {
|
||
|
|
const scope = effectScope()
|
||
|
|
const state = scope.run(() => {
|
||
|
|
const loading = ref(false)
|
||
|
|
const visible = useMinimumVisibleState(loading, { minVisibleMs: 35 })
|
||
|
|
return { loading, visible }
|
||
|
|
})
|
||
|
|
|
||
|
|
state.loading.value = true
|
||
|
|
await nextTick()
|
||
|
|
assert.equal(state.visible.value, true)
|
||
|
|
|
||
|
|
state.loading.value = false
|
||
|
|
await nextTick()
|
||
|
|
assert.equal(state.visible.value, true)
|
||
|
|
|
||
|
|
await wait(50)
|
||
|
|
assert.equal(state.visible.value, false)
|
||
|
|
scope.stop()
|
||
|
|
})
|
||
|
|
|
||
|
|
test('minimum visible state cancels a pending hide when loading restarts', async () => {
|
||
|
|
const scope = effectScope()
|
||
|
|
const state = scope.run(() => {
|
||
|
|
const loading = ref(false)
|
||
|
|
const visible = useMinimumVisibleState(loading, { minVisibleMs: 40 })
|
||
|
|
return { loading, visible }
|
||
|
|
})
|
||
|
|
|
||
|
|
state.loading.value = true
|
||
|
|
await nextTick()
|
||
|
|
state.loading.value = false
|
||
|
|
await nextTick()
|
||
|
|
await wait(10)
|
||
|
|
|
||
|
|
state.loading.value = true
|
||
|
|
await nextTick()
|
||
|
|
await wait(40)
|
||
|
|
assert.equal(state.visible.value, true)
|
||
|
|
|
||
|
|
state.loading.value = false
|
||
|
|
await nextTick()
|
||
|
|
await wait(50)
|
||
|
|
assert.equal(state.visible.value, false)
|
||
|
|
scope.stop()
|
||
|
|
})
|