meno-core 1.0.48 → 1.0.50

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

@@ -43,6 +43,7 @@ mock.module('./imageMetadata', () => ({
 mock.module('../services/configService', () => ({
   configService: {
     getImageFormat: () => mockImageFormat,
+    getResponsiveScales: () => ({ enabled: false, baseReference: 16 }),
     load: async () => {},
     isLoaded: () => true,
     reset: () => {},
@@ -440,6 +441,82 @@ describe('ssrRenderer', () => {
     });
   });
 
+  // -----------------------------------------------------------------------
+  // 6b. _i18n value resolution on node children + attributes
+  // -----------------------------------------------------------------------
+  describe('buildComponentHTML - _i18n on children and attributes', () => {
+    const en = { _i18n: true, en: 'Hello', pl: 'Cześć' };
+    const i18nConfig = {
+      defaultLocale: 'en',
+      locales: [
+        { code: 'en', name: 'EN', nativeName: 'English', langTag: 'en-US' },
+        { code: 'pl', name: 'PL', nativeName: 'Polski', langTag: 'pl-PL' },
+      ],
+    };
+
+    test('resolves _i18n object as direct children for the default locale', async () => {
+      const node = { type: 'node', tag: 'h1', children: en };
+      const html = await render(node, { i18nConfig });
+      expect(html).toContain('Hello');
+      expect(html).not.toContain('Cześć');
+    });
+
+    test('resolves _i18n object as direct children for an explicit locale', async () => {
+      const node = { type: 'node', tag: 'h1', children: en };
+      const html = await render(node, { locale: 'pl', i18nConfig });
+      expect(html).toContain('Cześć');
+      expect(html).not.toContain('Hello');
+    });
+
+    test('resolves _i18n objects inside an array of children, preserving siblings', async () => {
+      const node = {
+        type: 'node',
+        tag: 'p',
+        children: [
+          en,
+          ' literal ',
+          { type: 'node', tag: 'span', children: 'static' },
+        ],
+      };
+      const html = await render(node, { i18nConfig });
+      expect(html).toContain('Hello');
+      expect(html).toContain(' literal ');
+      expect(html).toContain('<span');
+      expect(html).toContain('static');
+    });
+
+    test('resolves _i18n object on attribute values', async () => {
+      const node = {
+        type: 'node',
+        tag: 'img',
+        attributes: {
+          src: '/x.png',
+          alt: { _i18n: true, en: 'Photo', pl: 'Zdjęcie' },
+        },
+      };
+      const html = await render(node, { locale: 'pl', i18nConfig });
+      expect(html).toContain('alt="Zdjęcie"');
+    });
+
+    test('falls back to defaultLocale when the active locale key is missing', async () => {
+      const valueWithoutDe = { _i18n: true, en: 'Hello', pl: 'Cześć' };
+      const node = { type: 'node', tag: 'h1', children: valueWithoutDe };
+      const html = await render(node, { locale: 'de', i18nConfig });
+      // resolveTranslation falls back to defaultLocale (en)
+      expect(html).toContain('Hello');
+    });
+
+    test('precedence: _i18n: true wins over a stray type/tag on the same object', async () => {
+      // If someone accidentally writes both _i18n and type on the same object,
+      // i18n wins — the renderer treats it as a localized string, not a node.
+      const ambiguous = { _i18n: true, type: 'node', tag: 'div', en: 'X', pl: 'Y' };
+      const node = { type: 'node', tag: 'h1', children: ambiguous };
+      const html = await render(node, { locale: 'pl', i18nConfig });
+      expect(html).toContain('Y');
+      expect(html).not.toContain('<div');
+    });
+  });
+
   // -----------------------------------------------------------------------
   // 7. Link nodes
   // -----------------------------------------------------------------------
@@ -3109,6 +3186,203 @@ describe('ssrRenderer', () => {
       expect(html).toContain('Author a1');
       expect(html).toContain('Author a2');
     });
+
+    test('inner list items dotted-ref resolves against host component prop', async () => {
+      // {{config.0.tagIds}} is a dotted template — processStructure leaves it literal
+      // (hasItemTemplates returns true for `\w+\.\w+`). The SSR items resolver must
+      // see the host component's `config` prop in its scope.
+      const calledWith: string[][] = [];
+      const mockCmsService = {
+        getItemsByIds: async (_collection: string, ids: string[]) => {
+          calledWith.push(ids);
+          return ids.map(id => ({ _id: id, name: `Tag ${id}` }));
+        },
+        getSchema: () => undefined,
+      };
+
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            config: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'tags',
+            itemAs: 'tag',
+            items: '{{config.0.tagIds}}',
+            children: [
+              { type: 'node', tag: 'span', children: '{{tag.name}}' },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Card',
+        props: {
+          config: [{ tagIds: ['t1', 't2'] }],
+        },
+      };
+
+      const html = await render(node, {
+        globalComponents: { Card },
+        cmsService: mockCmsService,
+      });
+
+      expect(calledWith).toEqual([['t1', 't2']]);
+      expect(html).toContain('Tag t1');
+      expect(html).toContain('Tag t2');
+    });
+
+    test('inner list filter dotted-ref resolves against host component prop', async () => {
+      // {{config.0.collection}} is a dotted template — processStructure leaves it literal.
+      // SSR's resolveFilterTemplates must see the host component's `config` prop.
+      const queries: any[] = [];
+      const mockCmsService = {
+        queryItems: async (q: any) => {
+          queries.push(q);
+          return [{ _id: 'p1', title: 'Hello' }];
+        },
+        getSchema: () => undefined,
+      };
+
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            config: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'posts',
+            itemAs: 'post',
+            filter: { category: '{{config.0.collection}}' },
+            children: [
+              { type: 'node', tag: 'div', children: '{{post.title}}' },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Card',
+        props: {
+          config: [{ collection: 'news' }],
+        },
+      };
+
+      const html = await render(node, {
+        globalComponents: { Card },
+        cmsService: mockCmsService,
+      });
+
+      expect(queries.length).toBe(1);
+      expect(queries[0].filter).toEqual({ category: 'news' });
+      expect(html).toContain('Hello');
+    });
+
+    test('parent list loop variable wins over a colliding host component prop', async () => {
+      // Outer CMS list iterates with itemAs: 'tag', producing a templateContext entry
+      // named `tag` set to the current item. The host Card also receives a prop named
+      // `tag` set to a fake value. The inner list's items: {{tag.id}} must resolve to
+      // the parent loop variable's id (precedence: parent loop variable > component props).
+      const calledWith: string[][] = [];
+      const mockCmsService = {
+        // Outer iteration: itemAs: 'tag' makes templateContext.tag = item, so the
+        // inner template `{{tag.id}}` looks up item.id directly.
+        queryItems: async () => [
+          { _id: 'p1', id: 'real-1' },
+          { _id: 'p2', id: 'real-2' },
+        ],
+        getItemsByIds: async (_collection: string, ids: string[]) => {
+          calledWith.push(ids);
+          return ids.map(id => ({ _id: id, name: `Item ${id}` }));
+        },
+        getSchema: () => undefined,
+      };
+
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            // type: 'list' so the array prop value passes validation. The prop
+            // `tag` will land in componentResolvedProps; the parent loop var
+            // `tag` (set to the current outer item) will land in templateContext.
+            tag: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'collection',
+            source: 'tags',
+            itemAs: 'inner',
+            items: '{{tag.id}}',
+            children: [
+              { type: 'node', tag: 'span', children: '{{inner.name}}' },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        itemAs: 'tag',
+        children: [
+          {
+            type: 'component',
+            component: 'Card',
+            props: {
+              // Static fake value for the colliding prop; the inner template
+              // must resolve to the parent loop var, not this.
+              tag: [{ id: 'fake-prop-id' }],
+            },
+          },
+        ],
+      };
+
+      await render(node, {
+        globalComponents: { Card },
+        cmsService: mockCmsService,
+      });
+
+      expect(calledWith).toEqual([['real-1'], ['real-2']]);
+    });
+
+    test('page-root filter does not silently resolve {{cms.X}} (regression)', async () => {
+      // Without a host component, ctx.componentResolvedProps is undefined and
+      // ctx.templateContext is undefined → buildListResolutionScope returns
+      // undefined → resolveFilterTemplates leaves filter values literal.
+      // This pins down the documented behavior: the cmsContext namespace does
+      // NOT silently merge into filter scope.
+      const queries: any[] = [];
+      const mockCmsService = {
+        queryItems: async (q: any) => {
+          queries.push(q);
+          return [];
+        },
+        getSchema: () => undefined,
+      };
+
+      const node = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        filter: { category: '{{cms.something}}' },
+        children: [{ type: 'node', tag: 'div', children: '{{post.title}}' }],
+      };
+
+      // cmsContext is provided, but page-root filter must not pull from it.
+      await render(node, {
+        cmsService: mockCmsService,
+        cmsContext: { cms: { something: 'shouldNotBeUsed' } },
+      });
+
+      expect(queries.length).toBe(1);
+      expect(queries[0].filter).toEqual({ category: '{{cms.something}}' });
+    });
   });
 
   // -----------------------------------------------------------------------
@@ -3862,6 +4136,188 @@ describe('ssrRenderer', () => {
     });
   });
 
