@pdanpdan/virtual-scroll 0.2.0 → 0.2.1

package/src/components/VirtualScroll.test.ts

@@ -1,7 +1,8 @@
-import type { ScrollDetails } from '../composables/useVirtualScroll';
+import type { ScrollAlignment, ScrollAlignmentOptions, ScrollDetails, ScrollToIndexOptions } from '../composables/useVirtualScroll';
+import type { DOMWrapper, VueWrapper } from '@vue/test-utils';
 
 import { mount } from '@vue/test-utils';
-import { describe, expect, it, vi } from 'vitest';
+import { beforeEach, describe, expect, it } from 'vitest';
 import { defineComponent, nextTick, ref } from 'vue';
 
 import VirtualScroll from './VirtualScroll.vue';
@@ -45,11 +46,19 @@ globalThis.ResizeObserver = class {
 // eslint-disable-next-line test/prefer-lowercase-title
 describe('VirtualScroll component', () => {
   const mockItems = Array.from({ length: 100 }, (_, i) => ({ id: i, label: `Item ${ i }` }));
+
   interface VSInstance {
-    scrollToIndex: (rowIndex: number | null, colIndex: number | null, options?: unknown) => void;
-    scrollToOffset: (x: number | null, y: number | null, options?: unknown) => void;
-    setItemRef: (el: unknown, index: number) => void;
     scrollDetails: ScrollDetails<unknown>;
+    scrollToIndex: (rowIndex: number | null, colIndex: number | null, options?: ScrollAlignment | ScrollAlignmentOptions | ScrollToIndexOptions) => void;
+    scrollToOffset: (x: number | null, y: number | null, options?: { behavior?: 'auto' | 'smooth'; }) => void;
+    setItemRef: (el: unknown, index: number) => void;
+    stopProgrammaticScroll: () => void;
+  }
+
+  interface TestCompInstance {
+    mockItems: typeof mockItems;
+    show: boolean;
+    showFooter: boolean;
   }
 
   describe('rendering and structure', () => {
@@ -78,10 +87,49 @@ describe('VirtualScroll component', () => {
           footer: '<div class="footer">Footer</div>',
         },
       });
+      expect(wrapper.find('.virtual-scroll-header').exists()).toBe(true);
       expect(wrapper.find('.header').exists()).toBe(true);
+      expect(wrapper.find('.virtual-scroll-footer').exists()).toBe(true);
       expect(wrapper.find('.footer').exists()).toBe(true);
     });
 
+    it('should not render header and footer slots when absent', () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems,
+          itemSize: 50,
+        },
+      });
+      expect(wrapper.find('.virtual-scroll-header').exists()).toBe(false);
+      expect(wrapper.find('.virtual-scroll-footer').exists()).toBe(false);
+    });
+
+    it('should render debug information when debug prop is true', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems.slice(0, 5),
+          itemSize: 50,
+          debug: true,
+        },
+      });
+      await nextTick();
+      expect(wrapper.find('.virtual-scroll-debug-info').exists()).toBe(true);
+      expect(wrapper.find('.virtual-scroll-item').classes()).toContain('virtual-scroll--debug');
+    });
+
+    it('should not render debug information when debug prop is false', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems.slice(0, 5),
+          itemSize: 50,
+          debug: false,
+        },
+      });
+      await nextTick();
+      expect(wrapper.find('.virtual-scroll-debug-info').exists()).toBe(false);
+      expect(wrapper.find('.virtual-scroll-item').classes()).not.toContain('virtual-scroll--debug');
+    });
+
     it('should handle missing slots gracefully', () => {
       const wrapper = mount(VirtualScroll, {
         props: {
@@ -186,9 +234,43 @@ describe('VirtualScroll component', () => {
       expect(wrapper.find('tr.virtual-scroll-spacer').exists()).toBe(true);
       expect(wrapper.find('tr.virtual-scroll-item').exists()).toBe(true);
     });
+
+    it('should handle table rendering without header and footer', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          items: mockItems.slice(0, 5),
+          containerTag: 'table',
+        },
+      });
+      await nextTick();
+      expect(wrapper.find('thead').exists()).toBe(false);
+      expect(wrapper.find('tfoot').exists()).toBe(false);
+    });
+
+    it('should cover all template branches for slots and tags', async () => {
+      for (const tag of [ 'div', 'table' ] as const) {
+        for (const loading of [ true, false ]) {
+          for (const withSlots of [ true, false ]) {
+            const slots = withSlots
+              ? {
+                header: tag === 'table' ? '<tr><td>H</td></tr>' : '<div>H</div>',
+                footer: tag === 'table' ? '<tr><td>F</td></tr>' : '<div>F</div>',
+                loading: tag === 'table' ? '<tr><td>L</td></tr>' : '<div>L</div>',
+              }
+              : {};
+            const wrapper = mount(VirtualScroll, {
+              props: { items: mockItems.slice(0, 1), containerTag: tag, loading },
+              slots,
+            });
+            await nextTick();
+            wrapper.unmount();
+          }
+        }
+      }
+    });
   });
 
