From beffcb4c79c0fbcec8166bb88ca4a426a830476e Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Tue, 23 Aug 2022 12:23:00 +0200
Subject: [PATCH] support Storybook 7.0 root selector

---
 .storybook/test-runner.ts |  2 +-
 README.md                 | 11 +++++++----
 src/setup-page.ts         | 12 ++++++------
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
index c36b5b0d..57044bc0 100644
--- a/.storybook/test-runner.ts
+++ b/.storybook/test-runner.ts
@@ -31,7 +31,7 @@ const config: TestRunnerConfig = {
       failureThresholdType: 'percent',
     });
 
-    const elementHandler = await page.$('#root');
+    const elementHandler = (await page.$('#root')) || (await page.$('#storybook-root'));
     const innerHTML = await elementHandler.innerHTML();
     // HTML snapshot tests
     expect(innerHTML).toMatchSnapshot();
diff --git a/README.md b/README.md
index cb2726df..1c35b530 100644
--- a/README.md
+++ b/README.md
@@ -17,17 +17,19 @@ Storybook test runner turns all of your stories into executable tests.
 - [Setting up code coverage](#setting-up-code-coverage)
   - [1 - Instrument the code](#1---instrument-the-code)
     - [Using @storybook/addon-coverage](#using-storybookaddon-coverage)
-    - [Manually configuring Istanbul](#manually-configuring-istanbul)
-  - [2 - Run tests with `--coverage` flag](#2---run-tests-with---coverage-flag)
+    - [Manually configuring istanbul](#manually-configuring-istanbul)
+  - [2 - Run tests with --coverage flag](#2---run-tests-with---coverage-flag)
   - [3 - Merging code coverage with coverage from other tools](#3---merging-code-coverage-with-coverage-from-other-tools)
 - [Experimental test hook API](#experimental-test-hook-api)
+  - [DOM snapshot recipe](#dom-snapshot-recipe)
   - [Image snapshot recipe](#image-snapshot-recipe)
   - [Render lifecycle](#render-lifecycle)
+  - [Global utility functions](#global-utility-functions)
 - [Troubleshooting](#troubleshooting)
   - [Errors with Jest 28](#errors-with-jest-28)
   - [The error output in the CLI is too short](#the-error-output-in-the-cli-is-too-short)
   - [The test runner seems flaky and keeps timing out](#the-test-runner-seems-flaky-and-keeps-timing-out)
-  - [The test runner reports "No tests found" running on a Windows CI](#the-test-runner-reports-"no-tests-found"-running-on-a-windows-ci)
+  - [The test runner reports "No tests found" running on a Windows CI](#the-test-runner-reports-no-tests-found-running-on-a-windows-ci)
   - [Adding the test runner to other CI environments](#adding-the-test-runner-to-other-ci-environments)
 - [Future work](#future-work)
 
@@ -401,7 +403,7 @@ The `postRender` function provides a [Playwright page](https://playwright.dev/do
 // .storybook/test-runner.js
 module.exports = {
   async postRender(page, context) {
-    // the #root element wraps the story
+    // the #root element wraps the story. From Storybook 7.0 onwards, the selector should be #storybook-root
     const elementHandler = await page.$('#root');
     const innerHTML = await elementHandler.innerHTML();
     expect(innerHTML).toMatchSnapshot();
@@ -500,6 +502,7 @@ module.exports = {
       return;
     }
 
+    // from Storybook 7.0 onwards, the selector should be #storybook-root
     await checkA11y(page, '#root', {
       detailedReport: true,
       detailedReportOptions: {
diff --git a/src/setup-page.ts b/src/setup-page.ts
index 66f1899d..2a7f4b08 100644
--- a/src/setup-page.ts
+++ b/src/setup-page.ts
@@ -132,22 +132,22 @@ export const setupPage = async (page: Page) => {
         throw new StorybookTestRunnerError(storyId, errorMessage, logs);
       }
 
-      async function __waitForElement(selector) {
+      async function __waitForStorybook() {
         return new Promise((resolve, reject) => {
 
           const timeout = setTimeout(() => {
             reject();
           }, 10000);
 
-          if (document.querySelector(selector)) {
+          if (document.querySelector('#root') || document.querySelector('#storybook-root')) {
             clearTimeout(timeout);
-            return resolve(document.querySelector(selector));
+            return resolve();
           }
 
           const observer = new MutationObserver(mutations => {
-            if (document.querySelector(selector)) {
+            if (document.querySelector('#root') || document.querySelector('#storybook-root')) {
               clearTimeout(timeout);
-              resolve(document.querySelector(selector));
+              resolve();
               observer.disconnect();
             }
           });
@@ -165,7 +165,7 @@ export const setupPage = async (page: Page) => {
 
       async function __test(storyId) {
         try {
-          await __waitForElement('#root');
+          await __waitForStorybook();
         } catch(err) {
           const message = \`Timed out waiting for Storybook to load after 10 seconds. Are you sure the Storybook is running correctly in that URL? Is the Storybook private (e.g. under authentication layers)?\n\n\nHTML: \${document.body.innerHTML}\`;
           throw new StorybookTestRunnerError(storyId, message);