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
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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
✅ [V2]
To edit notification comments on pull requests, go to your Netlify site configuration. |
⚡️ Lighthouse report for the deploy preview of this PR
|
slorber
changed the title
test: fix more argos flakiness
test: fix flaky screenshots, add html data-has-hydrated attribute
Aug 24, 2023
Size Change: +166 B (0%) Total Size: 1.11 MB
ℹ️ View Unchanged
|
slorber
added
the
to backport
This PR is planned to be backported to a stable version of Docusaurus
label
Aug 31, 2023
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
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
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
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
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
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
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
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
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
removed
the
to backport
This PR is planned to be backported to a stable version of Docusaurus
label
Nov 10, 2023
1 task
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.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 ofuseLayoutEffect
.Let's introduce a
<html data-has-hydrated="true">
to be able to wait forBrowserOnly
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:
Mermaid diagrams can lead to layout shifts leading to the end of the page being cropped
(related to microsoft/playwright#620 (comment))
There's also one related to the TOC highlighting:
We'll see if the data-attribute fixes it