feat: add E2E testing (#101)

Closes: #42

.github/workflows/docs.yml

@@ -16,6 +16,7 @@ jobs:
           node-version: 18
           cache: npm
       - run: npm ci
+      - run: npm run examples:build
       - run: npm run docs:build
       - uses: peaceiris/actions-gh-pages@v3
         with:

.github/workflows/verify.yml

@@ -29,3 +29,5 @@ jobs:
         run: npx lerna run test
       - name: Build
         run: npx lerna run build
+      - name: E2E
+        run: npm run e2e:test

commitlint.config.js

@@ -10,6 +10,7 @@ module.exports = {
         'core',
         'create',
         'docs',
+        'e2e',
         'examples',
         'legacy',
         'player',

package.json

@@ -23,6 +23,7 @@
     "docs:build": "npm run build -w packages/docs",
     "vite-plugin:build": "npm run build -w packages/vite-plugin",
     "vite-plugin:watch": "npm run watch -w packages/vite-plugin",
+    "e2e:test": "npm run test -w packages/e2e",
     "eslint": "eslint --fix \"**/*.ts?(x)\"",
     "prettier": "prettier --write ."
   },

packages/core/src/Project.ts

@@ -363,6 +363,12 @@ export class Project {
     }
   }
 
+  public async finishExport() {
+    while (this.exportCounter > 0) {
+      await new Promise(resolve => setTimeout(resolve, EXPORT_RETRY_DELAY));
+    }
+  }
+
   public syncAudio(frameOffset = 0) {
     this.audio.setTime(this.framesToSeconds(this.frame + frameOffset));
   }

packages/core/src/player/Player.ts

@@ -293,6 +293,7 @@ export class Player {
       }
 
       if (state.finished || this.project.frame >= state.endFrame) {
+        await this.project.finishExport();
         this.toggleRendering(false);
       }
 

packages/e2e/.gitignore

@@ -0,0 +1,2 @@
+output
+src/__image_snapshots__/__diff_output__

packages/e2e/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@motion-canvas/e2e",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@motion-canvas/2d": "*",
+    "@motion-canvas/core": "*",
+    "jest-image-snapshot": "^6.1.0",
+    "puppeteer": "^19.3.0",
+    "vitest": "^0.25.5"
+  },
+  "devDependencies": {
+    "@motion-canvas/ui": "*",
+    "@motion-canvas/vite-plugin": "*",
+    "@types/puppeteer": "^7.0.4",
+    "vite": "^3.0.5"
+  }
+}

packages/e2e/src/app.ts

@@ -0,0 +1,34 @@
+import * as path from 'path';
+import puppeteer, {Page} from 'puppeteer';
+import {fileURLToPath} from 'url';
+import {createServer} from 'vite';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+
+export interface App {
+  page: Page;
+  stop: () => Promise<void>;
+}
+
+export async function start(): Promise<App> {
+  const [browser, server] = await Promise.all([
+    puppeteer.launch(),
+    createServer({
+      root: __dirname,
+      configFile: path.resolve(__dirname, '../vite.config.ts'),
+      server: {
+        port: 9000,
+      },
+    }).then(server => server.listen()),
+  ]);
+
+  const page = await browser.newPage();
+  await page.goto('http://localhost:9000');
+
+  return {
+    page,
+    async stop() {
+      await Promise.all([browser.close(), server.close()]);
+    },
+  };
+}

packages/e2e/src/global.d.ts

@@ -0,0 +1,10 @@
+declare namespace jest {
+  interface Matchers<R> {
+    toMatchImageSnapshot(): R;
+  }
+}
+
+declare module 'jest-image-snapshot' {
+  const toMatchImageSnapshot: any;
+  export {toMatchImageSnapshot};
+}

packages/e2e/src/rendering.test.ts

@@ -0,0 +1,26 @@
+import {afterAll, beforeAll, describe, expect, test} from 'vitest';
+import {toMatchImageSnapshot} from 'jest-image-snapshot';
+import {App, start} from './app';
+import {readFileSync} from 'fs';
+
+expect.extend({toMatchImageSnapshot});
+
+describe('Rendering', () => {
+  let app: App;
+
+  beforeAll(async () => {
+    app = await start();
+  });
+
+  afterAll(async () => {
+    await app.stop();
+  });
+
+  test('Animation renders correctly', async () => {
+    await app.page.click('#rendering-tab');
+    await app.page.click('#render');
+    await app.page.waitForSelector('#render:not([data-rendering])');
+
+    expect(readFileSync('./output/project/000300.png')).toMatchImageSnapshot();
+  });
+});

packages/e2e/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@motion-canvas/2d/tsconfig.project.json",
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"]
+}

packages/e2e/vite.config.ts

