@next-box/link-extra 0.1.1 → 0.1.3

package/src/helpers.ts

@@ -1,5 +1,15 @@
 import { nanoid } from 'nanoid';
 
+const normalizeSearchParams = (search: string, toOmitCacheBuster = false): string => {
+  const entries = new URLSearchParams(search)
+    .entries()
+    .filter(([key]) => !toOmitCacheBuster || key !== 'y')
+    .toArray()
+    .toSorted(([keyA, valueA], [keyB, valueB]) => keyA.localeCompare(keyB) || valueA.localeCompare(valueB));
+
+  return new URLSearchParams(entries).toString();
+};
+
 export const shouldUrlAndLocationMatch = (url: string): boolean => {
   // It is possible for this to be undefined
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -13,20 +23,10 @@ export const shouldUrlAndLocationMatch = (url: string): boolean => {
     return false;
   }
 
-  const { pathname, search } = parsedUrl;
-  const urlSearchParams = new URLSearchParams(search);
-
-  if (urlSearchParams.has('y')) {
-    urlSearchParams.delete('y');
-  }
-
-  const locationSearchParams = new URLSearchParams(location.search);
-
-  if (locationSearchParams.has('y')) {
-    locationSearchParams.delete('y');
-  }
-
-  return `${pathname}?${urlSearchParams.toString()}` === `${location.pathname}?${locationSearchParams.toString()}`;
+  return (
+    parsedUrl.pathname === location.pathname &&
+    normalizeSearchParams(parsedUrl.search, true) === normalizeSearchParams(location.search, true)
+  );
 };
 
 export const addCacheBusterQueryParam = (url: string): string => {
@@ -45,14 +45,13 @@ export const addCacheBusterQueryParam = (url: string): string => {
   const locationSearchParams = new URLSearchParams(location.search);
   const locationCacheBusterSearchParam = locationSearchParams.get('y');
 
-  if (locationCacheBusterSearchParam) {
-    locationSearchParams.delete('y');
-  }
-
   const { pathname, search } = parsedUrl;
   const searchParams = new URLSearchParams(search);
 
-  if (`${pathname}?${search}` === `${location.pathname}?${locationSearchParams.toString()}`) {
+  if (
+    pathname === location.pathname &&
+    normalizeSearchParams(search, true) === normalizeSearchParams(location.search, true)
+  ) {
     searchParams.set('y', locationCacheBusterSearchParam ?? nanoid());
   } else {
     searchParams.set('y', nanoid());

package/src/main.test.tsx

@@ -0,0 +1,160 @@
+/** @jest-environment @repodog/jest-config/FailOnJsdomConsoleEnvironment.mjs */
+
+import { afterEach, describe, expect, it, jest } from '@jest/globals';
+import type NextLink from 'next/link.js';
+import { type ComponentProps, type ComponentType, type ReactElement, act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Link } from './Link.tsx';
+import { LinkProvider } from './LinkProvider.tsx';
+import { shouldUrlAndLocationMatch } from './helpers.ts';
+import { type OwnLinkProps } from './types.ts';
+
+// @ts-expect-error Okay for test file
+const NextLinkMock: (typeof NextLink)['default'] = ({ children, href }) => {
+  const nextHref = typeof href === 'string' ? href : (href.pathname ?? '');
+  return <div data-next-href={nextHref}>{children}</div>;
+};
+
+const OwnLink: ComponentType<OwnLinkProps> = ({ children, ...props }) => <a {...props}>{children}</a>;
+
+const Loading = () => <span data-testid="loading">Loading</span>;
+
+Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', { configurable: true, value: true });
+
+const mount = (element: ReactElement) => {
+  const container = document.createElement('div');
+  const root = createRoot(container);
+
+  act(() => {
+    root.render(element);
+  });
+
+  return {
+    container,
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+    },
+  };
+};
+
+const createLink = (props: ComponentProps<typeof Link>) => (
+  <LinkProvider
+    LoadingComponent={Loading}
+    NextLink={NextLinkMock}
+    OwnLink={OwnLink}
+    loadingTimeout={100}
+    pathname="/current"
+  >
+    <Link {...props} />
+  </LinkProvider>
+);
+
+afterEach(() => {
+  jest.useRealTimers();
+  history.replaceState(undefined, '', '/');
+});
+
+describe('Link integration', () => {
+  it('When a link is clicked and navigation exceeds the timeout, then it displays the loading component', () => {
+    // Arrange
+    history.replaceState(undefined, '', '/current');
+    Object.defineProperty(globalThis, 'scroll', { configurable: true, value: jest.fn() });
+    jest.useFakeTimers();
+
+    const { container, unmount } = mount(createLink({ children: 'Next page', href: '/next' }));
+    const anchor = container.querySelector('a');
+
+    // Act
+    act(() => {
+      anchor?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+      jest.advanceTimersByTime(100);
+    });
+
+    // Assert
+    expect(container.querySelector('[data-testid="loading"]')?.textContent).toBe('Loading');
+    expect(container.querySelector<HTMLElement>('[data-next-href]')?.dataset.nextHref).toMatch(/^\/next\?y=/);
+
+    unmount();
+  });
+
+  it('When a click is prevented, then it does not display the loading component', () => {
+    // Arrange
+    history.replaceState(undefined, '', '/current');
+    Object.defineProperty(globalThis, 'scroll', { configurable: true, value: jest.fn() });
+    jest.useFakeTimers();
+
+    const { container, unmount } = mount(
+      createLink({
+        children: 'Prevented navigation',
+        href: '/next',
+        onClick: event => {
+          event.preventDefault();
+        },
+      }),
+    );
+
+    const anchor = container.querySelector('a');
+
+    // Act
+    act(() => {
+      anchor?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+      jest.advanceTimersByTime(100);
+    });
+
+    // Assert
+    expect(container.querySelector('[data-testid="loading"]')).toBeNull();
+
+    unmount();
+  });
+
+  it('When router cache control is disabled, then it passes the original href to NextLink', () => {
+    // Arrange
+    history.replaceState(undefined, '', '/current');
+    Object.defineProperty(globalThis, 'scroll', { configurable: true, value: jest.fn() });
+
+    const { container, unmount } = mount(
+      createLink({ children: 'Current page', disableRouterCache: false, href: '/current' }),
+    );
+
+    // Act
+    const href = container.querySelector<HTMLElement>('[data-next-href]')?.dataset.nextHref;
+
+    // Assert
+    expect(href).toBe('/current');
+
+    unmount();
+  });
+
+  it('When a pending navigation timer reaches an unmounted provider, then it has been cleared', () => {
+    // Arrange
+    history.replaceState(undefined, '', '/current');
+    Object.defineProperty(globalThis, 'scroll', { configurable: true, value: jest.fn() });
+    jest.useFakeTimers();
+
+    const { container, unmount } = mount(createLink({ children: 'Next page', href: '/next' }));
+    const anchor = container.querySelector('a');
+
+    act(() => {
+      anchor?.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+    });
+
+    // Act
+    unmount();
+
+    // Assert
+    expect(jest.getTimerCount()).toBe(0);
+  });
+
+  it('When query parameters are reordered, then the URL matches the current location', () => {
+    // Arrange
+    history.replaceState(undefined, '', '/current?alpha=one&bravo=two&y=cache');
+
+    // Act
+    const isMatch = shouldUrlAndLocationMatch('/current?bravo=two&alpha=one&y=other');
+
+    // Assert
+    expect(isMatch).toBe(true);
+  });
+});

package/src/types.ts

@@ -1,18 +1,12 @@
-import { type LinkProps } from 'next/link.js';
-import { type AnchorHTMLAttributes, type ComponentType, type ReactNode } from 'react';
+import type NextLink from 'next/link.js';
+import { type AnchorHTMLAttributes, type ComponentType } from 'react';
 
 // This needs to be as generic as possible
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type OwnLinkProps = Record<string, any> & AnchorHTMLAttributes<HTMLAnchorElement>;
 
-export type NextLinkComponent = ComponentType<
-  LinkProps & {
-    children: ReactNode;
-  }
->;
-
 export type LinkContextData = {
-  NextLink: NextLinkComponent;
+  NextLink: (typeof NextLink)['default'];
   OwnLink: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
   onLinkClicked: () => void;
 };