From e722bebed8f82be9d3f41a8920fafd7589e7f9e0 Mon Sep 17 00:00:00 2001 From: iamsivin Date: Fri, 9 May 2025 17:28:29 +0530 Subject: [PATCH] chore: Minor fix --- .../spec/useGlobalScrollLock.spec.js | 116 ------------------ .../composables/useGlobalScrollLock.js | 49 -------- 2 files changed, 165 deletions(-) delete mode 100644 app/javascript/dashboard/composables/spec/useGlobalScrollLock.spec.js delete mode 100644 app/javascript/dashboard/composables/useGlobalScrollLock.js diff --git a/app/javascript/dashboard/composables/spec/useGlobalScrollLock.spec.js b/app/javascript/dashboard/composables/spec/useGlobalScrollLock.spec.js deleted file mode 100644 index d6d72b10c..000000000 --- a/app/javascript/dashboard/composables/spec/useGlobalScrollLock.spec.js +++ /dev/null @@ -1,116 +0,0 @@ -import { ref } from 'vue'; -import { useGlobalScrollLock } from '../useGlobalScrollLock'; -import { useScrollLock } from '@vueuse/core'; -import { describe, beforeEach, test, expect, vi } from 'vitest'; - -vi.mock('@vueuse/core', () => ({ - useScrollLock: vi.fn(), -})); - -vi.mock('vue', async () => { - const actual = await vi.importActual('vue'); - return { - ...actual, - onUnmounted: vi.fn(fn => { - vi.fn.unmountCallback = fn; - }), - }; -}); - -describe('useGlobalScrollLock', () => { - let mockLockRef; - - beforeEach(() => { - document.body.innerHTML = ` -
- - `; - - mockLockRef = ref(true); - useScrollLock.mockReturnValue(mockLockRef); - - vi.clearAllMocks(); - }); - - test('provides the expected API', () => { - const api = useGlobalScrollLock(); - - expect(api).toHaveProperty('lockScroll'); - expect(api).toHaveProperty('unlockScroll'); - expect(api).toHaveProperty('isLocked'); - expect(api.isLocked.value).toBe(false); - }); - - test('handles various target types', () => { - const { lockScroll } = useGlobalScrollLock(); - - lockScroll('.conversation-panel'); - expect(useScrollLock).toHaveBeenLastCalledWith( - document.querySelector('.conversation-panel'), - true - ); - - const element = document.querySelector('#modal'); - lockScroll(element); - expect(useScrollLock).toHaveBeenLastCalledWith(element, true); - - const elementRef = ref(element); - lockScroll(elementRef); - expect(useScrollLock).toHaveBeenLastCalledWith(element, true); - }); - - test('handles default target parameter', () => { - const defaultEl = document.querySelector('.conversation-panel'); - const { lockScroll } = useGlobalScrollLock(defaultEl); - - lockScroll(); - expect(useScrollLock).toHaveBeenCalledWith(defaultEl, true); - }); - - test('fails gracefully with invalid targets', () => { - const { lockScroll, isLocked } = useGlobalScrollLock(); - - expect(lockScroll('.doesnt-exist')).toBe(false); - expect(isLocked.value).toBe(false); - - expect(lockScroll(null)).toBe(false); - expect(isLocked.value).toBe(false); - - expect(useScrollLock).not.toHaveBeenCalled(); - }); - - test('manages lock state correctly', () => { - const { lockScroll, unlockScroll, isLocked } = useGlobalScrollLock(); - - expect(isLocked.value).toBe(false); - - lockScroll('.conversation-panel'); - expect(isLocked.value).toBe(true); - unlockScroll(); - expect(isLocked.value).toBe(false); - expect(mockLockRef.value).toBe(false); - }); - - test('handles lock switching correctly', () => { - const { lockScroll } = useGlobalScrollLock(); - - lockScroll('.conversation-panel'); - lockScroll('#modal'); - - expect(mockLockRef.value).toBe(false); - expect(useScrollLock).toHaveBeenCalledTimes(2); - }); - - test('cleans up on component unmount', () => { - const { lockScroll, isLocked } = useGlobalScrollLock(); - - lockScroll('.conversation-panel'); - expect(isLocked.value).toBe(true); - - if (vi.fn.unmountCallback) { - vi.fn.unmountCallback(); - } - - expect(isLocked.value).toBe(false); - }); -}); diff --git a/app/javascript/dashboard/composables/useGlobalScrollLock.js b/app/javascript/dashboard/composables/useGlobalScrollLock.js deleted file mode 100644 index 7ebfd3ea0..000000000 --- a/app/javascript/dashboard/composables/useGlobalScrollLock.js +++ /dev/null @@ -1,49 +0,0 @@ -/** - * useGlobalScrollLock composable - * - * Usage: - * const { lockScroll, unlockScroll, isLocked } = useGlobalScrollLock(target); - * target can be a ref, DOM element, or selector string (class, id, etc) - * eg: lockScroll('.conversation-panel'); unlockScroll(); - */ - -import { ref, unref, shallowRef, onUnmounted } from 'vue'; -import { useScrollLock } from '@vueuse/core'; - -export function useGlobalScrollLock(defaultTarget) { - const scrollLockInstance = shallowRef(null); - const isLocked = ref(false); - - function resolveTarget(target) { - if (!target) return null; - if (typeof target === 'string') return document.querySelector(target); // class, id, etc - if (target instanceof HTMLElement) return target; // DOM element - return unref(target); // ref - } - - function unlockScroll() { - if (!scrollLockInstance.value) return false; - - scrollLockInstance.value.value = false; - isLocked.value = false; - scrollLockInstance.value = null; - return true; - } - - function lockScroll(target = defaultTarget) { - unlockScroll(); // Always unlock first - - const el = resolveTarget(target); - if (!el) return false; - - scrollLockInstance.value = useScrollLock(el, true); - isLocked.value = true; - return true; - } - - onUnmounted(() => { - unlockScroll(); - }); - - return { lockScroll, unlockScroll, isLocked }; -}