@@ -0,0 +1,15 @@
+/// <reference types="vitest" />
+
+import {defineConfig} from 'vite';
+import motionCanvas from '@motion-canvas/vite-plugin';
+
+export default defineConfig({
+  plugins: [
+    motionCanvas.default({
+      project: ['@motion-canvas/template/src/project.ts'],
+    }),
+  ],
+  test: {
+    testTimeout: 60000,
+  },
+});

packages/examples/package.json

@@ -7,8 +7,8 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@motion-canvas/core": "*",
-    "@motion-canvas/2d": "*"
+    "@motion-canvas/2d": "*",
+    "@motion-canvas/core": "*"
   },
   "devDependencies": {
     "@motion-canvas/ui": "*",

packages/ui/src/components/console/Console.tsx

@@ -21,7 +21,7 @@ export function Console() {
   const [filters, setFilters] = useState(LOG_LEVELS);
 
   return (
-    <Pane title="Console">
+    <Pane title="Console" id="console">
       <div className={styles.navbar}>
         <div className={styles.pills}>
           {Object.keys(LOG_LEVELS).map(level => {

packages/ui/src/components/sidebar/Properties.tsx

@@ -22,7 +22,7 @@ export function Properties() {
   );
 
   return (
-    <Pane title="Properties">
+    <Pane title="Properties" id="properties-pane">
       {attributes
         ? Object.entries(attributes).map(([key, value]) => (
             <AutoField label={key} value={value} />

packages/ui/src/components/sidebar/Rendering.tsx

@@ -46,7 +46,7 @@ export function Rendering() {
   ];
 
   return (
-    <Pane title="Rendering">
+    <Pane title="Rendering" id="rendering-pane">
       <Group>
         <Label>range</Label>
         <Input
@@ -148,7 +148,12 @@ export function Rendering() {
       )}
       <Group>
         <Label />
-        <Button main onClick={() => player.toggleRendering()}>
+        <Button
+          main
+          id="render"
+          data-rendering={state.render}
+          onClick={() => player.toggleRendering()}
+        >
           {state.render ? 'STOP RENDERING' : 'RENDER'}
         </Button>
       </Group>

packages/ui/src/components/sidebar/Sidebar.tsx

@@ -47,6 +47,7 @@ export function Sidebar({setOpen}: SidebarProps) {
       >
         {{
           title: 'Project Selection',
+          id: 'project-selection-link',
           type: TabType.Link,
           icon: IconType.motionCanvas,
           url: window.location.pathname === '/' ? undefined : '/',
@@ -56,24 +57,28 @@ export function Sidebar({setOpen}: SidebarProps) {
         }}
         {{
           title: 'Inspector',
+          id: 'inspector-tab',
           type: TabType.Pane,
           icon: IconType.tune,
           pane: <Properties />,
         }}
         {{
           title: 'Video Settings',
+          id: 'rendering-tab',
           type: TabType.Pane,
           icon: IconType.videoSettings,
           pane: <Rendering />,
         }}
         {{
           title: 'Thread Debugger',
+          id: 'threads-tab',
           type: TabType.Pane,
           icon: IconType.schedule,
           pane: <Threads />,
         }}
         {{
           title: errorCount > 0 ? `Console (${errorCount})` : 'Console',
+          id: 'console-tab',
           type: TabType.Pane,
           icon: IconType.bug,
           pane: <Console />,

packages/ui/src/components/sidebar/Threads.tsx

@@ -18,7 +18,7 @@ export function Threads() {
   );
 
   return (
-    <Pane title="Threads">
+    <Pane title="Threads" id="threads-pane">
       {thread ? (
         <ThreadView thread={thread} />
       ) : (

packages/ui/src/components/tabs/Pane.tsx

@@ -4,12 +4,13 @@ import {ComponentChildren} from 'preact';
 
 export interface PaneProps {
   title: string;
+  id?: string;
   children: ComponentChildren;
 }
 
-export function Pane({title, children}: PaneProps) {
+export function Pane({title, id, children}: PaneProps) {
   return (
-    <div className={styles.pane}>
+    <div className={styles.pane} id={id}>
       <div className={styles.header}>{title}</div>
       {children}
     </div>

packages/ui/src/components/tabs/Tabs.tsx

@@ -18,12 +18,14 @@ type Tab =
       pane: ComponentChildren;
       badge?: ComponentChildren;
       title?: string;
+      id?: string;
     }
   | {
       type: TabType.Link;
       icon: IconType;
       url?: string;
       title?: string;
+      id?: string;
     }
   | {
       type: TabType.Space;
@@ -62,12 +64,14 @@ export function Tabs({children, tab, onToggle}: TabsProps) {
               title={data.title}
               type={data.icon}
               href={data.url}
+              id={data.id}
               className={classes(styles.tab, [styles.disabled, !data.url])}
             />
           ) : data.type === TabType.Pane ? (
             <Icon
               type={data.icon}
               title={data.title}
+              id={data.id}
               onClick={() => toggleTab(index)}
               className={classes(styles.tab, [styles.active, tab === index])}
             >