Skip to content

Commit

Permalink
feat: wait for stable
Browse files Browse the repository at this point in the history
    * revamped logging to cut out playwright noise
    * moved storyshots to runtime
  • Loading branch information
adameichelkraut authored and github_actions committed Sep 8, 2023
1 parent 0b6ce64 commit 34d6b0b
Show file tree
Hide file tree
Showing 35 changed files with 941 additions and 222 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
**/node_modules/
**/storybook-static/
**/test-results/
test-results-local/
test-results-local/
runtime/out/
runtime-logs-server/out/
24 changes: 9 additions & 15 deletions Dockerfile.storyshots
Original file line number Diff line number Diff line change
@@ -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
13 changes: 11 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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.
17 changes: 14 additions & 3 deletions batect-bundle.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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:
Expand All @@ -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
37 changes: 29 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
Loading

0 comments on commit 34d6b0b

Please sign in to comment.