meno-core 1.0.39 → 1.0.41

package/lib/server/astro/nodeToAstro.test.ts

@@ -0,0 +1,1101 @@
+/**
+ * Tests for nodeToAstro.ts
+ * Tests the core ComponentNode -> Astro template markup converter
+ */
+
+import { describe, test, expect, beforeEach } from 'bun:test';
+import { nodeToAstro, type AstroEmitContext } from './nodeToAstro';
+import { DEFAULT_BREAKPOINTS } from '../../shared/breakpoints';
+import type { ComponentNode } from '../../shared/types';
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function createContext(overrides?: Partial<AstroEmitContext>): AstroEmitContext {
+  return {
+    imports: new Set(),
+    isComponentDef: false,
+    componentProps: {},
+    globalComponents: {},
+    indent: 0,
+    ssrFallbacks: new Map(),
+    elementPath: [0],
+    fileType: 'page',
+    fileName: 'test-page',
+    breakpoints: DEFAULT_BREAKPOINTS,
+    ...overrides,
+  };
+}
+
+/** Strip leading/trailing whitespace from each line for easier comparison */
+function trimLines(s: string): string {
+  return s
+    .split('\n')
+    .map((l) => l.trimEnd())
+    .join('\n')
+    .trim();
+}
+
+// ---------------------------------------------------------------------------
+// Tests
+// ---------------------------------------------------------------------------
+
+describe('nodeToAstro', () => {
+  // =========================================================================
+  // Null / undefined / primitives
+  // =========================================================================
+
+  describe('primitives and nullish values', () => {
+    test('should return empty string for null', () => {
+      const ctx = createContext();
+      expect(nodeToAstro(null, ctx)).toBe('');
+    });
+
+    test('should return empty string for undefined', () => {
+      const ctx = createContext();
+      expect(nodeToAstro(undefined, ctx)).toBe('');
+    });
+
+    test('should emit plain text for a string', () => {
+      const ctx = createContext();
+      const result = nodeToAstro('Hello world', ctx);
+      expect(result).toContain('Hello world');
+    });
+
+    test('should escape special characters in strings', () => {
+      const ctx = createContext();
+      const result = nodeToAstro('<script>alert("xss")</script>', ctx);
+      expect(result).toContain('&lt;script&gt;');
+      expect(result).toContain('&quot;');
+      expect(result).not.toContain('<script>');
+    });
+
+    test('should escape ampersands in strings', () => {
+      const ctx = createContext();
+      const result = nodeToAstro('Tom & Jerry', ctx);
+      expect(result).toContain('&amp;');
+    });
+
+    test('should emit number as-is', () => {
+      const ctx = createContext();
+      const result = nodeToAstro(42, ctx);
+      expect(result).toContain('42');
+    });
+  });
+
+  // =========================================================================
+  // HTML nodes (type: 'node')
+  // =========================================================================
+
+  describe('HTML nodes', () => {
+    test('should emit a simple div', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div');
+      // Empty children -> self-closing
+      expect(result).toContain('/>');
+    });
+
+    test('should emit div with text child', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        children: ['Hello'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div>');
+      expect(result).toContain('Hello');
+      expect(result).toContain('</div>');
+    });
+
+    test('should emit self-closing void element (img)', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: 'test.png', alt: 'Test' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<img');
+      expect(result).toContain('src="test.png"');
+      expect(result).toContain('alt="Test"');
+      expect(result).toContain('/>');
+      expect(result).not.toContain('</img>');
+    });
+
+    test('should emit self-closing void element (br)', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'br',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<br');
+      expect(result).toContain('/>');
+    });
+
+    test('should emit self-closing void element (input)', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'input',
+        attributes: { type: 'text', placeholder: 'Enter...' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<input');
+      expect(result).toContain('type="text"');
+      expect(result).toContain('/>');
+    });
+
+    test('should emit nested children', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        children: [
+          {
+            type: 'node',
+            tag: 'span',
+            children: ['inner'],
+          },
+        ],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div>');
+      expect(result).toContain('<span>');
+      expect(result).toContain('inner');
+      expect(result).toContain('</span>');
+      expect(result).toContain('</div>');
+    });
+
+    test('should emit boolean attributes', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'input',
+        attributes: { disabled: true, hidden: false },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('disabled');
+      expect(result).not.toContain('hidden');
+    });
+
+    test('should lowercase capitalized HTML tags', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'Section',
+        children: ['content'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<section>');
+      expect(result).toContain('</section>');
+    });
+
+    test('should handle indentation via context', () => {
+      const ctx = createContext({ indent: 2 });
+      const result = nodeToAstro('text', ctx);
+      expect(result).toMatch(/^    text/); // 2 * 2 spaces = 4 spaces
+    });
+  });
+
+  // =========================================================================
+  // Component instances (type: 'component')
+  // =========================================================================
+
+  describe('component instances', () => {
+    test('should emit component with PascalCase name', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Button',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<Button');
+      expect(result).toContain('/>');
+    });
+
+    test('should add component name to imports set', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        children: [],
+      } as any;
+      nodeToAstro(node, ctx);
+      expect(ctx.imports.has('Card')).toBe(true);
+    });
+
+    test('should emit component with string props', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Button',
+        props: { label: 'Click me', variant: 'primary' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('label="Click me"');
+      expect(result).toContain('variant="primary"');
+    });
+
+    test('should emit component with number props', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Grid',
+        props: { columns: 3 },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('columns={3}');
+    });
+
+    test('should emit component with boolean props', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Modal',
+        props: { isOpen: true, hasOverlay: false },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('isOpen={true}');
+      expect(result).toContain('hasOverlay={false}');
+    });
+
+    test('should emit component with children', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Card',
+        children: ['Card content'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<Card>');
+      expect(result).toContain('Card content');
+      expect(result).toContain('</Card>');
+    });
+
+    test('should skip children key in props', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Widget',
+        props: { children: 'ignored', title: 'hello' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('children=');
+      expect(result).toContain('title="hello"');
+    });
+
+    test('should emit template expressions in props when inside component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'component',
+        component: 'Icon',
+        props: { name: '{{iconName}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('name={iconName}');
+    });
+  });
+
+  // =========================================================================
+  // Slot markers (type: 'slot')
+  // =========================================================================
+
+  describe('slot markers', () => {
+    test('should emit a self-closing slot', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'slot',
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<slot />');
+    });
+
+    test('should emit slot with default content', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'slot',
+        default: ['Fallback content'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<slot>');
+      expect(result).toContain('Fallback content');
+      expect(result).toContain('</slot>');
+    });
+
+    test('should emit self-closing slot when default content is empty', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'slot',
+        default: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<slot />');
+    });
+  });
+
+  // =========================================================================
+  // Embed nodes (type: 'embed')
+  // =========================================================================
+
+  describe('embed nodes', () => {
+    test('should emit embed node with html content', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'embed',
+        html: '<iframe src="https://example.com"></iframe>',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div');
+      expect(result).toContain('oem');
+      expect(result).toContain('Fragment set:html');
+      expect(result).toContain('</div>');
+    });
+
+    test('should emit embed node with empty html', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'embed',
+        html: '',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('oem');
+      expect(result).toContain('Fragment set:html');
+    });
+
+    test('should escape template literals in embed html', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'embed',
+        html: 'has `backtick` and ${expr}',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('\\`');
+      expect(result).toContain('\\${');
+    });
+
+    test('should emit template expression embed as Fragment set:html when in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'embed',
+        html: '{{icon}}',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('Fragment set:html={icon}');
+    });
+  });
+
+  // =========================================================================
+  // Link nodes (type: 'link')
+  // =========================================================================
+
+  describe('link nodes', () => {
+    test('should emit a link with href', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/about',
+        children: ['About'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<a');
+      expect(result).toContain('href="/about"');
+      expect(result).toContain('olink');
+      expect(result).toContain('About');
+      expect(result).toContain('</a>');
+    });
+
+    test('should emit self-closing link when no children', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/home',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<a');
+      expect(result).toContain('href="/home"');
+      expect(result).toContain('/>');
+    });
+
+    test('should default to href="#" when href is not a string', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'link',
+        href: undefined,
+        children: ['Link'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href="#"');
+    });
+
+    test('should localize internal href with locale', () => {
+      const ctx = createContext({
+        locale: 'fr',
+        i18nDefaultLocale: 'en',
+      });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/about',
+        children: ['A propos'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('/fr/about');
+    });
+
+    test('should not localize href for default locale', () => {
+      const ctx = createContext({
+        locale: 'en',
+        i18nDefaultLocale: 'en',
+      });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '/about',
+        children: ['About'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href="/about"');
+    });
+
+    test('should not localize external URLs', () => {
+      const ctx = createContext({
+        locale: 'fr',
+        i18nDefaultLocale: 'en',
+      });
+      const node: ComponentNode = {
+        type: 'link',
+        href: 'https://example.com',
+        children: ['External'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href="https://example.com"');
+    });
+
+    test('should resolve template expression href in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '{{url}}',
+        children: ['Click'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('href={url}');
+    });
+
+    test('should handle link prop type with ?.href accessor', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        componentProps: {
+          ctaLink: { type: 'link', label: 'CTA Link' } as any,
+        },
+      });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '{{ctaLink}}',
+        children: ['CTA'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('ctaLink?.href');
+    });
+  });
+
+  // =========================================================================
+  // List nodes (type: 'list')
+  // =========================================================================
+
+  describe('list nodes', () => {
+    test('should emit prop list with .map() in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'prop',
+        source: '{{items}}',
+        children: [
+          {
+            type: 'node',
+            tag: 'div',
+            children: ['{{item.name}}'],
+          },
+        ],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('items.map(');
+      expect(result).toContain('(item,');
+    });
+
+    test('should fall back to SSR fallback for prop list on page', () => {
+      const ctx = createContext({
+        isComponentDef: false,
+        ssrFallbacks: new Map([['0', '<div>fallback</div>']]),
+      });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'prop',
+        source: 'items',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('Fragment set:html');
+    });
+
+    test('should emit collection list with getCollection import', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'collection',
+        source: 'posts',
+        children: [
+          {
+            type: 'node',
+            tag: 'div',
+            children: [],
+          },
+        ],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('postsList.map(');
+      expect(ctx.astroImports?.has('getCollection')).toBe(true);
+      expect(ctx.frontmatterLines?.[0]).toContain("getCollection('posts')");
+    });
+
+    test('should handle list with offset and limit', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'list',
+        sourceType: 'prop',
+        source: '{{items}}',
+        offset: 2,
+        limit: 5,
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('items.slice(2, 7)');
+    });
+
+    test('should handle legacy cms-list type', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const node = {
+        type: 'cms-list',
+        sourceType: 'collection',
+        source: 'articles',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('articlesList.map(');
+    });
+  });
+
+  // =========================================================================
+  // Array of nodes
+  // =========================================================================
+
+  describe('array of nodes', () => {
+    test('should emit each node in array', () => {
+      const ctx = createContext();
+      const nodes: ComponentNode[] = [
+        { type: 'node', tag: 'div', children: ['First'] } as any,
+        { type: 'node', tag: 'span', children: ['Second'] } as any,
+      ];
+      const result = nodeToAstro(nodes, ctx);
+      expect(result).toContain('First');
+      expect(result).toContain('Second');
+      expect(result).toContain('<div>');
+      expect(result).toContain('<span>');
+    });
+  });
+
+  // =========================================================================
+  // Raw HTML prefix
+  // =========================================================================
+
+  describe('raw HTML prefix', () => {
+    test('should emit raw HTML via Fragment set:html', () => {
+      const ctx = createContext();
+      const rawText = '<!--MENO_RAW_HTML--><strong>bold</strong>';
+      const result = nodeToAstro(rawText, ctx);
+      expect(result).toContain('Fragment set:html');
+      expect(result).toContain('<strong>bold</strong>');
+    });
+  });
+
+  // =========================================================================
+  // Template expressions in text (component def context)
+  // =========================================================================
+
+  describe('template expressions', () => {
+    test('should resolve template in text when in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const result = nodeToAstro('{{title}}', ctx);
+      expect(result).toContain('{title}');
+    });
+
+    test('should resolve mixed templates', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const result = nodeToAstro('Hello {{name}}, welcome!', ctx);
+      expect(result).toContain('{name}');
+      expect(result).toContain('Hello');
+      expect(result).toContain('welcome!');
+    });
+
+    test('should not resolve templates when not in component def', () => {
+      const ctx = createContext({ isComponentDef: false });
+      const result = nodeToAstro('{{title}}', ctx);
+      expect(result).toContain('{{title}}');
+    });
+
+    test('should resolve rich-text prop as Fragment set:html', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        componentProps: {
+          content: { type: 'rich-text', label: 'Content' } as any,
+        },
+      });
+      const result = nodeToAstro('{{content}}', ctx);
+      expect(result).toContain('Fragment set:html={content}');
+    });
+  });
+
+  // =========================================================================
+  // CMS mode
+  // =========================================================================
+
+  describe('CMS mode', () => {
+    test('should transform CMS template expressions in text', () => {
+      const ctx = createContext({
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+      });
+      const result = nodeToAstro('{{cms.title}}', ctx);
+      expect(result).toContain('entry.data.title');
+    });
+
+    test('should transform CMS expressions in attributes', () => {
+      const ctx = createContext({
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '{{cms.image}}', alt: '{{cms.imageAlt}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('entry.data.image');
+      expect(result).toContain('entry.data.imageAlt');
+    });
+  });
+
+  // =========================================================================
+  // Conditional rendering (if)
+  // =========================================================================
+
+  describe('conditional rendering', () => {
+    test('should wrap node in conditional when if is a template string in component def', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: '{{showBanner}}',
+        children: ['Banner'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('{showBanner && (');
+      expect(result).toContain('Banner');
+      expect(result).toContain(')}');
+    });
+
+    test('should emit hidden comment when if is false boolean', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: false,
+        children: ['Hidden'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      // The node still emits but with a hidden comment prepended
+      expect(result).toContain('{/* hidden */}');
+    });
+
+    test('should emit nothing extra when if is true boolean', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: true,
+        children: ['Visible'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<div>');
+      expect(result).toContain('Visible');
+      expect(result).not.toContain('{');
+    });
+
+    test('should handle CMS conditional', () => {
+      const ctx = createContext({
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        if: '{{cms.showSection}}',
+        children: ['Section'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('entry.data.showSection');
+    });
+  });
+
+  // =========================================================================
+  // SSR fallback
+  // =========================================================================
+
+  describe('SSR fallback', () => {
+    test('should emit SSR fallback when available', () => {
+      const ctx = createContext({
+        ssrFallbacks: new Map([['0', '<div>rendered</div>']]),
+      });
+      const node: ComponentNode = {
+        type: 'locale-list',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      // locale-list without i18nConfig falls back
+      expect(result).toContain('Fragment set:html');
+      expect(result).toContain('<div>rendered</div>');
+    });
+
+    test('should emit comment when SSR fallback not available', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'locale-list',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('Complex node - SSR fallback not available');
+    });
+  });
+
+  // =========================================================================
+  // Unknown node type
+  // =========================================================================
+
+  describe('unknown node type', () => {
+    test('should emit fallback for unknown node type', () => {
+      const ctx = createContext();
+      const node = { type: 'custom-unknown' } as any;
+      const result = nodeToAstro(node, ctx);
+      // Falls through default case to emitFallback
+      expect(result).toContain('SSR fallback not available');
+    });
+  });
+
+  // =========================================================================
+  // Styles -> Tailwind classes
+  // =========================================================================
+
+  describe('styles to Tailwind classes', () => {
+    test('should emit Tailwind classes from style object', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        style: { display: 'flex', justifyContent: 'center' },
+        children: ['styled'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('class="');
+      // The exact Tailwind classes depend on the tailwindMapper, but the class attr should be present
+    });
+
+    test('should not emit class attribute when no styles', () => {
+      const ctx = createContext();
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        children: ['no style'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('class=');
+    });
+  });
+
+  // =========================================================================
+  // Image node (type: 'image')
+  // =========================================================================
+
+  describe('image type node', () => {
+    test('should emit img tag for image type node', () => {
+      const ctx = createContext();
+      const node = {
+        type: 'image',
+        src: '/images/photo.jpg',
+        alt: 'A photo',
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<img');
+      expect(result).toContain('src="/images/photo.jpg"');
+      expect(result).toContain('alt="A photo"');
+    });
+
+    test('should emit picture element when avif metadata is available', () => {
+      const ctx = createContext({
+        imageMetadataMap: new Map([
+          ['/images/photo.jpg', {
+            width: 800,
+            height: 600,
+            srcset: '/images/photo-400.webp 400w',
+            avifSrcset: '/images/photo-400.avif 400w',
+          }],
+        ]) as any,
+      });
+      const node = {
+        type: 'image',
+        src: '/images/photo.jpg',
+        alt: 'A photo',
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<picture');
+      expect(result).toContain('image/avif');
+      expect(result).toContain('image/webp');
+      expect(result).toContain('</picture>');
+    });
+  });
+
+  // =========================================================================
+  // Context: imports tracking
+  // =========================================================================
+
+  describe('imports tracking', () => {
+    test('should collect all component imports', () => {
+      const ctx = createContext();
+      const nodes: ComponentNode[] = [
+        { type: 'component', component: 'Header', children: [] } as any,
+        { type: 'component', component: 'Footer', children: [] } as any,
+        {
+          type: 'node',
+          tag: 'div',
+          children: [
+            { type: 'component', component: 'Button', children: [] },
+          ],
+        } as any,
+      ];
+      nodeToAstro(nodes, ctx);
+      expect(ctx.imports.has('Header')).toBe(true);
+      expect(ctx.imports.has('Footer')).toBe(true);
+      expect(ctx.imports.has('Button')).toBe(true);
+    });
+  });
+
+  // =========================================================================
+  // Dynamic tags
+  // =========================================================================
+
+  describe('dynamic tags', () => {
+    test('should register dynamic tag variable when tag has template expression', () => {
+      const ctx = createContext({ isComponentDef: true });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: '{{headingTag}}',
+        children: ['Title'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(ctx.dynamicTags).toBeDefined();
+      expect(ctx.dynamicTags!.size).toBe(1);
+      // Should use Tag_<path> variable
+      const entry = [...ctx.dynamicTags!.entries()][0];
+      expect(entry[0]).toMatch(/^Tag_/);
+    });
+  });
+
+  // =========================================================================
+  // HTML img with imageMetadataMap
+  // =========================================================================
+
+  describe('HTML img with metadata', () => {
+    test('should emit picture element for img tag with avif metadata', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w, /test-1200.webp 1200w',
+        avifSrcset: '/test-800.avif 800w, /test-1200.avif 1200w',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test image' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('<picture');
+      expect(result).toContain('type="image/avif"');
+      expect(result).toContain('type="image/webp"');
+      expect(result).toContain('</picture>');
+      expect(result).toContain('width="1920"');
+      expect(result).toContain('height="1080"');
+    });
+
+    test('should emit img with srcset when only webp metadata available', () => {
+      const metadataMap = new Map();
+      metadataMap.set('/test.jpg', {
+        width: 1920,
+        height: 1080,
+        srcset: '/test-800.webp 800w',
+      });
+      const ctx = createContext({ imageMetadataMap: metadataMap as any });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'img',
+        attributes: { src: '/test.jpg', alt: 'Test' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).not.toContain('<picture');
+      expect(result).toContain('<img');
+      expect(result).toContain('srcset=');
+      expect(result).toContain('sizes=');
+    });
+  });
+
+  // =========================================================================
+  // Locale list nodes
+  // =========================================================================
+
+  describe('locale list nodes', () => {
+    test('should emit static locale links when i18n config is provided', () => {
+      const ctx = createContext({
+        locale: 'en',
+        i18nConfig: {
+          defaultLocale: 'en',
+          locales: [
+            { code: 'en', name: 'English', nativeName: 'English', langTag: 'en' },
+            { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
+          ],
+        },
+        currentPageSlugMap: {
+          en: '/about',
+          fr: '/fr/a-propos',
+        },
+      });
+      const node: ComponentNode = {
+        type: 'locale-list',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('data-locale-list="true"');
+      expect(result).toContain('hreflang="en"');
+      expect(result).toContain('hreflang="fr"');
+      expect(result).toContain('/about');
+      expect(result).toContain('/fr/a-propos');
+      expect(result).toContain('English');
+      expect(result).toContain('Francais');
+    });
+
+    test('should mark current locale link with data-current', () => {
+      const ctx = createContext({
+        locale: 'en',
+        i18nConfig: {
+          defaultLocale: 'en',
+          locales: [
+            { code: 'en', name: 'English', nativeName: 'English', langTag: 'en' },
+            { code: 'fr', name: 'French', nativeName: 'Francais', langTag: 'fr' },
+          ],
+        },
+        currentPageSlugMap: {
+          en: '/',
+          fr: '/fr/',
+        },
+      });
+      const node: ComponentNode = {
+        type: 'locale-list',
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('data-current="true"');
+      expect(result).toContain('data-current="false"');
+    });
+  });
+
+  // =========================================================================
+  // CMS mode attribute transformation
+  // =========================================================================
+
+  describe('CMS attribute transformation', () => {
+    test('should transform CMS template in link href', () => {
+      const ctx = createContext({
+        cmsMode: true,
+        cmsEntryBinding: 'post',
+      });
+      const node: ComponentNode = {
+        type: 'link',
+        href: '{{cms.url}}',
+        children: ['Read more'],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('post.data.url');
+    });
+
+    test('should support cmsWrapFn for i18n resolution', () => {
+      const ctx = createContext({
+        cmsMode: true,
+        cmsEntryBinding: 'entry',
+        cmsWrapFn: 'r',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'h1',
+        attributes: { title: '{{cms.title}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('r(entry.data.title)');
+    });
+  });
+
+  // =========================================================================
+  // List item binding in attributes
+  // =========================================================================
+
+  describe('list item binding', () => {
+    test('should transform item template expressions in attribute values', () => {
+      const ctx = createContext({
+        isComponentDef: true,
+        listItemBinding: 'item',
+      });
+      const node: ComponentNode = {
+        type: 'node',
+        tag: 'div',
+        attributes: { id: '{{item.id}}' },
+        children: [],
+      } as any;
+      const result = nodeToAstro(node, ctx);
+      expect(result).toContain('id={item.id');
+    });
+  });
+});