toiljs 0.0.45 → 0.0.46

package/test/email-preview.test.ts

@@ -0,0 +1,68 @@
+import path from 'node:path';
+
+import { createServer } from 'vite';
+import { describe, expect, it } from 'vitest';
+
+import { loadConfig } from '../src/compiler/config';
+import {
+    emailsVersion,
+    listEmails,
+    previewShellHtml,
+    renderEmailByName,
+} from '../src/compiler/email-preview';
+import { createViteConfig } from '../src/compiler/vite';
+
+const EXAMPLE = path.resolve(__dirname, '../examples/basic');
+
+describe('email preview end-to-end (examples/basic)', () => {
+    it('lists Welcome and inlines its emails/styles/email.css; client/* alias resolves', async () => {
+        const cfg = await loadConfig({ root: EXAMPLE });
+        const items = listEmails(cfg);
+        expect(items.map((i) => i.name)).toContain('Welcome');
+
+        const server = await createServer({
+            ...(await createViteConfig(cfg)),
+            server: { middlewareMode: true, hmr: false },
+            appType: 'custom',
+            logLevel: 'silent',
+        });
+        try {
+            const r = await renderEmailByName(server, cfg, 'Welcome');
+            if (!r) throw new Error('Welcome did not render');
+            // tokens discovered from props
+            expect(r.tokens).toEqual(['code', 'name']);
+            // subject token template
+            expect(r.subject).toBe('Welcome, {{name}}!');
+            // .email-title { color: #111827 } from emails/styles/email.css inlined onto the <h1>
+            expect(r.html).toMatch(/<h1[^>]*style="[^"]*color:\s*#111827/i);
+            // .email-card backgroundColor inlined onto the <table>
+            expect(r.html).toMatch(/<table[^>]*style="[^"]*background-color:\s*#f6f7f9/i);
+
+            // The `client/*` reuse alias still resolves project CSS (the documented
+            // `import 'client/styles/…'` path), independent of where the demo keeps its styles.
+            const aliased = (await server.ssrLoadModule('client/styles/main.css?inline')) as {
+                default?: unknown;
+            };
+            expect(typeof aliased.default).toBe('string');
+        } finally {
+            await server.close();
+        }
+    }, 30000);
+
+    it('emailsVersion is a non-empty mtime:count fingerprint', async () => {
+        const cfg = await loadConfig({ root: EXAMPLE });
+        const v = emailsVersion(cfg);
+        expect(v).toMatch(/^\d+(\.\d+)?:\d+$/);
+        // at least Welcome.tsx + the client CSS files were counted
+        expect(Number(v.split(':')[1])).toBeGreaterThan(1);
+    });
+
+    it('the preview shell wires the dev endpoints', () => {
+        const html = previewShellHtml();
+        expect(html).toContain("var BASE = '/__toil/emails'");
+        for (const frag of ["BASE + '/list'", "BASE + '/render?name='", "BASE + '/version'"]) {
+            expect(html).toContain(frag);
+        }
+        expect(html).toContain('/__toil/open?file='); // open-in-editor
+    });
+});

package/test/emails.test.ts

@@ -0,0 +1,58 @@
+import { createElement, type ReactElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { __test } from '../src/compiler/emails';
+
+const render = (el: unknown): string => renderToStaticMarkup(el as ReactElement);
+
+describe('renderModule', () => {
+    it('discovers props as {{tokens}} and renders placeholders (alpha-sorted, deduped)', async () => {
+        const mod = {
+            default: (p: { name: string; code: string }) =>
+                createElement('p', null, `Hi ${p.name}, code ${p.code}`),
+        };
+        const r = await __test.renderModule('Welcome', mod, render);
+        if (!r) throw new Error('expected a rendered email');
+        expect(r.tokens).toEqual(['code', 'name']);
+        expect(r.html).toContain('{{name}}');
+        expect(r.html).toContain('{{code}}');
+    });
+
+    it('returns null when there is no default-exported component', async () => {
+        expect(await __test.renderModule('X', { default: 'nope' }, render)).toBeNull();
+    });
+
+    it('inlines imported CSS into element style="" (the reuse path)', async () => {
+        const mod = { default: () => createElement('h1', { className: 'email-title' }, 'Hello') };
+        const css = '.email-title { color: #111827; font-size: 22px; }';
+        const r = await __test.renderModule('Styled', mod, render, css);
+        if (!r) throw new Error('expected a rendered email');
+        // The class rule is moved onto the element as an inline style by the inliner.
+        expect(r.html).toMatch(/<h1[^>]*style="[^"]*color:\s*#111827/i);
+        expect(r.html).toMatch(/font-size:\s*22px/i);
+    });
+});
+
+describe('renderModuleSource', () => {
+    it('generates a typed Emails.<Name>.send with alpha-sorted token params', () => {
+        const src = __test.renderModuleSource([
+            {
+                name: 'Welcome',
+                subject: 'Welcome, {{name}}!',
+                html: '<p>{{code}}</p>',
+                text: 'code {{code}}',
+                tokens: ['code', 'name'],
+                purpose: 'welcome',
+            },
+        ]);
+        expect(src).toContain('export namespace Emails {');
+        expect(src).toContain('export namespace Welcome {');
+        expect(src).toContain(
+            'export function send(to: string, code: string, name: string, purpose: string = "welcome")',
+        );
+        expect(src).toContain(
+            'return new EmailTemplate(SUBJECT, TEXT, HTML).send(to, __v, purpose);',
+        );
+    });
+});