fontdue-js 3.5.1 → 3.7.0

package/dist/__tests__/storeModalRoutes.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { storeModalRouteAction, storeModalUrlActions } from "../storeModalRoutes.js";
+const config = indexExcludeTags => ({
+  storeModal: {
+    indexExcludeTags
+  }
+});
+const OPEN = {
+  type: 'OPEN_CART'
+};
+const PRODUCT_ID = 'Rm9udENvbGxlY3Rpb246NzUzNzU2MDgwNjI1OTk4ODQ5';
+describe('storeModalRouteAction', () => {
+  it('carries the configured excludeTags onto the index route', () => {
+    expect(storeModalRouteAction('index', config(['unlisted']))).toEqual({
+      type: 'STORE_MODAL_REPLACE',
+      route: 'index',
+      variables: {
+        excludeTags: ['unlisted']
+      }
+    });
+  });
+  it('routes to the cart, with or without a trailing slash', () => {
+    const cart = {
+      type: 'STORE_MODAL_REPLACE',
+      route: 'cart'
+    };
+    expect(storeModalRouteAction('cart', config())).toEqual(cart);
+    expect(storeModalRouteAction('cart/', config())).toEqual(cart);
+  });
+  it('pulls the collection id out of a product route', () => {
+    expect(storeModalRouteAction(`product/${PRODUCT_ID}`, config())).toEqual({
+      type: 'STORE_MODAL_REPLACE',
+      route: 'product',
+      variables: {
+        productId: PRODUCT_ID
+      }
+    });
+  });
+
+  // A slug and a global id overlap in their character sets, so the two are
+  // told apart by decoding, not by a pattern over the raw string.
+  it('treats a product that is not a global id as a slug', () => {
+    for (const slug of ['example-sans', 'examplesans', 'test', 'example_mono', 'a']) {
+      expect(storeModalRouteAction(`product/${slug}`, config())).toEqual({
+        type: 'STORE_MODAL_REPLACE',
+        route: 'product',
+        variables: {
+          productSlug: slug
+        }
+      });
+    }
+  });
+  it('does not mistake base64 of something else for a global id', () => {
+    // atob('c29tZXRoaW5n') === 'something' — decodable, but not `Type:id`.
+    expect(storeModalRouteAction('product/c29tZXRoaW5n', config())).toEqual({
+      type: 'STORE_MODAL_REPLACE',
+      route: 'product',
+      variables: {
+        productSlug: 'c29tZXRoaW5n'
+      }
+    });
+  });
+  it('returns null for a route it does not recognise', () => {
+    expect(storeModalRouteAction('checkout', config())).toBeNull();
+    expect(storeModalRouteAction('product/', config())).toBeNull();
+  });
+});
+describe('storeModalUrlActions', () => {
+  it('opens the modal on its default route for ?store=open', () => {
+    expect(storeModalUrlActions('?store=open', config(['unlisted']))).toEqual([OPEN]);
+  });
+  it('opens the modal on a product for ?store=product/<id>', () => {
+    expect(storeModalUrlActions(`?store=product/${PRODUCT_ID}`, config())).toEqual([{
+      type: 'STORE_MODAL_REPLACE',
+      route: 'product',
+      variables: {
+        productId: PRODUCT_ID
+      }
+    }, OPEN]);
+  });
+  it('opens the modal on a product for ?store=product/<slug>', () => {
+    expect(storeModalUrlActions('?store=product/example-sans', config())).toEqual([{
+      type: 'STORE_MODAL_REPLACE',
+      route: 'product',
+      variables: {
+        productSlug: 'example-sans'
+      }
+    }, OPEN]);
+  });
+  it('opens the modal on the cart for ?store=cart', () => {
+    expect(storeModalUrlActions('?store=cart', config())).toEqual([{
+      type: 'STORE_MODAL_REPLACE',
+      route: 'cart'
+    }, OPEN]);
+  });
+
+  // Undocumented on purpose — `?store=cart` is the form the docs teach — but
+  // shared-cart links in the wild redirect to `?cart=open`, so it has to keep
+  // working. Don't remove this without retiring that redirect first.
+  it('still honours the older ?cart=open', () => {
+    expect(storeModalUrlActions('?cart=open', config())).toEqual([{
+      type: 'STORE_MODAL_REPLACE',
+      route: 'cart'
+    }, OPEN]);
+  });
+  it('reads its parameter from among others', () => {
+    expect(storeModalUrlActions('?utm_source=newsletter&store=open&page=2', config())).toEqual([OPEN]);
+  });
+  it('leaves a ?store= value of its own alone', () => {
+    // `store` is a plain enough parameter name that a site may already use it.
+    expect(storeModalUrlActions('?store=london', config())).toEqual([]);
+    expect(storeModalUrlActions('?store=42', config())).toEqual([]);
+  });
+  it('does nothing when no parameter asks for the modal', () => {
+    expect(storeModalUrlActions('', config())).toEqual([]);
+    expect(storeModalUrlActions('?cart=closed', config())).toEqual([]);
+  });
+});

