meno-core 1.0.53 → 1.0.54

package/lib/shared/tree/PathBuilder.test.ts

@@ -32,11 +32,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
       // Component structure: Header (0), Slot (1), Footer (2)
       const componentStructure = {
         tag: 'div',
-        children: [
-          { tag: 'header', children: 'Header' },
-          { type: 'slot' },
-          { tag: 'footer', children: 'Footer' },
-        ],
+        children: [{ tag: 'header', children: 'Header' }, { type: 'slot' }, { tag: 'footer', children: 'Footer' }],
       };
 
       // Editing component with 3 children in the slot
@@ -55,13 +51,11 @@ describe('PathBuilder - post-slot element path calculation', () => {
       const paths = buildTreePathsWithRendered(
         wrapAsComponentData(componentStructure),
         undefined, // no registry needed for this test
-        navigationHistory
+        navigationHistory,
       );
 
       // Find footer path (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
       // Footer should be at rendered [0, 4] because:
@@ -73,11 +67,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
     it('should not offset pre-slot elements', () => {
       const componentStructure = {
         tag: 'div',
-        children: [
-          { tag: 'header', children: 'Header' },
-          { type: 'slot' },
-          { tag: 'footer', children: 'Footer' },
-        ],
+        children: [{ tag: 'header', children: 'Header' }, { type: 'slot' }, { tag: 'footer', children: 'Footer' }],
       };
 
       const navigationHistory: NavigationContext[] = [
@@ -91,16 +81,10 @@ describe('PathBuilder - post-slot element path calculation', () => {
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(componentStructure),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(componentStructure), undefined, navigationHistory);
 
       // Find header path (logical [0, 0])
-      const headerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 0
-      );
+      const headerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 0);
 
       expect(headerPathData).toBeDefined();
       // Header should stay at rendered [0, 0] - no offset for pre-slot elements
@@ -110,11 +94,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
     it('should handle empty slot (no offset needed)', () => {
       const componentStructure = {
         tag: 'div',
-        children: [
-          { tag: 'header', children: 'Header' },
-          { type: 'slot' },
-          { tag: 'footer', children: 'Footer' },
-        ],
+        children: [{ tag: 'header', children: 'Header' }, { type: 'slot' }, { tag: 'footer', children: 'Footer' }],
       };
 
       const navigationHistory: NavigationContext[] = [
@@ -125,16 +105,10 @@ describe('PathBuilder - post-slot element path calculation', () => {
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(componentStructure),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(componentStructure), undefined, navigationHistory);
 
       // Find footer path (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
       // With empty slot, footer stays at rendered [0, 2] (no offset)
@@ -155,7 +129,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
           { type: 'component', component: 'Section' }, // 1
           { type: 'component', component: 'Section' }, // 2
           { type: 'component', component: 'Section' }, // 3
-          { type: 'slot' },         // 4 - CaseStudyLayout's slot
+          { type: 'slot' }, // 4 - CaseStudyLayout's slot
           { type: 'component', component: 'CtaSection' }, // 5 - after slot
         ],
       };
@@ -163,23 +137,26 @@ describe('PathBuilder - post-slot element path calculation', () => {
       // Mock registry with Layout structure
       // Layout has slot at [0, 1, 0] (div → main → slot)
       const mockRegistry = new Map([
-        ['Layout', {
-          component: {
-            structure: {
-              tag: 'div',
-              children: [
-                { component: 'Navigation' }, // 0
-                {
-                  tag: 'main',
-                  children: [
-                    { type: 'slot' }, // slot at index 0 within main
-                  ],
-                }, // 1
-                { component: 'Footer' }, // 2
-              ],
+        [
+          'Layout',
+          {
+            component: {
+              structure: {
+                tag: 'div',
+                children: [
+                  { component: 'Navigation' }, // 0
+                  {
+                    tag: 'main',
+                    children: [
+                      { type: 'slot' }, // slot at index 0 within main
+                    ],
+                  }, // 1
+                  { component: 'Footer' }, // 2
+                ],
+              },
             },
           },
-        }],
+        ],
       ]);
 
       // Editing CaseStudyLayout from a page that passes 1 child to slot
@@ -187,22 +164,18 @@ describe('PathBuilder - post-slot element path calculation', () => {
         {
           componentInstancePath: [0],
           componentInstanceRenderedPath: [0],
-          instanceChildren: [
-            { component: 'Section', children: 'Instance content' },
-          ] as any, // 1 child passed to CaseStudyLayout's slot
+          instanceChildren: [{ component: 'Section', children: 'Instance content' }] as any, // 1 child passed to CaseStudyLayout's slot
         },
       ];
 
       const paths = buildTreePathsWithRendered(
         wrapAsComponentData(componentStructure),
         mockRegistry,
-        navigationHistory
+        navigationHistory,
       );
 
       // Find CtaSection path (logical [0, 5])
-      const ctaSectionPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 5
-      );
+      const ctaSectionPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 5);
 
       expect(ctaSectionPathData).toBeDefined();
 
@@ -222,22 +195,25 @@ describe('PathBuilder - post-slot element path calculation', () => {
         component: 'Layout',
         children: [
           { type: 'component', component: 'Section' }, // 0
-          { type: 'slot' },         // 1 - slot
+          { type: 'slot' }, // 1 - slot
           { type: 'component', component: 'CtaSection' }, // 2 - after slot
         ],
       };
 
       const mockRegistry = new Map([
-        ['Layout', {
-          component: {
-            structure: {
-              tag: 'div',
-              children: [
-                { type: 'slot' }, // Layout's slot at [0, 0]
-              ],
+        [
+          'Layout',
+          {
+            component: {
+              structure: {
+                tag: 'div',
+                children: [
+                  { type: 'slot' }, // Layout's slot at [0, 0]
+                ],
+              },
             },
           },
-        }],
+        ],
       ]);
 
       // 3 children passed to slot
@@ -245,24 +221,18 @@ describe('PathBuilder - post-slot element path calculation', () => {
         {
           componentInstancePath: [0],
           componentInstanceRenderedPath: [0],
-          instanceChildren: [
-            { tag: 'p' },
-            { tag: 'p' },
-            { tag: 'p' },
-          ] as any,
+          instanceChildren: [{ tag: 'p' }, { tag: 'p' }, { tag: 'p' }] as any,
         },
       ];
 
       const paths = buildTreePathsWithRendered(
         wrapAsComponentData(componentStructure),
         mockRegistry,
-        navigationHistory
+        navigationHistory,
       );
 
       // Find CtaSection path (logical [0, 2])
-      const ctaSectionPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const ctaSectionPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(ctaSectionPathData).toBeDefined();
 
@@ -284,11 +254,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
       // Card structure: Header (0), Slot (1), Footer (2)
       const cardStructure = {
         tag: 'div',
-        children: [
-          { tag: 'div', children: 'Card Header' },
-          { type: 'slot' },
-          { tag: 'div', children: 'Card Footer' },
-        ],
+        children: [{ tag: 'div', children: 'Card Header' }, { type: 'slot' }, { tag: 'div', children: 'Card Footer' }],
       };
 
       // Navigation history: first entered Section, then Card
@@ -316,16 +282,10 @@ describe('PathBuilder - post-slot element path calculation', () => {
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(cardStructure),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(cardStructure), undefined, navigationHistory);
 
       // Find Card's footer (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
 
@@ -342,11 +302,7 @@ describe('PathBuilder - post-slot element path calculation', () => {
 
       const componentC = {
         tag: 'div',
-        children: [
-          { tag: 'span', children: 'C Header' },
-          { type: 'slot' },
-          { tag: 'span', children: 'C Footer' },
-        ],
+        children: [{ tag: 'span', children: 'C Header' }, { type: 'slot' }, { tag: 'span', children: 'C Footer' }],
       };
 
       // Each componentInstancePath is relative to the current view:
@@ -368,25 +324,14 @@ describe('PathBuilder - post-slot element path calculation', () => {
         {
           componentInstancePath: [0, 0], // C is first child in B's slot
           componentInstanceRenderedPath: [0, 0],
-          instanceChildren: [
-            { tag: 'div' },
-            { tag: 'div' },
-            { tag: 'div' },
-            { tag: 'div' },
-          ] as any, // C has 4 children
+          instanceChildren: [{ tag: 'div' }, { tag: 'div' }, { tag: 'div' }, { tag: 'div' }] as any, // C has 4 children
         },
       ];
 
-      const paths = buildTreePathsWithRendered(
-        wrapAsComponentData(componentC),
-        undefined,
-        navigationHistory
-      );
+      const paths = buildTreePathsWithRendered(wrapAsComponentData(componentC), undefined, navigationHistory);
 
       // Find C's footer (logical [0, 2])
-      const footerPathData = paths.find(
-        (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2
-      );
+      const footerPathData = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 2);
 
       expect(footerPathData).toBeDefined();
 
@@ -406,15 +351,11 @@ describe('computeCumulativeInstancePath', () => {
   });
 
   it('returns the first entry path verbatim when there is one entry', () => {
+    expect(computeCumulativeInstancePath([{ componentInstancePath: [0], componentInstanceRenderedPath: [0] }])).toEqual(
+      [0],
+    );
     expect(
-      computeCumulativeInstancePath([
-        { componentInstancePath: [0], componentInstanceRenderedPath: [0] },
-      ]),
-    ).toEqual([0]);
-    expect(
-      computeCumulativeInstancePath([
-        { componentInstancePath: [0, 2], componentInstanceRenderedPath: [0, 2] },
-      ]),
+      computeCumulativeInstancePath([{ componentInstancePath: [0, 2], componentInstanceRenderedPath: [0, 2] }]),
     ).toEqual([0, 2]);
   });
 
@@ -436,10 +377,7 @@ describe('computeCumulativeInstancePath', () => {
 
   it('falls back to componentInstancePath when componentInstanceRenderedPath is missing', () => {
     expect(
-      computeCumulativeInstancePath([
-        { componentInstancePath: [0, 2] },
-        { componentInstancePath: [0, 1] },
-      ]),
+      computeCumulativeInstancePath([{ componentInstancePath: [0, 2] }, { componentInstancePath: [0, 1] }]),
     ).toEqual([0, 2, 1]);
   });
 });
@@ -467,16 +405,10 @@ describe('slotRenderedPaths on slot entries', () => {
       },
     ];
 
-    const paths = buildTreePathsWithRendered(
-      wrapAsComponentData(layoutStructure),
-      undefined,
-      navigationHistory,
-    );
+    const paths = buildTreePathsWithRendered(wrapAsComponentData(layoutStructure), undefined, navigationHistory);
 
     // Slot's logical path is [0, 1] (second child of structure root).
-    const slotEntry = paths.find(
-      (p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 1,
-    );
+    const slotEntry = paths.find((p) => p.path.length === 2 && p.path[0] === 0 && p.path[1] === 1);
     expect(slotEntry).toBeDefined();
     expect(slotEntry!.renderedPath).toEqual([0, 1]);
     // With 7 instance children, the slot occupies positions 1..7 under the
@@ -503,16 +435,8 @@ describe('slotRenderedPaths on slot entries', () => {
         instanceChildren: [{ type: 'component' as const, component: 'Only' }] as any,
       },
     ];
-    const noChildrenPaths = buildTreePathsWithRendered(
-      wrapAsComponentData(layoutStructure),
-      undefined,
-      noChildren,
-    );
-    const oneChildPaths = buildTreePathsWithRendered(
-      wrapAsComponentData(layoutStructure),
-      undefined,
-      oneChild,
-    );
+    const noChildrenPaths = buildTreePathsWithRendered(wrapAsComponentData(layoutStructure), undefined, noChildren);
+    const oneChildPaths = buildTreePathsWithRendered(wrapAsComponentData(layoutStructure), undefined, oneChild);
 
     const slotEntryNo = noChildrenPaths.find((p) => p.path.length === 2 && p.path[1] === 1);
     const slotEntryOne = oneChildPaths.find((p) => p.path.length === 2 && p.path[1] === 1);

package/lib/shared/tree/PathBuilder.ts

@@ -16,8 +16,8 @@ import { isComponentNode, isSlotMarker, isLocaleListNode, isCMSListNode, isListN
  * Node path data containing both logical and rendered paths
  */
 export interface NodePathData {
-  path: Path;           // Logical path in data structure
-  renderedPath: Path;   // Path adjusted for component structure wrapping
+  path: Path; // Logical path in data structure
+  renderedPath: Path; // Path adjusted for component structure wrapping
   /**
    * For slot markers being edited from inside their host component: the
    * page-absolute rendered paths of every DOM position the slot occupies
@@ -50,6 +50,9 @@ function findSlotMarkerPath(structure: any, currentPath: Path = [0]): Path | nul
   for (let i = 0; i < structure.children.length; i++) {
     const child = structure.children[i];
 
+    // Text children can't be (or contain) slot markers
+    if (typeof child === 'string') continue;
+
     if (isSlotMarker(child)) {
       return [...currentPath, i];
     }
@@ -86,7 +89,7 @@ function calculateRenderedPath(
   logicalPath: Path,
   currentNode: any,
   globalComponentRegistry: any,
-  navigationHistory?: NavigationContext[]
+  navigationHistory?: NavigationContext[],
 ): Path {
   if (!currentNode || logicalPath.length === 0) {
     return logicalPath;
@@ -135,7 +138,7 @@ function calculateRenderedPath(
   // Build rendered path incrementally by walking through the logical path
   // and checking if each parent is a component with a nested slot
   let renderedPath: Path = [0];
-  let node = currentNode;
+  let node: ComponentNode | null | undefined = currentNode;
 
   for (let i = 1; i < logicalPath.length; i++) {
     let childIndex = logicalPath[i];
@@ -181,7 +184,9 @@ function calculateRenderedPath(
       renderedPath = [...renderedPath, childIndex];
     }
 
-    node = childNode;
+    // Text children have no children of their own — the next iteration's
+    // hasChildren() check breaks out, same as before, but keep `node` typed.
+    node = typeof childNode === 'string' ? undefined : childNode;
   }
 
   return renderedPath;
@@ -197,16 +202,16 @@ function calculateRenderedPath(
  * CMS item context for elements inside CMS List(s)
  */
 export interface CMSItemContext {
-  itemIndexPath: number[];  // e.g., [0] for single list, [0, 2] for nested
-  listPaths: Path[];        // Parallel array of list node paths
+  itemIndexPath: number[]; // e.g., [0] for single list, [0, 2] for nested
+  listPaths: Path[]; // Parallel array of list node paths
 }
 
 export interface NavigationContext {
-  file?: any;  // FileItem - optional as not all contexts have file
+  file?: any; // FileItem - optional as not all contexts have file
   componentInstancePath: Path | null;
-  componentInstanceRenderedPath?: Path | null;  // Rendered path for accurate DOM queries
-  instanceChildren?: Array<ComponentNode | string>;  // Children of the component instance (for path offset calculation)
-  cmsItemContext?: CMSItemContext | null;  // CMS context when editing component inside CMS List
+  componentInstanceRenderedPath?: Path | null; // Rendered path for accurate DOM queries
+  instanceChildren?: Array<ComponentNode | string>; // Children of the component instance (for path offset calculation)
+  cmsItemContext?: CMSItemContext | null; // CMS context when editing component inside CMS List
 }
 
 /**
@@ -218,16 +223,13 @@ export interface NavigationContext {
  * buildTreePathsWithRendered prepends, and to know how many leading elements
  * to strip when extracting a component-internal path back out.
  */
-export function computeCumulativeInstancePath(
-  navigationHistory: NavigationContext[] | undefined,
-): Path | null {
+export function computeCumulativeInstancePath(navigationHistory: NavigationContext[] | undefined): Path | null {
   if (!navigationHistory || navigationHistory.length === 0) return null;
   let cumulative: Path | null =
     navigationHistory[0].componentInstanceRenderedPath ?? navigationHistory[0].componentInstancePath;
   if (!cumulative) return null;
   for (let i = 1; i < navigationHistory.length; i++) {
-    const next =
-      navigationHistory[i].componentInstanceRenderedPath ?? navigationHistory[i].componentInstancePath;
+    const next = navigationHistory[i].componentInstanceRenderedPath ?? navigationHistory[i].componentInstancePath;
     if (next) {
       cumulative = [...cumulative, ...next.slice(1)];
     }
@@ -264,7 +266,7 @@ export function computeCumulativeInstancePath(
 export function buildTreePathsWithRendered(
   pageData: PageData,
   globalComponentRegistry?: any,
-  navigationHistory?: NavigationContext[]
+  navigationHistory?: NavigationContext[],
 ): NodePathData[] {
   const rootData = getRootData(pageData);
   if (!rootData) return [];
@@ -281,9 +283,9 @@ export function buildTreePathsWithRendered(
   // post-slot offset (the LAST navigation entry's instanceChildren).
   const hostInstanceChildrenCount =
     navigationHistory && navigationHistory.length > 0
-      ? (Array.isArray(navigationHistory[navigationHistory.length - 1].instanceChildren)
-          ? navigationHistory[navigationHistory.length - 1].instanceChildren!.length
-          : 0)
+      ? Array.isArray(navigationHistory[navigationHistory.length - 1].instanceChildren)
+        ? navigationHistory[navigationHistory.length - 1].instanceChildren!.length
+        : 0
       : 0;
 
   function traverse(node: ComponentNode, currentPath: Path = [0]): void {
@@ -308,8 +310,8 @@ export function buildTreePathsWithRendered(
         : undefined;
 
     result.push({
-      path: currentPath,  // Keep logical path component-relative
-      renderedPath: adjustedRenderedPath,  // Adjust rendered path for page-relative queries
+      path: currentPath, // Keep logical path component-relative
+      renderedPath: adjustedRenderedPath, // Adjust rendered path for page-relative queries
       ...(slotRenderedPaths ? { slotRenderedPaths } : {}),
     });
 
@@ -321,7 +323,15 @@ export function buildTreePathsWithRendered(
         if (
           typeof child === 'object' &&
           child !== null &&
-          ('tag' in child || 'component' in child || 'html' in child || 'src' in child || 'href' in child || isLocaleListNode(child) || isCMSListNode(child) || isListNode(child) || (cumulativeInstancePath && isSlotMarker(child)))
+          ('tag' in child ||
+            'component' in child ||
+            'html' in child ||
+            'src' in child ||
+            'href' in child ||
+            isLocaleListNode(child) ||
+            isCMSListNode(child) ||
+            isListNode(child) ||
+            (cumulativeInstancePath && isSlotMarker(child)))
         ) {
           const childPath = [...currentPath, index];
           traverse(child as ComponentNode, childPath);
@@ -365,7 +375,7 @@ function expandSlotRenderedPaths(slotRenderedPath: Path, instanceChildrenCount:
 export function buildComponentTreePaths(
   componentStructure: ComponentNode,
   globalComponentRegistry?: any,
-  navigationHistory?: NavigationContext[]
+  navigationHistory?: NavigationContext[],
 ): NodePathData[] {
   const result: NodePathData[] = [];
 
@@ -374,9 +384,9 @@ export function buildComponentTreePaths(
 
   const hostInstanceChildrenCount =
     navigationHistory && navigationHistory.length > 0
-      ? (Array.isArray(navigationHistory[navigationHistory.length - 1].instanceChildren)
-          ? navigationHistory[navigationHistory.length - 1].instanceChildren!.length
-          : 0)
+      ? Array.isArray(navigationHistory[navigationHistory.length - 1].instanceChildren)
+        ? navigationHistory[navigationHistory.length - 1].instanceChildren!.length
+        : 0
       : 0;
 
   function traverse(node: ComponentNode, currentPath: Path = [0]): void {
@@ -409,7 +419,15 @@ export function buildComponentTreePaths(
         if (
           typeof child === 'object' &&
           child !== null &&
-          ('tag' in child || 'component' in child || 'html' in child || 'src' in child || 'href' in child || isLocaleListNode(child) || isCMSListNode(child) || isListNode(child) || isSlotMarker(child))
+          ('tag' in child ||
+            'component' in child ||
+            'html' in child ||
+            'src' in child ||
+            'href' in child ||
+            isLocaleListNode(child) ||
+            isCMSListNode(child) ||
+            isListNode(child) ||
+            isSlotMarker(child))
         ) {
           const childPath = [...currentPath, index];
           traverse(child as ComponentNode, childPath);
@@ -425,24 +443,16 @@ export function buildComponentTreePaths(
 /**
  * Find NodePathData by logical path
  */
-export function findPathData(
-  pathsData: NodePathData[],
-  searchPath: Path
-): NodePathData | undefined {
+export function findPathData(pathsData: NodePathData[], searchPath: Path): NodePathData | undefined {
   return pathsData.find(
-    (item) =>
-      item.path.length === searchPath.length &&
-      item.path.every((val, idx) => val === searchPath[idx])
+    (item) => item.path.length === searchPath.length && item.path.every((val, idx) => val === searchPath[idx]),
   );
 }
 
 /**
  * Get all ancestors for a path (including the path itself)
  */
-export function getPathAncestors(
-  pathsData: NodePathData[],
-  searchPath: Path
-): NodePathData[] {
+export function getPathAncestors(pathsData: NodePathData[], searchPath: Path): NodePathData[] {
   const ancestors: NodePathData[] = [];
 
   for (let i = 1; i <= searchPath.length; i++) {

package/lib/shared/treePathUtils.test.ts

@@ -243,11 +243,7 @@ describe('extractStructureWithoutStyles', () => {
 });
 
 describe('calculateInsertionIndex', () => {
-  const mockChildren = [
-    createNode({ tag: 'p' }),
-    createNode({ tag: 'span' }),
-    createNode({ tag: 'div' }),
-  ];
+  const mockChildren = [createNode({ tag: 'p' }), createNode({ tag: 'span' }), createNode({ tag: 'div' })];
   const emptyNodeDataMap = new Map<string, ComponentNode | string>();
 
   test('should use childIndex when provided', () => {
@@ -521,11 +517,7 @@ describe('edge cases', () => {
 
   test('should handle mixed children (nodes and strings)', () => {
     const pageData = createPageData({
-      children: [
-        'text before',
-        createNode({ tag: 'span' }),
-        'text after',
-      ],
+      children: ['text before', createNode({ tag: 'span' }), 'text after'],
     });
 
     // Path to span should work