Add unit tests 🍢

Author: hirasso

src/helpers.ts

@@ -32,16 +32,6 @@ export const nextTick = (): Promise<void> => {
   });
 };
 
-/** Check if an element has overflow */
-export const hasOverflow = ({
-  clientWidth,
-  clientHeight,
-  scrollWidth,
-  scrollHeight,
-}: HTMLElement) => {
-  return scrollHeight > clientHeight || scrollWidth > clientWidth;
-};
-
 /**
  * Minimal debounce function.
  * @see https://www.joshwcomeau.com/snippets/javascript/debounce/
@@ -91,7 +81,7 @@ export function isScrollState(value: unknown): value is ScrollState {
  * Get stored restore-scroll state, filter out invalid records
  */
 export function getScrollState(): ScrollState {
-  const state = window.history.state?.scrollState;
+  const state = window.history.state?.restoreScroll;
   return isScrollState(state) ? state : {};
 }
 
@@ -184,14 +174,3 @@ export function readStorageSelector(
 
   return selector;
 }
-
-/**
- * Query a scroll container by selector
- */
-export function getScrollContainer(selector: string): Element | null {
-  try {
-    return document.querySelector(selector);
-  } catch (e) {
-    return null;
-  }
-}

src/index.ts

@@ -1,4 +1,5 @@
 import restoreScroll from "./restoreScroll.js";
 import type { Options } from "./defs.js";
+
 export { restoreScroll };
 export type { Options };

src/restoreScroll.ts

@@ -18,7 +18,7 @@ let hookedIntoBeforeUnlad = false;
 export default function restoreScroll(
   target: Target | null,
   options: Partial<Options> = {}
-): void {
+) {
   const settings = { ...defaults, ...options };
   const logger = settings.debug ? createLogger() : undefined;
 
@@ -63,4 +63,5 @@ export default function restoreScroll(
     hookedIntoBeforeUnlad = true;
     window.addEventListener("beforeunload", storeAll);
   }
+  return {element};
 }

src/store.ts

@@ -6,19 +6,19 @@ import { getScrollState, readStorageSelector } from "./helpers.js";
  */
 export function store(element: ScrollContainer, logger?: Logger): void {
   const state = window.history.state || {};
-  const scrollState = getScrollState();
+  const restoreScroll = getScrollState();
 
   const selector = readStorageSelector(element, logger);
   if (!selector) {
     return;
   }
 
   const { scrollTop: top, scrollLeft: left } = element;
-  scrollState[selector] = { top, left };
+  restoreScroll[selector] = { top, left };
 
   const newState = {
     ...state,
-    scrollState,
+    restoreScroll,
   };
 
   window.history.replaceState(newState, "");
@@ -30,23 +30,23 @@ export function store(element: ScrollContainer, logger?: Logger): void {
  * Store all positions before unload
  */
 export function storeAll(): void {
-  const state: ScrollState = {};
+  const restoreScroll: ScrollState = {};
 
   document
     .querySelectorAll<ScrollContainer>("[data-restore-scroll]")
     .forEach((el) => {
       const selector = readStorageSelector(el);
       if (!selector) return;
 
-      state[selector] = {
+      restoreScroll[selector] = {
         top: el.scrollTop,
         left: el.scrollLeft,
       };
     });
 
   const newState = {
     ...(window.history.state || {}),
-    state,
+    restoreScroll,
   };
 
   window.history.replaceState(newState, "");

tests/unit/tests/support.ts tests/unit/support.tstests/unit/tests/support.ts renamed to tests/unit/support.ts

@@ -1,7 +1,7 @@
 import { vi, describe, expect, it, beforeEach, afterEach } from "vitest";
 
 import { restoreScroll } from "../../../src/index.js";
-import { createElement } from "./support.js";
+import { createElement } from "../support.js";
 
 describe("Logger", () => {
   let warnSpy: ReturnType<typeof vi.spyOn>;

tests/unit/tests/logger.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from "vitest";
+
+import { getScrollState } from "../../../src/helpers.ts";
+
+describe("getScrollState", () => {
+  it("should return the scroll state from the history", () => {
+    const expected = { ":root": { top: 100, left: 200 } };
+    window.history.replaceState(
+      { restoreScroll: expected },
+      "",
+      window.location.href
+    );
+    expect(getScrollState()).toEqual(expected);
+  });
+
+  it("should return an empty object on failure", () => {
+    window.history.replaceState(
+      { restoreScroll: { anything: { top: 100 } } },
+      "",
+      window.location.href
+    );
+    expect(getScrollState()).toEqual({});
+  });
+});

tests/unit/tests/scrollState.test.ts

@@ -1,7 +1,9 @@
 import { afterEach, describe, expect, it } from "vitest";
 
 import { createStorageSelector } from "../../../src/helpers.ts";
-import { createElement } from "./support.ts";
+import { createElement } from "../support.ts";
+import restoreScroll from "../../../src/restoreScroll.ts";
+import { ScrollContainer } from "../../../src/defs.ts";
 
 describe("createStorageSelector", () => {
   afterEach(() => {
@@ -23,6 +25,11 @@ describe("createStorageSelector", () => {
     );
   });
 
+  it("should use ':root' if not inside the body", () => {
+    expect(createStorageSelector(document.documentElement)).toEqual(":root");
+    expect(createStorageSelector(document.body)).toEqual(":root");
+  });
+
   it("should use the [id] attribute if available", () => {
     document.body.append(
       createElement(/*html*/ `
@@ -38,4 +45,21 @@ describe("createStorageSelector", () => {
       "#scroller"
     );
   });
+
+  it("should inject the storage selector into the element", () => {
+    document.body.append(
+      createElement(/*html*/ `
+          <main>
+            <div></div>
+            <div></div>
+            <div class="scroller"></div>
+          </main>
+        `)
+    );
+    restoreScroll(document.querySelector(".scroller"));
+    expect(
+      document.querySelector<ScrollContainer>(".scroller")?.__restore_scroll
+        ?.selector
+    ).toEqual("html > body:nth-child(2) > main > div.scroller:nth-child(3)");
+  });
 });

…unit/tests/createStorageSelector.test.ts tests/unit/tests/storageSelector.test.tstests/unit/tests/createStorageSelector.test.ts renamed to tests/unit/tests/storageSelector.test.ts tests/unit/tests/createStorageSelector.test.ts renamed to tests/unit/tests/storageSelector.test.ts

@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  getScrollState,
+  isScrollPosition,
+  isScrollState,
+} from "../../../src/helpers.ts";
+
+describe("isScrollPosition", () => {
+  it("should accept a valid scroll position", () => {
+    expect(isScrollPosition({ top: 0, left: 200 })).toEqual(true);
+  });
+
+  it("should allow extra properties", () => {
+    expect(isScrollPosition({ top: 0, left: 200, extra: "foo" })).toEqual(true);
+  });
+
+  it("should detect missing properties", () => {
+    expect(isScrollPosition({ top: 0 })).toEqual(false);
+  });
+});
+
+describe("isScrollState", () => {
+  it("should accept a valid scroll state", () => {
+    expect(
+      isScrollState({
+        ":root": { top: 0, left: 200 },
+      })
+    ).toEqual(true);
+  });
+
+  it("should reject an invalid scroll state", () => {
+    expect(isScrollState([{ top: 0, left: 200 }])).toEqual(false);
+  });
+});