package/dist/__tests__/storefrontEvents.test.js

@@ -0,0 +1,167 @@
+// @vitest-environment happy-dom
+// @vitest-environment-options { "url": "https://store.example.com/fonts/archivo" }
+
+// The browser-only storefront moments reach the server through
+// `trackStorefrontEvent`. A buyer clicks through licences in bursts and React
+// re-runs effects, so what matters here is what *doesn't* get reported: the
+// steps before a configuration settles, a configuration already reported, and
+// a second look at the same collection that is really one mount.
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+const commitMutation = vi.fn();
+vi.mock('react-relay', () => ({
+  graphql: () => null,
+  commitMutation: function () {
+    return commitMutation(...arguments);
+  },
+  useRelayEnvironment: vi.fn()
+}));
+import { licenseSelectionsFromOptions, trackPaymentInfoEntered, trackProductCustomized, trackProductViewed } from '../components/Cart/storefrontEvents.js';
+const environment = {};
+function reportedInputs() {
+  return commitMutation.mock.calls.map(_ref => {
+    let [, config] = _ref;
+    return config.variables.input;
+  });
+}
+beforeEach(() => {
+  commitMutation.mockReset();
+  vi.useFakeTimers();
+});
+afterEach(() => {
+  vi.useRealTimers();
+});
+describe('licenseSelectionsFromOptions', () => {
+  it('takes the licence choices in the shape createOrderItems takes them, sorted', () => {
+    const options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }, {
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'five',
+        seats: 'one'
+      }
+    }];
+    expect(licenseSelectionsFromOptions(options)).toEqual([{
+      licenseId: 'desktop',
+      licenseVariableId: 'seats',
+      licenseOptionId: 'one'
+    }, {
+      licenseId: 'desktop',
+      licenseVariableId: 'users',
+      licenseOptionId: 'five'
+    }, {
+      licenseId: 'web'
+    }]);
+  });
+});
+describe('trackProductCustomized', () => {
+  it('reports the configuration a burst of clicks settles on, once', () => {
+    let options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'one'
+      }
+    }];
+    const current = () => options;
+    trackProductCustomized(environment, 'collection-burst', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'five'
+      }
+    }];
+    trackProductCustomized(environment, 'collection-burst', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {
+        users: 'ten'
+      }
+    }];
+    trackProductCustomized(environment, 'collection-burst', current);
+    expect(commitMutation).not.toHaveBeenCalled();
+    vi.advanceTimersByTime(1500);
+    expect(reportedInputs()).toEqual([expect.objectContaining({
+      event: 'PRODUCT_CUSTOMIZED',
+      collectionId: 'collection-burst',
+      licenseSelections: [{
+        licenseId: 'desktop',
+        licenseVariableId: 'users',
+        licenseOptionId: 'ten'
+      }],
+      tracking: expect.objectContaining({
+        url: 'https://store.example.com/fonts/archivo'
+      })
+    })]);
+  });
+  it('skips a configuration already reported for that collection', () => {
+    let options = [{
+      licenseId: 'desktop',
+      licenseOptions: {}
+    }];
+    const current = () => options;
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+
+    // Over to web and back again: the buyer ends where they were.
+    options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    options = [{
+      licenseId: 'desktop',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+
+    // Then a real change.
+    options = [{
+      licenseId: 'web',
+      licenseOptions: {}
+    }];
+    trackProductCustomized(environment, 'collection-repeat', current);
+    vi.advanceTimersByTime(1500);
+    expect(reportedInputs().map(input => input.licenseSelections)).toEqual([[{
+      licenseId: 'desktop'
+    }], [{
+      licenseId: 'web'
+    }]]);
+  });
+  it('reports nothing when every licence is unticked', () => {
+    trackProductCustomized(environment, 'collection-empty', () => []);
+    vi.advanceTimersByTime(1500);
+    expect(commitMutation).not.toHaveBeenCalled();
+  });
+});
+describe('trackProductViewed', () => {
+  it('counts an effect run twice for one mount as one view', () => {
+    trackProductViewed(environment, 'collection-view');
+    trackProductViewed(environment, 'collection-view');
+    trackProductViewed(environment, 'collection-other');
+
+    // Coming back to the first collection later is a new look.
+    vi.advanceTimersByTime(2000);
+    trackProductViewed(environment, 'collection-view');
+    expect(reportedInputs().map(_ref2 => {
+      let {
+        event,
+        collectionId
+      } = _ref2;
+      return [event, collectionId];
+    })).toEqual([['PRODUCT_VIEWED', 'collection-view'], ['PRODUCT_VIEWED', 'collection-other'], ['PRODUCT_VIEWED', 'collection-view']]);
+  });
+});
+describe('trackPaymentInfoEntered', () => {
+  it('reports with the buyer’s tracking context', () => {
+    trackPaymentInfoEntered(environment);
+    expect(reportedInputs()).toEqual([expect.objectContaining({
+      event: 'PAYMENT_INFO_ENTERED',
+      tracking: expect.objectContaining({
+        analyticsConsent: false
+      })
+    })]);
+  });
+});

