117 lines
3.1 KiB
JavaScript
117 lines
3.1 KiB
JavaScript
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 = `
|
|
<div class="conversation-panel"></div>
|
|
<div id="modal"></div>
|
|
`;
|
|
|
|
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);
|
|
});
|
|
});
|