Set up end-to-end tests (#85)

packages/playground/devEnv/playwright.config.ts

@@ -0,0 +1,77 @@
+import type {PlaywrightTestConfig} from '@playwright/test'
+import {devices} from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: '../src',
+  testMatch: /.*\.e2e\.ts/,
+  /* Maximum time one test can run for. */
+  timeout: 100000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 10000,
+  },
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 0 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: process.env.CI ? 'github' : 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    // actionTimeout: 200,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  outputDir: '../test-results/',
+
+  /*
+  This will serve the playground before running the tests, unless the playground is already running.
+
+  Note that if the playground is not running but some other server is serving at port 8080, this will fail.
+  TODO 👆
+  */
+  webServer: {
+    command: 'yarn run serve',
+    port: 8080,
+    reuseExistingServer: !process.env.CI,
+  },
+}
+
+export default config

packages/playground/devEnv/vite.config.ts

@@ -3,7 +3,6 @@ import react from '@vitejs/plugin-react'
 import path from 'path'
 import {getAliasesFromTsConfigForRollup} from '../../../devEnv/getAliasesFromTsConfig'
 import {definedGlobals} from '../../../theatre/devEnv/buildUtils'
-import {existsSync, writeFileSync} from 'fs'
 
 /*
 We're using vite instead of the older pure-esbuild setup. The tradeoff is
@@ -18,36 +17,10 @@ const playgroundDir = path.join(__dirname, '..')
 
 const port = 8080
 
-/**
- * Creates playground/src/index.ts, since that file isn't committed to the repo.
- */
-function createPlaygroundIndex() {
-  const playgroundIndexContent = `
-  /**
-   * This file is created automatically and won't be comitted to the repo.
-   * You can change the import statement and import your own playground code.
-   * 
-   * Your own playground code should reside in './personal', which is a folder
-   * that won't be committed to the repo.
-   * 
-   * The shared playgrounds which other contributors can use are in the './shared' folder,
-   * which are comitted to the repo.
-   * 
-   * Happy playing!
-   * */
-  import './shared/r3f-rocket'
-  `
-
-  const playgroundEntry = path.join(playgroundDir, 'src/index.ts')
-  if (!existsSync(playgroundEntry)) {
-    writeFileSync(playgroundEntry, playgroundIndexContent, {encoding: 'utf-8'})
-  }
-}
-createPlaygroundIndex()
-
 // https://vitejs.dev/config/
 export default defineConfig({
   root: path.join(playgroundDir, './src'),
+
   assetsInclude: ['**/*.gltf', '**/*.glb'],
   server: {
     port,
@@ -61,5 +34,5 @@ export default defineConfig({
     */
     alias: [...getAliasesFromTsConfigForRollup()],
   },
-  define: definedGlobals,
+  define: {...definedGlobals, 'window.__IS_VISUAL_REGRESSION_TESTING': 'true'},
 })