Add TS to useWindowScroll

src/composables/use-window-scroll.js → src/composables/use-window-scroll.ts

@@ -10,39 +10,45 @@ import { useEventListener } from '~/composables/use-event-listener'
  *
  * This global ref is SSR safe because it will only
  * change internal value based on client side interaction.
- *
- * @type {import('@nuxtjs/composition-api').Ref<boolean>}
  */
 const isScrolled = ref(false)
 
-/**
- *
- * @param {object} options
- * @param {Window} [options.window]
- * @param {number} [options.throttleMs] - time to throttle the scroll handler.
- * Set to 0 to remove throttling
- */
+interface UseWindowScrollOptions {
+  /**
+   * Window from which to read and track scroll position
+   */
+  window?: typeof defaultWindow | undefined
+  /**
+   * Time to throttle the scroll handler.
+   * Set to 0 to remove throttling.
+   */
+  throttleMs?: number
+}
+
 export function useWindowScroll({
   window = defaultWindow,
   throttleMs = 200,
-} = {}) {
+}: UseWindowScrollOptions = {}) {
   if (!window) {
-    return {
+    // In SSR, no need to track anything.
+    return Object.freeze({
       x: ref(0),
       y: ref(0),
       isScrolled,
-    }
+    })
   }
 
-  const x = ref(window.pageXOffset)
-  const y = ref(window.pageYOffset)
+  const x = ref(0)
+  const y = ref(0)
 
   const scrollHandler = () => {
-    x.value = window.pageXOffset
-    y.value = window.pageYOffset
+    x.value = window.scrollX
+    y.value = window.scrollY
     isScrolled.value = y.value > 0
   }
 
+  scrollHandler()
+
   const handler = throttleMs
     ? throttle(throttleMs, scrollHandler)
     : scrollHandler
@@ -52,5 +58,5 @@ export function useWindowScroll({
     passive: true,
   })
 
-  return { x, y, isScrolled }
+  return Object.freeze({ x, y, isScrolled })
 }

test/unit/.eslintrc.js

@@ -3,5 +3,6 @@ module.exports = {
   env: { jest: true },
   rules: {
     'import/no-named-as-default-member': ['off'],
+    '@intlify/vue-i18n/no-raw-text': ['off'],
   },
 }

test/unit/specs/composables/use-window-scroll.spec.ts

@@ -0,0 +1,65 @@
+import Vue from 'vue'
+import { ref } from '@nuxtjs/composition-api'
+import { render } from '@testing-library/vue'
+
+import { useWindowScroll } from '~/composables/use-window-scroll'
+
+const getMockWindow = <T>(props: T) =>
+  ({
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    ...props,
+  } as unknown as typeof window)
+
+const UseWindowScrollTestContainer = Vue.component(
+  'UseWindowScrollTestContainer',
+  {
+    props: ['initX', 'initY', 'throttleMs'],
+    setup(props) {
+      return useWindowScroll({
+        window: getMockWindow({
+          scrollX: props.initX,
+          scrollY: props.initY,
+        }),
+        throttleMs: props.throttleMs as number | undefined,
+      })
+    },
+    template: '<div>x={{x}} y={{y}} isScrolled={{isScrolled}}</div>',
+  }
+)
+
+describe('useWindowScroll', () => {
+  it('should return [0, 0] and false when no window', () => {
+    expect(useWindowScroll({})).toMatchObject({
+      x: ref(0),
+      y: ref(0),
+      isScrolled: ref(false),
+    })
+  })
+
+  it("should return the window's scroll position and not scrolled when y == 0", () => {
+    const { container } = render(UseWindowScrollTestContainer, {
+      props: {
+        initX: 10,
+        initY: 0,
+      },
+    })
+
+    expect(container.firstChild?.textContent).toEqual(
+      'x=10 y=0 isScrolled=false'
+    )
+  })
+
+  it("should return the window's scroll position and scrolled when y != 0", () => {
+    const { container } = render(UseWindowScrollTestContainer, {
+      props: {
+        initX: 31,
+        initY: 1,
+      },
+    })
+
+    expect(container.firstChild?.textContent).toEqual(
+      'x=31 y=1 isScrolled=true'
+    )
+  })
+})