meno-core 1.0.48 → 1.0.49

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: () => {},
@@ -3109,6 +3110,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}}' });
+    });
   });
 
   // -----------------------------------------------------------------------
@@ -4019,4 +4217,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"');
+    });
+  });
 });