Add Playwright tests for settings toggles (#30318)

* Add playwright tests

* import pages/ remove duplicate create-room

* Update screenshots

* Fix accessibility for devtools

* Disable region test

* Fixup headers

* remove extra test

* Fix permissions dialog

* fixup tests

* update snapshot

* Update jest tests

* Clear up playwright tests

* update widget screenshot

* Fix wrong snaps from using wrong compound version

* Revert mistaken s/checkbox/switch/
This commit is contained in:
Will Hunt
2025-09-04 08:12:24 +01:00
committed by GitHub
parent cba341f824
commit 07c253d11f
43 changed files with 546 additions and 81 deletions

View File

@@ -48,9 +48,11 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
class="mx_DevTools_content"
>
<div>
<h3>
<h2
class="mx_DevTools_toolHeading"
>
Room
</h3>
</h2>
<button
class="mx_DevTools_button"
>
@@ -83,9 +85,11 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
</button>
</div>
<div>
<h3>
<h2
class="mx_DevTools_toolHeading"
>
Other
</h3>
</h2>
<button
class="mx_DevTools_button"
>
@@ -108,9 +112,11 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
</button>
</div>
<div>
<h3>
<h2
class="mx_DevTools_toolHeading"
>
Options
</h3>
</h2>
<div
class="mx_SettingsFlag"
>

View File

@@ -18,11 +18,11 @@ exports[`AppTile destroys non-persisted right panel widget on room change 1`] =
<div
class="mx_BaseCard_header_title"
>
<h4
<h1
class="mx_Heading_h4 mx_BaseCard_header_title_heading"
>
Example 1
</h4>
</h1>
<div
aria-expanded="false"
aria-haspopup="true"
@@ -109,6 +109,7 @@ exports[`AppTile for a pinned widget should render 1`] = `
data-color="1"
data-testid="avatar-img"
data-type="round"
role="img"
style="--cpd-avatar-size: 20px;"
>
<img
@@ -122,9 +123,9 @@ exports[`AppTile for a pinned widget should render 1`] = `
width="20px"
/>
</span>
<h3>
<h1>
Example 1
</h3>
</h1>
<span />
</span>
</span>
@@ -221,6 +222,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
data-color="1"
data-testid="avatar-img"
data-type="round"
role="img"
style="--cpd-avatar-size: 20px;"
>
<img
@@ -234,9 +236,9 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
width="20px"
/>
</span>
<h3>
<h1>
Example 1
</h3>
</h1>
<span />
</span>
</span>
@@ -412,6 +414,7 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
data-color="1"
data-testid="avatar-img"
data-type="round"
role="img"
style="--cpd-avatar-size: 20px;"
>
<img
@@ -425,9 +428,9 @@ exports[`AppTile preserves non-persisted widget on container move 1`] = `
width="20px"
/>
</span>
<h3>
<h1>
Example 1
</h3>
</h1>
<span />
</span>
</span>

View File

@@ -191,6 +191,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
data-color="1"
data-testid="avatar-img"
data-type="round"
role="img"
style="--cpd-avatar-size: 24px;"
>
<img
@@ -231,6 +232,7 @@ exports[`<ExtensionsCard /> should render widgets 1`] = `
data-color="1"
data-testid="avatar-img"
data-type="round"
role="img"
style="--cpd-avatar-size: 24px;"
>
<img

View File

@@ -121,11 +121,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
I want to be notified for (Default Setting)
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -214,11 +214,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Play a sound for
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -411,11 +411,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Other things we think you might be interested in:
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -598,11 +598,11 @@ exports[`<Notifications /> correctly handles the loading/disabled state 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Mentions and Keywords
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -1098,11 +1098,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
I want to be notified for (Default Setting)
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -1188,11 +1188,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Play a sound for
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"
@@ -1382,11 +1382,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Other things we think you might be interested in:
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_content"
@@ -1566,11 +1566,11 @@ exports[`<Notifications /> matches the snapshot 1`] = `
<div
class="mx_SettingsSubsectionHeading"
>
<h3
<h2
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
>
Mentions and Keywords
</h3>
</h2>
</div>
<div
class="mx_SettingsSubsection_description"