sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Fix React hydration issues (#32958)

Browse Source 
* Add more playwright axe tests to settings dialogs

* Add utility to jest setupTests to detect React hydration errors

* Iterate jest utility

* Fix axe issue heading-order

* Fix div-in-p issues

* Fix setupTests.ts

* Fix heading order

* Make types happier

* Fix hydration issues of thead containing text nodes

* Update tests

* Fix form-in-form React hydration issues

* Fix li-in-li React hydration issues

* Fix checked in form without onChange React hydration issue

* Fix styling bleeding from _common.pcss

* Update snapshots

* Fix more remaining issues

* Remove _common.pcss h2 rule altogether

* Fix test

* Update snapshots

* Iterate

* Iterate

* Update snapshots

* Simplify diff

* Test

* Update screenshots

* Update screenshot
This commit is contained in:
Michael Telatynski
2026-04-16 13:35:40 +00:00
committed by GitHub
parent d7f5546294
commit 30f442208a
62 changed files with 2652 additions and 2579 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Crypto-test.tsx.snap
+28 -4
View File
@@ -5,7 +5,13 @@ exports[`<Crypto /> <CrossSigning /> should display when the cross-signing data
aria-label="Cross-signing"
>
<thead>
Cross-signing
<tr>
<th
colspan="2"
>
Cross-signing
</th>
</tr>
</thead>
<tbody>
<tr>
@@ -77,7 +83,13 @@ exports[`<Crypto /> <CrossSigning /> should display when the cross-signing data
aria-label="Cross-signing"
>
<thead>
Cross-signing
<tr>
<th
colspan="2"
>
Cross-signing
</th>
</tr>
</thead>
<tbody>
<tr>
@@ -149,7 +161,13 @@ exports[`<Crypto /> <KeyStorage /> should display when the key storage data are
aria-label="Key Storage"
>
<thead>
Key Storage
<tr>
<th
colspan="2"
>
Key Storage
</th>
</tr>
</thead>
<tbody>
<tr>
@@ -221,7 +239,13 @@ exports[`<Crypto /> <KeyStorage /> should display when the key storage data are
aria-label="Key Storage"
>
<thead>
Key Storage
<tr>
<th
colspan="2"
>
Key Storage
</th>
</tr>
</thead>
<tbody>
<tr>
apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
+52 -52
View File
@@ -7,11 +7,11 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
>
<ul>
<li>
<div
<span
class="mx_CopyableText"
>
User ID: @alice:example.com
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -31,15 +31,15 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
<div
<span
class="mx_CopyableText"
>
Device ID: SIGNED
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -59,8 +59,8 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
Displayname:
@@ -95,11 +95,11 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
Device keys
<ul>
<li>
<div
<span
class="mx_CopyableText"
>
ed25519: an_ed25519_public_key
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -119,15 +119,15 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
<div
<span
class="mx_CopyableText"
>
curve25519: a_curve25519_public_key
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -147,8 +147,8 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
</ul>
</li>
@@ -171,11 +171,11 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
>
<ul>
<li>
<div
<span
class="mx_CopyableText"
>
User ID: @alice:example.com
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -195,15 +195,15 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
<div
<span
class="mx_CopyableText"
>
Device ID: UNSIGNED
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -223,8 +223,8 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
Displayname:
@@ -259,11 +259,11 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
Device keys
<ul>
<li>
<div
<span
class="mx_CopyableText"
>
ed25519: an_ed25519_public_key
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -283,15 +283,15 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
<div
<span
class="mx_CopyableText"
>
curve25519: a_curve25519_public_key
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -311,8 +311,8 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
</ul>
</li>
@@ -335,11 +335,11 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
>
<ul>
<li>
<div
<span
class="mx_CopyableText"
>
User ID: @alice:example.com
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -359,15 +359,15 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
<div
<span
class="mx_CopyableText"
>
Device ID: VERIFIED
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -387,8 +387,8 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
Displayname:
@@ -425,11 +425,11 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
Device keys
<ul>
<li>
<div
<span
class="mx_CopyableText"
>
ed25519: an_ed25519_public_key
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -449,15 +449,15 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
<div
<span
class="mx_CopyableText"
>
curve25519: a_curve25519_public_key
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -477,8 +477,8 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
</ul>
</li>
@@ -501,11 +501,11 @@ exports[`<Users /> should render a single user 1`] = `
>
<ul>
<li>
<div
<span
class="mx_CopyableText"
>
User ID: @alice:example.com
<div
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
role="button"
@@ -525,8 +525,8 @@ exports[`<Users /> should render a single user 1`] = `
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</div>
</button>
</span>
</li>
<li>
Membership: join