fix: Wait for storybook to actually mount the story (#19)

compoze-labs · Sep 19, 2023 · 5251004 · 5251004
1 parent 27fd7ff
commit 5251004
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/README.md b/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.9.1
+    ref: 0.9.2
 ```
  
 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:

diff --git a/batect-bundle.yml b/batect-bundle.yml
@@ -14,7 +14,7 @@ config_variables:
 
 containers:
   storyshots:
-    image: eichelkrautadam/storyshots:0.9.1
+    image: eichelkrautadam/storyshots:0.9.2
     volumes:
       - local: <{batect.project_directory}/<{resultsDirectory}
         container: /storyshots/storyshots

diff --git a/runtime/storyshots.testStory.ts b/runtime/storyshots.testStory.ts
@@ -27,6 +27,7 @@ export async function testStory(page: Page, { storyshot, url, ignore, title }: S
     }
 
     await page.goto(url, { waitUntil: 'domcontentloaded' })
+    await waitForStoryReady(page)
 
     if (waitForStableMillis > 0) {
         await waitForStable(page, waitForStableMillis, waiting)
@@ -56,6 +57,11 @@ export async function testStory(page: Page, { storyshot, url, ignore, title }: S
     return storyPassed
 }
 
+async function waitForStoryReady(page: Page) {
+    await page.locator('#storybook-root > *:first-child')
+        .waitFor({ state: 'attached', timeout: 5000 })
+}
+
 // continually take screenshots until the page is stable (i.e. no more animations)
 async function waitForStable(page: Page, waitForStableMillis: number, waiting: (message: string) => Promise<void>) {
     let stable = false