3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-28 17:57:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Sébastien Lorber 2023-08-25 08:13:48 +02:00 • committed by GitHub
parent 17d3e60e20
commit da85e22778
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
argos/tests/screenshot.css
View file

@ -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;
}

13
argos/tests/screenshot.spec.ts
View file

@ -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));

2
packages/create-docusaurus/templates/classic-typescript/package.json vendored
View file

@ -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": [

2
packages/docusaurus/src/client/App.tsx
View file

@ -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>

21
packages/docusaurus/src/client/hasHydratedDataAttribute.tsx Normal file
View file

@ -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>
);
}

5
yarn.lock
View file

@ -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"