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/settings/notifications/Notifications2-test.tsx
+20 -61
View File
@@ -18,7 +18,6 @@ import {
RuleId,
} from "matrix-js-sdk/src/matrix";
import React from "react";
import { Form } from "@vector-im/compound-web";
import NotificationSettings2 from "../../../../../../src/components/views/settings/notifications/NotificationSettings2";
import MatrixClientContext from "../../../../../../src/contexts/MatrixClientContext";
@@ -94,9 +93,7 @@ describe("<Notifications />", () => {
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -109,9 +106,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(async () => {
@@ -172,9 +167,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -190,9 +183,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -230,9 +221,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -267,9 +256,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -298,9 +285,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -325,9 +310,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -349,9 +332,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -379,9 +360,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -405,9 +384,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -429,9 +406,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -459,9 +434,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -485,9 +458,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -514,9 +485,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -535,9 +504,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -648,9 +615,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -709,9 +674,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const screen = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await act(waitForUpdate);
@@ -731,9 +694,7 @@ describe("<Notifications />", () => {
const { container } = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await waitForUpdate();
@@ -760,9 +721,7 @@ describe("<Notifications />", () => {
const user = userEvent.setup();
const { container } = render(
<MatrixClientContext.Provider value={cli}>
<Form.Root>
<NotificationSettings2 />
</Form.Root>
<NotificationSettings2 />
</MatrixClientContext.Provider>,
);
await waitForUpdate();
apps/web/test/unit-tests/components/views/settings/notifications/__snapshots__/Notifications2-test.tsx.snap
+1939 -1939
View File
File diff suppressed because it is too large Load Diff