package/dist/__tests__/stripeElements.test.js

@@ -0,0 +1,173 @@
+import { describe, it, expect, vi } from 'vitest';
+import { validateAddressElements, validateElements } from '../stripeElements.js';
+
+// FD-1248: Stripe.js throws from `elements.submit()` when the Elements group
+// was created without a `clientSecret` or `mode` – the group a Stripe Tax
+// order checks out with, and the Cart's billing step before the order has a
+// PaymentIntent – and leaks an unhandled rejection besides. Letting that throw
+// escape left the store modal's Checkout button and the Cart's Next button
+// doing nothing.
+const NO_SESSION = new Error('Unable to select session. Make sure Elements is initialized with clientSecret\n      or use the nullableSessionSelector() instead.');
+function fakeElements(submit) {
+  let addresses = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const getValue = vi.fn();
+  const elements = {
+    submit: vi.fn(submit),
+    getElement: vi.fn((type, options) => {
+      const address = type === 'address' && options ? addresses[options.mode] : undefined;
+      if (!address) return null;
+      return {
+        getValue: () => {
+          getValue(options.mode);
+          return Promise.resolve({
+            complete: address.complete,
+            isNewAddress: true,
+            value: {}
+          });
+        }
+      };
+    })
+  };
+  return {
+    elements: elements,
+    getValue
+  };
+}
+describe('validateAddressElements', () => {
+  // Used where only addresses are mounted, so it must never reach submit():
+  // on a group with no session that throws, and leaks an unhandled rejection
+  // even when caught.
+  const submitThatMustNotRun = () => Promise.reject(NO_SESSION);
+  it('goes ahead with no Elements group', async () => {
+    expect(await validateAddressElements(null)).toBe(true);
+    expect(await validateAddressElements(undefined)).toBe(true);
+  });
+  it('goes ahead when nothing is mounted (Stripe Tax Checkout button)', async () => {
+    const {
+      elements
+    } = fakeElements(submitThatMustNotRun);
+    expect(await validateAddressElements(elements)).toBe(true);
+    expect(elements.submit).not.toHaveBeenCalled();
+  });
+  it('stops on an incomplete billing address (Cart billing step)', async () => {
+    const {
+      elements,
+      getValue
+    } = fakeElements(submitThatMustNotRun, {
+      billing: {
+        complete: false
+      }
+    });
+    expect(await validateAddressElements(elements)).toBe(false);
+    expect(getValue).toHaveBeenCalledWith('billing');
+    expect(elements.submit).not.toHaveBeenCalled();
+  });
+  it('stops on an incomplete licensee address', async () => {
+    const {
+      elements
+    } = fakeElements(submitThatMustNotRun, {
+      billing: {
+        complete: true
+      },
+      shipping: {
+        complete: false
+      }
+    });
+    expect(await validateAddressElements(elements)).toBe(false);
+  });
+  it('goes ahead when every mounted address is complete', async () => {
+    const {
+      elements,
+      getValue
+    } = fakeElements(submitThatMustNotRun, {
+      billing: {
+        complete: true
+      },
+      shipping: {
+        complete: true
+      }
+    });
+    expect(await validateAddressElements(elements)).toBe(true);
+    expect(getValue).toHaveBeenCalledTimes(2);
+    expect(elements.submit).not.toHaveBeenCalled();
+  });
+});
+describe('validateElements', () => {
+  it('goes ahead with no Elements group', async () => {
+    expect(await validateElements(null)).toBe(true);
+  });
+  it('goes ahead when Stripe validates the group', async () => {
+    const {
+      elements,
+      getValue
+    } = fakeElements(() => Promise.resolve({}));
+    expect(await validateElements(elements)).toBe(true);
+    expect(getValue).not.toHaveBeenCalled();
+  });
+  it('stops when Stripe reports a validation error', async () => {
+    const {
+      elements
+    } = fakeElements(() => Promise.resolve({
+      error: {
+        message: 'Your card number is incomplete.'
+      }
+    }));
+    expect(await validateElements(elements)).toBe(false);
+  });
+  describe('when the group has no session', () => {
+    const noSession = () => Promise.reject(NO_SESSION);
+    it('goes ahead when nothing is mounted (an order a coupon makes free)', async () => {
+      const {
+        elements
+      } = fakeElements(noSession);
+      expect(await validateElements(elements)).toBe(true);
+    });
+    it('also survives submit() throwing synchronously', async () => {
+      const {
+        elements
+      } = fakeElements(() => {
+        throw NO_SESSION;
+      });
+      expect(await validateElements(elements)).toBe(true);
+    });
+    it('validates the mounted address elements instead', async () => {
+      const {
+        elements,
+        getValue
+      } = fakeElements(noSession, {
+        billing: {
+          complete: true
+        },
+        shipping: {
+          complete: true
+        }
+      });
+      expect(await validateElements(elements)).toBe(true);
+      expect(getValue).toHaveBeenCalledWith('billing');
+      expect(getValue).toHaveBeenCalledWith('shipping');
+    });
+    it('stops on an incomplete billing address (Cart billing step)', async () => {
+      const {
+        elements
+      } = fakeElements(noSession, {
+        billing: {
+          complete: false
+        }
+      });
+      expect(await validateElements(elements)).toBe(false);
+    });
+    it('stops on an incomplete licensee address', async () => {
+      const {
+        elements
+      } = fakeElements(noSession, {
+        billing: {
+          complete: true
+        },
+        shipping: {
+          complete: false
+        }
+      });
+      expect(await validateElements(elements)).toBe(false);
+    });
+  });
+});

package/dist/__tests__/typeTesterAutofitFeatures.test.js

@@ -0,0 +1,138 @@
+import "../global-shim.js";
+// @vitest-environment happy-dom
+import React, { act, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { ContentState, EditorState } from 'draft-js';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import TypeTesterFitter from '../components/TypeTester/TypeTesterFitter.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+
+// happy-dom has no text layout, so the two measuring primitives are stubbed
+// with a toy font: every glyph is 0.5em wide, and the `ss01` alternates are
+// 0.6em. Canvas only ever sees the default glyphs – that is true of real
+// browsers too (`ctx.font` has no feature settings), and is why autofit sized
+// a tester for the default glyphs and then rendered it with the alternates.
+const DEFAULT_ADVANCE = 0.5;
+const SS01_ADVANCE = 0.6;
+const TEXT = 'UNICASED CIRCUMSTANCES';
+const CONTAINER_WIDTH = 1010;
+// useTypeTesterStyler keeps 10px of slack when autofit is on.
+const AVAILABLE_WIDTH = CONTAINER_WIDTH - 10;
+const renderedWidth = (size, features) => TEXT.length * size * (features.includes('ss01') ? SS01_ADVANCE : DEFAULT_ADVANCE);
+let domMeasure;
+beforeEach(() => {
+  vi.stubGlobal('ResizeObserver', class {
+    constructor(callback) {
+      this.callback = callback;
+    }
+    observe() {
+      this.callback([{
+        contentRect: {
+          width: CONTAINER_WIDTH
+        }
+      }], this);
+    }
+    disconnect() {}
+  });
+  Object.defineProperty(document, 'fonts', {
+    configurable: true,
+    value: {
+      load: () => Promise.resolve([])
+    }
+  });
+  vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue({
+    font: '',
+    letterSpacing: '',
+    measureText: text => ({
+      width: text.length * 100 * DEFAULT_ADVANCE
+    })
+  });
+  domMeasure = vi.spyOn(Element.prototype, 'getBoundingClientRect').mockImplementation(function () {
+    const {
+      fontSize,
+      fontFeatureSettings
+    } = this.style;
+    const advance = fontFeatureSettings.includes('ss01') ? SS01_ADVANCE : DEFAULT_ADVANCE;
+    return {
+      width: (this.textContent ?? '').length * parseFloat(fontSize) * advance
+    };
+  });
+});
+afterEach(() => {
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+let currentSize = 0;
+function Tester(_ref) {
+  let {
+    features
+  } = _ref;
+  const [size, setSize] = useState(72);
+  const [content] = useState(() => EditorState.createWithContent(ContentState.createFromText(TEXT)));
+  currentSize = size;
+  return /*#__PURE__*/React.createElement(TypeTesterFitter, {
+    autofit: true,
+    autofitOnChange: false,
+    min: 10,
+    max: 200,
+    size: size,
+    setSize: setSize,
+    lineHeight: 1.2,
+    letterSpacing: 0,
+    features: features,
+    focused: false,
+    truncate: false,
+    fontStyles: {
+      fontFamily: 'Toy Sans',
+      fontWeight: 200,
+      fontStyle: 'italic'
+    },
+    content: content,
+    contentEdited: false,
+    alignment: "left",
+    variableSettings: null,
+    columns: false
+  }, TEXT);
+}
+describe('type tester autofit with OpenType features', () => {
+  let root;
+  let container;
+  const render = features => act(async () => {
+    root.render( /*#__PURE__*/React.createElement(Tester, {
+      features: features
+    }));
+  });
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+  afterEach(async () => {
+    await act(async () => root.unmount());
+    container.remove();
+  });
+  it('fits text on one line when an enabled feature widens it', async () => {
+    await render([]);
+    const plainSize = currentSize;
+    expect(renderedWidth(plainSize, [])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    await render(['ss01']);
+    expect(currentSize).toBeLessThan(plainSize);
+    expect(renderedWidth(currentSize, ['ss01'])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+  });
+  it('refits when a feature is toggled', async () => {
+    await render([]);
+    const plainSize = currentSize;
+    await render(['ss01']);
+    const featureSize = currentSize;
+    expect(featureSize).toBeLessThan(plainSize);
+    expect(renderedWidth(featureSize, ['ss01'])).toBeLessThanOrEqual(AVAILABLE_WIDTH);
+    await render([]);
+    expect(currentSize).toBe(plainSize);
+  });
+  it('keeps the canvas fast path when no feature is on', async () => {
+    await render([]);
+    expect(domMeasure).not.toHaveBeenCalled();
+  });
+});

package/dist/__tests__/typeTesterInitialSize.test.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { describe, it, expect } from 'vitest';
+import TypeTesterContext from '../components/TypeTester/TypeTesterContext.js';
+import useTypeTesterState from '../components/TypeTester/TypeTesterState.js';
+import ConfigContext, { makeConfig } from '../components/ConfigContext.js';
+function Size(_ref) {
+  let {
+    id
+  } = _ref;
+  const {
+    size
+  } = useTypeTesterState({
+    id
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    "data-id": id
+  }, size);
+}
+const tester = size => ({
+  content: 'Hamburgefonstiv',
+  size,
+  lineHeight: null,
+  letterSpacing: null,
+  autofit: false,
+  alignment: 'left',
+  variableSettings: null,
+  features: null,
+  direction: 'ltr'
+});
+const renderSizes = (sizes, config) => {
+  const testers = Object.fromEntries(Object.entries(sizes).map(_ref2 => {
+    let [id, size] = _ref2;
+    return [id, tester(size)];
+  }));
+  const html = renderToString( /*#__PURE__*/React.createElement(ConfigContext.Provider, {
+    value: makeConfig(config)
+  }, /*#__PURE__*/React.createElement(TypeTesterContext, {
+    testers: testers
+  }, Object.keys(sizes).map(id => /*#__PURE__*/React.createElement(Size, {
+    key: id,
+    id: id
+  })))));
+  return Object.fromEntries([...html.matchAll(/data-id="([^"]+)">([^<]+)</g)].map(_ref3 => {
+    let [, id, size] = _ref3;
+    return [id, Number(size)];
+  }));
+};
+
+// The size slider spans config.size.min..max, so a tester saved with a size
+// outside that range would otherwise start with its handle off the track.
+describe('TypeTesterContext initial size', () => {
+  it('clamps a stored size into the configured slider range', () => {
+    expect(renderSizes({
+      below: 4,
+      above: 300,
+      inside: 48,
+      unset: null
+    }, {
+      typeTester: {
+        size: {
+          min: 12,
+          max: 120
+        }
+      }
+    })).toEqual({
+      below: 12,
+      above: 120,
+      inside: 48,
+      unset: 72
+    });
+  });
+  it('clamps against the default range when none is configured', () => {
+    expect(renderSizes({
+      below: 6,
+      above: 500
+    })).toEqual({
+      below: 10,
+      above: 200
+    });
+  });
+});