chore: enable testing for CI

shellscape · Sep 28, 2023 · 920a3af · 920a3af
1 parent 298532f
commit 920a3af
Show file tree

Hide file tree

Showing 51 changed files with 285 additions and 242 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,8 +1,5 @@
 # Note: We're ignoring this while we get the rest of the repo setup
+.snapshots
 apps
-node_modules
 dist
-**/*spec.tsx
-**/*spec.ts
-
-deprecated
+node_modules
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
@@ -22,7 +22,6 @@ jobs:
         uses: actions/checkout@v4
         with:
           fetch-depth: 10
-          ref: main
 
       # Needed for https://github.com/moonrepo/moon/issues/1060
       - name: Force Update Main

diff --git a/.moon/tasks.yml b/.moon/tasks.yml
@@ -14,11 +14,11 @@ tasks:
     command: rm -f tsconfig.json
     deps:
       - ~:compile
+    inputs:
+      - src
+      - package.json
     options:
       cache: false
-      inputs:
-        - src
-        - package.json
       outputStyle: 'stream'
       runDepsInParallel: false
 
@@ -31,6 +31,7 @@ tasks:
     command: tsc --project tsconfig.json --outDir dist/es --module esnext --target esnext
     inputs:
       - src
+      - package.json
     deps:
       - ~:tsconfig.link
       - ~:compile.cjs
@@ -60,10 +61,11 @@ tasks:
     platform: system
 
   test:
-    command: vitest
+    command: vitest --config ../../shared/vitest.config.ts
+    inputs:
+      - src
+      - test
+      - package.json
     options:
       cache: true
-      inputs:
-        - src
-        - package.json
       outputStyle: 'stream'
diff --git a/apps/demo/moon.yml b/apps/demo/moon.yml
@@ -3,7 +3,7 @@ $schema: 'https://moonrepo.dev/schemas/tasks.json'
 
 workspace:
   inheritedTasks:
-    exclude: ['build', 'compile']
+    exclude: ['build', 'compile', 'test']
 
 tasks:
   dev:

