chore: test

.github/workflows/test-cli.yml

@@ -66,4 +66,4 @@ jobs:
         # We'll need that for the preview tests below
         run: |
           pnpm i
-          moon test-cli:test
+          moon test-cli:test.run

assets/templates/email.mustache

@@ -10,7 +10,7 @@ import {
   Section,
   Text
 } from 'jsx-email';
-
+{{ typeProps }}
 const main = {
   backgroundColor: '#f6f9fc',
   fontFamily:
@@ -46,8 +46,8 @@ const anchor = {
 
 const button = {
   fontWeight: 'bold',
-  textDecoration: 'none',
-  padding: '10px'
+  padding: '10px',
+  textDecoration: 'none'
 };
 
 export const previewProps = {
@@ -66,13 +66,15 @@ export const Template = ({ email, name }{{ propsType }}) => (
         <Section style={box}>
           <Text style={paragraph}>This is our email body text</Text>
           <Button
-            style={button}
-            href="https://example.com"
             align={'center'}
             backgroundColor={'#777'}
             borderRadius={5}
             fontSize={16}
+            height={60}
+            href="https://example.com"
+            style={button}
             textColor={'#fff'}
+            width={160}
           >
             Action Button
           </Button>

packages/create-jsx-email/src/index.ts

@@ -2,7 +2,7 @@
 
 import { existsSync, readdirSync, rmSync } from 'fs';
 import { mkdir, readFile, writeFile } from 'fs/promises';
-import { basename, dirname, join, resolve, win32, posix } from 'path';
+import { basename, dirname, join, relative, resolve, win32, posix } from 'path';
 import { fileURLToPath } from 'node:url';
 
 import chalk from 'chalk-template';
@@ -48,10 +48,10 @@ const isEmpty = (path: string) => {
 const { log } = console;
 const normalizePath = (filename: string) => filename.split(win32.sep).join(posix.sep);
 const typeDep = ',\n"@types/react": "^18.2.0",\n"typescript": "^5.2.2"';
-const typeProps = `\nexport type TemplateProps = {
+const typeProps = `\ninterface TemplateProps {
   email: string;
   name: string;
-}`;
+}\n`;
 const argv = yargs(process.argv.slice(2), { configuration: { 'strip-dashed': true } });
 const argTargetDir: string = argv._[0] as string;
 
@@ -67,9 +67,10 @@ export const createEmail = async ({ jsx, name, outputPath }: CreateEmailArgs) =>
   const fileName = basename(templatePath)
     .replace('_', '')
     .replace('.mustache', jsx ? '.jsx' : '.tsx');
-  const outPath = join(outputPath, fileName);
+  const relativePath = relative(process.cwd(), outputPath);
+  const outPath = join(relativePath, fileName);
 
-  log('Creating a new template at', outPath);
+  log(chalk`{blue Creating a new template} at: {cyan ${outPath}}`);
 
   await writeFile(outPath, contents, 'utf8');
 
@@ -141,9 +142,10 @@ const run = async () => {
   const templates = await globby([normalizePath(join(generatorsPath, '/*.*'))]);
   const outputPath = join(root, 'templates');
   const templateData = { name: projectName, typeDep: jsx ? '' : typeDep };
+  const relativePath = relative(process.cwd(), outputPath);
 
   log('');
-  log(chalk`{blue Creating Project} at: {dim ${root}}`);
+  log(chalk`{blue Creating Project} at: {dim ${relativePath}}`);
 
   if (overwrite && existsSync(root)) clearDirectory(root);
 
@@ -163,7 +165,7 @@ const run = async () => {
 
   await createEmail({ jsx, name: projectName, outputPath });
 
-  const packageManager = await detect();
+  const packageManager = process.env.IS_CLI_TEST ? 'pnpm' : await detect();
   const install =
     packageManager === 'yarn'
       ? `  $ yarn\n  $ yarn dev`

test/cli/.npmrc

@@ -0,0 +1 @@
+loglevel=error

test/cli/.snapshots/create-jsx-email.test.ts.snap

@@ -0,0 +1,134 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`create-jsx-email > command 1`] = `
+"
+create-jsx-email v2.0.3
+
+The fastest way to get started with JSX Email
+
+
+Creating Project at: .test/new/templates
+Creating a new template at: .test/new/templates/email.tsx
+
+✓ jsx-email Project Created
+
+Next, run:
+
+  $ cd email-project
+  $ pnpm install
+  $ pnpm run dev
+
+Check out the docs! http://jsx.email/docs/quick-start
+"
+`;
+
+exports[`create-jsx-email > command 2`] = `
+"import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Hr,
+  Html,
+  Link,
+  Preview,
+  Section,
+  Text
+} from 'jsx-email';
+
+interface TemplateProps {
+  email: string;
+  name: string;
+}
+
+const main = {
+  backgroundColor: '#f6f9fc',
+  fontFamily:
+    '-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,\\"Helvetica Neue\\",Ubuntu,sans-serif'
+};
+
+const container = {
+  backgroundColor: '#ffffff',
+  margin: '0 auto',
+  marginBottom: '64px',
+  padding: '20px 0 48px'
+};
+
+const box = {
+  padding: '0 48px'
+};
+
+const hr = {
+  borderColor: '#e6ebf1',
+  margin: '20px 0'
+};
+
+const paragraph = {
+  color: '#777',
+  fontSize: '16px',
+  lineHeight: '24px',
+  textAlign: 'left' as const
+};
+
+const anchor = {
+  color: '#777'
+};
+
+const button = {
+  fontWeight: 'bold',
+  padding: '10px',
+  textDecoration: 'none'
+};
+
+export const previewProps = {
+  email: '[email protected]',
+  name: 'Bruce Wayne'
+};
+
+export const templateName = 'email-project';
+
+export const Template = ({ email, name }: TemplateProps) => (
+  <Html>
+    <Head />
+    <Preview>This is our email preview text for {name} &lt;{email}&gt;</Preview>
+    <Body style={main}>
+      <Container style={container}>
+        <Section style={box}>
+          <Text style={paragraph}>This is our email body text</Text>
+          <Button
+            align={'center'}
+            backgroundColor={'#777'}
+            borderRadius={5}
+            fontSize={16}
+            height={60}
+            href=\\"https://example.com\\"
+            style={button}
+            textColor={'#fff'}
+            width={160}
+          >
+            Action Button
+          </Button>
+          <Hr style={hr} />
+          <Text style={paragraph}>
+            This is text content with a{' '}
+            <Link style={anchor} href=\\"mailto:{email}\\">
+              link
+            </Link>
+            .
+          </Text>
+        </Section>
+      </Container>
+    </Body>
+  </Html>
+);
+"
+`;
+
+exports[`create-jsx-email > command 3`] = `
+[
+  ".test/new/README.md",
+  ".test/new/package.json",
+  ".test/new/tsconfig.json",
+  ".test/new/templates/email.tsx",
+]
+`;

test/cli/create-jsx-email.test.ts

@@ -0,0 +1,28 @@
+import { readFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+import { execa } from 'execa';
+import { globby } from 'globby';
+import strip from 'strip-ansi';
+
+process.chdir(__dirname);
+
+describe('create-jsx-email', async () => {
+  test('command', async () => {
+    const { stdout } = await execa({
+      cwd: __dirname,
+      shell: true
+      // Note: For some reason `pnpm exec` is fucking with our CWD, and resets it to
+      // packages/jsx-email, which causes the config not to be found. so we use npx instead
+    })`IS_CLI_TEST=true pnpm --silent exec create-jsx-email .test/new --yes`;
+    const plain = strip(stdout).replace(/^(.*)create-jsx-email/, 'create-jsx-email');
+
+    expect(plain).toMatchSnapshot();
+
+    const contents = await readFile(join(__dirname, '.test/new/templates/email.tsx'), 'utf8');
+    expect(contents).toMatchSnapshot();
+
+    const files = await globby('.test/new/**/*');
+    expect(files).toMatchSnapshot();
+  });
+});

test/cli/moon.yml

@@ -6,7 +6,8 @@ workspace:
     exclude: ['build', 'compile', 'release', 'test']
 
 tasks:
-  test:
+  # Naming this differently so it's not picked up bu the main test workflow
+  test.run:
     command: vitest --config ../../shared/vitest.config.ts . --no-threads
     inputs:
       - ./**.*.test.ts

test/cli/package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "dependencies": {
     "execa": "^9.4.1",
+    "globby": "^14.0.2",
     "jsx-email": "workspace:^",
     "strip-ansi": "^7.1.0"
   }