meno-core 1.0.53 → 1.1.0

package/lib/server/ssr/ssrRenderer.branches.test.ts

@@ -0,0 +1,1103 @@
+/**
+ * Characterization tests for ssrRenderer.ts — uncovered branch coverage.
+ *
+ * Complements ssrRenderer.test.ts by pinning current behavior of the branches
+ * that the main suite does not reach: item-template `if` conditions, CMS filter
+ * template resolution, rich-text component expansion, nested cms-list
+ * placeholders, draft filtering on ID-based queries, prop-source list edge
+ * cases, CSS-variable interactive style mappings, template-mode raw HTML,
+ * embed html mappings, link-object hrefs, responsive props.style on component
+ * instances, raw-text elements (<style>/<script>), locale-list interactive
+ * styles, component render error fallbacks, and CMS templates in og:image.
+ *
+ * These are CHARACTERIZATION tests: they pin behavior as-is ahead of a planned
+ * refactor. Suspicious behaviors are flagged with `// NOTE: possible bug —`.
+ */
+
+import { describe, test, expect, mock, beforeEach, afterAll } from 'bun:test';
+
+// bun's mock.module() patches are PROCESS-GLOBAL and persist across test
+// files in the same run. Snapshot the real module exports here (imports are
+// evaluated before this module body runs, so these capture the originals)
+// and restore them in afterAll so later test files see the real
+// implementations. (Same pattern as ssrRenderer.test.ts.)
+import * as realJsonLoader from '../jsonLoader';
+import * as realImageMetadata from './imageMetadata';
+import * as realConfigServiceModule from '../services/configService';
+import * as realValidateStyleCoverage from '../validateStyleCoverage';
+
+const REAL_JSON_LOADER = { ...realJsonLoader };
+const REAL_IMAGE_METADATA = { ...realImageMetadata };
+const REAL_CONFIG_SERVICE_MODULE = { ...realConfigServiceModule };
+const REAL_VALIDATE_STYLE_COVERAGE = { ...realValidateStyleCoverage };
+
+afterAll(() => {
+  mock.module('../jsonLoader', () => REAL_JSON_LOADER);
+  mock.module('./imageMetadata', () => REAL_IMAGE_METADATA);
+  mock.module('../services/configService', () => REAL_CONFIG_SERVICE_MODULE);
+  mock.module('../validateStyleCoverage', () => REAL_VALIDATE_STYLE_COVERAGE);
+  // errorLogger handler state is process-global too — don't leak it.
+  setErrorHandler(null);
+});
+
+let mockImageMetadataMap = new Map();
+let mockImageFormat: 'webp' | 'avif' = 'webp';
+
+mock.module('../jsonLoader', () => ({
+  loadBreakpointConfig: async () => ({
+    breakpoints: [
+      { name: 'mobile', maxWidth: 767 },
+      { name: 'tablet', minWidth: 768, maxWidth: 1023 },
+      { name: 'desktop', minWidth: 1024 },
+    ],
+  }),
+  loadI18nConfig: async () => ({
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', name: 'English', nativeName: 'English', langTag: 'en', icon: '/flags/en.svg' },
+      { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr', icon: '/flags/fr.svg' },
+      { code: 'de', name: 'German', nativeName: 'Deutsch', langTag: 'de' },
+    ],
+  }),
+  loadIconsConfig: async () => ({ favicon: '', appleTouchIcon: '' }),
+  loadPrefetchConfig: async () => ({ enabled: false }),
+}));
+
+mock.module('./imageMetadata', () => ({
+  buildImageMetadataMap: async () => mockImageMetadataMap,
+  DEFAULT_SIZES: '100vw',
+  ImageMetadataMap: Map,
+  rewriteRichTextImages: REAL_IMAGE_METADATA.rewriteRichTextImages,
+}));
+
+mock.module('../services/configService', () => ({
+  configService: {
+    getImageFormat: () => mockImageFormat,
+    getResponsiveScales: () => ({ enabled: false, baseReference: 16 }),
+    getSocial: () => ({}),
+    load: async () => {},
+    isLoaded: () => true,
+    reset: () => {},
+  },
+  ConfigService: class {},
+}));
+
+mock.module('../validateStyleCoverage', () => ({
+  validateStyleCoverage: () => {},
+  printMissingStyleWarnings: () => {},
+}));
+
+import { buildComponentHTML, renderPageSSR } from './ssrRenderer';
+import { RAW_HTML_PREFIX } from '../../shared/constants';
+import { setErrorHandler } from '../../shared/errorLogger';
+import type { ComponentDefinition, JSONPage } from '../../shared/types';
+
+/** Capture logRuntimeError entries via the errorLogger's telemetry hook. */
+interface CapturedLogEntry {
+  location: string;
+  context?: Record<string, unknown>;
+}
+function captureErrorLog(): CapturedLogEntry[] {
+  const entries: CapturedLogEntry[] = [];
+  setErrorHandler((entry) => entries.push({ location: entry.location, context: entry.context }));
+  return entries;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+interface RenderOpts {
+  globalComponents?: Record<string, ComponentDefinition>;
+  pageComponents?: Record<string, ComponentDefinition>;
+  locale?: string;
+  i18nConfig?: any;
+  slugMappings?: any[];
+  pagePath?: string;
+  cmsContext?: { cms?: Record<string, unknown> };
+  cmsService?: any;
+  isProductionBuild?: boolean;
+  injectEditorAttrs?: boolean;
+}
+
+async function renderFull(node: any, opts?: RenderOpts) {
+  return await buildComponentHTML(
+    node,
+    opts?.globalComponents ?? {},
+    opts?.pageComponents ?? {},
+    opts?.locale,
+    opts?.i18nConfig,
+    opts?.slugMappings,
+    opts?.pagePath,
+    opts?.cmsContext,
+    opts?.cmsService,
+    opts?.isProductionBuild,
+    opts?.injectEditorAttrs,
+  );
+}
+
+async function render(node: any, opts?: RenderOpts) {
+  return (await renderFull(node, opts)).html;
+}
+
+const I18N_EN_FR = {
+  defaultLocale: 'en',
+  locales: [
+    { code: 'en', name: 'English', nativeName: 'English', langTag: 'en' },
+    { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
+  ],
+};
+
+// =========================================================================
+// TEST SUITES
+// =========================================================================
+
+describe('ssrRenderer branches', () => {
+  beforeEach(() => {
+    mockImageMetadataMap = new Map();
+    mockImageFormat = 'webp';
+    setErrorHandler(null);
+  });
+
+  // -----------------------------------------------------------------------
+  // 1. evaluateIfCondition — item-template string `if` inside a list
+  // -----------------------------------------------------------------------
+  describe('if conditions with item templates', () => {
+    test('renders child when item-template if resolves truthy, skips when falsy', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'tags',
+        itemAs: 'tag',
+        children: [{ type: 'node', tag: 'span', if: '{{tag.visible}}', children: '{{tag.name}}' }],
+      };
+      // Prop-mode list at page level resolves its source from cmsContext.cms
+      const cmsContext = {
+        cms: {
+          tags: [
+            { name: 'Shown', visible: true },
+            { name: 'Hidden', visible: false },
+          ],
+        },
+      };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('Shown');
+      expect(html).not.toContain('Hidden');
+    });
+
+    test('item-template if resolving to 0 is falsy', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'tags',
+        itemAs: 'tag',
+        children: [{ type: 'node', tag: 'span', if: '{{tag.count}}', children: '{{tag.name}}' }],
+      };
+      const cmsContext = {
+        cms: {
+          tags: [
+            { name: 'HasCount', count: 3 },
+            { name: 'ZeroCount', count: 0 },
+          ],
+        },
+      };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('HasCount');
+      expect(html).not.toContain('ZeroCount');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 2. CMS filter template resolution (resolveFilterTemplates / resolveFilterValue)
+  // -----------------------------------------------------------------------
+  describe('collection list filter templates', () => {
+    function makeCapturingCmsService(items: any[] = [{ _id: 'p1', title: 'Post One' }]) {
+      const queries: any[] = [];
+      return {
+        queries,
+        service: {
+          queryItems: async (query: any) => {
+            queries.push(query);
+            return items;
+          },
+          getItemsByIds: async () => items,
+          getSchema: () => undefined,
+        },
+      };
+    }
+
+    test('array filter: template values resolve against parent list scope, literals pass through', async () => {
+      const { queries, service } = makeCapturingCmsService();
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'categories',
+        itemAs: 'category',
+        children: [
+          {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'posts',
+            filter: [
+              { field: 'category', value: '{{category.slug}}' },
+              { field: 'status', value: 'published' },
+            ],
+            children: [{ type: 'node', tag: 'span', children: '{{post.title}}' }],
+          },
+        ],
+      };
+      const cmsContext = { cms: { categories: [{ slug: 'tech' }] } };
+      const html = await render(node, { cmsContext, cmsService: service });
+
+      expect(html).toContain('Post One');
+      expect(queries.length).toBe(1);
+      expect(queries[0].filter).toEqual([
+        { field: 'category', value: 'tech' },
+        { field: 'status', value: 'published' },
+      ]);
+    });
+
+    test('single condition object filter resolves its template value', async () => {
+      const { queries, service } = makeCapturingCmsService();
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'categories',
+        itemAs: 'category',
+        children: [
+          {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'posts',
+            filter: { field: 'category', value: '{{category.slug}}' },
+            children: [{ type: 'node', tag: 'span', children: '{{post.title}}' }],
+          },
+        ],
+      };
+      const cmsContext = { cms: { categories: [{ slug: 'design' }] } };
+      await render(node, { cmsContext, cmsService: service });
+
+      expect(queries[0].filter).toEqual({ field: 'category', value: 'design' });
+    });
+
+    test('unresolvable template value drops the condition and logs a warning', async () => {
+      const { queries, service } = makeCapturingCmsService();
+      const logged = captureErrorLog();
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'categories',
+        itemAs: 'category',
+        children: [
+          {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'posts',
+            filter: [
+              { field: 'category', value: '{{category.missing}}' },
+              { field: 'status', value: 'published' },
+            ],
+            children: ['{{post.title}}'],
+          },
+        ],
+      };
+      const cmsContext = { cms: { categories: [{ slug: 'tech' }] } };
+      await render(node, { cmsContext, cmsService: service });
+
+      // An unresolved filter template would be sent to the CMS query verbatim
+      // ('{{category.missing}}') and silently match nothing. Instead the
+      // condition is dropped from the query (resolvable conditions survive)…
+      expect(queries[0].filter).toEqual([{ field: 'status', value: 'published' }]);
+      // …and the drop is surfaced through the runtime error logger so users
+      // can see why the list's results changed.
+      expect(logged.length).toBe(1);
+      expect(logged[0]!.location).toBe('ssrRenderer.resolveFilterTemplates');
+      expect(logged[0]!.context).toMatchObject({
+        collection: 'posts',
+        field: 'category',
+        template: '{{category.missing}}',
+      });
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 3. expandRichTextComponents — component markers in raw HTML
+  // -----------------------------------------------------------------------
+  describe('rich-text component expansion', () => {
+    const Icon: ComponentDefinition = {
+      component: {
+        structure: { type: 'node', tag: 'i', children: '{{name}}' },
+        interface: { name: { type: 'string', default: 'default-icon' } },
+      },
+    };
+
+    test('expands a known component marker, preserving surrounding HTML', async () => {
+      const raw =
+        RAW_HTML_PREFIX +
+        '<p>before</p>' +
+        '<div data-meno-component="BrIcon" data-meno-props="{&quot;name&quot;:&quot;star&quot;}"></div>' +
+        '<p>after</p>';
+      const result = await renderFull(raw, { globalComponents: { BrIcon: Icon } });
+      expect(result.html).toContain('<p>before</p>');
+      expect(result.html).toContain('<p>after</p>');
+      // The marker div is replaced by the rendered component; the rendered
+      // root carries the regular component-instance stamp.
+      expect(result.html).toContain('<i data-meno-component="BrIcon" data-meno-component-instance="0">star</i>');
+      expect(result.html).not.toContain('data-meno-props');
+      // Raw→processed mapping collected for the Astro exporter
+      const rawSlice = raw.slice(RAW_HTML_PREFIX.length);
+      expect(result.processedRawHtmlCollector.get(rawSlice)).toBe(result.html);
+    });
+
+    test('keeps marker verbatim for unknown components', async () => {
+      const marker = '<div data-meno-component="BrNotRegistered" data-meno-props=""></div>';
+      const html = await render(RAW_HTML_PREFIX + marker);
+      expect(html).toContain(marker);
+    });
+
+    test('invalid props JSON falls back to default props and logs the parse failure', async () => {
+      const logged = captureErrorLog();
+      const raw = `${RAW_HTML_PREFIX}<div data-meno-component="BrIcon" data-meno-props="{not-json"></div>`;
+      const html = await render(raw, { globalComponents: { BrIcon: Icon } });
+      // Graceful fallback: the component still renders with interface defaults
+      // (a malformed marker must never crash the page)…
+      expect(html).toContain('default-icon');
+      // …but the parse failure is surfaced, including the component name.
+      expect(logged.length).toBe(1);
+      expect(logged[0]!.location).toBe('ssrRenderer.expandRichTextComponents');
+      expect(logged[0]!.context).toMatchObject({ component: 'BrIcon' });
+    });
+
+    test('expands multiple markers in one raw HTML string', async () => {
+      const raw =
+        RAW_HTML_PREFIX +
+        '<div data-meno-component="BrIcon" data-meno-props="{&quot;name&quot;:&quot;one&quot;}"></div>' +
+        '<span>mid</span>' +
+        '<div data-meno-component="BrIcon" data-meno-props="{&quot;name&quot;:&quot;two&quot;}"></div>';
+      const html = await render(raw, { globalComponents: { BrIcon: Icon } });
+      expect(html).toContain('one');
+      expect(html).toContain('<span>mid</span>');
+      expect(html).toContain('two');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 4. Nested cms-list placeholder (emitTemplate + nested collection list)
+  // -----------------------------------------------------------------------
+  describe('nested collection list placeholder', () => {
+    test('nested collection list inside emitTemplate emits a hydration placeholder', async () => {
+      const cmsService = {
+        queryItems: async (query: any) => {
+          if (query.collection === 'posts') return [{ _id: 'p1', title: 'Post One' }];
+          if (query.collection === 'tags') return [{ _id: 't1', name: 'TagOne' }];
+          return [];
+        },
+        getItemsByIds: async () => [],
+        getSchema: () => undefined,
+      };
+
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        emitTemplate: true,
+        children: [
+          { type: 'node', tag: 'h2', children: '{{post.title}}' },
+          {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'tags',
+            itemAs: 'tag',
+            limit: 5,
+            children: [{ type: 'node', tag: 'span', children: '{{tag.name}}' }],
+          },
+        ],
+      };
+
+      const result = await renderFull(node, { cmsService });
+
+      // Regular item render: both lists fully rendered
+      expect(result.html).toContain('Post One');
+      expect(result.html).toContain('TagOne');
+
+      // Template emission: nested list becomes a placeholder with config + inner template
+      expect(result.html).toContain('<template data-meno-item>');
+      expect(result.html).toContain('data-cms-list-nested="true"');
+      expect(result.html).toContain('data-collection="tags"');
+      expect(result.html).toContain('data-cms-config=');
+      expect(result.html).toContain('<template data-nested-template>');
+      // Inner template preserves {{tag.name}} placeholders for client hydration
+      expect(result.html).toContain('{{tag.name}}');
+      // Config JSON is escaped into the attribute
+      expect(result.html).toContain('&quot;collection&quot;:&quot;tags&quot;');
+      expect(result.html).toContain('&quot;limit&quot;:5');
+
+      // The nested collection is tracked for client-side data injection
+      expect(result.neededCollections.has('tags')).toBe(true);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 5. Draft filtering on ID-based collection queries
+  // -----------------------------------------------------------------------
+  describe('ID-based collection list draft filtering', () => {
+    test('filters out items that are draft for the active locale', async () => {
+      const cmsService = {
+        getItemsByIds: async () => [
+          { _id: '1', title: 'Published Item' },
+          { _id: '2', title: 'Draft Item', _draftLocales: ['en'] },
+        ],
+        queryItems: async () => [],
+        getSchema: () => undefined,
+      };
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        items: ['1', '2'],
+        children: [{ type: 'node', tag: 'span', children: '{{post.title}}' }],
+      };
+      const html = await render(node, { cmsService, locale: 'en', i18nConfig: I18N_EN_FR });
+      expect(html).toContain('Published Item');
+      expect(html).not.toContain('Draft Item');
+    });
+
+    test('keeps items that are draft only for other locales', async () => {
+      const cmsService = {
+        getItemsByIds: async () => [{ _id: '2', title: 'FR Draft', _draftLocales: ['fr'] }],
+        queryItems: async () => [],
+        getSchema: () => undefined,
+      };
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        items: ['2'],
+        children: [{ type: 'node', tag: 'span', children: '{{post.title}}' }],
+      };
+      const html = await render(node, { cmsService, locale: 'en', i18nConfig: I18N_EN_FR });
+      expect(html).toContain('FR Draft');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 6. getPropItems — template-expression and legacy-collection sources
+  // -----------------------------------------------------------------------
+  describe('prop-source list resolution', () => {
+    test('nested list with {{parent.field}} source resolves from parent template context', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'sections',
+        itemAs: 'section',
+        children: [
+          {
+            type: 'list',
+            sourceType: 'prop',
+            source: '{{section.items}}',
+            children: [{ type: 'node', tag: 'span', children: '{{item.label}}' }],
+          },
+        ],
+      };
+      const cmsContext = { cms: { sections: [{ items: [{ label: 'X' }, { label: 'Y' }] }] } };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('X');
+      expect(html).toContain('Y');
+    });
+
+    test('{{parent.field}} source resolving to a non-array renders nothing', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'sections',
+        itemAs: 'section',
+        children: [
+          {
+            type: 'list',
+            sourceType: 'prop',
+            source: '{{section.items}}',
+            children: [{ type: 'node', tag: 'span', children: '{{item.label}}' }],
+          },
+        ],
+      };
+      const cmsContext = { cms: { sections: [{ items: 'not-an-array' }] } };
+      const html = await render(node, { cmsContext });
+      expect(html).toBe('');
+    });
+
+    test('bare source naming a non-array CMS field renders nothing', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'title',
+        children: [{ type: 'node', tag: 'span', children: '{{item.label}}' }],
+      };
+      const cmsContext = { cms: { title: 'just a string' } };
+      const html = await render(node, { cmsContext });
+      expect(html).toBe('');
+    });
+
+    test('legacy `collection` key with sourceType prop resolves from component props', async () => {
+      // processStructure pre-resolves bare `source` prop names, but the legacy
+      // `collection` key is untouched — exercising the componentResolvedProps
+      // lookup branch in getPropItems.
+      const Direct: ComponentDefinition = {
+        component: {
+          interface: { features: { type: 'list' as const, itemSchema: {}, default: [] } },
+          structure: {
+            type: 'list',
+            sourceType: 'prop',
+            collection: 'features',
+            itemAs: 'feature',
+            children: [{ type: 'node', tag: 'li', children: '{{feature.label}}' }],
+          } as any,
+        },
+      };
+      const node = {
+        type: 'component',
+        component: 'BrLegacyList',
+        props: { features: [{ label: 'Fast' }, { label: 'Safe' }] },
+      };
+      const html = await render(node, { globalComponents: { BrLegacyList: Direct } });
+      expect(html).toContain('Fast');
+      expect(html).toContain('Safe');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 7. Interactive style mappings → CSS variable inline style
+  // -----------------------------------------------------------------------
+  describe('interactive style mappings (CSS variables)', () => {
+    test('link node mapping resolves to inline --is-N variable from component props', async () => {
+      const Btn: ComponentDefinition = {
+        component: {
+          interface: { variant: { type: 'string', default: 'primary' } },
+          structure: {
+            type: 'link',
+            href: '/go',
+            interactiveStyles: [
+              {
+                postfix: ':hover',
+                style: {
+                  color: { _mapping: true, prop: 'variant', values: { primary: '#0070f3', secondary: '#999999' } },
+                },
+              },
+            ],
+            children: 'Go',
+          } as any,
+        },
+      };
+      const node = { type: 'component', component: 'BrMappedLink', props: { variant: 'primary' } };
+      const result = await renderFull(node, { globalComponents: { BrMappedLink: Btn }, pagePath: '/test' });
+
+      // Inline style carries the resolved CSS variable
+      expect(result.html).toContain('style="--is-0: #0070f3"');
+      // The registered interactive style references the variable, not the mapping
+      const [styles] = [...result.interactiveStylesMap.values()];
+      expect(JSON.stringify(styles)).toContain('var(--is-0)');
+      expect(JSON.stringify(styles)).not.toContain('_mapping');
+    });
+
+    test('mapping with prop value not in values map emits no CSS variable', async () => {
+      const Btn: ComponentDefinition = {
+        component: {
+          interface: { variant: { type: 'string', default: 'unknown-variant' } },
+          structure: {
+            type: 'link',
+            href: '/go',
+            interactiveStyles: [
+              {
+                postfix: ':hover',
+                style: { color: { _mapping: true, prop: 'variant', values: { primary: '#0070f3' } } },
+              },
+            ],
+            children: 'Go',
+          } as any,
+        },
+      };
+      const node = { type: 'component', component: 'BrMappedLinkMiss', props: {} };
+      const result = await renderFull(node, { globalComponents: { BrMappedLinkMiss: Btn }, pagePath: '/test' });
+      expect(result.html).not.toContain('--is-0:');
+      // Style still registered with the var() reference even though it is unset
+      const [styles] = [...result.interactiveStylesMap.values()];
+      expect(JSON.stringify(styles)).toContain('var(--is-0)');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 8. Verbatim-code markers
+  // -----------------------------------------------------------------------
+  describe('verbatim code markers', () => {
+    test('renders nothing for { _code: true } nodes', async () => {
+      const html = await render({ _code: true, expr: 'doSomething()' });
+      expect(html).toBe('');
+    });
+
+    test('renders siblings around a _code marker', async () => {
+      const html = await render([
+        { type: 'node', tag: 'span', children: 'before' },
+        { _code: true, expr: 'skipMe()' },
+        { type: 'node', tag: 'span', children: 'after' },
+      ]);
+      expect(html).toContain('before');
+      expect(html).toContain('after');
+      expect(html).not.toContain('skipMe');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 9. Template mode text: CMS substitution + raw HTML
+  // -----------------------------------------------------------------------
+  describe('template mode text processing', () => {
+    const cmsService = {
+      queryItems: async () => [{ _id: 'p1', title: 'Post One' }],
+      getItemsByIds: async () => [],
+      getSchema: () => undefined,
+    };
+
+    test('emitTemplate processes {{cms.*}} but preserves {{item.*}} placeholders', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        emitTemplate: true,
+        children: [{ type: 'node', tag: 'span', children: '{{cms.brand}}: {{post.title}}' }],
+      };
+      const cmsContext = { cms: { brand: 'Acme' } };
+      const html = await render(node, { cmsService, cmsContext });
+      // Template part keeps the item placeholder but substitutes the CMS value
+      expect(html).toContain('<template data-meno-item>');
+      expect(html).toContain('Acme: {{post.title}}');
+    });
+
+    test('emitTemplate emits rich-text CMS fields as raw HTML inside the template', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        emitTemplate: true,
+        children: [{ type: 'node', tag: 'div', children: '{{cms.body}}' }],
+      };
+      const cmsContext = { cms: { body: { __richtext__: true, html: '<p>Rich <b>content</b></p>' } } };
+      const result = await renderFull(node, { cmsService, cmsContext });
+      expect(result.html).toContain('<p>Rich <b>content</b></p>');
+      expect(result.html).not.toContain('&lt;p&gt;');
+      // Raw→processed mapping collected
+      expect(result.processedRawHtmlCollector.get('<p>Rich <b>content</b></p>')).toBe('<p>Rich <b>content</b></p>');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 10. Embed nodes — html mappings, template mode, item templates, classes
+  // -----------------------------------------------------------------------
+  describe('embed node branches', () => {
+    test('html mapping (passthrough) resolves from component props', async () => {
+      const Logo: ComponentDefinition = {
+        component: {
+          interface: { svg: { type: 'string', default: '<svg viewBox="0 0 10 10"></svg>' } },
+          structure: { type: 'embed', html: { _mapping: true, prop: 'svg' } } as any,
+        },
+      };
+      const node = { type: 'component', component: 'BrEmbedMap', props: {} };
+      const html = await render(node, { globalComponents: { BrEmbedMap: Logo } });
+      expect(html).toContain('<span class="oem"');
+      expect(html).toContain('<svg');
+    });
+
+    test('html mapping (value map) resolves the variant HTML', async () => {
+      const IconSet: ComponentDefinition = {
+        component: {
+          interface: { icon: { type: 'string', default: 'arrow' } },
+          structure: {
+            type: 'embed',
+            html: { _mapping: true, prop: 'icon', values: { arrow: '<b>arrow-svg</b>', check: '<b>check-svg</b>' } },
+          } as any,
+        },
+      };
+      const node = { type: 'component', component: 'BrEmbedValues', props: { icon: 'check' } };
+      const html = await render(node, { globalComponents: { BrEmbedValues: IconSet } });
+      expect(html).toContain('check-svg');
+      expect(html).not.toContain('arrow-svg');
+    });
+
+    test('html mapping that cannot resolve renders an empty embed span', async () => {
+      const Broken: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'embed', html: { _mapping: true, prop: 'missing' } } as any,
+        },
+      };
+      const node = { type: 'component', component: 'BrEmbedMiss', props: {} };
+      const html = await render(node, { globalComponents: { BrEmbedMiss: Broken } });
+      expect(html).toContain('<span class="oem"');
+      expect(html).toContain('></span>');
+    });
+
+    test('html mapping on a page-level embed (no component props in scope) renders empty', async () => {
+      // Inside a component, processStructure resolves the mapping before the
+      // renderer sees it; at page level the renderer resolves it itself and
+      // has no componentResolvedProps → empty content.
+      const html = await render({ type: 'embed', html: { _mapping: true, prop: 'svg' } });
+      expect(html).toContain('<span class="oem"');
+      expect(html).toContain('></span>');
+    });
+
+    test('non-string non-mapping html value renders an empty embed span', async () => {
+      const html = await render({ type: 'embed', html: 12345 });
+      expect(html).toContain('<span class="oem"');
+      expect(html).toContain('></span>');
+      expect(html).not.toContain('12345');
+    });
+
+    test('embed in emitTemplate processes {{cms.*}} in html', async () => {
+      const cmsService = {
+        queryItems: async () => [{ _id: 'p1', title: 'Post One' }],
+        getItemsByIds: async () => [],
+        getSchema: () => undefined,
+      };
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        emitTemplate: true,
+        children: [{ type: 'embed', html: '<b>{{cms.brand}}</b>' }],
+      };
+      const cmsContext = { cms: { brand: 'Acme' } };
+      const html = await render(node, { cmsService, cmsContext });
+      expect(html).toContain('<b>Acme</b>');
+    });
+
+    test('embed inside a list processes {{item.*}} templates in html', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'icons',
+        children: [{ type: 'embed', html: '<b>{{item.glyph}}</b>' }],
+      };
+      const cmsContext = { cms: { icons: [{ glyph: 'STAR' }] } };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('<b>STAR</b>');
+    });
+
+    test('embed with interactive styles merges attribute class into class list', async () => {
+      const node = {
+        type: 'embed',
+        html: '<b>x</b>',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.5' } }],
+        attributes: { class: 'embed-extra' },
+      };
+      const result = await renderFull(node, { pagePath: '/test' });
+      const classMatch = result.html.match(/class="([^"]*)"/);
+      expect(classMatch).not.toBeNull();
+      expect(classMatch![1]).toContain('oem');
+      expect(classMatch![1]).toContain('embed-extra');
+      // Element class registered for interactive CSS generation
+      expect(result.interactiveStylesMap.size).toBe(1);
+      const [elementClass] = [...result.interactiveStylesMap.keys()];
+      expect(classMatch![1]).toContain(elementClass);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 11. Link nodes — link-object hrefs from item templates
+  // -----------------------------------------------------------------------
+  describe('link node item-template hrefs', () => {
+    test('href template resolving to a link object extracts href and target', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'links',
+        children: [{ type: 'link', href: '{{item.link}}', children: '{{item.label}}' }],
+      };
+      const cmsContext = { cms: { links: [{ label: 'About', link: { href: '/about', target: '_blank' } }] } };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('href="/about"');
+      expect(html).toContain('target="_blank"');
+      expect(html).toContain('About');
+    });
+
+    test('double-wrapped link objects are unwrapped (target hoisted from inner)', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'links',
+        children: [{ type: 'link', href: '{{item.link}}', children: 'Inner' }],
+      };
+      const cmsContext = {
+        cms: { links: [{ link: { href: { href: '/inner', target: '_blank' } } }] },
+      };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('href="/inner"');
+      expect(html).toContain('target="_blank"');
+    });
+
+    test('explicit target attribute wins over link-object target', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'links',
+        children: [{ type: 'link', href: '{{item.link}}', attributes: { target: '_self' }, children: 'Self' }],
+      };
+      const cmsContext = { cms: { links: [{ link: { href: '/x', target: '_blank' } }] } };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('target="_self"');
+      expect(html).not.toContain('target="_blank"');
+    });
+
+    test('href template resolving to a plain string is interpolated', async () => {
+      const node = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'links',
+        children: [{ type: 'link', href: '{{item.url}}', children: 'Plain' }],
+      };
+      const cmsContext = { cms: { links: [{ url: '/plain-target' }] } };
+      const html = await render(node, { cmsContext });
+      expect(html).toContain('href="/plain-target"');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 12. Component instance with responsive props.style (no node.style)
+  // -----------------------------------------------------------------------
+  describe('component instance with responsive props.style', () => {
+    test('responsive props.style is merged at desktop viewport and applied to root', async () => {
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'node', tag: 'div', children: 'Card content' },
+        },
+      };
+      const node = {
+        type: 'component',
+        component: 'BrRespCard',
+        props: { style: { base: { padding: '40px' }, mobile: { padding: '10px' } } },
+      };
+      const html = await render(node, { globalComponents: { BrRespCard: Card } });
+      expect(html).toContain('Card content');
+      // SSR renders at the desktop viewport (1920px) → base tier wins
+      expect(html).toContain('class="');
+      expect(html).toContain('p-10');
+      expect(html).not.toContain('p-2.5');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 13. <a> tag is-current appended to existing classes
+  // -----------------------------------------------------------------------
+  describe('anchor is-current class merging', () => {
+    test('is-current is appended after existing classes for the current page', async () => {
+      const node = {
+        type: 'node',
+        tag: 'a',
+        attributes: { href: '/about', class: 'nav-link' },
+        children: 'About',
+      };
+      const html = await render(node, { pagePath: '/about' });
+      expect(html).toContain('class="nav-link is-current"');
+    });
+
+    test('non-matching href keeps original classes only', async () => {
+      const node = {
+        type: 'node',
+        tag: 'a',
+        attributes: { href: '/contact', class: 'nav-link' },
+        children: 'Contact',
+      };
+      const html = await render(node, { pagePath: '/about' });
+      expect(html).toContain('class="nav-link"');
+      expect(html).not.toContain('is-current');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 14. Raw text elements (<style> / <script>) — children emitted verbatim
+  // -----------------------------------------------------------------------
+  describe('raw text elements', () => {
+    test('<style> children are not HTML-escaped', async () => {
+      const css = '.a > .b { background: url("x.png?a=1&b=2"); }';
+      const html = await render({ type: 'node', tag: 'style', children: [css] });
+      expect(html).toBe(`<style>${css}</style>`);
+    });
+
+    test('<script> string child is emitted verbatim', async () => {
+      const js = 'if (a < b && c > d) { run("x"); }';
+      const html = await render({ type: 'node', tag: 'script', children: js });
+      expect(html).toBe(`<script>${js}</script>`);
+    });
+
+    test('flatten handles numbers, nested arrays, null, and drops objects with a logged warning', async () => {
+      const logged = captureErrorLog();
+      const html = await render({
+        type: 'node',
+        tag: 'script',
+        children: ['var n = ', 42, [';', null, [' // tail']], { type: 'node', tag: 'span', children: 'dropped' }],
+      });
+      // Object children inside <script>/<style> are dropped — raw-text elements
+      // cannot contain child elements, so this is correct output behavior…
+      expect(html).toBe('<script>var n = 42; // tail</script>');
+      // …but the authored content silently vanishing is surfaced via the logger.
+      expect(logged.length).toBe(1);
+      expect(logged[0]!.location).toBe('ssrRenderer.renderHtmlElement');
+      expect(logged[0]!.context).toMatchObject({ tag: 'script' });
+    });
+
+    test('verbatim _code markers inside <script> are dropped silently (by design)', async () => {
+      const logged = captureErrorLog();
+      const html = await render({
+        type: 'node',
+        tag: 'script',
+        children: ['var a = 1;', { _code: true, expr: 'nativeOnly()' }],
+      });
+      // _code markers render natively in the Astro build and have nothing to
+      // emit in meno-core SSR — mirroring renderNode, they drop without noise.
+      expect(html).toBe('<script>var a = 1;</script>');
+      expect(logged.length).toBe(0);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 15. Locale-list interactive styles
+  // -----------------------------------------------------------------------
+  describe('locale-list interactive styles', () => {
+    const slugMappings = [{ pageId: 'about', slugs: { en: 'about', fr: 'a-propos' } }];
+
+    test('locale-list with interactiveStyles registers element class on container', async () => {
+      const node = {
+        type: 'locale-list',
+        interactiveStyles: [{ postfix: ':hover', style: { opacity: '0.7' } }],
+      };
+      const result = await renderFull(node, {
+        locale: 'en',
+        i18nConfig: I18N_EN_FR,
+        slugMappings,
+        pagePath: '/about',
+      });
+      expect(result.html).toContain('data-locale-list="true"');
+      expect(result.interactiveStylesMap.size).toBe(1);
+      const [elementClass] = [...result.interactiveStylesMap.keys()];
+      expect(result.html).toContain(`class="${elementClass}"`);
+    });
+
+    test('locale-list with generateElementClass gets element class without styles', async () => {
+      const node = { type: 'locale-list', generateElementClass: true };
+      const result = await renderFull(node, {
+        locale: 'en',
+        i18nConfig: I18N_EN_FR,
+        slugMappings,
+        pagePath: '/about',
+      });
+      expect(result.html).toMatch(/data-locale-list="true" class="[^"]+"/);
+      expect(result.interactiveStylesMap.size).toBe(0);
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 16. renderComponent error fallback
+  // -----------------------------------------------------------------------
+  describe('component render error fallback', () => {
+    function makeThrowingDef(): ComponentDefinition {
+      return {
+        component: {
+          interface: {},
+          get structure() {
+            throw new Error('structure exploded');
+          },
+        },
+      } as unknown as ComponentDefinition;
+    }
+
+    test('component that throws renders nothing outside the editor', async () => {
+      const node = { type: 'component', component: 'BrThrows', props: {} };
+      const html = await render(node, { globalComponents: { BrThrows: makeThrowingDef() } });
+      expect(html).toBe('');
+    });
+
+    test('component that throws renders a visible error placeholder in editor preview', async () => {
+      const node = { type: 'component', component: 'BrThrowsEditor', props: {} };
+      const html = await render(node, {
+        globalComponents: { BrThrowsEditor: makeThrowingDef() },
+        injectEditorAttrs: true,
+      });
+      // Errors surface in the editor instead of vanishing (see commit de167014)
+      expect(html).toContain('data-meno-render-error');
+      expect(html).toContain('⚠️');
+    });
+
+    test('a broken component does not take down sibling nodes', async () => {
+      const nodes = [
+        { type: 'node', tag: 'p', children: 'before' },
+        { type: 'component', component: 'BrThrowsSibling', props: {} },
+        { type: 'node', tag: 'p', children: 'after' },
+      ];
+      const html = await render(nodes, { globalComponents: { BrThrowsSibling: makeThrowingDef() } });
+      expect(html).toContain('before');
+      expect(html).toContain('after');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 17. renderComponent className merging onto structure roots
+  // -----------------------------------------------------------------------
+  describe('component instance class merging', () => {
+    test('instance class is appended to an HTML root with an existing class', async () => {
+      const Box: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'node', tag: 'div', attributes: { class: 'root-cls' }, children: 'Box' } as any,
+        },
+      };
+      const node = { type: 'component', component: 'BrBoxA', attributes: { class: 'inst-cls' }, props: {} };
+      const html = await render(node, { globalComponents: { BrBoxA: Box } });
+      expect(html).toMatch(/class="[^"]*root-cls[^"]*inst-cls[^"]*"/);
+    });
+
+    test('instance class lands on an HTML root without an existing class', async () => {
+      const Box: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'node', tag: 'div', children: 'Box' },
+        },
+      };
+      const node = { type: 'component', component: 'BrBoxB', attributes: { class: 'only-inst' }, props: {} };
+      const html = await render(node, { globalComponents: { BrBoxB: Box } });
+      expect(html).toContain('only-inst');
+    });
+
+    test('instance class flows through a nested-component root to the final element', async () => {
+      const Inner: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'node', tag: 'div', children: 'Inner' },
+        },
+      };
+      const Outer: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'component', component: 'BrNestedInner', props: {} } as any,
+        },
+      };
+      const node = { type: 'component', component: 'BrNestedOuter', attributes: { class: 'outer-cls' }, props: {} };
+      const html = await render(node, {
+        globalComponents: { BrNestedOuter: Outer, BrNestedInner: Inner },
+      });
+      expect(html).toContain('Inner');
+      expect(html).toContain('outer-cls');
+    });
+  });
+
+  // -----------------------------------------------------------------------
+  // 18. renderPageSSR — CMS template in og:image
+  // -----------------------------------------------------------------------
+  describe('renderPageSSR og:image CMS template', () => {
+    test('processes {{cms.*}} in meta.ogImage', async () => {
+      const pageData: JSONPage = {
+        root: { type: 'node', tag: 'div', children: 'Body' } as any,
+        meta: { title: 'Page', ogImage: '{{cms.image}}' },
+      } as JSONPage;
+      const cmsContext = { cms: { image: '/img/hero.png' } };
+      const result = await renderPageSSR(pageData, {}, '/', '', undefined, undefined, undefined, cmsContext);
+      expect(result.meta).toContain('/img/hero.png');
+    });
+  });
+});