Setup docker to produce visual regression tests for linux on non-linux hosts

devEnv/tsconfig.json

@@ -4,7 +4,7 @@
     "outDir": "dist",
     "lib": ["ESNext", "DOM"],
     "rootDir": ".",
-    "types": ["node"],
+    "types": ["node", "jest"],
     "noEmit": true,
     "target": "es6",
     "composite": true

devEnv/verify-docker-compose.test.ts

@@ -0,0 +1,57 @@
+import * as fs from 'fs'
+import * as path from 'path'
+import * as yaml from 'yaml'
+
+describe(`Docker-compose`, () => {
+  test(`should exclude all node_modules folders`, () => {
+    const dockerComposeFile = fs.readFileSync(
+      path.join(__dirname, '../docker-compose.yml'),
+      {encoding: 'utf8'},
+    )
+
+    const yamlContent = yaml.parse(dockerComposeFile)
+    const dockerVolumes = yamlContent.services['node'].volumes
+    const dockerVolumesThatExludeNodeModules = dockerVolumes.filter(
+      (volume: string) => volume.includes('node_modules'),
+    )
+
+    const allFoldersToExclude = findAllNodejsFoldersAt(
+      path.join(__dirname, '..'),
+    ).map((fullPath) => {
+      return path.join(
+        '/app',
+        path.relative(path.join(__dirname, '..'), fullPath),
+      )
+    })
+
+    const missingExclusions = allFoldersToExclude.filter(
+      (folder) => !dockerVolumesThatExludeNodeModules.includes(folder),
+    )
+
+    if (missingExclusions.length > 0) {
+      throw new Error(
+        `Some node_modules folders are not excluded from docker-compose.yml. You should add them
+        to the voluems section of the node service:\n${missingExclusions
+          .map((s) => '- ' + s)
+          .join('\n')}`,
+      )
+    }
+  })
+})
+
+function findAllNodejsFoldersAt(dir: string): string[] {
+  const files = fs.readdirSync(dir)
+  const found: string[] = []
+  for (const file of files) {
+    if (file === 'package.json') {
+      found.push(path.join(dir, 'node_modules'))
+    } else if (file !== 'node_modules') {
+      const filePath = path.join(dir, file)
+      const stats = fs.statSync(filePath)
+      if (stats.isDirectory()) {
+        found.push(...findAllNodejsFoldersAt(filePath))
+      }
+    }
+  }
+  return found
+}

docker-compose.yml

@@ -0,0 +1,40 @@
+# The docker-compose file is only used to *test* the repo on a local linux vm. You don't have
+# to use docker or know docker to develop the repo.
+version: '3.8'
+name: theatre-monorepo
+services:
+  node:
+    image: mcr.microsoft.com/playwright:v1.36.0-jammy
+    volumes:
+      - .:/app
+      # This ignores all node_modules folders/sub-folders so that we can have a separate installation
+      # of node_modules in host and in the container.
+      # If a folder is missing, the test at devEnv/verify-docker-compose.test.ts will fail, and it'll
+      # tell you which folder(s) are missing.
+      - /app/node_modules
+      - /app/compat-tests/fixtures/basic-react17/package/node_modules
+      - /app/compat-tests/fixtures/r3f-cra/package/node_modules
+      - /app/compat-tests/fixtures/r3f-next-latest/package/.next/node_modules
+      - /app/compat-tests/fixtures/r3f-next-latest/package/.next/types/node_modules
+      - /app/compat-tests/fixtures/r3f-next-latest/package/node_modules
+      - /app/compat-tests/fixtures/r3f-parcel1/package/node_modules
+      - /app/compat-tests/fixtures/r3f-react18/package/node_modules
+      - /app/compat-tests/fixtures/r3f-vite2/package/node_modules
+      - /app/compat-tests/fixtures/r3f-vite4/package/node_modules
+      - /app/compat-tests/node_modules
+      - /app/examples/basic-dom/node_modules
+      - /app/examples/dom-cra/node_modules
+      - /app/examples/r3f-cra/node_modules
+      - /app/packages/benchmarks/node_modules
+      - /app/packages/browser-bundles/node_modules
+      - /app/packages/dataverse/node_modules
+      - /app/packages/dataverse-experiments/node_modules
+      - /app/packages/playground/node_modules
+      - /app/packages/r3f/node_modules
+      - /app/packages/react/node_modules
+      - /app/packages/theatric/node_modules
+      - /app/theatre/core/node_modules
+      - /app/theatre/node_modules
+      - /app/theatre/shared/node_modules
+      - /app/theatre/studio/node_modules
+    command: ['bash', '-c', 'while true; do sleep 1; done']

package.json

@@ -37,6 +37,7 @@
     "@microsoft/api-documenter": "^7.19.0",
     "@microsoft/api-extractor": "^7.28.6",
     "@types/eslint": "^8.44.1",
+    "@types/jest": "^26.0.23",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
     "esbuild": "^0.18.18",
@@ -56,7 +57,8 @@
     "lint-staged": "^13.0.3",
     "node-gyp": "^9.1.0",
     "prettier": "^2.3.2",
-    "typescript": "4.6.4"
+    "typescript": "4.6.4",
+    "yaml": "^2.3.1"
   },
   "packageManager": "yarn@3.2.0",
   "dependencies": {

packages/playground/devEnv/playwright.config.ts

@@ -19,11 +19,8 @@ const config: PlaywrightTestConfig = {
   /* Maximum time one test can run for. */
   timeout: 4000,
   expect: {
-    /**
-     * Maximum time expect() should wait for the condition to be met.
-     * For example in `await expect(locator).toHaveText();`
-     */
-    timeout: 1000,
+    // maximum timeout for expect assertions. If longer than the test timeout above, it'll still fail.
+    timeout: 10000,
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,

yarn.lock

@@ -31440,6 +31440,7 @@ fsevents@^1.2.7:
     "@microsoft/api-documenter": ^7.19.0
     "@microsoft/api-extractor": ^7.28.6
     "@types/eslint": ^8.44.1
+    "@types/jest": ^26.0.23
     "@typescript-eslint/eslint-plugin": ^5.30.7
     "@typescript-eslint/parser": ^5.30.7
     esbuild: ^0.18.18
@@ -31460,6 +31461,7 @@ fsevents@^1.2.7:
     node-gyp: ^9.1.0
     prettier: ^2.3.2
     typescript: 4.6.4
+    yaml: ^2.3.1
   languageName: unknown
   linkType: soft
 
@@ -34210,6 +34212,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"yaml@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "yaml@npm:2.3.1"
+  checksum: 2c7bc9a7cd4c9f40d3b0b0a98e370781b68b8b7c4515720869aced2b00d92f5da1762b4ffa947f9e795d6cd6b19f410bd4d15fdd38aca7bd96df59bd9486fb54
+  languageName: node
+  linkType: hard
+
 "yargs-parser@npm:^13.1.2":
   version: 13.1.2
   resolution: "yargs-parser@npm:13.1.2"