test: fix flaky screenshots, add html data-has-hydrated attribute (#9256

)
facebook · Aug 25, 2023 · da85e22 · da85e22
1 parent 17d3e60
commit da85e22
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 6 deletions.
diff --git 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
@@ -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 <html data-has-hydrated="true">
+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
@@ -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
@@ -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}
             </PendingNavigation>
           </Root>
+          <HasHydratedDataAttribute />
         </BrowserContextProvider>
       </DocusaurusContextProvider>
     </ErrorBoundary>

diff --git a/packages/docusaurus/src/client/hasHydratedDataAttribute.tsx 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 <html data-has-hydrated="true"> after hydration
+export default function HasHydratedDataAttribute(): JSX.Element {
+  const isBrowser = useIsBrowser();
+  return (
+    <Head>
+      <html data-has-hydrated={isBrowser} />
+    </Head>
+  );
+}
diff --git 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"