diff --git a/packages/all/moon.yml b/packages/all/moon.yml
@@ -0,0 +1,6 @@
+# https://moonrepo.dev/docs/config/tasks
+$schema: 'https://moonrepo.dev/schemas/tasks.json'
+
+workspace:
+  inheritedTasks:
+    exclude: ['test']
diff --git a/packages/body/test/.snapshots/body.test.tsx.snap b/packages/body/test/.snapshots/body.test.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`render > renders the <Body> component 1`] = `"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><body data-id=\\"@jsx-email/body\\">Lorem ipsum</body>"`;
diff --git a/packages/body/src/body.spec.tsx → packages/body/test/body.test.tsx b/packages/body/src/body.spec.tsx → packages/body/test/body.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@jsx-email/render';
-import { Body } from './index';
+
+import { Body } from '../src';
 
 describe('render', () => {
   beforeEach(() => {
@@ -26,8 +27,6 @@ describe('render', () => {
 
   it('renders the <Body> component', () => {
     const actualOutput = render(<Body>Lorem ipsum</Body>);
-    expect(actualOutput).toMatchInlineSnapshot(
-      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><body data-id=\\"@jsx-email/body\\">Lorem ipsum</body>"'
-    );
+    expect(actualOutput).toMatchSnapshot();
   });
 });
diff --git a/packages/button/src/button.spec.tsx b/packages/button/src/button.spec.tsx
diff --git a/packages/button/test/.snapshots/button.test.tsx.snap b/packages/button/test/.snapshots/button.test.tsx.snap
@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Button> component > renders correctly  with padding values from style prop 1`] = `"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><a href=\\"https://example.com\\" data-id=\\"@jsx-email/button\\" target=\\"_blank\\" style=\\"display:inline-block;line-height:100%;max-width:100%;padding:12px 20px 12px 20px;text-decoration:none\\"><span><!--[if mso]><i style=\\"letter-spacing: 20px;mso-font-width:-100%;mso-text-raise:18\\" hidden>&nbsp;</i><![endif]--></span><span style=\\"display:inline-block;line-height:120%;max-width:100%;mso-padding-alt:0px;mso-text-raise:9px\\"></span><span><!--[if mso]><i style=\\"letter-spacing: 20px;mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a>"`;
+
+exports[`<Button> component > renders with no padding value 1`] = `"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><a href=\\"https://example.com\\" data-id=\\"@jsx-email/button\\" target=\\"_blank\\" style=\\"display:inline-block;line-height:100%;max-width:100%;padding:0px 0px 0px 0px;text-decoration:none\\"><span><!--[if mso]><i style=\\"letter-spacing: 0px;mso-font-width:-100%;mso-text-raise:0\\" hidden>&nbsp;</i><![endif]--></span><span style=\\"display:inline-block;line-height:120%;max-width:100%;mso-padding-alt:0px;mso-text-raise:0\\"></span><span><!--[if mso]><i style=\\"letter-spacing: 0px;mso-font-width:-100%\\" hidden>&nbsp;</i><![endif]--></span></a>"`;
diff --git a/packages/button/test/button.test.tsx b/packages/button/test/button.test.tsx
@@ -0,0 +1,39 @@
+import { render } from '@jsx-email/render';
+
+import { Button } from '../src';
+
+describe('<Button> component', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks();
+    vi.resetModules();
+  });
+
+  it('renders children correctly', () => {
+    const testMessage = 'Test message';
+    const html = render(<Button>{testMessage}</Button>);
+    expect(html).toContain(testMessage);
+  });
+
+  it('passes style and other props correctly', () => {
+    const style = { backgroundColor: 'red' };
+    const html = render(
+      <Button style={style} data-testid="button-test">
+        Test
+      </Button>
+    );
+    expect(html).toContain('background-color:red');
+    expect(html).toContain('data-testid="button-test"');
+  });
+
+  it('renders correctly  with padding values from style prop', () => {
+    const actualOutput = render(
+      <Button style={{ padding: '12px 20px' }} href="https://example.com" />
+    );
+    expect(actualOutput).toMatchSnapshot();
+  });
+
+  it('renders with no padding value', () => {
+    const actualOutput = render(<Button href="https://example.com" />);
+    expect(actualOutput).toMatchSnapshot();
+  });
+});
diff --git a/packages/button/src/utils/utils.spec.ts → packages/button/test/utils.test.ts b/packages/button/src/utils/utils.spec.ts → packages/button/test/utils.test.ts
@@ -1,4 +1,4 @@
-import { convertToPx, parsePadding, pxToPt } from '.';
+import { convertToPx, parsePadding, pxToPt } from '../src/utils';
 
 describe('convertToPx', () => {
   it('converts "10px" to 10', () => {
@@ -40,42 +40,42 @@ describe('convertToPx', () => {
 describe('parsePadding', () => {
   it('parses number input as all paddings', () => {
     const result = parsePadding({ padding: 10 });
-    expect(result).toEqual({ pt: 10, pr: 10, pb: 10, pl: 10 });
+    expect(result).toEqual({ pb: 10, pl: 10, pr: 10, pt: 10 });
   });
 
   it('parses "10px" as all paddings', () => {
     const result = parsePadding({ padding: '10px' });
-    expect(result).toEqual({ pt: 10, pr: 10, pb: 10, pl: 10 });
+    expect(result).toEqual({ pb: 10, pl: 10, pr: 10, pt: 10 });
   });
 
   it('parses "10px 20px" as pt, pr, pl, pb', () => {
     const result = parsePadding({ padding: '10px 2em' });
-    expect(result).toEqual({ pt: 10, pr: 32, pb: 10, pl: 32 });
+    expect(result).toEqual({ pb: 10, pl: 32, pr: 32, pt: 10 });
   });
 
   it('parses "10px 20px 30px" as pt, pr, pb, pl', () => {
     const result = parsePadding({ padding: '10px 20px 30px' });
-    expect(result).toEqual({ pt: 10, pr: 20, pb: 30, pl: 20 });
+    expect(result).toEqual({ pb: 30, pl: 20, pr: 20, pt: 10 });
   });
 
   it('parses "10px 20px 30px 40px" as pt, pr, pb, pl', () => {
     const result = parsePadding({ padding: '10px 20px 30px 40px' });
-    expect(result).toEqual({ pt: 10, pr: 20, pb: 30, pl: 40 });
+    expect(result).toEqual({ pb: 30, pl: 40, pr: 20, pt: 10 });
   });
 
   it('handles undefined input as zeros', () => {
     const result = parsePadding({ padding: undefined });
-    expect(result).toEqual({ pt: 0, pr: 0, pb: 0, pl: 0 });
+    expect(result).toEqual({ pb: 0, pl: 0, pr: 0, pt: 0 });
   });
 
   it('handles empty string input as zeros', () => {
     const result = parsePadding({ padding: '' });
-    expect(result).toEqual({ pt: 0, pr: 0, pb: 0, pl: 0 });
+    expect(result).toEqual({ pb: 0, pl: 0, pr: 0, pt: 0 });
   });
 
   it('overrides general padding value with specific padding value if specified', () => {
     const result = parsePadding({ padding: 10, paddingRight: '1em' });
-    expect(result).toEqual({ pt: 10, pr: 16, pb: 10, pl: 10 });
+    expect(result).toEqual({ pb: 10, pl: 10, pr: 16, pt: 10 });
   });
 });
 

diff --git a/packages/cli/moon.yml b/packages/cli/moon.yml
@@ -3,7 +3,7 @@ $schema: 'https://moonrepo.dev/schemas/tasks.json'
 
 workspace:
   inheritedTasks:
-    exclude: ['build', 'compile']
+    exclude: ['build', 'compile', 'test']
 
 tasks:
   build:

diff --git a/packages/cli/test/.gitkeep b/packages/cli/test/.gitkeep
diff --git a/packages/column/test/.snapshots/column.test.tsx.snap b/packages/column/test/.snapshots/column.test.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Column> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><td data-id=\\"@jsx-email/column\\">Lorem ipsum</td>"`;
diff --git a/packages/column/src/column.spec.tsx → packages/column/test/column.test.tsx b/packages/column/src/column.spec.tsx → packages/column/test/column.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@jsx-email/render';
-import { Column } from './index';
+
+import { Column } from '../src';
 
 describe('<Column> component', () => {
   beforeEach(() => {
@@ -26,8 +27,6 @@ describe('<Column> component', () => {
 
   it('renders correctly', () => {
     const actualOutput = render(<Column>Lorem ipsum</Column>);
-    expect(actualOutput).toMatchInlineSnapshot(
-      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><td data-id=\\"@jsx-email/column\\">Lorem ipsum</td>"'
-    );
+    expect(actualOutput).toMatchSnapshot();
   });
 });
diff --git a/packages/container/test/.snapshots/container.test.tsx.snap b/packages/container/test/.snapshots/container.test.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Container> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><table align=\\"center\\" width=\\"100%\\" data-id=\\"@jsx-email/container\\" role=\\"presentation\\" cellSpacing=\\"0\\" cellPadding=\\"0\\" border=\\"0\\" style=\\"max-width:300px\\"><tbody><tr style=\\"width:100%\\"><td><button>Hi</button></td></tr></tbody></table>"`;
diff --git a/packages/container/src/container.spec.tsx → packages/container/test/container.test.tsx b/packages/container/src/container.spec.tsx → packages/container/test/container.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@jsx-email/render';
-import { Container } from './index';
+
+import { Container } from '../src';
 
 describe('<Container> component', () => {
   beforeEach(() => {
@@ -14,7 +15,7 @@ describe('<Container> component', () => {
   });
 
   it('passes style and other props correctly', () => {
-    const style = { maxWidth: 300, backgroundColor: 'red' };
+    const style = { backgroundColor: 'red', maxWidth: 300 };
     const html = render(
       <Container style={style} data-testid="container-test">
         Test
@@ -31,8 +32,6 @@ describe('<Container> component', () => {
       </Container>
     );
 
-    expect(container).toMatchInlineSnapshot(
-      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><table align=\\"center\\" width=\\"100%\\" data-id=\\"@jsx-email/container\\" role=\\"presentation\\" cellSpacing=\\"0\\" cellPadding=\\"0\\" border=\\"0\\" style=\\"max-width:300px\\"><tbody><tr style=\\"width:100%\\"><td><button>Hi</button></td></tr></tbody></table>"'
-    );
+    expect(container).toMatchSnapshot();
   });
 });
diff --git a/packages/font/test/.snapshots/font.test.tsx.snap b/packages/font/test/.snapshots/font.test.tsx.snap
@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Font> component > renders correctly 1`] = `
+"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><style>
+    @font-face {
+      font-family: 'Roboto';
+      font-style: normal;
+      font-weight: 400;
+      mso-font-alt: 'Verdana';
+      
+    }
+
+    * {
+      font-family: 'Roboto', Verdana;
+    }
+  </style>"
+`;
diff --git a/packages/font/src/font.spec.tsx → packages/font/test/font.test.tsx b/packages/font/src/font.spec.tsx → packages/font/test/font.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@jsx-email/render';
-import { Font } from './index';
+
+import { Font } from '../src';
 
 describe('<Font> component', () => {
   beforeEach(() => {
@@ -17,8 +18,8 @@ describe('<Font> component', () => {
 
   it('renders with webFont prop', () => {
     const webFont = {
-      url: 'example.com/font.woff',
-      format: 'woff'
+      format: 'woff',
+      url: 'example.com/font.woff'
     } as const;
 
     const html = render(
@@ -37,20 +38,6 @@ describe('<Font> component', () => {
 
   it('renders correctly', () => {
     const actualOutput = render(<Font fontFamily="Roboto" fallbackFontFamily={'Verdana'} />);
-    expect(actualOutput).toMatchInlineSnapshot(`
-      "<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><style>
-          @font-face {
-            font-family: 'Roboto';
-            font-style: normal;
-            font-weight: 400;
-            mso-font-alt: 'Verdana';
-            
-          }
-
-          * {
-            font-family: 'Roboto', Verdana;
-          }
-        </style>"
-    `);
+    expect(actualOutput).toMatchSnapshot();
   });
 });
diff --git a/packages/head/test/.snapshots/head.test.tsx.snap b/packages/head/test/.snapshots/head.test.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<Head> component > renders correctly 1`] = `"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><head data-id=\\"@jsx-email/head\\"><meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\"/></head>"`;
diff --git a/packages/head/src/head.spec.tsx → packages/head/test/head.test.tsx b/packages/head/src/head.spec.tsx → packages/head/test/head.test.tsx
@@ -1,5 +1,6 @@
 import { render } from '@jsx-email/render';
-import { Head } from './index';
+
+import { Head } from '../src';
 
 describe('<Head> component', () => {
   beforeEach(() => {
@@ -15,9 +16,7 @@ describe('<Head> component', () => {
 
   it('renders correctly', () => {
     const actualOutput = render(<Head />);
-    expect(actualOutput).toMatchInlineSnapshot(
-      '"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><head data-id=\\"@jsx-email/head\\"><meta http-equiv=\\"Content-Type\\" content=\\"text/html; charset=UTF-8\\"/></head>"'
-    );
+    expect(actualOutput).toMatchSnapshot();
   });
 
   it('renders style tags', () => {

diff --git a/packages/heading/test/.snapshots/heading.test.tsx.snap b/packages/heading/test/.snapshots/heading.test.tsx.snap
@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`render > renders the <Heading> component 1`] = `"<!DOCTYPE html PUBLIC \\"-//W3C//DTD XHTML 1.0 Transitional//EN\\" \\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\\"><h2 data-id=\\"@jsx-email/heading\\" style=\\"margin-left:4px;margin-right:4px\\">Lorem ipsum</h2>"`;