From a116f0ef71e4127d293870978ef4a64e81a7aca0 Mon Sep 17 00:00:00 2001
From: Liao-js <43257608+Liao-js@users.noreply.github.com>
Date: Sun, 5 Jan 2025 23:07:27 +0800
Subject: [PATCH] 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
---
 .../hooks/__tests__/use-lockscreen.test.tsx   | 30 +++++++++++++++----
 packages/hooks/use-lockscreen/index.ts        |  4 +--
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/packages/hooks/__tests__/use-lockscreen.test.tsx b/packages/hooks/__tests__/use-lockscreen.test.tsx
index 1909c5ea27..d69b6d9a4b 100644
--- a/packages/hooks/__tests__/use-lockscreen.test.tsx
+++ b/packages/hooks/__tests__/use-lockscreen.test.tsx
@@ -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 () => {
diff --git a/packages/hooks/use-lockscreen/index.ts b/packages/hooks/use-lockscreen/index.ts
index e36d8dd0fb..d1f404da4d 100644
--- a/packages/hooks/use-lockscreen/index.ts
+++ b/packages/hooks/use-lockscreen/index.ts
@@ -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())
 }