fix(hooks): [use-lockscreen] remove hiddenCls (#19429)

* fix(hooks): [use-lockscreen] remove hiddenCls

* fix(hooks): [useLockscreen] unit test

* test(hooks): [useLockscreen] should not cleanup when not all unmounted

* test(hooks): [useLockscreen] update test

* test(hooks): [useLockscreen] update test
This commit is contained in:
Liao-js 2025-01-05 23:07:27 +08:00 committed by GitHub
parent 45fa8d3b31
commit a116f0ef71
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 8 deletions

View File

@ -1,6 +1,7 @@
import { computed, defineComponent, nextTick, onMounted, ref } from 'vue'
import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import sleep from '@element-plus/test-utils/sleep'
import { hasClass } from '@element-plus/utils'
import { useLockscreen } from '../use-lockscreen'
@ -31,9 +32,8 @@ describe('useLockscreen', () => {
wrapper.unmount()
await nextTick()
setTimeout(() => {
expect(hasClass(document.body, kls)).toBe(false)
}, 250)
await sleep(250)
expect(hasClass(document.body, kls)).toBe(false)
})
it('should cleanup when unmounted', async () => {
@ -49,9 +49,27 @@ describe('useLockscreen', () => {
shouldRender.value = false
await nextTick()
setTimeout(() => {
expect(hasClass(document.body, kls)).toBe(false)
}, 250)
await sleep(250)
expect(hasClass(document.body, kls)).toBe(false)
})
it('should not cleanup when not all unmounted', async () => {
const wrapper1 = mount({
setup: () => () => <Comp />,
})
const wrapper2 = mount({
setup: () => () => <Comp />,
})
await nextTick()
expect(hasClass(document.body, kls)).toBe(true)
wrapper2.unmount()
await sleep(250)
expect(hasClass(document.body, kls)).toBe(true)
wrapper1.unmount()
await sleep(250)
expect(hasClass(document.body, kls)).toBe(false)
})
it('should render a different namespace than the given one', async () => {

View File

@ -51,9 +51,9 @@ export const useLockscreen = (
// When the test case is running, the context environment simulated by jsdom may have been destroyed,
// and the document does not exist at this time.
if (typeof document === 'undefined') return
removeClass(document?.body, hiddenCls.value)
if (withoutHiddenClass && document) {
document.body.style.width = bodyWidth
removeClass(document.body, hiddenCls.value)
}
}, 200)
}
@ -66,6 +66,7 @@ export const useLockscreen = (
withoutHiddenClass = !hasClass(document.body, hiddenCls.value)
if (withoutHiddenClass) {
bodyWidth = document.body.style.width
addClass(document.body, hiddenCls.value)
}
scrollBarWidth = getScrollBarWidth(ns.namespace.value)
const bodyHasOverflow =
@ -78,7 +79,6 @@ export const useLockscreen = (
) {
document.body.style.width = `calc(100% - ${scrollBarWidth}px)`
}
addClass(document.body, hiddenCls.value)
})
onScopeDispose(() => cleanup())
}