shellscape · shellscape · Dec 30, 2023 · Dec 17, 2023 · Dec 28, 2023 · Dec 29, 2023
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -82,3 +82,10 @@ jobs:
 
       - name: Run Tests
         run: moon run :test --affected --concurrency 1 --remote
+
+      - name: Run Preview Test
+        # Note: We're running `pnpm i` again so that pnpm places the `email` bin in root node_modules
+        # We'll need that for the preview tests below
+        run: |
+          pnpm i
+          moon app-test:playwright
diff --git a/.gitignore b/.gitignore
@@ -12,4 +12,9 @@ dist
 **/.vitepress/cache
 
 packages/**/tsconfig.json
-packages/jsx-email/README.md
+packages/jsx-email/README.md
+
+test-results
+playwright-report
+blob-report
+playwright/.cache/
diff --git a/.npmrc b/.npmrc
@@ -1,4 +1,3 @@
-//registry.npmjs.org/:_authToken=${NPM_TOKEN}
 
 # npm options
 auth-type=legacy

diff --git a/apps/demo/emails/local-assets.tsx b/apps/demo/emails/local-assets.tsx
diff --git a/apps/demo/fixtures/jsx-template.jsx b/apps/demo/fixtures/jsx-template.jsx
diff --git a/apps/test/fixtures/base.jsx b/apps/test/fixtures/base.jsx
@@ -0,0 +1,65 @@
+import {
+  Body,
+  Button,
+  ColorScheme,
+  Column,
+  Container,
+  Font,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Markdown,
+  Preview,
+  // QrCode,
+  Row,
+  Section,
+  Text
+} from 'jsx-email';
+
+export const Template = () => (
+  <Html>
+    <ColorScheme />
+    <Head />
+    <Preview>Preview Content</Preview>
+    <Body>
+      <Container>
+        <Section>
+          <Button href="https://jsx.email">Button Content</Button>
+          <Font
+            fontFamily="Roboto"
+            fallbackFontFamily="Verdana"
+            webFont={{
+              format: 'woff2',
+              url: 'https://fonts.gstatic.com/s/roboto/v27/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2'
+            }}
+            fontWeight={400}
+            fontStyle="normal"
+          />
+          <Heading>Heading Content</Heading>
+          <Hr />
+          <Img src="https://about.google/assets-main/img/glue-google-solid-logo.svg" />
+          <Link href="https://jsx.email"></Link>
+          <Markdown
+            markdownCustomStyles={{
+              codeInline: { background: 'grey' },
+              h1: { color: 'red' },
+              h2: { color: 'blue' }
+            }}
+            markdownContainerStyles={{
+              border: 'solid 1px black',
+              padding: '12px'
+            }}
+          >{`# Hello, World!`}</Markdown>
+          {/* <QrCode src="https://example.com" alt="QR Code" size={300} correctionLevel="H" /> */}
+          <Row>
+            <Column>Column</Column>
+          </Row>
+          <Text>Text Content</Text>
+        </Section>
+      </Container>
+    </Body>
+  </Html>
+);
diff --git a/apps/demo/emails/code.tsx → apps/test/fixtures/code.tsx b/apps/demo/emails/code.tsx → apps/test/fixtures/code.tsx
diff --git a/apps/test/fixtures/local-assets.tsx b/apps/test/fixtures/local-assets.tsx
@@ -0,0 +1,18 @@
+import { Body, Html, Img, Link } from 'jsx-email';
+
+export const TemplateName = 'local-assets';
+
+// @ts-ignore
+const baseUrl = import.meta.resolve('./static/');
+
+export const Template = () => {
+  const catUrl = `${baseUrl}cat.jpeg`;
+  return (
+    <Html>
+      <Body>
+        <Img id="image" src={catUrl} alt="Cat" width="200" height="200" />
+        <Link href={catUrl}>{catUrl}</Link>
+      </Body>
+    </Html>
+  );
+};
diff --git a/apps/test/fixtures/static/cat.jpeg b/apps/test/fixtures/static/cat.jpeg
diff --git a/apps/demo/fixtures/no-html-tag.tsx → apps/test/fixtures/tailwind.tsx b/apps/demo/fixtures/no-html-tag.tsx → apps/test/fixtures/tailwind.tsx
diff --git a/apps/test/moon.yml b/apps/test/moon.yml
@@ -0,0 +1,26 @@
+# https://moonrepo.dev/docs/config/tasks
+$schema: 'https://moonrepo.dev/schemas/tasks.json'
+
+workspace:
+  inheritedTasks:
+    exclude: ['build', 'compile', 'release', 'test']
+
+tasks:
+  dev:
+    command: email preview fixtures
+    options:
+      cache: false
+
+  install:
+    command: playwright install --with-deps
+    deps:
+    - ~:install
+    options:
+      cache: false
+
+  playwright:
+    command: playwright test -x
+    deps:
+    - ~:install
+    options:
+      cache: false
diff --git a/apps/test/package.json b/apps/test/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "app-test",
+  "version": "0.0.0",
+  "private": true,
+  "description": "A project to demo and test the `email preview` CLI command",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "@playwright/test": "^1.40.1",
+    "dedent": "^1.5.1",
+    "diffable-html": "^5.0.0",
+    "jsx-email": "workspace:*",
+    "superstruct": "^1.0.3"
+  },
+  "devDependencies": {
+    "@types/diffable-html": "^5.0.2",
+    "@types/node": "20.10.5"
+  }
+}
diff --git a/apps/test/playwright.config.ts b/apps/test/playwright.config.ts
@@ -0,0 +1,42 @@
+/* eslint-disable import/no-default-export */
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  forbidOnly: !!process.env.CI,
+  fullyParallel: true,
+  maxFailures: 1,
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] }
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] }
+    // }
+  ],
+  reporter: 'list',
+  retries: process.env.CI ? 2 : 0,
+  snapshotPathTemplate:
+    '{testDir}/.snapshots/{testFileDir}/{testFileName}-{arg}{-projectName}{ext}',
+  testDir: './tests',
+  use: {
+    baseURL: 'http://localhost:55420',
+    trace: 'on-first-retry'
+  },
+  webServer: {
+    command: 'moon app-test:dev',
+    reuseExistingServer: !process.env.CI,
+    url: 'http://localhost:55420'
+  },
+  workers: process.env.CI ? 1 : undefined
+});
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-landing-1-chromium.txt b/apps/test/tests/.snapshots/smoke.spec.ts-landing-1-chromium.txt
@@ -0,0 +1 @@
+<h2 class="font-medium">JSX Email Preview</h2><p class="mt-2 mb-4 text-sm">Start creating an email template by running <code class="inline-code">email create &lt;template-name&gt;</code><br><br>Run <code class="inline-code">email help create</code> for a list of options<br><br>Happy coding!</p><a href="https://jsx.email/docs/introduction" class="mt-4 inline-block focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90 text-base py-2 px-4 rounded gap-2 bg-cta-bg text-cta-text hover:bg-cta-bg-hover">Read our Documentation</a>
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-landing-1-firefox.txt b/apps/test/tests/.snapshots/smoke.spec.ts-landing-1-firefox.txt
@@ -0,0 +1 @@
+<h2 class="font-medium">JSX Email Preview</h2><p class="mt-2 mb-4 text-sm">Start creating an email template by running <code class="inline-code">email create &lt;template-name&gt;</code><br><br>Run <code class="inline-code">email help create</code> for a list of options<br><br>Happy coding!</p><a href="https://jsx.email/docs/introduction" class="mt-4 inline-block focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90 text-base py-2 px-4 rounded gap-2 bg-cta-bg text-cta-text hover:bg-cta-bg-hover">Read our Documentation</a>
diff --git a/apps/test/tests/.snapshots/smoke.spec.ts-landing-1-webkit.txt b/apps/test/tests/.snapshots/smoke.spec.ts-landing-1-webkit.txt
@@ -0,0 +1 @@
+<h2 class="font-medium">JSX Email Preview</h2><p class="mt-2 mb-4 text-sm">Start creating an email template by running <code class="inline-code">email create &lt;template-name&gt;</code><br><br>Run <code class="inline-code">email help create</code> for a list of options<br><br>Happy coding!</p><a href="https://jsx.email/docs/introduction" class="mt-4 inline-block focus:ring-2 focus:ring-white/20 focus:outline-none focus:bg-white/90 text-base py-2 px-4 rounded gap-2 bg-cta-bg text-cta-text hover:bg-cta-bg-hover">Read our Documentation</a>