loopwind 0.16.0 → 0.18.0

package/test-sdk-config.mjs

@@ -0,0 +1,397 @@
+/**
+ * Integration tests for SDK StyleConfig
+ * Run with: node test-sdk-config.mjs
+ */
+
+import { defineTemplate, renderImage, renderVideo } from './dist/sdk/index.js';
+import React from 'react';
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const { createElement: h } = React;
+
+// Test utilities
+let testsPassed = 0;
+let testsFailed = 0;
+
+function assert(condition, message) {
+  if (!condition) {
+    console.error(`❌ FAIL: ${message}`);
+    testsFailed++;
+    throw new Error(message);
+  } else {
+    console.log(`✅ PASS: ${message}`);
+    testsPassed++;
+  }
+}
+
+async function test(name, fn) {
+  console.log(`\n📝 Test: ${name}`);
+  try {
+    await fn();
+  } catch (error) {
+    console.error(`Error in test "${name}":`, error.message);
+  }
+}
+
+// Helper to check if SVG contains specific color
+function svgContainsColor(svg, color) {
+  // Normalize color format (remove # if present)
+  const normalizedColor = color.replace('#', '');
+  return svg.includes(normalizedColor) || svg.includes(color);
+}
+
+// Test 1: Config in defineTemplate (image)
+await test('Config in defineTemplate - Image', async () => {
+  const config = {
+    colors: {
+      primary: '#ff0000',
+      background: '#00ff00',
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-config-template',
+    size: { width: 400, height: 400 },
+    config,
+    render: ({ tw, title }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-background') },
+        h('h1', { style: tw('text-4xl font-bold text-primary') }, title)
+      ),
+  });
+
+  assert(template.config, 'Template should have config');
+  assert(template.config.colors.primary === '#ff0000', 'Config colors should match');
+
+  const svg = await renderImage(template, { title: 'Test' }, { format: 'svg' });
+  const svgString = svg.toString();
+
+  assert(svgContainsColor(svgString, '#ff0000'), 'SVG should contain primary color');
+  assert(svgContainsColor(svgString, '#00ff00'), 'SVG should contain background color');
+});
+
+// Test 2: Config in renderImage options
+await test('Config in renderImage options', async () => {
+  const template = defineTemplate({
+    name: 'test-render-config',
+    size: { width: 400, height: 400 },
+    render: ({ tw, title }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
+        h('h1', { style: tw('text-4xl font-bold text-accent') }, title)
+      ),
+  });
+
+  const svg = await renderImage(
+    template,
+    { title: 'Test' },
+    {
+      format: 'svg',
+      config: {
+        colors: {
+          accent: '#0000ff',
+          secondary: '#ffff00',
+        },
+      },
+    }
+  );
+
+  const svgString = svg.toString();
+  assert(svgContainsColor(svgString, '#0000ff'), 'SVG should contain accent color from options');
+  assert(svgContainsColor(svgString, '#ffff00'), 'SVG should contain secondary color from options');
+});
+
+// Test 3: Config override (options override template)
+await test('Config override - Options override template', async () => {
+  const template = defineTemplate({
+    name: 'test-override',
+    size: { width: 400, height: 400 },
+    config: {
+      colors: {
+        brand: '#111111',
+      },
+    },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: tw('text-4xl font-bold') }, 'Override Test')
+      ),
+  });
+
+  const svg = await renderImage(
+    template,
+    {},
+    {
+      format: 'svg',
+      config: {
+        colors: {
+          brand: '#222222',
+        },
+      },
+    }
+  );
+
+  const svgString = svg.toString();
+  assert(svgContainsColor(svgString, '#222222'), 'SVG should contain overridden brand color');
+  assert(!svgContainsColor(svgString, '#111111'), 'SVG should NOT contain original template brand color');
+});
+
+// Test 4: PNG format with config
+await test('PNG format with config', async () => {
+  const template = defineTemplate({
+    name: 'test-png',
+    size: { width: 200, height: 200 },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-primary') },
+        h('h1', { style: tw('text-2xl font-bold text-white') }, 'PNG')
+      ),
+  });
+
+  const png = await renderImage(
+    template,
+    {},
+    {
+      format: 'png',
+      config: {
+        colors: {
+          primary: '#ff00ff',
+        },
+      },
+    }
+  );
+
+  assert(Buffer.isBuffer(png), 'PNG should be a Buffer');
+  assert(png.length > 0, 'PNG buffer should not be empty');
+  // PNG signature check
+  assert(png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47, 'Should be valid PNG');
+});
+
+// Test 5: Video with config
+await test('Video with config', async () => {
+  const template = defineTemplate({
+    name: 'test-video',
+    type: 'video',
+    size: { width: 400, height: 400 },
+    video: { fps: 30, duration: 0.5 },
+    config: {
+      colors: {
+        primary: '#ff6600',
+      },
+    },
+    render: ({ tw, progress }) => {
+      const opacity = progress;
+      return h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
+        h('h1', { style: { ...tw('text-4xl font-bold text-primary'), opacity } }, 'Video')
+      );
+    },
+  });
+
+  const mp4 = await renderVideo(template, {});
+
+  assert(Buffer.isBuffer(mp4), 'MP4 should be a Buffer');
+  assert(mp4.length > 0, 'MP4 buffer should not be empty');
+  // MP4 signature check (ftyp)
+  const signature = mp4.toString('ascii', 4, 8);
+  assert(signature === 'ftyp', 'Should be valid MP4');
+});
+
+// Test 6: Video with config override
+await test('Video with config override', async () => {
+  const template = defineTemplate({
+    name: 'test-video-override',
+    type: 'video',
+    size: { width: 400, height: 400 },
+    video: { fps: 30, duration: 0.5 },
+    config: {
+      colors: {
+        brand: '#333333',
+      },
+    },
+    render: ({ tw, progress }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: { ...tw('text-4xl font-bold'), opacity: progress } }, 'Video')
+      ),
+  });
+
+  const mp4 = await renderVideo(template, {}, {
+    config: {
+      colors: {
+        brand: '#444444',
+      },
+    },
+  });
+
+  assert(Buffer.isBuffer(mp4), 'MP4 should be a Buffer');
+  assert(mp4.length > 0, 'MP4 buffer should not be empty');
+});
+
+// Test 7: Multiple custom colors
+await test('Multiple custom colors', async () => {
+  const config = {
+    colors: {
+      brand: '#8b5cf6',
+      'brand-light': '#a78bfa',
+      'brand-dark': '#7c3aed',
+      accent: '#f59e0b',
+      success: '#10b981',
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-multi-colors',
+    size: { width: 600, height: 400 },
+    config,
+    render: ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-brand-light p-8') },
+        h('h1', { style: tw('text-4xl font-bold text-brand') }, 'Brand'),
+        h('p', { style: tw('text-2xl text-brand-dark') }, 'Brand Dark'),
+        h('p', { style: tw('text-xl text-accent') }, 'Accent'),
+        h('p', { style: tw('text-lg text-success') }, 'Success')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  const svgString = svg.toString();
+
+  assert(svgContainsColor(svgString, '#8b5cf6'), 'SVG should contain brand color');
+  assert(svgContainsColor(svgString, '#a78bfa'), 'SVG should contain brand-light color');
+  assert(svgContainsColor(svgString, '#7c3aed'), 'SVG should contain brand-dark color');
+  assert(svgContainsColor(svgString, '#f59e0b'), 'SVG should contain accent color');
+  assert(svgContainsColor(svgString, '#10b981'), 'SVG should contain success color');
+});
+
+// Test 8: Fonts in config
+await test('Fonts in config', async () => {
+  const config = {
+    colors: {
+      text: '#000000',
+    },
+    fonts: {
+      sans: ['Inter', 'system-ui', 'sans-serif'],
+      mono: ['JetBrains Mono', 'monospace'],
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-fonts',
+    size: { width: 400, height: 400 },
+    config,
+    render: ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white') },
+        h('h1', { style: tw('font-sans text-4xl text-text') }, 'Sans Font'),
+        h('p', { style: tw('font-mono text-xl text-text') }, 'Mono Font')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  const svgString = svg.toString();
+
+  assert(svg.length > 0, 'SVG should be generated with fonts');
+  // Fonts are embedded in the SVG rendering, no need to check for specific strings
+});
+
+// Test 9: Empty config (should work with defaults)
+await test('Empty config - should work with defaults', async () => {
+  const template = defineTemplate({
+    name: 'test-no-config',
+    size: { width: 400, height: 400 },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
+        h('h1', { style: tw('text-4xl font-bold text-black') }, 'No Config')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  assert(svg.length > 0, 'SVG should be generated without config');
+});
+
+// Test 10: Partial config merge
+await test('Partial config merge', async () => {
+  const template = defineTemplate({
+    name: 'test-partial-merge',
+    size: { width: 400, height: 400 },
+    config: {
+      colors: {
+        primary: '#111111',
+        secondary: '#222222',
+      },
+    },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
+        h('h1', { style: tw('text-4xl font-bold text-primary') }, 'Merge')
+      ),
+  });
+
+  const svg = await renderImage(
+    template,
+    {},
+    {
+      format: 'svg',
+      config: {
+        colors: {
+          primary: '#999999', // Override only primary
+        },
+      },
+    }
+  );
+
+  const svgString = svg.toString();
+  assert(svgContainsColor(svgString, '#999999'), 'SVG should contain overridden primary color');
+  assert(svgContainsColor(svgString, '#222222'), 'SVG should retain original secondary color');
+});
+
+// Test 11: Font files from URLs
+await test('Font files from URLs', async () => {
+  const config = {
+    colors: {
+      text: '#000000',
+    },
+    fonts: {
+      sans: {
+        family: ['Inter', 'sans-serif'],
+        files: [
+          {
+            path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff',
+            weight: 400,
+          },
+          {
+            path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff',
+            weight: 700,
+          },
+        ],
+      },
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-font-files',
+    size: { width: 600, height: 400 },
+    config,
+    render: ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
+        h('h1', { style: tw('font-sans text-6xl font-bold text-text') }, 'Bold Text'),
+        h('p', { style: tw('font-sans text-3xl font-normal text-text') }, 'Normal Text')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  assert(svg.length > 0, 'SVG should be generated with font files from URLs');
+
+  const png = await renderImage(template, {}, { format: 'png' });
+  assert(Buffer.isBuffer(png), 'PNG should be a Buffer');
+  assert(png.length > 0, 'PNG buffer should not be empty');
+  assert(png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47, 'Should be valid PNG with custom fonts');
+});
+
+// Summary
+console.log('\n' + '='.repeat(50));
+console.log(`✅ Tests passed: ${testsPassed}`);
+console.log(`❌ Tests failed: ${testsFailed}`);
+console.log('='.repeat(50));
+
+if (testsFailed > 0) {
+  process.exit(1);
+} else {
+  console.log('\n🎉 All tests passed!');
+  process.exit(0);
+}