loopwind 0.22.0 → 0.24.0

package/test-sdk-config.mjs

@@ -1,454 +0,0 @@
-/**
- * Integration tests for SDK StyleConfig
- * Run with: node test-sdk-config.mjs
- */
-
-import { defineTemplate, renderImage, renderVideo } from './dist/sdk/index.js';
-import * as configTestTemplate from './test-templates/config-test.mjs';
-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;
-
-// Helper to create inline template modules for testing
-function createTemplateModule(meta, render) {
-  return { meta, default: render };
-}
-
-// 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(configTestTemplate, { config });
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-render-config',
-      type: 'image',
-      size: { width: 400, height: 400 },
-      props: { title: 'string' },
-    },
-    ({ 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 template = defineTemplate(templateModule);
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-override',
-      type: 'image',
-      size: { width: 400, height: 400 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule, {
-    config: {
-      colors: {
-        brand: '#111111',
-      },
-    },
-  });
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-png',
-      type: 'image',
-      size: { width: 200, height: 200 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule);
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-video',
-      type: 'video',
-      size: { width: 400, height: 400 },
-      video: { fps: 30, duration: 0.5 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule, {
-    config: {
-      colors: {
-        primary: '#ff6600',
-      },
-    },
-  });
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-video-override',
-      type: 'video',
-      size: { width: 400, height: 400 },
-      video: { fps: 30, duration: 0.5 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule, {
-    config: {
-      colors: {
-        brand: '#333333',
-      },
-    },
-  });
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-multi-colors',
-      type: 'image',
-      size: { width: 600, height: 400 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule, { config });
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-fonts',
-      type: 'image',
-      size: { width: 400, height: 400 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule, { config });
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-no-config',
-      type: 'image',
-      size: { width: 400, height: 400 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule);
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-partial-merge',
-      type: 'image',
-      size: { width: 400, height: 400 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule, {
-    config: {
-      colors: {
-        primary: '#111111',
-        secondary: '#222222',
-      },
-    },
-  });
-
-  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 templateModule = createTemplateModule(
-    {
-      name: 'test-font-files',
-      type: 'image',
-      size: { width: 600, height: 400 },
-      props: {},
-    },
-    ({ 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 template = defineTemplate(templateModule, { config });
-
-  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);
-}