Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 5 commits into from Aug 25, 2023

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Aug 24, 2023

Motivation

Fix Argos visual test flakiness found in https://app.argos-ci.com/meta-open-source/docusaurus/builds/186/56059354

I think it's related to anything that runs in useEffect instead of useLayoutEffect.

Let's introduce a <html data-has-hydrated="true"> to be able to wait for BrowserOnly and other useEffect components to run.

Unfortunately it kind of requires merging to test and see if it works.


The Algolia keyboard shortcuts do not appear immediately and can create some flakiness:

CleanShot 2023-08-24 at 17 40 23


Mermaid diagrams can lead to layout shifts leading to the end of the page being cropped

CleanShot 2023-08-24 at 17 38 55

(related to microsoft/playwright#620 (comment))


There's also one related to the TOC highlighting:

CleanShot 2023-08-24 at 18 08 26

We'll see if the data-attribute fixes it

@slorber slorber added the pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog. label Aug 24, 2023
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Aug 24, 2023
@netlify
Copy link

netlify bot commented Aug 24, 2023

[V2]

Name Link
🔨 Latest commit 2a382fa
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/64e796fd3ee10700089e09f3
😎 Deploy Preview https://deploy-preview-9256--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@github-actions
Copy link

github-actions bot commented Aug 24, 2023

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 88 🟢 97 🟢 92 🟢 100 🟠 89 Report
/docs/installation 🟠 77 🟢 98 🟢 92 🟢 100 🟠 89 Report

@slorber slorber changed the title test: fix more argos flakiness test: fix flaky screenshots, add html data-has-hydrated attribute Aug 24, 2023
@github-actions
Copy link

github-actions bot commented Aug 24, 2023

Size Change: +166 B (0%)

Total Size: 1.11 MB

Filename Size Change
website/build/assets/js/main.********.js 837 kB +140 B (0%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/globalData.json 117 kB 0 B
website/build/assets/css/styles.********.css 113 kB 0 B
website/build/index.html 41.3 kB +26 B (0%)

compressed-size-action

@slorber slorber merged commit da85e22 into main Aug 25, 2023
29 of 30 checks passed
@slorber slorber deleted the slorber/fix-argos-flakiness2 branch August 25, 2023 06:13
@slorber slorber added the to backport This PR is planned to be backported to a stable version of Docusaurus label Aug 31, 2023
@argos-ci
Copy link

argos-ci bot commented Aug 31, 2023

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 🧿 Changes detected (Review) 120 changes Sep 20, 2023, 2:49 PM

@slorber slorber added pr: new feature This PR adds a new API or behavior. and removed pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog. labels Sep 20, 2023
@slorber slorber changed the title test: fix flaky screenshots, add html data-has-hydrated attribute test: add html data-has-hydrated attribute, fix flaky screenshots Sep 20, 2023
@slorber slorber added pr: new feature This PR adds a new API or behavior. pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog. and removed pr: new feature This PR adds a new API or behavior. to backport This PR is planned to be backported to a stable version of Docusaurus pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog. labels Sep 20, 2023
@slorber slorber changed the title test: add html data-has-hydrated attribute, fix flaky screenshots feat: add html data-has-hydrated attribute, fix flaky screenshots Sep 20, 2023
@slorber slorber added to backport This PR is planned to be backported to a stable version of Docusaurus and removed pr: new feature This PR adds a new API or behavior. labels Sep 20, 2023
@slorber slorber added the pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog. label Sep 20, 2023
@slorber slorber changed the title feat: add html data-has-hydrated attribute, fix flaky screenshots test: fix flaky screenshots, add html data-has-hydrated attribute Sep 20, 2023
slorber added a commit that referenced this pull request Sep 20, 2023
…lease (#9324)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>
Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>
Co-authored-by: Ori Shalom <ori-shalom@users.noreply.github.com>
Co-authored-by: Mikey O'Toole <mikey@homotechsual.dev>
Co-authored-by: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
fix flaky screenshots, add html data-has-hydrated attribute (#9256)
fix(theme-common): ThemedComponent should display something when JS is disabled (#9243)
fix(theme): canonical url should be not change after hydration if url accessed with/without trailing slash (#9130)
fix(theme): only set classname on ul elements if they have an existing class (#9099)
fix(content-docs): sidebar generator should return customProps for doc items (#9107)
@slorber slorber removed the to backport This PR is planned to be backported to a stable version of Docusaurus label Nov 10, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: internal This PR does not touch production code, or is not meaningful enough to be in the changelog.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants