@akinon/pz-theme 2.0.164-rc.1 → 2.0.165-beta.0

package/src/chrome/__tests__/theme-page-up.test.tsx

@@ -0,0 +1,522 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+let mockLocale = 'en-us';
+jest.mock('@akinon/next/hooks', () => ({
+  __esModule: true,
+  useLocalization: () => ({ locale: mockLocale })
+}));
+
+import ThemePageUp, { measureBottomOverlay } from '../theme-page-up';
+import { __resetEditorThemeSettingsForTests } from '../use-editor-theme-settings';
+import { __resetEditorBridgeForTests } from '../../editor-bridge';
+import { PAGE_UP_OFFSET_VARIABLE } from '../../utils/theme-settings-readers';
+
+/**
+ * The settings page's "Page up oku" back-to-top button.
+ *
+ * What matters beyond "it scrolls": it is invisible AND unreachable until the
+ * page has scrolled a viewport, it costs no scroll handler, a theme-supplied
+ * icon can never inject markup, the designer can flip it live, and a brand
+ * with a fixed bottom bar can lift it.
+ */
+
+type ObserverRecord = {
+  callback: IntersectionObserverCallback;
+  observed: Element[];
+  disconnected: boolean;
+};
+
+const observers: ObserverRecord[] = [];
+
+class RecordingIntersectionObserver {
+  private readonly record: ObserverRecord;
+
+  constructor(callback: IntersectionObserverCallback) {
+    this.record = { callback, observed: [], disconnected: false };
+    observers.push(this.record);
+  }
+
+  observe(target: Element) {
+    this.record.observed.push(target);
+  }
+
+  unobserve() {}
+
+  disconnect() {
+    this.record.disconnected = true;
+  }
+
+  takeRecords() {
+    return [];
+  }
+}
+
+/** Drives the newest observer the way the browser would. */
+const sentinelAt = (isIntersecting: boolean, top: number) =>
+  act(() => {
+    const record = observers[observers.length - 1];
+    record.callback(
+      [
+        {
+          isIntersecting,
+          boundingClientRect: { top } as DOMRectReadOnly
+        } as IntersectionObserverEntry
+      ],
+      null as unknown as IntersectionObserver
+    );
+  });
+
+const scrolledPast = () => sentinelAt(false, -120);
+
+const EDITOR_ORIGIN = 'http://localhost:5174';
+
+const pushEditorSettings = (
+  type: 'LOAD_THEME' | 'UPDATE_THEME',
+  settings: Record<string, unknown> | undefined
+) =>
+  act(() => {
+    fireEvent(
+      window,
+      new MessageEvent('message', {
+        origin: EDITOR_ORIGIN,
+        data: { type, data: { theme: settings ? { settings } : {} } }
+      })
+    );
+  });
+
+const button = () =>
+  document.querySelector<HTMLButtonElement>('button[data-theme-page-up]');
+
+const originalObserver = window.IntersectionObserver;
+const originalMatchMedia = window.matchMedia;
+const originalElementsFromPoint = document.elementsFromPoint;
+
+beforeEach(() => {
+  observers.length = 0;
+  window.IntersectionObserver =
+    RecordingIntersectionObserver as unknown as typeof IntersectionObserver;
+  __resetEditorThemeSettingsForTests();
+  __resetEditorBridgeForTests();
+});
+
+afterEach(() => {
+  window.IntersectionObserver = originalObserver;
+  window.matchMedia = originalMatchMedia;
+  document.elementsFromPoint = originalElementsFromPoint;
+  jest.restoreAllMocks();
+});
+
+describe('ThemePageUp — enabling', () => {
+  it('renders nothing unless pageUpEnabled is true', () => {
+    for (const settings of [
+      null,
+      {},
+      { pageUpEnabled: false },
+      { pageUpEnabled: 'true' }
+    ]) {
+      const { container, unmount } = render(
+        <ThemePageUp settings={settings} />
+      );
+      expect(container.innerHTML).toBe('');
+      unmount();
+    }
+    expect(observers).toHaveLength(0);
+  });
+
+  it('is server-rendered hidden, so the first client render matches', () => {
+    const html = renderToStaticMarkup(
+      <ThemePageUp settings={{ pageUpEnabled: true }} />
+    );
+
+    expect(html).toContain('data-theme-page-up');
+    expect(html).toContain('visibility:hidden');
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain('tabindex="-1"');
+  });
+});
+
+describe('ThemePageUp — visibility', () => {
+  it('stays hidden and unreachable until the sentinel is scrolled past', () => {
+    render(<ThemePageUp settings={{ pageUpEnabled: true }} />);
+
+    const sentinel = document.querySelector<HTMLElement>(
+      '[data-page-up-sentinel]'
+    )!;
+    expect(sentinel).not.toBeNull();
+    // One viewport down, and zero-sized so it never adds a scrollbar.
+    expect(sentinel.style.top).toBe('100vh');
+    expect(sentinel.style.height).toBe('0px');
+    expect(observers[0].observed).toEqual([sentinel]);
+
+    expect(button()!.getAttribute('aria-hidden')).toBe('true');
+    expect(button()!.tabIndex).toBe(-1);
+    expect(button()!.style.visibility).toBe('hidden');
+    expect(button()!.style.pointerEvents).toBe('none');
+
+    // Below the fold on a fresh page is not "scrolled past".
+    sentinelAt(false, 900);
+    expect(button()!.style.visibility).toBe('hidden');
+
+    scrolledPast();
+    expect(button()!.getAttribute('aria-hidden')).toBeNull();
+    expect(button()!.hasAttribute('tabindex')).toBe(false);
+    expect(button()!.style.visibility).toBe('visible');
+    expect(button()!.style.opacity).toBe('1');
+
+    sentinelAt(true, 300);
+    expect(button()!.style.visibility).toBe('hidden');
+  });
+
+  it('takes the sentinel and the observer down on unmount', () => {
+    const { unmount } = render(
+      <ThemePageUp settings={{ pageUpEnabled: true }} />
+    );
+    unmount();
+
+    expect(document.querySelector('[data-page-up-sentinel]')).toBeNull();
+    expect(observers[0].disconnected).toBe(true);
+  });
+
+  it('is a labelled button, in the shop language', () => {
+    const { unmount } = render(
+      <ThemePageUp settings={{ pageUpEnabled: true }} />
+    );
+    scrolledPast();
+
+    const control = screen.getByRole('button', { name: 'Back to top' });
+    expect(control.getAttribute('type')).toBe('button');
+    unmount();
+
+    mockLocale = 'tr-tr';
+    try {
+      render(<ThemePageUp settings={{ pageUpEnabled: true }} />);
+      scrolledPast();
+      expect(
+        screen.getByRole('button', { name: 'Sayfanın başına dön' })
+      ).toBeInTheDocument();
+    } finally {
+      mockLocale = 'en-us';
+    }
+  });
+});
+
+describe('ThemePageUp — scrolling', () => {
+  const reduceMotion = (reduce: boolean) => {
+    window.matchMedia = ((query: string) => ({
+      matches: reduce && query.includes('prefers-reduced-motion'),
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false
+    })) as unknown as typeof window.matchMedia;
+  };
+
+  it('scrolls smoothly to the top and moves focus to the content', () => {
+    reduceMotion(false);
+    const scrollTo = jest
+      .spyOn(window, 'scrollTo')
+      .mockImplementation(() => {});
+    render(
+      <>
+        <main>content</main>
+        <ThemePageUp settings={{ pageUpEnabled: true }} />
+      </>
+    );
+    scrolledPast();
+
+    fireEvent.click(button()!);
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+    const main = document.querySelector('main')!;
+    expect(document.activeElement).toBe(main);
+    expect(main.getAttribute('tabindex')).toBe('-1');
+
+    // The temporary tab stop goes away with the focus.
+    act(() => {
+      main.blur();
+    });
+    expect(main.hasAttribute('tabindex')).toBe(false);
+  });
+
+  it('jumps without animation under reduced motion', () => {
+    reduceMotion(true);
+    const scrollTo = jest
+      .spyOn(window, 'scrollTo')
+      .mockImplementation(() => {});
+    render(<ThemePageUp settings={{ pageUpEnabled: true }} />);
+    scrolledPast();
+
+    fireEvent.click(button()!);
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 0, behavior: 'auto' });
+  });
+});
+
+describe('ThemePageUp — icon', () => {
+  const iconOf = (settings: Record<string, unknown>) => {
+    const { container, unmount } = render(
+      <ThemePageUp settings={{ pageUpEnabled: true, ...settings }} />
+    );
+    const icon = container.querySelector('[data-page-up-icon]')!;
+    const result = {
+      kind: icon.getAttribute('data-page-up-icon'),
+      src: icon.getAttribute('src'),
+      path: icon.querySelector('path')?.getAttribute('d') ?? null,
+      html: container.innerHTML
+    };
+    unmount();
+    return result;
+  };
+
+  it('draws the catalogue up-arrow when nothing is uploaded', () => {
+    expect(iconOf({})).toMatchObject({
+      kind: 'glyph',
+      path: 'M4.5 15l7.5-7.5 7.5 7.5'
+    });
+  });
+
+  it("uses the theme's uploaded up-arrow icon before the catalogue", () => {
+    const markup =
+      '<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 1"/></svg>';
+
+    expect(iconOf({ icons: { 'up-arrow': markup } })).toMatchObject({
+      kind: 'image',
+      src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`
+    });
+  });
+
+  it('prefers pageUpIcon over everything else', () => {
+    const own = '<svg xmlns="http://www.w3.org/2000/svg"><circle r="4"/></svg>';
+
+    expect(
+      iconOf({ pageUpIcon: own, icons: { 'up-arrow': '<svg><path/></svg>' } })
+    ).toMatchObject({
+      kind: 'image',
+      src: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(own)}`
+    });
+    expect(
+      iconOf({ pageUpIcon: 'https://cdn.example.com/up.png' })
+    ).toMatchObject({ kind: 'image', src: 'https://cdn.example.com/up.png' });
+  });
+
+  it('never puts icon markup into the DOM', () => {
+    const hostile =
+      '<svg onload="alert(1)"><script>alert(2)</script><path d="M0 0"/></svg>';
+    const { html, kind } = iconOf({ pageUpIcon: hostile });
+
+    expect(kind).toBe('image');
+    expect(document.querySelector('script')).toBeNull();
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('onload=');
+  });
+
+  it('falls back to the catalogue arrow for an unusable icon value', () => {
+    for (const pageUpIcon of ['javascript:alert(1)', '//evil.example/up.svg']) {
+      expect(iconOf({ pageUpIcon })).toMatchObject({
+        kind: 'glyph',
+        path: 'M4.5 15l7.5-7.5 7.5 7.5'
+      });
+    }
+  });
+});
+
+describe('ThemePageUp — live in the designer', () => {
+  it('follows the editor once it has spoken, ignoring the saved settings', () => {
+    render(<ThemePageUp settings={{}} />);
+    expect(button()).toBeNull();
+
+    pushEditorSettings('LOAD_THEME', { pageUpEnabled: true });
+    expect(button()).not.toBeNull();
+
+    // A frame with no settings says nothing about them.
+    pushEditorSettings('UPDATE_THEME', undefined);
+    expect(button()).not.toBeNull();
+
+    pushEditorSettings('UPDATE_THEME', { primaryColor: '#111111' });
+    expect(button()).toBeNull();
+  });
+
+  it('switches the icon live', () => {
+    render(<ThemePageUp settings={{ pageUpEnabled: true }} />);
+    expect(
+      document
+        .querySelector('[data-page-up-icon]')!
+        .getAttribute('data-page-up-icon')
+    ).toBe('glyph');
+
+    pushEditorSettings('UPDATE_THEME', {
+      pageUpEnabled: true,
+      pageUpIcon: '<svg xmlns="http://www.w3.org/2000/svg"/>'
+    });
+
+    expect(
+      document
+        .querySelector('[data-page-up-icon]')!
+        .getAttribute('data-page-up-icon')
+    ).toBe('image');
+  });
+
+  it('draws the uploaded icon of a theme saved with the button off once the designer turns it on', () => {
+    const markup =
+      '<svg xmlns="http://www.w3.org/2000/svg"><path d="M1 1"/></svg>';
+    render(<ThemePageUp settings={{ icons: { 'up-arrow': markup } }} />);
+    expect(button()).toBeNull();
+
+    pushEditorSettings('UPDATE_THEME', {
+      pageUpEnabled: true,
+      icons: { 'up-arrow': markup }
+    });
+
+    expect(
+      document.querySelector('[data-page-up-icon]')!.getAttribute('src')
+    ).toBe(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`);
+  });
+
+  it('ignores frames from an untrusted origin', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<ThemePageUp settings={{}} />);
+
+    act(() => {
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          origin: 'https://evil.example',
+          data: {
+            type: 'LOAD_THEME',
+            data: { theme: { settings: { pageUpEnabled: true } } }
+          }
+        })
+      );
+    });
+
+    expect(button()).toBeNull();
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('untrusted origin')
+    );
+  });
+});
+
+describe('ThemePageUp — bottom overlays', () => {
+  it('reads the brand offset variable, with the measured lift as its fallback', () => {
+    const html = renderToStaticMarkup(
+      <ThemePageUp settings={{ pageUpEnabled: true }} />
+    );
+
+    expect(html).toContain('--pz-page-up-lift:0px');
+    expect(html).toContain(
+      `bottom:calc(16px + var(${PAGE_UP_OFFSET_VARIABLE}, var(--pz-page-up-lift, 0px)) + env(safe-area-inset-bottom, 0px))`
+    );
+  });
+
+  it('is painted from the theme colour roles, with fallbacks', () => {
+    const html = renderToStaticMarkup(
+      <ThemePageUp settings={{ pageUpEnabled: true }} />
+    );
+
+    expect(html).toContain('background:var(--theme-background, #fff)');
+    expect(html).toContain('color:var(--theme-heading, #111)');
+    expect(html).toContain('border:1px solid var(--theme-border, #e2e2e2)');
+    expect(html).toContain('z-index:30');
+  });
+
+  const fixedBar = (top: number, bottom: number, position = 'fixed') => {
+    const bar = document.createElement('div');
+    bar.style.position = position;
+    document.body.appendChild(bar);
+    jest.spyOn(bar, 'getBoundingClientRect').mockReturnValue({
+      top,
+      bottom,
+      left: 0,
+      right: window.innerWidth,
+      width: window.innerWidth,
+      height: bottom - top,
+      x: 0,
+      y: top,
+      toJSON: () => ({})
+    } as DOMRect);
+    return bar;
+  };
+
+  // Answers like a browser: only the elements whose box contains the point.
+  const hitTest = (elements: HTMLElement[]) =>
+    jest.fn((_x: number, y: number) =>
+      elements.filter((element) => {
+        const box = element.getBoundingClientRect();
+        return y >= box.top && y <= box.bottom;
+      })
+    );
+
+  it('lifts itself above a fixed bar covering the bottom edge', async () => {
+    const { innerHeight } = window;
+    const bar = fixedBar(innerHeight - 56, innerHeight);
+    document.elementsFromPoint = jest.fn(() => [bar, document.body]);
+
+    expect(measureBottomOverlay(null)).toBe(56);
+
+    render(<ThemePageUp settings={{ pageUpEnabled: true }} />);
+    expect(button()!.style.getPropertyValue('--pz-page-up-lift')).toBe('0px');
+
+    scrolledPast();
+    // The measurement runs on the next frame.
+    await act(async () => {
+      await new Promise((resolve) => requestAnimationFrame(resolve));
+    });
+
+    expect(button()!.style.getPropertyValue('--pz-page-up-lift')).toBe('56px');
+    bar.remove();
+  });
+
+  it('does not climb an overlay or a bar that leaves the bottom edge', () => {
+    const { innerHeight } = window;
+    const drawer = fixedBar(0, innerHeight);
+    const floating = fixedBar(innerHeight - 120, innerHeight - 40);
+    const sticky = fixedBar(innerHeight - 30, innerHeight, 'sticky');
+    const staticRow = fixedBar(innerHeight - 200, innerHeight, 'static');
+    document.elementsFromPoint = hitTest([drawer, floating, staticRow, sticky]);
+
+    // Only the sticky strip counts: the floating panel stops above both the
+    // bottom edge and the button's resting spot.
+    expect(measureBottomOverlay(null)).toBe(30);
+
+    [drawer, floating, sticky, staticRow].forEach((node) => node.remove());
+  });
+
+  // A chat or WhatsApp launcher parked in the same corner.
+  it('lifts itself above a floating button in its resting spot', () => {
+    const { innerHeight } = window;
+    const launcher = fixedBar(innerHeight - 72, innerHeight - 16);
+    document.elementsFromPoint = hitTest([launcher]);
+
+    expect(measureBottomOverlay(null)).toBe(72);
+
+    launcher.remove();
+  });
+
+  it('leaves the lift to the brand when the variable is set', () => {
+    const { innerHeight } = window;
+    const bar = fixedBar(innerHeight - 56, innerHeight);
+    document.elementsFromPoint = jest.fn(() => [bar]);
+
+    const host = document.createElement('button');
+    host.style.setProperty(PAGE_UP_OFFSET_VARIABLE, '80px');
+    document.body.appendChild(host);
+
+    expect(measureBottomOverlay(host)).toBe(0);
+
+    host.remove();
+    bar.remove();
+  });
+
+  it('measures nothing where the browser cannot hit-test', () => {
+    // jsdom has no elementsFromPoint, like an old browser.
+    (document as unknown as { elementsFromPoint?: unknown }).elementsFromPoint =
+      undefined;
+
+    expect(measureBottomOverlay(null)).toBe(0);
+  });
+});