loopwind 0.25.6 → 0.25.7

package/tests-sdk/render.test.ts

@@ -0,0 +1,241 @@
+/**
+ * SDK Render Function Tests
+ */
+
+import { test, describe } from 'node:test';
+import assert from 'node:assert';
+import { render, ValidationError } from '../dist/sdk/index.js';
+import React from 'react';
+
+// Simple test template
+const SimpleTemplate = ({ title, tw }: { title: string; tw: (c: string) => any }) => {
+  return React.createElement(
+    'div',
+    { style: tw('w-full h-full bg-blue-500 flex items-center justify-center') },
+    React.createElement('h1', { style: tw('text-white text-4xl') }, title)
+  );
+};
+
+// Template with multiple props
+const ComplexTemplate = ({
+  title,
+  subtitle,
+  showBadge,
+  tw,
+}: {
+  title: string;
+  subtitle?: string;
+  showBadge?: boolean;
+  tw: (c: string) => any;
+}) => {
+  return React.createElement(
+    'div',
+    { style: tw('w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 p-12 flex flex-col') },
+    [
+      React.createElement('h1', { key: 'title', style: tw('text-white text-5xl font-bold') }, title),
+      subtitle && React.createElement('p', { key: 'sub', style: tw('text-white/80 text-xl mt-4') }, subtitle),
+      showBadge && React.createElement('span', { key: 'badge', style: tw('bg-white text-purple-500 px-4 py-2 rounded-full mt-4') }, 'NEW'),
+    ]
+  );
+};
+
+describe('render()', () => {
+  test('renders PNG with basic template', async () => {
+    const result = await render(SimpleTemplate, {
+      props: { title: 'Hello World' },
+      width: 800,
+      height: 400,
+      format: 'png',
+    });
+
+    assert.ok(result instanceof Buffer || result instanceof Uint8Array, 'Result should be a buffer');
+    assert.ok(result.length > 0, 'Result should not be empty');
+
+    // Check PNG magic bytes
+    const pngMagic = [0x89, 0x50, 0x4e, 0x47];
+    const header = Array.from(result.slice(0, 4));
+    assert.deepStrictEqual(header, pngMagic, 'Result should be valid PNG');
+  });
+
+  test('renders SVG with basic template', async () => {
+    const result = await render(SimpleTemplate, {
+      props: { title: 'Hello SVG' },
+      width: 800,
+      height: 400,
+      format: 'svg',
+    });
+
+    assert.ok(result instanceof Buffer || result instanceof Uint8Array, 'Result should be a buffer');
+
+    const svgString = result.toString('utf-8');
+    assert.ok(svgString.includes('<svg'), 'Result should contain SVG tag');
+    assert.ok(svgString.includes('</svg>'), 'Result should be valid SVG');
+    assert.ok(svgString.length > 500, 'SVG should have substantial content');
+  });
+
+  test('renders with complex props', async () => {
+    const result = await render(ComplexTemplate, {
+      props: {
+        title: 'Complex Test',
+        subtitle: 'With subtitle',
+        showBadge: true,
+      },
+      width: 1200,
+      height: 630,
+      format: 'png',
+    });
+
+    assert.ok(result instanceof Buffer || result instanceof Uint8Array);
+    assert.ok(result.length > 0);
+  });
+
+  test('uses default dimensions', async () => {
+    const result = await render(SimpleTemplate, {
+      props: { title: 'Default Size' },
+      format: 'svg',
+    });
+
+    const svgString = result.toString('utf-8');
+    // Default is 1200x630
+    assert.ok(svgString.includes('width="1200"'), 'Should use default width');
+    assert.ok(svgString.includes('height="630"'), 'Should use default height');
+  });
+
+  test('respects custom dimensions', async () => {
+    const result = await render(SimpleTemplate, {
+      props: { title: 'Custom Size' },
+      width: 500,
+      height: 250,
+      format: 'svg',
+    });
+
+    const svgString = result.toString('utf-8');
+    assert.ok(svgString.includes('width="500"'), 'Should use custom width');
+    assert.ok(svgString.includes('height="250"'), 'Should use custom height');
+  });
+
+  test('throws ValidationError for invalid width', async () => {
+    await assert.rejects(
+      async () => {
+        await render(SimpleTemplate, {
+          props: { title: 'Test' },
+          width: -100,
+          format: 'png',
+        });
+      },
+      (error: any) => {
+        assert.ok(error instanceof ValidationError);
+        assert.strictEqual(error.field, 'width');
+        return true;
+      }
+    );
+  });
+
+  test('throws ValidationError for invalid height', async () => {
+    await assert.rejects(
+      async () => {
+        await render(SimpleTemplate, {
+          props: { title: 'Test' },
+          height: 999999,
+          format: 'png',
+        });
+      },
+      (error: any) => {
+        assert.ok(error instanceof ValidationError);
+        assert.strictEqual(error.field, 'height');
+        return true;
+      }
+    );
+  });
+
+  test('throws ValidationError for invalid format', async () => {
+    await assert.rejects(
+      async () => {
+        await render(SimpleTemplate, {
+          props: { title: 'Test' },
+          format: 'invalid' as any,
+        });
+      },
+      (error: any) => {
+        assert.ok(error instanceof ValidationError);
+        assert.strictEqual(error.field, 'format');
+        return true;
+      }
+    );
+  });
+
+  test('renders JPG format', async () => {
+    const result = await render(SimpleTemplate, {
+      props: { title: 'JPEG Test' },
+      width: 400,
+      height: 200,
+      format: 'jpg',
+      quality: 80,
+    });
+
+    assert.ok(result instanceof Buffer || result instanceof Uint8Array);
+    assert.ok(result.length > 0);
+
+    // Check JPEG magic bytes
+    const jpegMagic = [0xff, 0xd8, 0xff];
+    const header = Array.from(result.slice(0, 3));
+    assert.deepStrictEqual(header, jpegMagic, 'Result should be valid JPEG');
+  });
+
+  test('renders WebP format', async () => {
+    const result = await render(SimpleTemplate, {
+      props: { title: 'WebP Test' },
+      width: 400,
+      height: 200,
+      format: 'webp',
+      quality: 85,
+    });
+
+    assert.ok(result instanceof Buffer || result instanceof Uint8Array);
+    assert.ok(result.length > 0);
+
+    // Check WebP magic bytes (RIFF....WEBP)
+    const riffMagic = result.slice(0, 4).toString('utf-8');
+    const webpMagic = result.slice(8, 12).toString('utf-8');
+    assert.strictEqual(riffMagic, 'RIFF', 'Should have RIFF header');
+    assert.strictEqual(webpMagic, 'WEBP', 'Should have WEBP identifier');
+  });
+
+  test('respects scale option', async () => {
+    const scale1 = await render(SimpleTemplate, {
+      props: { title: 'Scale 1' },
+      width: 100,
+      height: 100,
+      format: 'png',
+      scale: 1,
+    });
+
+    const scale2 = await render(SimpleTemplate, {
+      props: { title: 'Scale 2' },
+      width: 100,
+      height: 100,
+      format: 'png',
+      scale: 2,
+    });
+
+    // Scale 2 should produce larger file (more pixels)
+    assert.ok(scale2.length > scale1.length, 'Higher scale should produce larger file');
+  });
+});
+
+describe('render() with timeout', () => {
+  test('completes within timeout', async () => {
+    const result = await render(SimpleTemplate, {
+      props: { title: 'Fast Render' },
+      width: 100,
+      height: 100,
+      format: 'png',
+      timeout: 30000, // 30 seconds should be plenty
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  // Note: Testing actual timeout is tricky without a slow template
+  // In production, you'd want to test with a deliberately slow render
+});

package/tests-sdk/tw.test.ts

@@ -0,0 +1,277 @@
+/**
+ * SDK tw() Function Tests
+ *
+ * Tests that Tailwind classes are properly converted to inline styles
+ */
+
+import { test, describe } from 'node:test';
+import assert from 'node:assert';
+import { render } from '../dist/sdk/index.js';
+import React from 'react';
+
+// Helper to extract styles from SVG output
+async function renderAndGetSvg(twClasses: string): Promise<string> {
+  const Template = ({ tw }: { tw: (c: string) => any }) => {
+    return React.createElement('div', { style: tw(twClasses) }, 'Test');
+  };
+
+  const result = await render(Template, {
+    props: {},
+    width: 100,
+    height: 100,
+    format: 'svg',
+  });
+
+  return result.toString('utf-8');
+}
+
+describe('tw() function', () => {
+  test('converts flex classes', async () => {
+    const svg = await renderAndGetSvg('flex items-center justify-center');
+    // Satori renders successfully with flex - just verify output exists
+    assert.ok(svg.length > 0, 'Should render successfully with flex');
+    assert.ok(svg.includes('<svg'), 'Should contain SVG output');
+  });
+
+  test('converts padding classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      const style = tw('p-4');
+      // p-4 = 16px padding (4 * 4)
+      return React.createElement('div', { style }, 'Padded');
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('converts margin classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      const style = tw('m-8 mt-4');
+      return React.createElement('div', { style }, 'Margin');
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('converts width and height classes', async () => {
+    const svg = await renderAndGetSvg('w-full h-full');
+    assert.ok(svg.includes('100%') || svg.includes('width'), 'Should contain width');
+  });
+
+  test('converts background color classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement(
+        'div',
+        { style: tw('bg-blue-500') },
+        'Blue Background'
+      );
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    // bg-blue-500 = #3b82f6
+    const svg = result.toString('utf-8');
+    assert.ok(
+      svg.includes('#3b82f6') || svg.includes('3b82f6') || svg.includes('rgb'),
+      'Should contain blue color'
+    );
+  });
+
+  test('converts text color classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement(
+        'span',
+        { style: tw('text-white') },
+        'White Text'
+      );
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    const svg = result.toString('utf-8');
+    // text-white = #ffffff or white
+    assert.ok(
+      svg.includes('#fff') || svg.includes('white') || svg.includes('#ffffff'),
+      'Should contain white color'
+    );
+  });
+
+  test('converts font size classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement('span', { style: tw('text-4xl') }, 'Large');
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('converts font weight classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement('span', { style: tw('font-bold') }, 'Bold');
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    // font-bold = font-weight: 700, just verify rendering succeeds
+    assert.ok(result.length > 0, 'Should render successfully with font-bold');
+  });
+
+  test('converts border radius classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement(
+        'div',
+        { style: tw('rounded-lg') },
+        'Rounded'
+      );
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('converts shadow classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement('div', { style: tw('shadow-lg') }, 'Shadow');
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('handles multiple classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement(
+        'div',
+        {
+          style: tw(
+            'w-full h-full flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 p-8 rounded-xl'
+          ),
+        },
+        'Multi-class'
+      );
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('handles gap classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement(
+        'div',
+        { style: tw('flex gap-4') },
+        [
+          React.createElement('span', { key: '1' }, 'A'),
+          React.createElement('span', { key: '2' }, 'B'),
+        ]
+      );
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('handles opacity classes', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      return React.createElement(
+        'div',
+        { style: tw('opacity-50') },
+        'Semi-transparent'
+      );
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('returns style object that can be spread', async () => {
+    const Template = ({ tw }: { tw: (c: string) => any }) => {
+      const baseStyles = tw('bg-white p-4');
+      const customStyles = { opacity: 0.8 };
+
+      return React.createElement(
+        'div',
+        { style: { ...baseStyles, ...customStyles } },
+        'Merged styles'
+      );
+    };
+
+    const result = await render(Template, {
+      props: {},
+      format: 'svg',
+    });
+
+    assert.ok(result.length > 0);
+  });
+
+  test('handles dynamic class construction', async () => {
+    const Template = ({
+      variant,
+      tw,
+    }: {
+      variant: 'primary' | 'secondary';
+      tw: (c: string) => any;
+    }) => {
+      const bgClass = variant === 'primary' ? 'bg-blue-500' : 'bg-gray-500';
+      return React.createElement('div', { style: tw(`p-4 ${bgClass}`) }, variant);
+    };
+
+    const primary = await render(Template, {
+      props: { variant: 'primary' },
+      format: 'svg',
+    });
+
+    const secondary = await render(Template, {
+      props: { variant: 'secondary' },
+      format: 'svg',
+    });
+
+    // Both should render successfully
+    assert.ok(primary.length > 0);
+    assert.ok(secondary.length > 0);
+    // And they should be different (different colors)
+    assert.notStrictEqual(primary.toString(), secondary.toString());
+  });
+});