Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 651deaa

Browse files
floriandurosflorianduros
committed
Fix AppearanceUserSettingsTab-test.tsx
1 parent 5ff7662 commit 651deaa

File tree

2 files changed

+105
-43
lines changed

2 files changed

+105
-43
lines changed

‎src/components/views/settings/ThemeChoicePanel.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -203,12 +203,12 @@ function ThemeSelectors({ theme, disabled, onChange }: ThemeSelectorProps): JSX.
203203
* Return all the available themes
204204
*/
205205
function useThemes(): Array<ITheme & { isDark: boolean }> {
206-
const customThemes = useSettingValue<CustomThemeType[] | undefined>("custom_themes");
206+
const customThemes = useSettingValue<CustomThemeType[] | undefined>("custom_themes") || [];
207207
return useMemo(() => {
208208
const themes = getOrderedThemes();
209209
// Put the custom theme into a map
210210
// To easily find the theme by name when going through the themes list
211-
const customThemeMap = customThemes?.reduce(
211+
const customThemeMap = customThemes.reduce(
212212
(map, theme) => map.set(theme.name, theme),
213213
new Map<string, CustomThemeType>(),
214214
);

‎test/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap‎

Lines changed: 103 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -16,71 +16,133 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
1616
class="mx_SettingsSection_subSections"
1717
>
1818
<div
19-
class="mx_SettingsSubsection"
20-
data-testid="mx_ThemeChoicePanel"
19+
class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
2120
>
2221
<div
2322
class="mx_SettingsSubsectionHeading"
2423
>
2524
<h3
26-
class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
25+
class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
2726
>
2827
Theme
2928
</h3>
3029
</div>
3130
<div
32-
class="mx_SettingsSubsection_content"
31+
class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
3332
>
34-
<div
35-
class="mx_ThemeChoicePanel_themeSelectors"
36-
data-testid="theme-choice-panel-selectors"
33+
<form
34+
class="_root_578ve_24 mx_ThemeChoicePanel_ThemeSelectors"
3735
>
38-
<label
39-
class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
36+
<div
37+
class="_inline-field_578ve_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
4038
>
41-
<input
42-
disabled=""
43-
id="theme-light"
44-
name="theme"
45-
type="radio"
46-
value="light"
47-
/>
48-
<div>
49-
<div />
50-
</div>
5139
<div
52-
class="mx_StyledRadioButton_content"
40+
class="_inline-field-control_578ve_52"
5341
>
54-
Light
42+
<div
43+
class="_container_bdln6_18"
44+
>
45+
<input
46+
class="_input_bdln6_26"
47+
disabled=""
48+
id="radix-0"
49+
name="themeSelector"
50+
title=""
51+
type="radio"
52+
value="light"
53+
/>
54+
<div
55+
class="_ui_bdln6_27"
56+
/>
57+
</div>
5558
</div>
5659
<div
57-
class="mx_StyledRadioButton_spacer"
58-
/>
59-
</label>
60-
<label
61-
class="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
60+
class="_inline-field-body_578ve_46"
61+
>
62+
<label
63+
class="_label_578ve_67 mx_ThemeChoicePanel_themeSelector_Label"
64+
for="radix-0"
65+
>
66+
Light
67+
</label>
68+
</div>
69+
</div>
70+
<div
71+
class="_inline-field_578ve_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
6272
>
63-
<input
64-
disabled=""
65-
id="theme-dark"
66-
name="theme"
67-
type="radio"
68-
value="dark"
69-
/>
70-
<div>
71-
<div />
73+
<div
74+
class="_inline-field-control_578ve_52"
75+
>
76+
<div
77+
class="_container_bdln6_18"
78+
>
79+
<input
80+
class="_input_bdln6_26"
81+
disabled=""
82+
id="radix-1"
83+
name="themeSelector"
84+
title=""
85+
type="radio"
86+
value="dark"
87+
/>
88+
<div
89+
class="_ui_bdln6_27"
90+
/>
91+
</div>
7292
</div>
7393
<div
74-
class="mx_StyledRadioButton_content"
94+
class="_inline-field-body_578ve_46"
7595
>
76-
Dark
96+
<label
97+
class="_label_578ve_67 mx_ThemeChoicePanel_themeSelector_Label"
98+
for="radix-1"
99+
>
100+
Dark
101+
</label>
77102
</div>
103+
</div>
104+
<div
105+
class="_inline-field_578ve_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
106+
>
78107
<div
79-
class="mx_StyledRadioButton_spacer"
80-
/>
81-
</label>
82-
</div>
108+
class="_inline-field-control_578ve_52"
109+
>
110+
<div
111+
class="_container_bdln6_18"
112+
>
113+
<input
114+
class="_input_bdln6_26"
115+
disabled=""
116+
id="radix-2"
117+
name="themeSelector"
118+
title=""
119+
type="radio"
120+
value="light-high-contrast"
121+
/>
122+
<div
123+
class="_ui_bdln6_27"
124+
/>
125+
</div>
126+
</div>
127+
<div
128+
class="_inline-field-body_578ve_46"
129+
>
130+
<label
131+
class="_label_578ve_67 mx_ThemeChoicePanel_themeSelector_Label"
132+
for="radix-2"
133+
>
134+
High contrast
135+
</label>
136+
</div>
137+
</div>
138+
</form>
83139
</div>
140+
<div
141+
class="_separator_144s5_17"
142+
data-kind="primary"
143+
data-orientation="horizontal"
144+
role="separator"
145+
/>
84146
</div>
85147
<div
86148
class="mx_SettingsSubsection"

0 commit comments

Comments
 (0)