test(useScroll): add basic browser test

vueuse · antfu · Jun 19, 2025 · Dec 26, 2024 · Jan 22, 2025 · Feb 1, 2025
commit 5de18ac28e064044cdf0dfdd715df64e6ff0ff27
diff --git a/packages/core/useScroll/index.browser.test.ts b/packages/core/useScroll/index.browser.test.ts
@@ -0,0 +1,163 @@
+import { page } from '@vitest/browser/context'
+import { describe, expect, it } from 'vitest'
+import { computed, defineComponent, shallowRef, useTemplateRef } from 'vue'
+import { useScroll } from '.'
+
+const Component = defineComponent({
+  template: `
+    <div style='padding: 12px; display: flex; gap: 8px'>
+      <button data-testId="left" @click="goToLeft">goToLeft</button>
+      <button data-testId="right" @click="goToRight">goToRight</button>
+      <button data-testId="top" @click="goToTop">goToTop</button>
+      <button data-testId="bottom" @click="goToBottom">goToBottom</button>
+      <button data-testId="toggleW
8000
idth" @click="toggleWidth">toggleWidth</button>
+      <button data-testId="toggleHeight" @click="toggleHeight">toggleHeight</button>
+    </div>
+    <pre data-testId="arrivedState">{{ arrivedState }}</pre>
+    <div
+      ref="el"
+      style="width: 300px; height: 300px; margin: auto; overflow: auto;"
+    >
+      <div :style></div>
+    </div>
+  `,
+  props: ['observe'],
+  setup(props) {
+    const el = useTemplateRef<HTMLElement>('el')
+    const { x, y, arrivedState } = useScroll(el, { observe: props.observe ?? false })
+    function triggerScrollManually() {
+      el.value?.dispatchEvent(new Event('scroll'))
+    }
+    function goToLeft() {
+      x.value = 0
+      triggerScrollManually()
+    }
+    function goToRight() {
+      x.value = el.value?.scrollWidth || 300
+      triggerScrollManually()
+    }
+    function goToTop() {
+      y.value = 0
+      triggerScrollManually()
+    }
+    function goToBottom() {
+      y.value = el.value?.scrollHeight || 300
+      triggerScrollManually()
+    }
+    const height = shallowRef(500)
+    function toggleHeight() {
+      if (height.value < 500)
+        height.value = 500
+      else
+        height.value = 300
+    }
+    const width = shallowRef(500)
+    function toggleWidth() {
+      if (width.value < 500)
+        width.value = 500
+      else
+        width.value = 300
+    }
+    const style = computed(() => `width: ${width.value}px; height: ${height.value}px; position: relative;`)
+    return {
+      el,
+      style,
+      arrivedState,
+      goToLeft,
+      goToRight,
+      goToTop,
+      goToBottom,
+      toggleHeight,
+      toggleWidth,
+    }
+  },
+})
+
+describe('useScroll', () => {
+  it('should correctly detect leftArrived and rightArrived states when reaching the X-axis boundaries', async () => {
+    const screen = page.render(Component, { props: { observe: true } })
+    expect(screen).toBeDefined()
+    const arrivedState = screen.getByTestId('arrivedState')
+    await expect.element(arrivedState).toBeVisible()
+    const rightButton = screen.getByTestId('right')
+    await expect.element(rightButton).toBeVisible()
+    await rightButton.click()
+    expect(arrivedState.query()?.textContent).toMatchInlineSnapshot(`
+      "{
+        "left": false,
+        "right": true,
+        "top": true,
+        "bottom": false
+      }"
+    `)
+    const leftButton = screen.getByTestId('left')
+    await expect.element(leftButton).toBeVisible()
+    await leftButton.click()
+    expect(arrivedState.query()?.textContent).toMatchInlineSnapshot(`
+      "{
+        "left": true,
+        "right": false,
+        "top": true,
+        "bottom": false
+      }"
+    `)
+  })
+  it('should correctly detect topArrived and bottomArrived states when reaching the Y-axis boundaries', async () => {
+    const screen = page.render(Component, { props: { observe: true } })
+    expect(screen).toBeDefined()
+    const arrivedState = screen.getByTestId('arrivedState')
+    await expect.element(arrivedState).toBeVisible()
+    const bottomButton = screen.getByTestId('bottom')
+    await expect.element(bottomButton).toBeVisible()
+    await bottomButton.click()
+    expect(arrivedState.query()?.textContent).toMatchInlineSnapshot(`
+      "{
+        "left": true,
+        "right": false,
+        "top": false,
+        "bottom": true
+      }"
+    `)
+    const topButton = screen.getByTestId('top')
+    await expect.element(topButton).toBeVisible()
+    await topButton.click()
+    expect(arrivedState.query()?.textContent).toMatchInlineSnapshot(`
+      "{
+        "left": true,
+        "right": false,
+        "top": true,
+        "bottom": false
+      }"
+    `)
+  })
+  it('should observe DOM mutations when observe is enabled', async () => {
+    const screen = page.render(Component, { props: { observe: true } })
+    expect(screen).toBeDefined()
+    const arrivedState = screen.getByTestId('arrivedState')
+    await expect.element(arrivedState).toBeVisible()
+    const toggleHeightButton = screen.getByTestId('toggleHeight')
+    const toggleWidthButton = screen.getByTestId('toggleWidth')
+    await expect.element(toggleHeightButton).toBeVisible()
+    await expect.element(toggleWidthButton).toBeVisible()
+    await toggleHeightButton.click()
+    await toggleWidthButton.click()
+    expect(arrivedState.query()?.textContent).toMatchInlineSnapshot(`
+      "{
+        "left": true,
+        "right": true,
+        "top": true,
+        "bottom": true
+      }"
+    `)
+    await toggleHeightButton.click()
+    await toggleWidthButton.click()
+    expect(arrivedState.query()?.textContent).toMatchInlineSnapshot(`
+      "{
+        "left": true,
+        "right": false,
+        "top": true,
+        "bottom": false
+      }"
+    `)
+  })
+})
diff --git a/packages/core/useScroll/index.ts b/packages/core/useScroll/index.ts
@@ -4,8 +4,8 @@ import { noop, tryOnMounted, useDebounceFn, useThrottleFn } from '@vueuse/shared
 import { computed, reactive, ref, toValue } from 'vue'
 import { defaultWindow } from '../_configurable'
 import { unrefElement } from '../unrefElement'
-import { useMutationObserver } from '../useMutationObserver'
 import { useEventListener } from '../useEventListener'
+import { useMutationObserver } from '../useMutationObserver'
 
 export interface UseScrollOptions extends ConfigurableWindow {
   /**
@@ -154,8 +154,8 @@ export function useScroll(
     })
     const scrollContainer
       = (_element as Window)?.document?.documentElement
-      || (_element as Document)?.documentElement
-      || (_element as Element)
+        || (_element as Document)?.documentElement
+        || (_element as Element)
     if (x != null)
       internalX.value = scrollContainer.scrollLeft
     if (y != null)
@@ -292,17 +292,17 @@ export function useScroll(
     useMutationObserver(
       element,
       () => {
-        const _element = toValue(element);
+        const _element = toValue(element)
         if (!_element)
-          return;
-        setArrivedState(_element);
+          return
+        setArrivedState(_element)
       },
       {
         attributes: true,
         childList: true,
         subtree: true,
-      }
-    );
+      },
+    )
   }
 
   useEventListener(