From beffcb4c79c0fbcec8166bb88ca4a426a830476e Mon Sep 17 00:00:00 2001 From: Yann Braga 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);