feat: wait for stable

    * revamped logging to cut out playwright noise
    * moved storyshots to runtime

Author: adameichelkraut

.gitignore

@@ -1,4 +1,6 @@
 **/node_modules/
 **/storybook-static/
 **/test-results/
-test-results-local/
+test-results-local/
+runtime/out/
+runtime-logs-server/out/

Dockerfile.storyshots

@@ -1,27 +1,21 @@
-FROM mcr.microsoft.com/playwright:v1.29.1-focal as final
+FROM mcr.microsoft.com/playwright:v1.37.1-focal as final
 
 RUN useradd -ms /bin/bash playwright-user 
 RUN mkdir -p /storyshots
 RUN chown playwright-user /storyshots
 RUN npm install -g pnpm@8
+RUN npm config --global set update-notifier false
 
-COPY playwright.config.storyshots.ts /storyshots
-COPY playwright.config.findStories.ts /storyshots
-COPY storyshots.findStories.ts /storyshots
-COPY storyshots.spec.ts /storyshots
-COPY storyshots.testStories.ts /storyshots
-COPY storyshots.testStory.ts /storyshots
-COPY storyshots.env.ts /storyshots
-COPY storyshots.executionContext.ts /storyshots
-COPY storyshots.types.ts /storyshots
-COPY storyshots.run.sh /storyshots
-COPY storyshots.update.sh /storyshots
+WORKDIR /storyshots
 COPY package.json /storyshots
 COPY pnpm-lock.yaml /storyshots
-
-WORKDIR /storyshots
 RUN pnpm install --frozen-lockfile
 
+COPY runtime /storyshots/runtime
+COPY runtime-logs-server /storyshots/runtime-logs-server
+
+RUN pnpm compile
+
 USER playwright-user
 
-CMD /storyshots/storyshots.run.sh
+CMD /storyshots/runtime/scripts/storyshots.run.sh

README.md

@@ -11,7 +11,7 @@ To include in a `batect.yml`, you need to add the following block:
 include:
   - type: git
     repo: https://github.com/compoze-labs/storyshots.git
-    ref: 0.8.1
+    ref: 0.9.0
 ```
  
 Once included, you will now have access to two tasks: `./batect storyshots` and `./batect storyshots-update`. However, these two commands will also need to know where to find your pre-built Storybook directory:
@@ -66,4 +66,13 @@ Sometimes, stories can just be too fiddly to visually regression test. In these
     ]   
 }
 ```
-> You will still see it in the output, labelled as ignored via configuration.
+> You will still see it in the output, labelled as ignored via configuration.
+
+## Waiting for Stable
+Animations can get us really pitted sometimes. In order to avoid flaky tests, we can wait for a "stable" state of the component before taking a screenshot. "Stable" is defined as the component not changing for a certain amount of time. To configure this, you can add the following to your `.storyshots.config.json`:
+```json
+{
+    "waitUntilStableMillis": 1000
+}
+```
+> This example waits up to 1 second for the component to be in a stable state.

batect-bundle.yml

@@ -14,7 +14,7 @@ config_variables:
 
 containers:
   storyshots:
-    image: eichelkrautadam/storyshots:0.8.1
+    image: eichelkrautadam/storyshots:0.9.0
     volumes:
       - local: <{batect.project_directory}/<{resultsDirectory}
         container: /storyshots/storyshots
@@ -41,13 +41,21 @@ tasks:
       - storybook-server
     run:
       container: storyshots
+      environment:
+        DEBUG: ${DEBUG:-}
+        LOCAL_RESULTS_DIR: <{resultsDirectory}
+        CONFIG_FILE: <{configPath}
 
   storyshots-update:
     dependencies:
       - storybook-server
     run:
       container: storyshots
-      command: ./storyshots.update.sh
+      environment:
+        DEBUG: ${DEBUG:-}
+        LOCAL_RESULTS_DIR: <{resultsDirectory}
+        CONFIG_FILE: <{configPath}
+      command: ./runtime/scripts/storyshots.update.sh
 
   storyshots-list:
     dependencies:
@@ -56,4 +64,7 @@ tasks:
       container: storyshots
       environment:
         STORYSHOTS_LIST: true
-      command: npx playwright test --config=/storyshots/playwright.config.findStories.ts
+        DEBUG: ${DEBUG:-}
+        LOCAL_RESULTS_DIR: <{resultsDirectory}
+        CONFIG_FILE: <{configPath}
+      command: ./runtime/scripts/storyshots.list.sh

package.json

@@ -7,17 +7,38 @@
   "author": "",
   "license": "ISC",
   "scripts": {
-    "start": "pnpm build && ./batect --override-image storyshots=local-storyshots storyshots",
-    "start:single": "pnpm build && STORYSHOTS_STORY=example-button--primary ./batect --override-image storyshots=local-storyshots storyshots",
-    "start:list": "pnpm build && ./batect --override-image storyshots=local-storyshots storyshots-list",
-    "start:local": "pnpm build && ./batect --override-image storyshots=local-storyshots --config-vars-file=batect.target-local.yml storyshots",
-    "start:update": "pnpm build && ./batect --override-image storyshots=local-storyshots storyshots-update",
+    "local": "./batect --override-image storyshots=local-storyshots",
+    "start": "pnpm build && pnpm local storyshots",
+    "start:debug": "pnpm build && DEBUG=true pnpm local storyshots",
+    "start:single": "pnpm build && STORYSHOTS_STORY=example-button--primary pnpm local storyshots",
+    "start:list": "pnpm build && pnpm local storyshots-list",
+    "start:local": "pnpm build && pnpm local --config-vars-file=batect.target-local.yml storyshots",
+    "start:update": "pnpm build && pnpm local storyshots-update",
+    "start:update:debug": "pnpm build && DEBUG=true pnpm local storyshots-update",
+    "compile": "tsc --incremental -p runtime/tsconfig.json && tsc --incremental -p runtime-logs-server/tsconfig.json",
     "build": "docker build -t local-storyshots -f Dockerfile.storyshots .",
     "test:local": "pnpm build && IMAGE=local-storyshots pnpm test",
-    "test": "bash shellspec --fail-fast"
+    "test": "bash shellspec --fail-fast",
+    "runtime:logs-server": "node runtime-logs-server/out/serve.js",
+    "runtime:findStories:debug": "playwright test -c runtime/out --config=/storyshots/runtime/out/playwright.config.findStories.js",
+    "runtime:findStories": "pnpm --silent runtime:findStories:debug > /dev/null 2>&1",
+    "runtime:start:debug": "playwright test -c runtime/out --config=/storyshots/runtime/out/playwright.config.storyshots.js",
+    "runtime:start": "pnpm --silent runtime:start:debug > /dev/null 2>&1",
+    "runtime:updateSnapshots:debug": "pnpm runtime:start:debug --update-snapshots",
+    "runtime:updateSnapshots": "pnpm --silent runtime:updateSnapshots:debug > /dev/null 2>&1"
   },
+  "type": "module",
   "devDependencies": {
-    "@playwright/test": "^1.29.1",
-    "@types/node": "^16.18.10"
+    "@playwright/test": "^1.37.1",
+    "@types/body-parser": "^1.19.2",
+    "@types/express": "^4.17.17",
+    "@types/node": "^16.18.10",
+    "axios": "^1.5.0",
+    "body-parser": "^1.20.2",
+    "chalk": "^5.3.0",
+    "express": "^4.18.2",
+    "stdout-update": "^4.0.0",
+    "tasktree-cli": "^8.0.0",
+    "typescript": "^5.1.6"
   }
 }