@astryxdesign/core 0.4.1 → 0.4.2-canary.464a445

package/src/Layer/useLayer.test.tsx

@@ -10,7 +10,7 @@
  */
 
 import {describe, it, expect, vi, afterEach} from 'vitest';
-import {render, act} from '@testing-library/react';
+import {render, act, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {useLayer, getPositionTryFallbacks} from './useLayer';
 import type {
@@ -19,6 +19,12 @@ import type {
   ContextRenderProps,
 } from './useLayer';
 
+function mockCSSStyleDeclaration(
+  styles: Partial<CSSStyleDeclaration>,
+): CSSStyleDeclaration {
+  return styles as CSSStyleDeclaration;
+}
+
 /**
  * Minimal harness that exposes the imperative show/hide callbacks and renders
  * the layer element so tests can assert on visibility.
@@ -47,7 +53,7 @@ function ContextLayerHarness({
   const layer = useLayer({mode: 'context'});
   return (
     <>
-      <button type="button" ref={layer.ref}>
+      <button type="button" ref={layer.ref} onClick={layer.show}>
         Trigger
       </button>
       {layer.render(<span>Layer content</span>, {placement, alignment})}
@@ -55,6 +61,82 @@ function ContextLayerHarness({
   );
 }
 
+function ContextHostingHarness({
+  unsafe,
+  themeColor,
+  direction,
+  writingMode,
+}: {
+  unsafe?: boolean;
+  themeColor?: string;
+  direction?: React.CSSProperties['direction'];
+  writingMode?: React.CSSProperties['writingMode'];
+}) {
+  const layer = useLayer({mode: 'context', lazyMount: true});
+  const contents = (
+    <>
+      <button type="button" ref={layer.ref} onClick={layer.show}>
+        Trigger
+      </button>
+      {layer.render(<button type="button">Layer action</button>)}
+      <button type="button">Following control</button>
+    </>
+  );
+
+  const hostStyle = {
+    ...(themeColor ? {'--test-layer-color': themeColor} : {}),
+    direction,
+    writingMode,
+  } as React.CSSProperties;
+
+  return (
+    <div data-testid="host" style={hostStyle}>
+      {unsafe ? <p>{contents}</p> : contents}
+    </div>
+  );
+}
+
+function RelocatingContextHostingHarness({unsafe}: {unsafe: boolean}) {
+  const layer = useLayer({mode: 'context'});
+  const renderedLayer = layer.render(<span>Layer content</span>);
+
+  return unsafe ? (
+    <div data-testid="unsafe-host">
+      <p>{renderedLayer}</p>
+    </div>
+  ) : (
+    <section data-testid="render-position">{renderedLayer}</section>
+  );
+}
+
+function RelocatingOpenContextHostingHarness({
+  unsafe,
+  onShow,
+}: {
+  unsafe: boolean;
+  onShow?: () => void;
+}) {
+  const layer = useLayer({mode: 'context', lazyMount: true, onShow});
+  const renderedLayer = layer.render(
+    <button type="button">Layer action</button>,
+  );
+
+  return (
+    <>
+      <button type="button" ref={layer.ref} onClick={layer.show}>
+        Trigger
+      </button>
+      {unsafe ? (
+        <div data-testid="unsafe-host">
+          <p>{renderedLayer}</p>
+        </div>
+      ) : (
+        <section data-testid="safe-host">{renderedLayer}</section>
+      )}
+    </>
+  );
+}
+
 describe('getPositionTryFallbacks (issue #3671)', () => {
   const FLIPS = 'flip-block, flip-inline, flip-block flip-inline';
 
@@ -130,10 +212,12 @@ describe('getPositionTryFallbacks (issue #3671)', () => {
     }
   });
 
-  it('updates the fallback list when placement/alignment props change on re-render', () => {
+  it('updates the fallback list when placement/alignment props change on re-render', async () => {
+    const user = userEvent.setup();
     const {container, rerender} = render(
       <ContextLayerHarness placement="above" alignment="center" />,
     );
+    await user.click(container.querySelector('button')!);
     const layerEl = container.querySelector('[popover]') as HTMLElement;
     expect(layerEl.style.positionTryFallbacks).toContain('top span-left');
 
@@ -158,8 +242,10 @@ describe('getPositionTryFallbacks (issue #3671)', () => {
     expect(layerEl.style.top).toBe('20px');
   });
 
-  it('applies span fallbacks to the rendered popover for the default (above/center) layer', () => {
+  it('applies span fallbacks to the rendered popover for the default (above/center) layer', async () => {
+    const user = userEvent.setup();
     const {container} = render(<ContextLayerHarness />);
+    await user.click(container.querySelector('button')!);
     const layerEl = container.querySelector('[popover]') as HTMLElement;
     expect(layerEl).not.toBeNull();
     expect(layerEl.style.positionTryFallbacks).toBe(
@@ -188,7 +274,246 @@ describe('useLayer', () => {
     }
   });
 
+  describe('context hosting', () => {
+    it('keeps closed content mounted by default for existing consumers', () => {
+      const {container} = render(<ContextLayerHarness />);
+
+      expect(container.querySelector('template')).not.toBeNull();
+      expect(container.querySelector('[popover]')).not.toBeNull();
+      expect(container).toHaveTextContent('Layer content');
+    });
+
+    it('renders only an inert marker until show is requested', () => {
+      const {container} = render(<ContextHostingHarness />);
+
+      const sentinel = container.querySelector('template');
+      expect(sentinel).not.toBeNull();
+      expect(sentinel).not.toHaveAttribute('id');
+      expect(container.querySelector('[popover]')).toBeNull();
+      expect(container).not.toHaveTextContent('Layer action');
+    });
+
+    it('keeps the final layer inline when the JSX position is safe', async () => {
+      HTMLElement.prototype.showPopover = vi.fn();
+      const user = userEvent.setup();
+      const {container, getByRole} = render(<ContextHostingHarness />);
+
+      await user.click(getByRole('button', {name: 'Trigger'}));
+
+      const layer = container.querySelector('[popover]');
+      const following = getByRole('button', {name: 'Following control'});
+      expect(layer?.parentElement).toBe(container.firstElementChild);
+      expect(layer?.nextElementSibling).toBe(following);
+      expect(container.querySelector('template')).not.toBeNull();
+    });
+
+    it('portals out of an unsafe parent and preserves its logical writing context', async () => {
+      const getComputedStyleSpy = vi
+        .spyOn(window, 'getComputedStyle')
+        .mockImplementation(() =>
+          mockCSSStyleDeclaration({
+            getPropertyValue: () => '',
+            direction: 'rtl',
+            writingMode: 'vertical-rl',
+          }),
+        );
+      const showSpy = vi.fn();
+      HTMLElement.prototype.showPopover = showSpy;
+      const user = userEvent.setup();
+
+      try {
+        const {container, getByRole} = render(<ContextHostingHarness unsafe />);
+        const trigger = getByRole('button', {name: 'Trigger'});
+
+        await user.click(trigger);
+
+        const host = container.querySelector('[data-testid="host"]');
+        const paragraph = container.querySelector('p');
+        const layer = container.querySelector('[popover]') as HTMLElement;
+        expect(layer.parentElement).toBe(host);
+        expect(paragraph?.contains(layer)).toBe(false);
+        expect(layer).toHaveStyle({
+          direction: 'rtl',
+          writingMode: 'vertical-rl',
+        });
+        expect(showSpy).toHaveBeenCalledWith({source: trigger});
+      } finally {
+        getComputedStyleSpy.mockRestore();
+      }
+    });
+
+    it('inherits custom properties from the corrective host without freezing an inline snapshot', async () => {
+      const originalGetComputedStyle = window.getComputedStyle.bind(window);
+      const getComputedStyleSpy = vi
+        .spyOn(window, 'getComputedStyle')
+        .mockImplementation(element => {
+          if (element.tagName.toLowerCase() !== 'template') {
+            return originalGetComputedStyle(element);
+          }
+          return mockCSSStyleDeclaration({
+            length: 1,
+            item: () => '--test-layer-color',
+            getPropertyValue: property =>
+              property === '--test-layer-color' ? 'rgb(1, 2, 3)' : '',
+            direction: 'ltr',
+            writingMode: 'horizontal-tb',
+          });
+        });
+      HTMLElement.prototype.showPopover = vi.fn();
+      const user = userEvent.setup();
+      try {
+        const {container, getByRole, rerender} = render(
+          <ContextHostingHarness unsafe themeColor="rgb(1, 2, 3)" />,
+        );
+
+        await user.click(getByRole('button', {name: 'Trigger'}));
+
+        let host = container.querySelector(
+          '[data-testid="host"]',
+        ) as HTMLElement;
+        let layer = container.querySelector('[popover]') as HTMLElement;
+        expect(layer.parentElement).toBe(host);
+        expect(layer.style.getPropertyValue('--test-layer-color')).toBe('');
+        expect(host.style.getPropertyValue('--test-layer-color')).toBe(
+          'rgb(1, 2, 3)',
+        );
+
+        rerender(<ContextHostingHarness unsafe themeColor="rgb(4, 5, 6)" />);
+
+        host = container.querySelector('[data-testid="host"]') as HTMLElement;
+        layer = container.querySelector('[popover]') as HTMLElement;
+        expect(layer.parentElement).toBe(host);
+        expect(layer.style.getPropertyValue('--test-layer-color')).toBe('');
+        expect(host.style.getPropertyValue('--test-layer-color')).toBe(
+          'rgb(4, 5, 6)',
+        );
+      } finally {
+        getComputedStyleSpy.mockRestore();
+      }
+    });
+
+    it('keeps a shared writing context inheriting live from the corrective host', async () => {
+      const getComputedStyleSpy = vi
+        .spyOn(window, 'getComputedStyle')
+        .mockImplementation(element => {
+          const htmlElement = element as HTMLElement;
+          const host = htmlElement.matches('[data-testid="host"]')
+            ? htmlElement
+            : htmlElement.closest<HTMLElement>('[data-testid="host"]');
+          return mockCSSStyleDeclaration({
+            getPropertyValue: () => '',
+            direction: host?.style.direction || 'ltr',
+            writingMode: host?.style.writingMode || 'horizontal-tb',
+          });
+        });
+      HTMLElement.prototype.showPopover = vi.fn();
+      const user = userEvent.setup();
+
+      try {
+        const {container, getByRole, rerender} = render(
+          <ContextHostingHarness
+            unsafe
+            direction="rtl"
+            writingMode="vertical-rl"
+          />,
+        );
+
+        await user.click(getByRole('button', {name: 'Trigger'}));
+
+        let layer = container.querySelector('[popover]') as HTMLElement;
+        expect(layer.style.direction).toBe('');
+        expect(layer.style.writingMode).toBe('');
+        expect(window.getComputedStyle(layer).direction).toBe('rtl');
+
+        rerender(
+          <ContextHostingHarness
+            unsafe
+            direction="ltr"
+            writingMode="horizontal-tb"
+          />,
+        );
+
+        layer = container.querySelector('[popover]') as HTMLElement;
+        expect(layer.style.direction).toBe('');
+        expect(layer.style.writingMode).toBe('');
+        expect(window.getComputedStyle(layer).direction).toBe('ltr');
+      } finally {
+        getComputedStyleSpy.mockRestore();
+      }
+    });
+
+    it('re-resolves the host when a persistent render call moves', () => {
+      const {container, rerender} = render(
+        <RelocatingContextHostingHarness unsafe />,
+      );
+
+      const host = container.querySelector('[data-testid="unsafe-host"]');
+      const paragraph = container.querySelector('p');
+      let layer = container.querySelector('[popover]');
+      expect(layer?.parentElement).toBe(host);
+      expect(paragraph?.contains(layer)).toBe(false);
+
+      rerender(<RelocatingContextHostingHarness unsafe={false} />);
+
+      const section = container.querySelector('section');
+      layer = container.querySelector('[popover]');
+      expect(layer?.parentElement).toBe(section);
+      expect(section?.querySelector('template')).not.toBeNull();
+    });
+
+    it('reopens an open lazy layer after its render call moves', async () => {
+      const showSpy = vi.fn(function (this: HTMLElement) {
+        if (!this.isConnected) {
+          throw new Error('showPopover called on a detached layer');
+        }
+        this.dataset.open = 'true';
+      });
+      const onShow = vi.fn();
+      HTMLElement.prototype.showPopover = showSpy;
+      const {container, getByRole, rerender} = render(
+        <RelocatingOpenContextHostingHarness unsafe onShow={onShow} />,
+      );
+
+      fireEvent.click(getByRole('button', {name: 'Trigger'}));
+
+      await waitFor(() => {
+        expect(container.querySelector('[popover]')).toHaveAttribute(
+          'data-open',
+          'true',
+        );
+      });
+
+      rerender(
+        <RelocatingOpenContextHostingHarness unsafe={false} onShow={onShow} />,
+      );
+
+      await waitFor(() => {
+        const layer = container.querySelector('[popover]');
+        expect(layer?.parentElement).toBe(
+          container.querySelector('[data-testid="safe-host"]'),
+        );
+        expect(layer).toHaveAttribute('data-open', 'true');
+      });
+      expect(showSpy).toHaveBeenCalledTimes(2);
+      expect(onShow).toHaveBeenCalledOnce();
+    });
+  });
+
   describe('when the Popover API is supported', () => {
+    it('declares body type instead of inheriting the host context', () => {
+      const {container} = render(
+        <div style={{fontSize: '30px', lineHeight: '3'}}>
+          <LayerHarness onReady={() => {}} />
+        </div>,
+      );
+
+      const layer = container.querySelector('[popover]') as HTMLElement;
+      expect(layer).toHaveStyle({
+        fontSize: 'var(--text-body-size)',
+        lineHeight: 'var(--text-body-leading)',
+      });
+    });
+
     it('calls showPopover/hidePopover on show/hide', () => {
       const showSpy = vi.fn();
       const hideSpy = vi.fn();
@@ -485,9 +810,9 @@ describe('useLayer context positioning', () => {
     const NONE = {blockStart: '', blockEnd: '', inlineStart: '', inlineEnd: ''};
 
     it('is flush by default', async () => {
-      expect(await openAndGetOffsets(<OffsetHarness placement="below" />)).toEqual(
-        NONE,
-      );
+      expect(
+        await openAndGetOffsets(<OffsetHarness placement="below" />),
+      ).toEqual(NONE);
     });
 
     // Both edges of the axis, so the gap survives a position-try-fallbacks