From da85e227784960d1ad099483e632f8fd548a0907 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Lorber?= Date: Fri, 25 Aug 2023 08:13:48 +0200 Subject: [PATCH] test: fix flaky screenshots, add html data-has-hydrated attribute (#9256) --- argos/tests/screenshot.css | 8 +++++++ argos/tests/screenshot.spec.ts | 13 ++++++++++++ .../templates/classic-typescript/package.json | 2 +- packages/docusaurus/src/client/App.tsx | 2 ++ .../src/client/hasHydratedDataAttribute.tsx | 21 +++++++++++++++++++ yarn.lock | 5 ----- 6 files changed, 45 insertions(+), 6 deletions(-) create mode 100644 packages/docusaurus/src/client/hasHydratedDataAttribute.tsx diff --git a/argos/tests/screenshot.css b/argos/tests/screenshot.css index 5a7f1fd5c0..7b9a374559 100644 --- a/argos/tests/screenshot.css +++ b/argos/tests/screenshot.css @@ -13,6 +13,7 @@ article.yt-lite, .avatar__photo, img[src$='.gif'], h2#using-jsx-markup ~ div > div[class*='browserWindowBody']:has(b), +.DocSearch-Button-Keys > kbd, [class*='playgroundPreview'] { visibility: hidden; } @@ -24,3 +25,10 @@ Different docs last-update dates can alter layout .theme-last-updated { display: none; } + +/* +Mermaid diagrams are rendered client-side and produce layout shifts + */ +.docusaurus-mermaid-container { + display: none; +} diff --git a/argos/tests/screenshot.spec.ts b/argos/tests/screenshot.spec.ts index 7bb44f6933..70bee2af15 100644 --- a/argos/tests/screenshot.spec.ts +++ b/argos/tests/screenshot.spec.ts @@ -13,6 +13,9 @@ const siteUrl = 'http://localhost:3000'; const sitemapPath = '../website/build/sitemap.xml'; const stylesheetPath = './tests/screenshot.css'; +// Use ONLY_PATH="/docs/installation" to debug a specific page +const onlyPath: string | undefined = process.env.ONLY_PATH; + // eslint-disable-next-line no-restricted-properties const sitemap = fs.readFileSync(sitemapPath).toString(); // eslint-disable-next-line no-restricted-properties @@ -28,6 +31,9 @@ function extractSitemapUrls() { } function isBlacklisted(pathname: string) { + if (onlyPath && onlyPath !== pathname) { + return true; + } // Some paths explicitly blacklisted const BlacklistedPathnames: string[] = [ '/feature-requests', // Flaky because of Canny widget @@ -75,10 +81,17 @@ function pathnameToArgosName(pathname: string): string { return pathname; } +// See https://github.com/facebook/docusaurus/pull/9256 +// Docusaurus adds a +function waitForDocusaurusHydration() { + return document.documentElement.dataset.hasHydrated === 'true'; +} + function createPathnameTest(pathname: string) { test(`pathname ${pathname}`, async ({page}) => { const url = siteUrl + pathname; await page.goto(url); + await page.waitForFunction(waitForDocusaurusHydration); await page.addStyleTag({content: stylesheet}); // await expect(page).toHaveScreenshot({ fullPage: true, ...options }); await argosScreenshot(page, pathnameToArgosName(pathname)); diff --git a/packages/create-docusaurus/templates/classic-typescript/package.json b/packages/create-docusaurus/templates/classic-typescript/package.json index d2015c76fe..c4f592d217 100644 --- a/packages/create-docusaurus/templates/classic-typescript/package.json +++ b/packages/create-docusaurus/templates/classic-typescript/package.json @@ -26,7 +26,7 @@ "devDependencies": { "@docusaurus/module-type-aliases": "3.0.0-alpha.0", "@docusaurus/tsconfig": "3.0.0-alpha.0", - "typescript": "^5.0.4" + "typescript": "~5.0.4" }, "browserslist": { "production": [ diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx index 8554f5b91a..3a93ec6524 100644 --- a/packages/docusaurus/src/client/App.tsx +++ b/packages/docusaurus/src/client/App.tsx @@ -23,6 +23,7 @@ import SiteMetadataDefaults from './SiteMetadataDefaults'; // TODO, quick fix for CSS insertion order // eslint-disable-next-line import/order import ErrorBoundary from '@docusaurus/ErrorBoundary'; +import HasHydratedDataAttribute from './hasHydratedDataAttribute'; export default function App(): JSX.Element { const routeElement = renderRoutes(routes); @@ -39,6 +40,7 @@ export default function App(): JSX.Element { {routeElement} + diff --git a/packages/docusaurus/src/client/hasHydratedDataAttribute.tsx b/packages/docusaurus/src/client/hasHydratedDataAttribute.tsx new file mode 100644 index 0000000000..1855f05977 --- /dev/null +++ b/packages/docusaurus/src/client/hasHydratedDataAttribute.tsx @@ -0,0 +1,21 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; +import Head from '@docusaurus/Head'; +import useIsBrowser from '@docusaurus/useIsBrowser'; + +// See https://github.com/facebook/docusaurus/pull/9256 +// Docusaurus adds a after hydration +export default function HasHydratedDataAttribute(): JSX.Element { + const isBrowser = useIsBrowser(); + return ( + + + + ); +} diff --git a/yarn.lock b/yarn.lock index 12c0f4ccb8..7679db0ebf 100644 --- a/yarn.lock +++ b/yarn.lock @@ -16320,11 +16320,6 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a" integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g== -typescript@^5.0.4: - version "5.1.6" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.1.6.tgz#02f8ac202b6dad2c0dd5e0913745b47a37998274" - integrity sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA== - typescript@~5.0.4: version "5.0.4" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"