-  describe('styling and directions', () => {
+  describe('styling and dimensions', () => {
     it('should render items horizontally when direction is horizontal', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
@@ -280,140 +362,202 @@ describe('VirtualScroll component', () => {
       await nextTick();
       // This covers the branch where container is NOT host element and NOT window
     });
-  });
 
-  describe('events and interaction', () => {
-    it('should emit scroll event', async () => {
-      const wrapper = mount(VirtualScroll, { props: { items: mockItems, itemSize: 50 } });
-      await nextTick();
-      expect(wrapper.emitted('scroll')).toBeDefined();
-    });
-
-    it('should not emit scroll before hydration', async () => {
-      const wrapper = mount(VirtualScroll, {
+    it('should cover object padding branches in virtualScrollProps', () => {
+      mount(VirtualScroll, {
         props: {
-          items: mockItems.slice(0, 5),
-          initialScrollIndex: 0,
+          items: mockItems.slice(0, 1),
+          scrollPaddingStart: { x: 10, y: 20 },
+          scrollPaddingEnd: { x: 30, y: 40 },
+        },
+      });
+      mount(VirtualScroll, {
+        props: {
+          items: mockItems.slice(0, 1),
+          direction: 'horizontal',
+          scrollPaddingStart: 10,
+          scrollPaddingEnd: 20,
         },
       });
-      // Hydration is delayed via nextTick in useVirtualScroll when initialScrollIndex is set
-      // Trigger scrollDetails update
-      await wrapper.setProps({ items: mockItems.slice(0, 10) });
-      expect(wrapper.emitted('scroll')).toBeUndefined();
-      await nextTick();
-      // Still might not be hydrated because it's nextTick within nextTick?
-      // Actually, useVirtualScroll uses nextTick inside onMounted.
-      // mount() calls onMounted.
-      // So we need one nextTick to reach isHydrated = true.
-      await nextTick();
-      expect(wrapper.emitted('scroll')).toBeDefined();
     });
+  });
 
-    it('should emit visibleRangeChange event', async () => {
-      const wrapper = mount(VirtualScroll, {
+  describe('keyboard navigation', () => {
+    let wrapper: VueWrapper<VSInstance>;
+    let container: DOMWrapper<Element>;
+    let el: HTMLElement;
+
+    beforeEach(async () => {
+      wrapper = mount(VirtualScroll, {
         props: {
           items: mockItems,
           itemSize: 50,
+          direction: 'vertical',
         },
-      });
-
+      }) as unknown as VueWrapper<VSInstance>;
       await nextTick();
-      await nextTick();
-      // Initially it should emit on mount (via scrollDetails watch)
-      const emits = wrapper.emitted('visibleRangeChange');
-      expect(emits).toBeTruthy();
-      const firstEmit = (emits as unknown[][])[ 0 ]![ 0 ] as { start: number; };
-      expect(firstEmit).toMatchObject({ start: 0 });
+      container = wrapper.find('.virtual-scroll-container');
+      el = container.element as HTMLElement;
 
-      // Scroll to trigger change
-      const container = wrapper.find('.virtual-scroll-container').element as HTMLElement;
-      Object.defineProperty(container, 'scrollTop', { value: 500, writable: true });
-      await container.dispatchEvent(new Event('scroll'));
-      await nextTick();
-      await nextTick();
+      // Mock dimensions
+      Object.defineProperty(el, 'clientHeight', { value: 500, configurable: true });
+      Object.defineProperty(el, 'clientWidth', { value: 500, configurable: true });
+      Object.defineProperty(el, 'offsetHeight', { value: 500, configurable: true });
+      Object.defineProperty(el, 'offsetWidth', { value: 500, configurable: true });
 
-      const lastEmits = wrapper.emitted('visibleRangeChange') as unknown[][];
-      expect(lastEmits).toBeTruthy();
-      const lastEmit = lastEmits[ lastEmits.length - 1 ]![ 0 ] as { start: number; };
-      expect(lastEmit.start).toBeGreaterThan(0);
+      const observers = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.filter((i) => i.targets.has(el));
+      observers.forEach((i) => i.trigger([ { target: el, contentRect: { width: 500, height: 500 } as unknown as DOMRectReadOnly } ]));
+      await nextTick();
     });
 
-    it('should handle keyboard navigation', async () => {
-      const wrapper = mount(VirtualScroll, { props: { items: mockItems, itemSize: 50 } });
+    it('should handle Home key', async () => {
+      el.scrollTop = 1000;
+      el.scrollLeft = 500;
+      await container.trigger('keydown', { key: 'Home' });
       await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      const el = container.element as HTMLElement;
-      Object.defineProperty(el, 'scrollHeight', { value: 5000, configurable: true });
-      Object.defineProperty(el, 'clientHeight', { value: 500, configurable: true });
+      expect(el.scrollTop).toBe(0);
+      expect(el.scrollLeft).toBe(0);
+    });
 
+    it('should handle End key (vertical)', async () => {
+      el.scrollLeft = 0;
       await container.trigger('keydown', { key: 'End' });
       await nextTick();
-      expect(el.scrollTop).toBeGreaterThan(0);
+      // totalHeight = 100 items * 50px = 5000px
+      // viewportHeight = 500px
+      // scrollToIndex(99, 0, 'end') -> targetY = 99 * 50 = 4950
+      // alignment 'end' -> targetY = 4950 - (500 - 50) = 4500
+      expect(el.scrollTop).toBe(4500);
+      expect(el.scrollLeft).toBe(0);
+    });
 
-      await container.trigger('keydown', { key: 'Home' });
+    it('should handle End key (horizontal)', async () => {
+      await wrapper.setProps({ direction: 'horizontal' });
       await nextTick();
+      // Trigger resize again for horizontal
+      const observers = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.filter((i) => i.targets.has(el));
+      observers.forEach((i) => i.trigger([ { target: el, contentRect: { width: 500, height: 500 } as unknown as DOMRectReadOnly } ]));
+      await nextTick();
+
+      el.scrollTop = 0;
+      await container.trigger('keydown', { key: 'End' });
+      await nextTick();
+      expect(el.scrollLeft).toBe(4500);
       expect(el.scrollTop).toBe(0);
     });
 
-    it('should handle horizontal keyboard navigation', async () => {
-      const wrapper = mount(VirtualScroll, { props: { items: mockItems, itemSize: 50, direction: 'horizontal' } });
+    it('should handle End key in both mode', async () => {
+      await wrapper.setProps({ columnCount: 5, columnWidth: 100, direction: 'both' });
       await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      const el = container.element as HTMLElement;
-      Object.defineProperty(el, 'scrollWidth', { value: 5000, configurable: true });
-      Object.defineProperty(el, 'clientWidth', { value: 500, configurable: true });
 
-      await container.trigger('keydown', { key: 'End' });
+      // Trigger a resize
+      const observers = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.filter((i) => i.targets.has(el));
+      observers.forEach((i) => i.trigger([ { target: el, contentRect: { width: 500, height: 500 } as unknown as DOMRectReadOnly } ]));
       await nextTick();
-      expect(el.scrollLeft).toBeGreaterThan(0);
 
-      await container.trigger('keydown', { key: 'Home' });
+      await container.trigger('keydown', { key: 'End' });
       await nextTick();
+
+      // items: 100 (rows), height: 50 -> totalHeight: 5000
+      // columns: 5, width: 100 -> totalWidth: 500
+      // viewport: 500x500
+      // scrollToIndex(99, 4, 'end')
+      // targetY = 99 * 50 = 4950. end alignment: 4950 - (500 - 50) = 4500
+      // targetX = 4 * 100 = 400. end alignment: 400 - (500 - 100) = 0
+      expect(el.scrollTop).toBe(4500);
       expect(el.scrollLeft).toBe(0);
     });
 
-    it('should handle handled keys in handleKeyDown', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: {
-          items: mockItems,
-          itemSize: 50,
-        },
-      });
-
+    it('should handle End key with empty items', async () => {
+      await wrapper.setProps({ items: [] });
       await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      const scrollToSpy = vi.fn();
-      container.element.scrollTo = scrollToSpy;
+      await container.trigger('keydown', { key: 'End' });
+      await nextTick();
+    });
 
+    it('should handle ArrowDown / ArrowUp', async () => {
+      el.scrollLeft = 0;
       await container.trigger('keydown', { key: 'ArrowDown' });
-      expect(scrollToSpy).toHaveBeenCalled();
+      await nextTick();
+      expect(el.scrollTop).toBe(40);
+      expect(el.scrollLeft).toBe(0);
 
       await container.trigger('keydown', { key: 'ArrowUp' });
-      expect(scrollToSpy).toHaveBeenCalled();
+      await nextTick();
+      expect(el.scrollTop).toBe(0);
+      expect(el.scrollLeft).toBe(0);
+    });
 
+    it('should handle ArrowRight / ArrowLeft', async () => {
+      await wrapper.setProps({ direction: 'horizontal' });
+      await nextTick();
+      el.scrollTop = 0;
       await container.trigger('keydown', { key: 'ArrowRight' });
-      expect(scrollToSpy).toHaveBeenCalled();
+      await nextTick();
+      expect(el.scrollLeft).toBe(40);
+      expect(el.scrollTop).toBe(0);
 
       await container.trigger('keydown', { key: 'ArrowLeft' });
-      expect(scrollToSpy).toHaveBeenCalled();
+      await nextTick();
+      expect(el.scrollLeft).toBe(0);
+      expect(el.scrollTop).toBe(0);
+    });
 
+    it('should handle PageDown / PageUp', async () => {
+      el.scrollLeft = 0;
       await container.trigger('keydown', { key: 'PageDown' });
-      expect(scrollToSpy).toHaveBeenCalled();
+      await nextTick();
+      expect(el.scrollTop).toBe(500);
+      expect(el.scrollLeft).toBe(0);
 
       await container.trigger('keydown', { key: 'PageUp' });
-      expect(scrollToSpy).toHaveBeenCalled();
+      await nextTick();
+      expect(el.scrollTop).toBe(0);
+      expect(el.scrollLeft).toBe(0);
     });
 
-    it('should handle unhandled keys in handleKeyDown', async () => {
-      const wrapper = mount(VirtualScroll, { props: { items: mockItems } });
+    it('should handle PageDown / PageUp in horizontal mode', async () => {
+      await wrapper.setProps({ direction: 'horizontal' });
+      await nextTick();
+      el.scrollTop = 0;
+      await container.trigger('keydown', { key: 'PageDown' });
+      await nextTick();
+      expect(el.scrollLeft).toBe(500);
+      expect(el.scrollTop).toBe(0);
+
+      await container.trigger('keydown', { key: 'PageUp' });
+      await nextTick();
+      expect(el.scrollLeft).toBe(0);
+      expect(el.scrollTop).toBe(0);
+    });
+
+    it('should not scroll past the end using PageDown', async () => {
+      // items: 100, itemSize: 50 -> totalHeight = 5000
+      // viewportHeight: 500 -> maxScroll = 4500
+      (wrapper.vm as unknown as VSInstance).scrollToOffset(null, 4400);
+      await nextTick();
+      await container.trigger('keydown', { key: 'PageDown' });
+      await nextTick();
+      expect(el.scrollTop).toBe(4500);
+    });
+
+    it('should not scroll past the end using ArrowDown', async () => {
+      // maxScroll = 4500
+      (wrapper.vm as unknown as VSInstance).scrollToOffset(null, 4480);
       await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
       await container.trigger('keydown', { key: 'ArrowDown' });
-      // Should just call stopProgrammaticScroll
+      await nextTick();
+      expect(el.scrollTop).toBe(4500);
+    });
+
+    it('should handle unhandled keys', async () => {
+      const event = new KeyboardEvent('keydown', { key: 'Enter', cancelable: true });
+      el.dispatchEvent(event);
+      expect(event.defaultPrevented).toBe(false);
     });
   });
 
-  describe('lifecycle and observers', () => {
+  describe('resize and observers', () => {
     it('should update item size on resize', async () => {
       const wrapper = mount(VirtualScroll, { props: { items: mockItems.slice(0, 5) } });
       await nextTick();
@@ -449,7 +593,6 @@ describe('VirtualScroll component', () => {
         observer.trigger([ { target: host } ]);
       }
       await nextTick();
-      // Should have called updateHostOffset (internal)
     });
 
     it('should observe cell resize with data-col-index', async () => {
@@ -501,13 +644,6 @@ describe('VirtualScroll component', () => {
       await nextTick();
     });
 
-    it('should handle missing footerRef gracefully in onMounted', () => {
-      mount(VirtualScroll, {
-        props: { items: mockItems, itemSize: 50 },
-        slots: { header: '<div>H</div>' },
-      });
-    });
-
     it('should observe footer on mount if slot exists', async () => {
       const wrapper = mount(VirtualScroll, {
         props: { items: mockItems, itemSize: 50 },
@@ -525,7 +661,7 @@ describe('VirtualScroll component', () => {
         setup() {
           const show = ref(true);
           const showFooter = ref(true);
-          return { show, showFooter, mockItems };
+          return { mockItems, show, showFooter };
         },
         template: `
           <VirtualScroll :items="mockItems">
@@ -537,175 +673,61 @@ describe('VirtualScroll component', () => {
       const wrapper = mount(TestComp);
       await nextTick();
 
-      // Toggle off to trigger 'unobserve'
-      (wrapper.vm as unknown as { show: boolean; showFooter: boolean; }).show = false;
-      (wrapper.vm as unknown as { show: boolean; showFooter: boolean; }).showFooter = false;
-      await nextTick();
-
-      // Toggle on to trigger 'observe' (newEl)
-      (wrapper.vm as unknown as { show: boolean; showFooter: boolean; }).show = true;
-      (wrapper.vm as unknown as { show: boolean; showFooter: boolean; }).showFooter = true;
-      await nextTick();
-    });
-
-    it('should cover ResizeObserver cell measurement', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: { items: mockItems.slice(0, 1), direction: 'both', columnCount: 5 },
-        slots: { item: '<template #item><div data-col-index="0">cell</div></template>' },
-      });
-      await nextTick();
-      const cell = wrapper.find('[data-col-index="0"]').element;
-      const observer = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.find((i) => i.targets.has(cell));
-      if (observer) {
-        observer.trigger([ { target: cell } ]);
-      }
-      await nextTick();
-    });
-
-    it('should handle keyboard navigation End key horizontal', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: { items: mockItems, direction: 'horizontal', itemSize: 50 },
-      });
+      (wrapper.vm as unknown as TestCompInstance).show = false;
+      (wrapper.vm as unknown as TestCompInstance).showFooter = false;
       await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      const el = container.element as HTMLElement;
-      Object.defineProperty(el, 'scrollWidth', { value: 5000, configurable: true });
-      Object.defineProperty(el, 'clientWidth', { value: 500, configurable: true });
 
-      await container.trigger('keydown', { key: 'End' });
+      (wrapper.vm as unknown as TestCompInstance).show = true;
+      (wrapper.vm as unknown as TestCompInstance).showFooter = true;
       await nextTick();
-      expect(el.scrollLeft).toBeGreaterThan(0);
     });
 
-    it('should handle keyboard navigation End key vertical', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: { items: mockItems, direction: 'vertical', itemSize: 50 },
-      });
-      await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      const el = container.element as HTMLElement;
-      Object.defineProperty(el, 'scrollHeight', { value: 5000, configurable: true });
-      Object.defineProperty(el, 'clientHeight', { value: 500, configurable: true });
-
-      await container.trigger('keydown', { key: 'End' });
-      await nextTick();
-      expect(el.scrollTop).toBeGreaterThan(0);
-    });
-
-    it('should handle keyboard navigation End key with empty items', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: { items: [], direction: 'vertical', itemSize: 50 },
-      });
-      await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      await container.trigger('keydown', { key: 'End' });
-      await nextTick();
-    });
-
-    it('should handle keyboard navigation End key with columnCount 0 in both mode', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: { items: mockItems, direction: 'both', columnCount: 0, itemSize: 50 },
-      });
-      await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      await container.trigger('keydown', { key: 'End' });
-      await nextTick();
-    });
-
-    it('should handle keyboard navigation End key in both mode', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: { items: mockItems, direction: 'both', columnCount: 5, itemSize: 50, columnWidth: 100 },
-      });
-      await nextTick();
-      const container = wrapper.find('.virtual-scroll-container');
-      await container.trigger('keydown', { key: 'End' });
-      await nextTick();
-    });
-
-    it('should handle load event for horizontal direction', async () => {
+    it('should cleanup observers on unmount', async () => {
       const wrapper = mount(VirtualScroll, {
-        props: { items: mockItems.slice(0, 10), direction: 'horizontal', itemSize: 50, loadDistance: 400 },
+        props: { items: mockItems, stickyFooter: true, stickyHeader: true },
+        slots: { footer: '<div>F</div>', header: '<div>H</div>' },
       });
       await nextTick();
-      (wrapper.vm as unknown as VSInstance).scrollToOffset(250, 0);
-      await nextTick();
-      await nextTick();
-      expect(wrapper.emitted('load')).toBeDefined();
+      wrapper.unmount();
     });
 
-    it('should cover itemResizeObserver branches', async () => {
-      const wrapper = mount(VirtualScroll, { props: { items: mockItems.slice(0, 1) } });
+    it('should ignore elements with missing or invalid data attributes in itemResizeObserver', async () => {
+      mount(VirtualScroll, { props: { items: mockItems.slice(0, 1) } });
       await nextTick();
-      const item = wrapper.find('.virtual-scroll-item').element as HTMLElement;
-      const observer = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.find((i) => i.targets.has(item));
+      const observer = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances[ 0 ]!;
 
-      // Trigger with data-index but without borderBoxSize
-      observer?.trigger([ { target: item, contentRect: { width: 100, height: 100 } as DOMRectReadOnly } ]);
+      // 1. Invalid index string
+      const div1 = document.createElement('div');
+      div1.dataset.index = 'invalid';
+      observer.trigger([ { target: div1, contentRect: { width: 100, height: 100 } as unknown as DOMRectReadOnly } ]);
 
-      // Trigger with NaN index
-      const div = document.createElement('div');
-      observer?.trigger([ { target: div } ]);
-    });
+      // 2. Missing index and colIndex
+      const div2 = document.createElement('div');
+      observer.trigger([ { target: div2, contentRect: { width: 100, height: 100 } as unknown as DOMRectReadOnly } ]);
 
-    it('should cleanup observers on unmount', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: { items: mockItems, stickyHeader: true, stickyFooter: true },
-        slots: { header: '<div>H</div>', footer: '<div>F</div>' },
-      });
       await nextTick();
-      wrapper.unmount();
     });
   });
 
   describe('grid mode logic', () => {
-    it('should cover colIndex measurement in itemResizeObserver', async () => {
-      mount(VirtualScroll, { props: { items: mockItems.slice(0, 1) } });
-      await nextTick();
-      const observer = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.find((i) => i.callback.toString().includes('colIndex'));
-      const div = document.createElement('div');
-      div.dataset.colIndex = '0';
-      observer!.trigger([ { target: div } ]);
-    });
-
-    it('should cover firstRenderedIndex watcher for grid old/new and other branches', async () => {
-      // Test direction !== 'both' branch
-      const wrapperV = mount(VirtualScroll, {
-        props: { items: mockItems, direction: 'vertical', itemSize: 50 },
-      });
-      await nextTick();
-      (wrapperV.vm as unknown as VSInstance).scrollToIndex(10, 0);
-      await nextTick();
-      await nextTick();
-
+    it('should cover firstRenderedIndex watcher for grid', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          items: mockItems,
-          direction: 'both',
+          bufferBefore: 2,
           columnCount: 5,
+          direction: 'both',
           itemSize: 50,
-          bufferBefore: 2,
-          bufferAfter: 10,
+          items: mockItems,
         },
         slots: {
           item: '<template #item="{ index }"><div class="cell" :data-col-index="0">Item {{ index }}</div></template>',
         },
       });
-      const container = wrapper.find('.virtual-scroll-container').element as HTMLElement;
-      Object.defineProperty(container, 'clientHeight', { value: 200, configurable: true });
-      Object.defineProperty(container, 'clientWidth', { value: 200, configurable: true });
-
-      // Trigger host resize observer
-      (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.forEach((i) => {
-        if (i.targets.has(container)) {
-          i.trigger([ { target: container } ]);
-        }
-      });
       await nextTick();
-
       const vm = wrapper.vm as unknown as VSInstance;
 
-      // Initial scroll to 10. range starts at 10-2 = 8.
-      vm.scrollToIndex(10, 0, { behavior: 'auto', align: 'start' });
+      // Scroll to 10
+      vm.scrollToIndex(10, 0, { align: 'start', behavior: 'auto' });
       await nextTick();
       await nextTick();
 
@@ -713,64 +735,24 @@ describe('VirtualScroll component', () => {
       const itemResizeObserver = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances.find((i) => i.targets.has(item8));
       expect(itemResizeObserver).toBeDefined();
 
-      const cell8 = item8.querySelector('[data-col-index="0"]');
-      expect(itemResizeObserver!.targets.has(cell8!)).toBe(true);
-
-      // Scroll to 9. range starts at 9-2 = 7.
-      // oldIdx was 8. newIdx is 7. Item 8 is still in DOM.
-      vm.scrollToIndex(9, 0, { behavior: 'auto', align: 'start' });
-      await nextTick();
-      await nextTick();
-
-      // Item 8 should have its cells unobserved
-      expect(itemResizeObserver!.targets.has(cell8!)).toBe(false);
-
-      // Item 7 should have its cells observed
-      const item7 = wrapper.find('.virtual-scroll-item[data-index="7"]').element;
-      const cell7 = item7.querySelector('[data-col-index="0"]');
-      expect(itemResizeObserver!.targets.has(cell7!)).toBe(true);
-
-      // Scroll to 50. range starts at 50-2 = 48.
-      // oldIdx was 7. Item 7 is definitely NOT in DOM anymore.
-      // This covers the if (oldEl) branch being false.
-      vm.scrollToIndex(50, 0, { behavior: 'auto', align: 'start' });
+      // Scroll to 9
+      vm.scrollToIndex(9, 0, { align: 'start', behavior: 'auto' });
       await nextTick();
       await nextTick();
-    });
-
-    it('should cover firstRenderedIndex watcher logic for grid cells', async () => {
-      const wrapper = mount(VirtualScroll, {
-        props: {
-          items: mockItems,
-          direction: 'both',
-          columnCount: 5,
-          itemSize: 50,
-        },
-        slots: {
-          item: '<template #item="{ index }"><div :data-col-index="0">Item {{ index }}</div></template>',
-        },
-      });
-      await nextTick();
 
-      // Initial state: firstRenderedIndex should be 0.
-      // Scroll to change it.
-      const vm = wrapper.vm as unknown as VSInstance;
-      vm.scrollToIndex(10, 0);
+      // Scroll to 50
+      vm.scrollToIndex(50, 0, { align: 'start', behavior: 'auto' });
       await nextTick();
-      // This should trigger the watcher (oldIdx 0 -> newIdx 10)
-
-      // Scroll back
-      vm.scrollToIndex(0, 0);
       await nextTick();
     });
 
     it('should cover firstRenderedIndex watcher when items becomes empty', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          items: mockItems,
-          direction: 'both',
           columnCount: 5,
+          direction: 'both',
           itemSize: 50,
+          items: mockItems,
         },
       });
       await nextTick();
@@ -779,52 +761,17 @@ describe('VirtualScroll component', () => {
     });
   });
 
-  describe('internal methods and exports', () => {
-    it('should handle setItemRef', async () => {
-      const wrapper = mount(VirtualScroll, { props: { items: mockItems.slice(0, 1) } });
-      await nextTick();
-      const vm = wrapper.vm as unknown as VSInstance;
-      const item = wrapper.find('.virtual-scroll-item').element as HTMLElement;
-      vm.setItemRef(item, 0);
-      vm.setItemRef(null, 0);
-      vm.setItemRef(null, 999);
-    });
-
-    it('should handle setItemRef with NaN index', async () => {
-      mount(VirtualScroll, { props: { items: mockItems.slice(0, 1) } });
-      await nextTick();
-      const observer = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances[ 0 ];
-      const div = document.createElement('div');
-      // No data-index
-      observer?.trigger([ { target: div, contentRect: { width: 100, height: 100 } as DOMRectReadOnly } ]);
-    });
-
-    it('should handle firstRenderedIndex being undefined', async () => {
-      // items empty
-      mount(VirtualScroll, { props: { items: [] } });
-      await nextTick();
-    });
-
-    it('should expose methods', () => {
-      const wrapper = mount(VirtualScroll, { props: { items: mockItems, itemSize: 50 } });
-      expect(typeof (wrapper.vm as unknown as VSInstance).scrollToIndex).toBe('function');
-      expect(typeof (wrapper.vm as unknown as VSInstance).scrollToOffset).toBe('function');
-    });
-  });
-
   describe('infinite scroll and loading', () => {
     it('should emit load event when reaching scroll end (vertical)', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          items: mockItems.slice(0, 10),
           itemSize: 50,
+          items: mockItems.slice(0, 10),
           loadDistance: 400,
-          useRAF: false,
         },
       });
       await nextTick();
 
-      // Scroll to near end
       (wrapper.vm as unknown as VSInstance).scrollToOffset(0, 250);
       await nextTick();
       await nextTick();
@@ -836,16 +783,14 @@ describe('VirtualScroll component', () => {
     it('should emit load event when reaching scroll end (horizontal)', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          items: mockItems.slice(0, 10),
-          itemSize: 50,
           direction: 'horizontal',
+          itemSize: 50,
+          items: mockItems.slice(0, 10),
           loadDistance: 400,
-          useRAF: false,
         },
       });
       await nextTick();
 
-      // Scroll to near end
       (wrapper.vm as unknown as VSInstance).scrollToOffset(250, 0);
       await nextTick();
       await nextTick();
@@ -857,8 +802,8 @@ describe('VirtualScroll component', () => {
     it('should not emit load event when loading is true', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          items: mockItems.slice(0, 10),
           itemSize: 50,
+          items: mockItems.slice(0, 10),
           loadDistance: 100,
           loading: true,
         },
@@ -877,11 +822,11 @@ describe('VirtualScroll component', () => {
       expect(wrapper.emitted('load')).toBeUndefined();
     });
 
-    it('should render loading slot when loading is true', async () => {
+    it('should render loading slot correctly', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          items: mockItems.slice(0, 10),
           itemSize: 50,
+          items: mockItems.slice(0, 10),
           loading: true,
         },
         slots: {
@@ -890,23 +835,99 @@ describe('VirtualScroll component', () => {
       });
       await nextTick();
       expect(wrapper.find('.loading-indicator').exists()).toBe(true);
-      expect((wrapper.find('.virtual-scroll-loading').element as HTMLElement).style.display).toBe('block');
+
+      await wrapper.setProps({ direction: 'horizontal' });
+      await nextTick();
+      expect((wrapper.find('.virtual-scroll-loading').element as HTMLElement).style.display).toBe('inline-block');
     });
 
-    it('should render horizontal loading slot correctly', async () => {
+    it('should toggle loading slot visibility based on loading prop', async () => {
       const wrapper = mount(VirtualScroll, {
         props: {
-          items: mockItems.slice(0, 10),
-          itemSize: 50,
-          direction: 'horizontal',
-          loading: true,
+          items: mockItems.slice(0, 5),
+          loading: false,
         },
         slots: {
-          loading: '<div class="loading-indicator">Loading...</div>',
+          loading: '<div class="loader">Loading...</div>',
         },
       });
       await nextTick();
-      expect((wrapper.find('.virtual-scroll-loading').element as HTMLElement).style.display).toBe('inline-block');
+
+      expect(wrapper.find('.loader').exists()).toBe(false);
+      expect(wrapper.find('.virtual-scroll-loading').exists()).toBe(false);
+
+      await wrapper.setProps({ loading: true });
+      await nextTick();
+      expect(wrapper.find('.loader').exists()).toBe(true);
+      expect(wrapper.find('.virtual-scroll-loading').exists()).toBe(true);
+
+      await wrapper.setProps({ loading: false });
+      await nextTick();
+      expect(wrapper.find('.loader').exists()).toBe(false);
+      expect(wrapper.find('.virtual-scroll-loading').exists()).toBe(false);
+    });
+  });
+
+  describe('internal methods and exports', () => {
+    it('should handle setItemRef', async () => {
+      const wrapper = mount(VirtualScroll, { props: { items: mockItems.slice(0, 1) } });
+      await nextTick();
+      const vm = wrapper.vm as unknown as VSInstance;
+      const item = wrapper.find('.virtual-scroll-item').element as HTMLElement;
+      vm.setItemRef(item, 0);
+      vm.setItemRef(null, 0);
+    });
+
+    it('should handle setItemRef with NaN index', async () => {
+      mount(VirtualScroll, { props: { items: mockItems.slice(0, 1) } });
+      await nextTick();
+      const observer = (globalThis.ResizeObserver as unknown as { instances: ResizeObserverMock[]; }).instances[ 0 ];
+      const div = document.createElement('div');
+      observer?.trigger([ { target: div, contentRect: { width: 100, height: 100 } as unknown as DOMRectReadOnly } ]);
+    });
+
+    it('should expose methods', () => {
+      const wrapper = mount(VirtualScroll, { props: { items: mockItems, itemSize: 50 } });
+      expect(typeof (wrapper.vm as unknown as VSInstance).scrollToIndex).toBe('function');
+      expect(typeof (wrapper.vm as unknown as VSInstance).scrollToOffset).toBe('function');
+    });
+
+    it('should emit visibleRangeChange on scroll and hydration', async () => {
+      const wrapper = mount(VirtualScroll, {
+        props: { itemSize: 50, items: mockItems },
+      });
+      await nextTick();
+      await nextTick();
+      expect(wrapper.emitted('visibleRangeChange')).toBeDefined();
+
+      const container = wrapper.find('.virtual-scroll-container').element as HTMLElement;
+      Object.defineProperty(container, 'scrollTop', { value: 500, writable: true });
+      await container.dispatchEvent(new Event('scroll'));
+      await nextTick();
+      await nextTick();
+      expect(wrapper.emitted('visibleRangeChange')!.length).toBeGreaterThan(1);
+    });
+
+    it('should not emit scroll event before hydration in watch', async () => {
+      // initialScrollIndex triggers delayed hydration via nextTick in useVirtualScroll
+      const wrapper = mount(VirtualScroll, {
+        props: {
+          initialScrollIndex: 5,
+          itemSize: 50,
+          items: mockItems.slice(0, 10),
+        },
+      });
+
+      // Before first nextTick, isHydrated is false.
+      // Changing items will trigger scrollDetails update.
+      await wrapper.setProps({ items: mockItems.slice(0, 20) });
+
+      // Line 196 in VirtualScroll.vue should be hit here (return if !isHydrated)
+      expect(wrapper.emitted('scroll')).toBeUndefined();
+
+      await nextTick(); // hydration tick
+      await nextTick(); // one more for good measure
+      expect(wrapper.emitted('scroll')).toBeDefined();
     });
   });
 });