@ccheever/exact-renderer 0.1.0

package/src/__tests__/web-primitives.test.tsx

@@ -0,0 +1,454 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { afterEach, describe, expect, it } from 'vitest';
+
+async function importWebImage() {
+  (globalThis as { document?: unknown }).document = {};
+  delete (globalThis as { __exactPlatform?: unknown }).__exactPlatform;
+  const module = await import('../web-primitives.js?web-test');
+  return module.Image;
+}
+
+async function importWebPrimitives() {
+  (globalThis as { document?: unknown }).document = {};
+  delete (globalThis as { __exactPlatform?: unknown }).__exactPlatform;
+  return import('../web-primitives.js?web-test');
+}
+
+async function importSsrWebPrimitives() {
+  delete (globalThis as { document?: unknown }).document;
+  delete (globalThis as { __exactPlatform?: unknown }).__exactPlatform;
+  (globalThis as { __exactWebSsr?: boolean }).__exactWebSsr = true;
+  return import('../web-primitives.js?ssr-test');
+}
+
+afterEach(() => {
+  delete (globalThis as { document?: unknown }).document;
+  delete (globalThis as { __exactPlatform?: unknown }).__exactPlatform;
+  delete (globalThis as { __exactWebSsr?: boolean }).__exactWebSsr;
+});
+
+describe('WebImage', () => {
+  it('renders picture sources for multi-candidate image sources', async () => {
+    const Image = await importWebImage();
+    const html = renderToStaticMarkup(
+      React.createElement(Image, {
+        source: [
+          { uri: 'https://cdn.example.com/hero.avif', pixelDensity: 1, type: 'image/avif' },
+          { uri: 'https://cdn.example.com/hero@2x.avif', pixelDensity: 2, type: 'image/avif' },
+          { uri: 'https://cdn.example.com/hero.jpg', pixelDensity: 1 },
+        ],
+        alt: 'Hero image',
+        objectFit: 'contain',
+        objectPosition: 'top center',
+        loading: 'lazy',
+      }),
+    );
+
+    expect(html).toContain('<picture>');
+    expect(html).toContain('type="image/avif"');
+    expect(html).toContain('srcSet="https://cdn.example.com/hero.avif 1x, https://cdn.example.com/hero@2x.avif 2x"');
+    expect(html).toContain('object-fit:contain');
+    expect(html).toContain('object-position:top center');
+    expect(html).toContain('loading="lazy"');
+    expect(html).toContain('alt="Hero image"');
+  });
+
+  it('renders decorative images with placeholder background styling', async () => {
+    const Image = await importWebImage();
+    const html = renderToStaticMarkup(
+      React.createElement(Image, {
+        source: 'https://example.com/photo.jpg',
+        decorative: true,
+        placeholder: { color: '#ff0000' },
+      }),
+    );
+
+    expect(html).toContain('alt=""');
+    expect(html).toContain('aria-hidden="true"');
+    expect(html).toContain('background-color:#ff0000');
+  });
+
+  it('renders theme-aware image metadata for static appearance controllers', async () => {
+    const Image = await importWebImage();
+    const html = renderToStaticMarkup(
+      React.createElement(Image, {
+        source: {
+          light: '/assets/graph.light.png',
+          dark: '/assets/graph.dark.png',
+        },
+        alt: 'Graph',
+      }),
+    );
+
+    expect(html).toContain('src="/assets/graph.light.png"');
+    expect(html).toContain('data-exact-theme-image="color-scheme"');
+    expect(html).toContain('data-light-src="/assets/graph.light.png"');
+    expect(html).toContain('data-dark-src="/assets/graph.dark.png"');
+  });
+
+  it('renders ThumbHash-only sources as an inline data URL', async () => {
+    const Image = await importWebImage();
+    const html = renderToStaticMarkup(
+      React.createElement(Image, {
+        source: { thumbhash: '3OcRJYB4d3h/iIeHeEh3eIhw+j3A' },
+        alt: 'Thumb preview',
+        style: { width: 120, height: 80 },
+      }),
+    );
+
+    expect(html).toContain('src="data:image/png;base64,');
+    expect(html).toContain('alt="Thumb preview"');
+    expect(html).toContain('width="120"');
+    expect(html).toContain('height="80"');
+  });
+
+  it('delegates SVG image sources to the SVG web path', async () => {
+    const Image = await importWebImage();
+    const html = renderToStaticMarkup(
+      React.createElement(Image, {
+        source: 'https://cdn.example.com/icon.svg',
+        alt: 'Vector icon',
+        objectPosition: 'top right',
+      }),
+    );
+
+    expect(html).toContain('src="https://cdn.example.com/icon.svg"');
+    expect(html).toContain('object-fit:contain');
+    expect(html).toContain('object-position:top right');
+    expect(html).toContain('alt="Vector icon"');
+  });
+});
+
+describe('WebText', () => {
+  it('renders authored heading semantics through shared attrs lowering', async () => {
+    const { Text } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Text, {
+        accessibilityRole: 'heading',
+        accessibilityHeadingLevel: 2,
+        testID: 'title',
+        children: 'Stations',
+      }),
+    );
+
+    expect(html).toContain('<h2');
+    expect(html).toContain('data-testid="title"');
+    expect(html).toContain('>Stations</h2>');
+    expect(html).not.toContain('role="heading"');
+    expect(html).not.toContain('aria-level');
+  });
+
+  it('honors selectable text styling', async () => {
+    const { Text } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Text, {
+        selectable: false,
+        children: 'No selection',
+      }),
+    );
+
+    expect(html).toContain('user-select:none');
+  });
+
+  it('inherits pressable selection opt-out by default', async () => {
+    const { Text, Pressable } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(
+        Pressable,
+        null,
+        React.createElement(Text, { children: 'Button label' }),
+      ),
+    );
+
+    expect(html).toContain('user-select:none');
+  });
+
+  it('lets text opt back into selection inside a pressable', async () => {
+    const { Text, Pressable } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(
+        Pressable,
+        null,
+        React.createElement(Text, {
+          selectable: true,
+          children: 'Override label',
+        }),
+      ),
+    );
+
+    expect(html).toContain('user-select:text');
+  });
+
+  it('serializes selectable string modes', async () => {
+    const { Text } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Text, {
+        selectable: 'all',
+        children: 'Select all',
+      }),
+    );
+
+    expect(html).toContain('user-select:all');
+  });
+
+  it('uses CSS ellipsis for single-line clamps', async () => {
+    const { Text } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Text, {
+        numberOfLines: 1,
+        style: {
+          width: 220,
+        },
+        children: 'Single line clamp',
+      }),
+    );
+
+    expect(html).toContain('display:block');
+    expect(html).toContain('text-overflow:ellipsis');
+    expect(html).toContain('white-space:nowrap');
+  });
+
+  it('serializes numeric lineHeight as an absolute pixel value', async () => {
+    const { Text } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Text, {
+        style: {
+          fontSize: 13,
+          lineHeight: 18,
+        },
+        children: 'Absolute leading',
+      }),
+    );
+
+    expect(html).toContain('line-height:18px');
+  });
+});
+
+describe('Lowercase web primitives', () => {
+  it('renders landmarks and labelled inputs through shared attrs lowering', async () => {
+    const { TextInput, View } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(
+        View,
+        {
+          accessibilityRole: 'navigation',
+          accessibilityLabel: 'Primary navigation',
+          testID: 'nav',
+        },
+        React.createElement(TextInput, {
+          nativeID: 'email',
+          accessibilityLabelledBy: 'email-label',
+          defaultValue: '',
+          testID: 'email',
+        }),
+      ),
+    );
+
+    expect(html).toContain('<nav');
+    expect(html).toContain('aria-label="Primary navigation"');
+    expect(html).toContain('data-testid="nav"');
+    expect(html).toContain('id="email"');
+    expect(html).toContain('aria-labelledby="email-label"');
+    expect(html).toContain('data-testid="email"');
+  });
+
+  it('renders DOM wrappers during explicit web SSR without a document', async () => {
+    const { Pressable, ScrollView, Text, View } = await importSsrWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(
+        ScrollView,
+        {
+          testID: 'ssr-scroll',
+          contentContainerStyle: { padding: 12 },
+        },
+        React.createElement(
+          View,
+          {
+            testID: 'ssr-view',
+          },
+          React.createElement(Text, { testID: 'ssr-text' }, 'SSR body'),
+          React.createElement(Pressable, { testID: 'ssr-pressable' }, 'Press'),
+        ),
+      ),
+    );
+
+    expect(html).toContain('data-testid="ssr-scroll"');
+    expect(html).toContain('data-testid="ssr-view"');
+    expect(html).toContain('data-testid="ssr-text"');
+    expect(html).toContain('data-testid="ssr-pressable"');
+    expect(html).toContain('role="button"');
+    expect(html).not.toContain('<View');
+    expect(html).not.toContain('<Text');
+    expect(html).not.toContain('<ScrollView');
+    expect(html).not.toContain('<Pressable');
+    expect(html).not.toContain('testID=');
+    expect(html).not.toContain('contentContainerStyle=');
+  });
+
+  it('renders lowercase div with row flex defaults', async () => {
+    const { div: Div } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Div, {
+        testID: 'lowercase-div',
+        style: { gap: 12 },
+        children: 'Row container',
+      }),
+    );
+
+    expect(html).toContain('<div');
+    expect(html).toContain('data-testid="lowercase-div"');
+    expect(html).toContain('flex-direction:row');
+    expect(html).toContain('gap:12px');
+  });
+
+  it('renders lowercase input through the web text-input wrapper', async () => {
+    const { input: Input } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Input, {
+        multiline: true,
+        placeholder: 'Notes',
+        numberOfLines: 4,
+        testID: 'lowercase-input',
+      }),
+    );
+
+    expect(html).toContain('<textarea');
+    expect(html).toContain('placeholder="Notes"');
+    expect(html).toContain('rows="4"');
+    expect(html).toContain('data-testid="lowercase-input"');
+  });
+
+  it('renders lowercase img with direct web-style props', async () => {
+    const { img: Img } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Img, {
+        src: 'https://cdn.example.com/cover.png',
+        alt: 'Cover art',
+        objectFit: 'cover',
+        objectPosition: 'top center',
+        testID: 'lowercase-img',
+      }),
+    );
+
+    expect(html).toContain('<img');
+    expect(html).toContain('src="https://cdn.example.com/cover.png"');
+    expect(html).toContain('alt="Cover art"');
+    expect(html).toContain('object-fit:cover');
+    expect(html).toContain('object-position:top center');
+    expect(html).toContain('data-testid="lowercase-img"');
+  });
+});
+
+describe('Flex-shrink RN parity (ENG-22206)', () => {
+  // CSS flexbox defaults flex-shrink to 1; RN/Yoga and the kernel/Taffy path
+  // default it to 0. Without flex-shrink:0, a bare View/row inside an
+  // overflowing flex column shrinks below its content (to min-height:0) and
+  // collapses to height 0 — the ENG-22199 bug, in the React-tier renderer.
+  it('defaults View/row containers to flex-shrink:0', async () => {
+    const { View, button: Button, div: Div } = await importWebPrimitives();
+    expect(
+      renderToStaticMarkup(React.createElement(View, { testID: 'v' })),
+    ).toContain('flex-shrink:0');
+    expect(
+      renderToStaticMarkup(React.createElement(Button, { testID: 'b' }, 'Go')),
+    ).toContain('flex-shrink:0');
+    expect(
+      renderToStaticMarkup(React.createElement(Div, { testID: 'd' })),
+    ).toContain('flex-shrink:0');
+  });
+
+  it('keeps ScrollView shrinkable so it bounds and scrolls', async () => {
+    const { ScrollView } = await importWebPrimitives();
+    const html = renderToStaticMarkup(React.createElement(ScrollView, { testID: 's' }));
+    expect(html).toContain('flex-shrink:1');
+    expect(html).not.toContain('flex-shrink:0');
+  });
+
+  it('lets an explicit flexShrink in component style win over the default', async () => {
+    const { View } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(View, { testID: 'v', style: { flexShrink: 1 } }),
+    );
+    expect(html).toContain('flex-shrink:1');
+    expect(html).not.toContain('flex-shrink:0');
+  });
+});
+
+describe('WebButton', () => {
+  it('renders a semantic button with row defaults and mapped accessibility props', async () => {
+    const { button: Button } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(
+        Button,
+        {
+          testID: 'facet-button',
+          accessibilityRole: 'button',
+          accessibilityLabel: 'Launch',
+          disabled: true,
+          style: {
+            paddingLeft: 12,
+            paddingRight: 12,
+          },
+        },
+        'Launch',
+      ),
+    );
+
+    expect(html).toContain('<button');
+    expect(html).toContain('type="button"');
+    expect(html).toContain('data-testid="facet-button"');
+    expect(html).toContain('aria-label="Launch"');
+    expect(html).toContain('disabled=""');
+    expect(html).toContain('flex-direction:row');
+    expect(html).not.toContain('role="button"');
+    expect(html).not.toContain('aria-disabled');
+  });
+
+  it('honors explicit focusability for roving-focus widgets', async () => {
+    const { button: Button } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(
+        Button,
+        {
+          focusable: false,
+          children: 'Inactive option',
+        },
+      ),
+    );
+
+    expect(html).toContain('tabindex="-1"');
+  });
+});
+
+describe('WebSvg', () => {
+  it('renders URI-backed SVGs as img tags by default', async () => {
+    const { Svg } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Svg, {
+        source: 'https://cdn.example.com/diagram.svg',
+        alt: 'System diagram',
+        objectFit: 'cover',
+      }),
+    );
+
+    expect(html).toContain('<img');
+    expect(html).toContain('src="https://cdn.example.com/diagram.svg"');
+    expect(html).toContain('object-fit:cover');
+    expect(html).toContain('alt="System diagram"');
+  });
+
+  it('renders inline SVG sources through the inline host wrapper', async () => {
+    const { Svg } = await importWebPrimitives();
+    const html = renderToStaticMarkup(
+      React.createElement(Svg, {
+        source: '<svg viewBox="0 0 24 24"><rect width="24" height="24" /></svg>',
+        alt: 'Square',
+        testID: 'inline-svg',
+      }),
+    );
+
+    expect(html).toContain('<span');
+    expect(html).toContain('data-testid="inline-svg"');
+  });
+});