+  // ---------------------------------------------------------------------------
+  // List with sourceType: 'prop' placed inside another component's slot
+  // ---------------------------------------------------------------------------
+  describe('buildComponentHTML - prop-source list inside slotted component', () => {
+    test('list with bare prop-name source resolves against host props when inside a slot', async () => {
+      // Section: a simple slot host (mirrors the user's Section component)
+      const Section: ComponentDefinition = {
+        component: {
+          interface: {
+            theme: { type: 'string', default: 'blue' },
+          },
+          structure: {
+            type: 'node',
+            tag: 'section',
+            children: [
+              { type: 'slot' },
+            ],
+          },
+        },
+      };
+
+      // Host: defines `testimonials`, renders a Section whose slot contains
+      // a list bound to the host's `testimonials` prop with a bare name.
+      const Host: ComponentDefinition = {
+        component: {
+          interface: {
+            testimonials: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'node',
+            tag: 'div',
+            children: [
+              {
+                type: 'component',
+                component: 'Section',
+                props: { theme: 'blue' },
+                children: [
+                  {
+                    type: 'list',
+                    sourceType: 'prop',
+                    source: 'testimonials',
+                    children: [
+                      { type: 'node', tag: 'p', children: '{{item.name}}' },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Host',
+        props: {
+          testimonials: [
+            { name: 'Alice' },
+            { name: 'Bob' },
+            { name: 'Carol' },
+          ],
+        },
+      };
+
+      const html = await render(node, { globalComponents: { Host, Section } });
+      expect(html).toContain('<section');
+      expect(html).toContain('Alice');
+      expect(html).toContain('Bob');
+      expect(html).toContain('Carol');
+    });
+
+    test('list with {{template}} source also resolves inside a slot', async () => {
+      const Section: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'node',
+            tag: 'section',
+            children: [{ type: 'slot' }],
+          },
+        },
+      };
+
+      const Host: ComponentDefinition = {
+        component: {
+          interface: {
+            testimonials: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'component',
+            component: 'Section',
+            children: [
+              {
+                type: 'list',
+                sourceType: 'prop',
+                source: '{{testimonials}}',
+                children: [
+                  { type: 'node', tag: 'p', children: '{{item.name}}' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Host',
+        props: { testimonials: [{ name: 'Dana' }] },
+      };
+
+      const html = await render(node, { globalComponents: { Host, Section } });
+      expect(html).toContain('Dana');
+    });
+
+    test('bare prop-name source still works when list is in component own structure (no slot)', async () => {
+      const Direct: ComponentDefinition = {
+        component: {
+          interface: {
+            items: { type: 'list' as any, default: [] },
+          },
+          structure: {
+            type: 'list',
+            sourceType: 'prop',
+            source: 'items',
+            children: [
+              { type: 'node', tag: 'li', children: '{{item.label}}' },
+            ],
+          },
+        },
+      };
+
+      const node = {
+        type: 'component',
+        component: 'Direct',
+        props: { items: [{ label: 'Eve' }, { label: 'Frank' }] },
+      };
+
+      const html = await render(node, { globalComponents: { Direct } });
+      expect(html).toContain('Eve');
+      expect(html).toContain('Frank');
+    });
+
+    test('list source stays a string and renders empty when host has no matching prop', async () => {
+      const Section: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'node',
+            tag: 'section',
+            children: [{ type: 'slot' }],
+          },
+        },
+      };
+
+      const Host: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'component',
+            component: 'Section',
+            children: [
+              {
+                type: 'list',
+                sourceType: 'prop',
+                source: 'missing',
+                children: [
+                  { type: 'node', tag: 'p', children: '{{item}}' },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const node = { type: 'component', component: 'Host' };
+      const html = await render(node, { globalComponents: { Host, Section } });
+      // No items - list renders empty
+      expect(html).not.toContain('<p');
+    });
+  });
+
   describe('CMS link localization', () => {
     const i18nConfig = {
       defaultLocale: 'en',
@@ -4019,4 +4475,112 @@ describe('ssrRenderer', () => {
       expect(html).toContain('href="/fr/a-propos"');
     });
   });
+
+  // Editor attrs are emitted only when buildComponentHTML's injectEditorAttrs flag is on.
+  // These attributes (data-element-path, data-cms-item-index, data-cms-context,
+  // data-component-root, data-parent-component, data-component-context) drive
+  // XRayOverlay and the click-to-select handler in static (SSR) preview mode.
+  describe('buildComponentHTML - editor attrs (preview-only)', () => {
+    test('omits data-element-path by default', async () => {
+      const node = { type: 'node', tag: 'div', children: ['hello'] };
+      const result = await buildComponentHTML(node as any);
+      expect(result.html).not.toContain('data-element-path');
+    });
+
+    test('emits data-element-path on every element when injectEditorAttrs is true', async () => {
+      const node = {
+        type: 'node',
+        tag: 'div',
+        children: [
+          { type: 'node', tag: 'span', children: ['hi'] },
+          { type: 'node', tag: 'a', attributes: { href: '/x' }, children: ['link'] },
+        ],
+      };
+      const result = await buildComponentHTML(
+        node as any,
+        {}, {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+      );
+      expect(result.html).toContain('data-element-path="0"');
+      expect(result.html).toContain('data-element-path="0,0"');
+      expect(result.html).toContain('data-element-path="0,1"');
+    });
+
+    test('emits data-cms-item-index and data-cms-context for elements inside a list', async () => {
+      // List in prop mode under a component resolves items from componentResolvedProps.
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {
+            items: { type: 'list', default: [{ label: 'A' }, { label: 'B' }] } as any,
+          },
+          structure: {
+            type: 'node',
+            tag: 'div',
+            children: [{
+              type: 'list',
+              sourceType: 'prop',
+              source: 'items',
+              children: [{ type: 'node', tag: 'p', children: '{{item.label}}' }],
+            }],
+          },
+        },
+      };
+      const result = await buildComponentHTML(
+        { type: 'component', component: 'Card' } as any,
+        { Card },
+        {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+      );
+      expect(result.html).toContain('data-cms-item-index="0"');
+      expect(result.html).toContain('data-cms-item-index="1"');
+      expect(result.html).toContain('data-cms-context=');
+    });
+
+    test('marks the component instance root with data-component-root', async () => {
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: { type: 'node', tag: 'div', children: ['inner'] },
+        },
+      };
+      const result = await buildComponentHTML(
+        { type: 'component', component: 'Card' } as any,
+        { Card },
+        {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+      );
+      expect(result.html).toContain('data-component-root="true"');
+      expect(result.html).toContain('data-component-context="Card"');
+    });
+
+    test('emits page-absolute data-element-path for elements inside a component', async () => {
+      // Component has a single wrapper <div> with a <span> child. The page hosts
+      // the component as the only child of its root <div>, so:
+      //   page root <div>     → [0]
+      //   Card root <div>     → [0,0]
+      //   inner <span>        → [0,0,0]
+      // Before the fix SSR reset elementPath inside components, so the inner
+      // span landed at [0] (component-relative) and XRay couldn't find it.
+      const Card: ComponentDefinition = {
+        component: {
+          interface: {},
+          structure: {
+            type: 'node',
+            tag: 'div',
+            children: [{ type: 'node', tag: 'span', children: 'inner' }],
+          },
+        },
+      };
+      const page = {
+        type: 'node',
+        tag: 'div',
+        children: [{ type: 'component', component: 'Card' }],
+      };
+      const result = await buildComponentHTML(
+        page as any,
+        { Card },
+        {}, undefined, undefined, undefined, undefined, undefined, undefined, undefined, true,
+      );
+      expect(result.html).toContain('data-element-path="0"');
+      expect(result.html).toContain('data-element-path="0,0"');
+      expect(result.html).toContain('data-element-path="0,0,0"');
+    });
+  });
 });