fontdue-js 3.5.1 → 3.7.0

package/dist/__tests__/customerSession.test.js

@@ -0,0 +1,456 @@
+/**
+ * The customer session: where the tokens live, and what the network layer does
+ * with them.
+ *
+ * Every part of this is browser-only by design — on the server the store
+ * reports "signed out", so one visitor's session can never be rendered into
+ * another's page. Rather than a DOM environment, the browser is stubbed with
+ * exactly what the code touches (`window.localStorage`), which lets the same
+ * file also test the server case by leaving it unstubbed. Both modules read
+ * `typeof window` once at load, so the stub goes up before the dynamic import.
+ */
+
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+beforeEach(() => {
+  vi.resetModules();
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+});
+
+/** A memory-backed `window.localStorage`, or one that refuses to store. */
+function browser() {
+  let {
+    throws = false
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const data = new Map();
+  const guard = () => {
+    if (throws) throw new Error('SecurityError');
+  };
+  const localStorage = {
+    getItem: key => {
+      guard();
+      return data.get(key) ?? null;
+    },
+    setItem: (key, value) => {
+      guard();
+      data.set(key, value);
+    },
+    removeItem: key => {
+      guard();
+      data.delete(key);
+    }
+  };
+
+  // `addEventListener` is not used by the session code, but the modules under
+  // test import corsError, which registers a `beforeunload` listener at load.
+  vi.stubGlobal('window', {
+    localStorage,
+    addEventListener: () => {},
+    removeEventListener: () => {}
+  });
+  return data;
+}
+const request = {
+  name: 'TestQuery',
+  text: 'query TestQuery { viewer { id } }'
+};
+const tokens = {
+  accessToken: 'access-1',
+  refreshToken: 'refresh-1'
+};
+async function tokenStore() {
+  const store = await import("../auth/tokenStore.js");
+  store.resetTokenStore();
+  return store;
+}
+function stored(data, url) {
+  const raw = data.get(`fontdue:auth:${url}`);
+  return raw == null ? null : JSON.parse(raw);
+}
+function ok(body) {
+  return {
+    ok: true,
+    status: 200,
+    json: async () => body
+  };
+}
+
+// The mocked endpoint answers whichever operation it is handed, so one mock
+// covers a query, the refresh mutation it provokes, and the retry.
+function endpoint(responses) {
+  const queries = [...responses.query];
+
+  // The `Authorization` header as each request actually went out. It has to be
+  // read here rather than from `mock.calls` afterwards: the fetch options are
+  // one object reused across the retry, so renewing the token rewrites the
+  // header the first call appears to have been made with.
+  const sent = [];
+  const mock = vi.fn(async (_url, init) => {
+    var _init$headers;
+    sent.push((_init$headers = init.headers) === null || _init$headers === void 0 ? void 0 : _init$headers.Authorization);
+    const body = JSON.parse(String(init.body));
+    if (body.query.includes('FontdueRefreshAccessToken')) {
+      return ok(responses.refresh ?? {
+        data: {
+          refreshAccessToken: null
+        }
+      });
+    }
+    return ok(queries.shift() ?? {
+      data: {}
+    });
+  });
+  return Object.assign(mock, {
+    sent
+  });
+}
+describe('token store', () => {
+  it('persists tokens under a key naming the Fontdue site', async () => {
+    const data = browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    expect(store.tokenStorageKey('https://acme.fontdue.com')).toBe('fontdue:auth:https://acme.fontdue.com');
+    expect(stored(data, 'https://acme.fontdue.com')).toEqual(tokens);
+  });
+  it('reads tokens a previous page load stored', async () => {
+    const data = browser();
+    data.set('fontdue:auth:https://acme.fontdue.com', JSON.stringify(tokens));
+    const store = await tokenStore();
+    expect(store.getTokens('https://acme.fontdue.com')).toEqual(tokens);
+  });
+  it('keeps two foundries apart, and ignores a trailing slash or casing', async () => {
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+
+    // Same site, spelled differently — one session, not three.
+    expect(store.getTokens('https://acme.fontdue.com/')).toEqual(tokens);
+    expect(store.getTokens('https://ACME.fontdue.com')).toEqual(tokens);
+
+    // A different foundry must never be handed this token.
+    expect(store.getTokens('https://other.fontdue.com')).toBeNull();
+  });
+  it('signs out everywhere, storage included', async () => {
+    const data = browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    store.clearTokens('https://acme.fontdue.com');
+    expect(store.getTokens('https://acme.fontdue.com')).toBeNull();
+    expect(stored(data, 'https://acme.fontdue.com')).toBeNull();
+  });
+  it('tells subscribers, which is how one island hears about another', async () => {
+    browser();
+    const store = await tokenStore();
+    const listener = vi.fn();
+    const unsubscribe = store.subscribeToTokens(listener);
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    expect(listener).toHaveBeenCalledTimes(1);
+    store.clearTokens('https://acme.fontdue.com');
+    expect(listener).toHaveBeenCalledTimes(2);
+    unsubscribe();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+  it('survives a browser that refuses to store anything', async () => {
+    // Private windows, blocked site data and partitioned third-party storage
+    // all throw here rather than returning null. The session should last the
+    // tab rather than taking the page down.
+    browser({
+      throws: true
+    });
+    const store = await tokenStore();
+    expect(() => store.setTokens(tokens, 'https://acme.fontdue.com')).not.toThrow();
+    // Held in memory, so this tab stays signed in even though nothing persisted.
+    expect(store.getTokens('https://acme.fontdue.com')).toEqual(tokens);
+  });
+  it('ignores a stored value that is not a token pair', async () => {
+    const data = browser();
+    data.set('fontdue:auth:https://acme.fontdue.com', 'not json');
+    let store = await tokenStore();
+    expect(store.getTokens('https://acme.fontdue.com')).toBeNull();
+    data.set('fontdue:auth:https://acme.fontdue.com', JSON.stringify({
+      accessToken: 'only-half'
+    }));
+    store = await tokenStore();
+    expect(store.getTokens('https://acme.fontdue.com')).toBeNull();
+  });
+  it('reports signed out on the server, whatever is stored', async () => {
+    // No `window` stub: this is the SSR pass. Returning a token here would put
+    // one visitor's session into another's prerendered page, and would have the
+    // first client render disagree with the server HTML.
+    const store = await tokenStore();
+    expect(store.getTokens('https://acme.fontdue.com')).toBeNull();
+    expect(() => store.setTokens(tokens, 'https://acme.fontdue.com')).not.toThrow();
+    expect(store.getTokens('https://acme.fontdue.com')).toBeNull();
+  });
+});
+describe('createNetworkFetch (customer session)', () => {
+  it('sends no Authorization header when signed out', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    await tokenStore();
+    const fetchMock = endpoint({
+      query: [{
+        data: {}
+      }]
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(fetchMock.sent[0]).toBeUndefined();
+  });
+  it('sends the access token once the customer is signed in', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const fetchMock = endpoint({
+      query: [{
+        data: {}
+      }]
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(fetchMock.sent[0]).toBe('Bearer access-1');
+  });
+  it('does not let a customer session look like an admin preview', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const fetchMock = endpoint({
+      query: [{
+        data: {}
+      }]
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+
+    // Preview is decided by the marker cookie, never by the presence of an
+    // Authorization header — otherwise signing in would reveal unpublished
+    // fonts to every customer.
+    const init = fetchMock.mock.calls[0][1];
+    expect(init.headers['fontdue-preview']).toBe('false');
+  });
+  it('leaves a forwarded preview token alone', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const fetchMock = endpoint({
+      query: [{
+        data: {}
+      }]
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch({
+      headers: {
+        Authorization: 'Bearer admin-token'
+      }
+    })(request, {});
+    expect(fetchMock.sent[0]).toBe('Bearer admin-token');
+  });
+  it('renews an expired token and repeats the request', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const fetchMock = endpoint({
+      query: [{
+        data: {
+          viewer: null
+        },
+        errors: [{
+          extensions: {
+            code: 'token:expired'
+          }
+        }]
+      }, {
+        data: {
+          viewer: {
+            id: '1'
+          }
+        }
+      }],
+      refresh: {
+        data: {
+          refreshAccessToken: {
+            accessToken: 'access-2',
+            refreshToken: 'refresh-2'
+          }
+        }
+      }
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    const result = await createNetworkFetch()(request, {});
+
+    // Query, refresh, query again.
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+    expect(fetchMock.sent[0]).toBe('Bearer access-1');
+    expect(fetchMock.sent[2]).toBe('Bearer access-2');
+
+    // The caller sees the successful retry, not the expiry.
+    expect(result).toEqual({
+      data: {
+        viewer: {
+          id: '1'
+        }
+      }
+    });
+    expect(store.getTokens('https://acme.fontdue.com')).toEqual({
+      accessToken: 'access-2',
+      refreshToken: 'refresh-2'
+    });
+  });
+  it('renews at most once, so a still-expired answer cannot loop', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const expired = {
+      data: null,
+      errors: [{
+        extensions: {
+          code: 'token:expired'
+        }
+      }]
+    };
+    const fetchMock = endpoint({
+      query: [expired, expired],
+      refresh: {
+        data: {
+          refreshAccessToken: {
+            accessToken: 'access-2',
+            refreshToken: 'refresh-2'
+          }
+        }
+      }
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(fetchMock).toHaveBeenCalledTimes(3);
+  });
+  it('signs the customer out when the credential will never work again', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const fetchMock = endpoint({
+      query: [{
+        data: null,
+        errors: [{
+          extensions: {
+            code: 'token:invalid'
+          }
+        }]
+      }]
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    expect(store.getTokens('https://acme.fontdue.com')).toBeNull();
+  });
+  it('signs the customer out when the refresh token has expired too', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const fetchMock = endpoint({
+      query: [{
+        data: null,
+        errors: [{
+          extensions: {
+            code: 'token:expired'
+          }
+        }]
+      }],
+      refresh: {
+        data: {
+          refreshAccessToken: null
+        },
+        errors: [{
+          message: 'Invalid'
+        }]
+      }
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(store.getTokens('https://acme.fontdue.com')).toBeNull();
+  });
+  it('keeps the session when the renewal request itself fails', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    const store = await tokenStore();
+    store.setTokens(tokens, 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async (_url, init) => {
+      const body = JSON.parse(String(init.body));
+      if (body.query.includes('FontdueRefreshAccessToken')) {
+        throw new TypeError('Failed to fetch');
+      }
+      return ok({
+        data: null,
+        errors: [{
+          extensions: {
+            code: 'token:expired'
+          }
+        }]
+      });
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+
+    // A flaky network says nothing about the credential — the next request
+    // tries again rather than the visitor being signed out by a dropped packet.
+    expect(store.getTokens('https://acme.fontdue.com')).toEqual(tokens);
+  });
+  it('ignores an auth error when nobody is signed in', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    browser();
+    await tokenStore();
+    const fetchMock = endpoint({
+      query: [{
+        data: null,
+        errors: [{
+          extensions: {
+            code: 'token:missing'
+          }
+        }]
+      }]
+    });
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+
+    // No renewal, no retry: the request simply asked for something that needs
+    // a customer, and there isn't one.
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/__tests__/infiniteScroll.test.js

@@ -0,0 +1,180 @@
+// @vitest-environment happy-dom
+import React, { act, useRef } from 'react';
+import { createRoot } from 'react-dom/client';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import useInfiniteScroll from '../components/useInfiniteScroll.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+class FakeIntersectionObserver {
+  static instances = [];
+  observed = [];
+  disconnected = false;
+  constructor(callback, options) {
+    this.callback = callback;
+    this.options = options;
+    FakeIntersectionObserver.instances.push(this);
+  }
+  observe(element) {
+    this.observed.push(element);
+  }
+  unobserve() {}
+  disconnect() {
+    this.disconnected = true;
+  }
+
+  // Report every observed element as having come into view.
+  enter() {
+    this.callback(this.observed.map(target => ({
+      target,
+      isIntersecting: true
+    })), this);
+  }
+}
+const observers = () => FakeIntersectionObserver.instances;
+const live = () => observers().filter(observer => !observer.disconnected);
+
+// The shape the store modal index renders: the sentinel stays mounted while a
+// page is in flight (`enabled` false) and only goes away once the list is
+// exhausted, and the scroller is an ancestor whose ref is still null while the
+// sentinel renders.
+function Harness(_ref) {
+  let {
+    enabled,
+    hasMore = true,
+    onLoadMore
+  } = _ref;
+  const scrollContainer = useRef(null);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: scrollContainer,
+    "data-testid": "scroller"
+  }, /*#__PURE__*/React.createElement(Sentinel, {
+    enabled: enabled,
+    hasMore: hasMore,
+    onLoadMore: onLoadMore,
+    rootRef: scrollContainer
+  }));
+}
+function Sentinel(_ref2) {
+  let {
+    enabled,
+    hasMore,
+    onLoadMore,
+    rootRef
+  } = _ref2;
+  const sentinelRef = useInfiniteScroll({
+    enabled,
+    onLoadMore,
+    rootRef,
+    rootMargin: '0px 0px 600px 0px'
+  });
+  return hasMore ? /*#__PURE__*/React.createElement("div", {
+    ref: sentinelRef,
+    "data-testid": "sentinel"
+  }) : null;
+}
+let container;
+let root;
+const render = element => {
+  act(() => {
+    root.render(element);
+  });
+};
+beforeEach(() => {
+  FakeIntersectionObserver.instances = [];
+  vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver);
+  container = document.createElement('div');
+  document.body.appendChild(container);
+  root = createRoot(container);
+});
+afterEach(() => {
+  act(() => root.unmount());
+  container.remove();
+  vi.unstubAllGlobals();
+});
+describe('useInfiniteScroll', () => {
+  it('loads more when the sentinel comes into view', () => {
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(1);
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+  it('watches the scrolling ancestor, whose ref is only attached after render', () => {
+    var _options, _options2;
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: vi.fn()
+    }));
+    const [observer] = live();
+    expect((_options = observer.options) === null || _options === void 0 ? void 0 : _options.root).toBe(container.querySelector('[data-testid="scroller"]'));
+    expect((_options2 = observer.options) === null || _options2 === void 0 ? void 0 : _options2.rootMargin).toBe('0px 0px 600px 0px');
+    expect(observer.observed).toEqual([container.querySelector('[data-testid="sentinel"]')]);
+  });
+  it('stops watching while a page is in flight, and picks it up again after', () => {
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+
+    // The sentinel is still on screen, but `loadNext` is running: nothing
+    // should be watching it, so the load isn't asked for again on every frame.
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: false,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(0);
+
+    // Page arrived, more to come: back to watching, and still in view.
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+    expect(live()).toHaveLength(1);
+    act(() => live()[0].enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(2);
+  });
+  it('never observes when there is nothing left to load', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: false,
+      hasMore: false,
+      onLoadMore: vi.fn()
+    }));
+    expect(observers()).toHaveLength(0);
+  });
+  it('disconnects when the sentinel is removed', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: vi.fn()
+    }));
+    const [observer] = observers();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      hasMore: false,
+      onLoadMore: vi.fn()
+    }));
+    expect(observer.disconnected).toBe(true);
+  });
+  it('keeps watching when only the callback identity changes', () => {
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: () => {}
+    }));
+    const [observer] = observers();
+    const onLoadMore = vi.fn();
+    render( /*#__PURE__*/React.createElement(Harness, {
+      enabled: true,
+      onLoadMore: onLoadMore
+    }));
+
+    // Same observer, and it calls the callback the latest render passed.
+    expect(observers()).toHaveLength(1);
+    expect(observer.disconnected).toBe(false);
+    act(() => observer.enter());
+    expect(onLoadMore).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/__tests__/licenseExclusions.test.js

@@ -10,8 +10,9 @@ function makeState() {
     cartOpen: false,
     precartOpen: false,
     selectedSkuIds: {},
+    requestedSkuIds: [],
     licenseOptions: [],
-    collectionStyleSkus: {},
+    skuStyleIds: {},
     collectionSkus: {},
     skuPrices: {},
     fetchedCollectionIds: [],