Break ThemeChoicePanel into a separate component (#6998)

* Break ThemeChoicePanel into a separate component

* Tests for ThemeChoicePanel

* i18n fixes

* Fix copyright for ThemeChoicePanel

res/css/_components.scss

@@ -259,6 +259,7 @@
 @import "./views/settings/_SetIdServer.scss";
 @import "./views/settings/_SetIntegrationManager.scss";
 @import "./views/settings/_SpellCheckLanguages.scss";
+@import "./views/settings/_ThemeChoicePanel.scss";
 @import "./views/settings/_UpdateCheckButton.scss";
 @import "./views/settings/tabs/_SettingsTab.scss";
 @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";

res/css/views/settings/_ThemeChoicePanel.scss

@@ -0,0 +1,88 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_ThemeChoicePanel {
+    $radio-bg-color: $input-darker-bg-color;
+    color: $primary-content;
+
+    > .mx_ThemeSelectors {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+
+        margin-top: 4px;
+        margin-bottom: 30px;
+
+        > .mx_RadioButton {
+            padding: $font-16px;
+            box-sizing: border-box;
+            border-radius: 10px;
+            width: 180px;
+
+            background: $radio-bg-color;
+            opacity: 0.4;
+
+            flex-shrink: 1;
+            flex-grow: 0;
+
+            margin-right: 15px;
+            margin-top: 10px;
+
+            font-weight: 600;
+            color: $muted-fg-color;
+
+            > span {
+                justify-content: center;
+            }
+        }
+
+        > .mx_RadioButton_enabled {
+            opacity: 1;
+
+            // These colors need to be hardcoded because they don't change with the theme
+            &.mx_ThemeSelector_light {
+                background-color: #f3f8fd;
+                color: #2e2f32;
+            }
+
+            &.mx_ThemeSelector_dark {
+                // 5% lightened version of 181b21
+                background-color: #25282e;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+
+            &.mx_ThemeSelector_black {
+                background-color: #000000;
+                color: #f3f8fd;
+
+                > input > div {
+                    border-color: $input-darker-bg-color;
+                    > div {
+                        border-color: $input-darker-bg-color;
+                    }
+                }
+            }
+        }
+    }
+}
+

res/css/views/settings/tabs/user/_AppearanceUserSettingsTab.scss

@@ -24,78 +24,6 @@ limitations under the License.
     }
 }
 
-.mx_AppearanceUserSettingsTab_themeSection {
-    $radio-bg-color: $input-darker-bg-color;
-    color: $primary-content;
-
-    > .mx_ThemeSelectors {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-
-        margin-top: 4px;
-        margin-bottom: 30px;
-
-        > .mx_RadioButton {
-            padding: $font-16px;
-            box-sizing: border-box;
-            border-radius: 10px;
-            width: 180px;
-
-            background: $radio-bg-color;
-            opacity: 0.4;
-
-            flex-shrink: 1;
-            flex-grow: 0;
-
-            margin-right: 15px;
-            margin-top: 10px;
-
-            font-weight: 600;
-            color: $muted-fg-color;
-
-            > span {
-                justify-content: center;
-            }
-        }
-
-        > .mx_RadioButton_enabled {
-            opacity: 1;
-
-            // These colors need to be hardcoded because they don't change with the theme
-            &.mx_ThemeSelector_light {
-                background-color: #f3f8fd;
-                color: #2e2f32;
-            }
-
-            &.mx_ThemeSelector_dark {
-                // 5% lightened version of 181b21
-                background-color: #25282e;
-                color: #f3f8fd;
-
-                > input > div {
-                    border-color: $input-darker-bg-color;
-                    > div {
-                        border-color: $input-darker-bg-color;
-                    }
-                }
-            }
-
-            &.mx_ThemeSelector_black {
-                background-color: #000000;
-                color: #f3f8fd;
-
-                > input > div {
-                    border-color: $input-darker-bg-color;
-                    > div {
-                        border-color: $input-darker-bg-color;
-                    }
-                }
-            }
-        }
-    }
-}
-
 .mx_AppearanceUserSettingsTab_Advanced {
     color: $primary-content;
 

src/components/views/settings/ThemeChoicePanel.tsx

@@ -0,0 +1,240 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { _t } from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
+import { enumerateThemes } from "../../../theme";
+import ThemeWatcher from "../../../settings/watchers/ThemeWatcher";
+import AccessibleButton from "../elements/AccessibleButton";
+import dis from "../../../dispatcher/dispatcher";
+import { RecheckThemePayload } from '../../../dispatcher/payloads/RecheckThemePayload';
+import { Action } from '../../../dispatcher/actions';
+import StyledCheckbox from '../elements/StyledCheckbox';
+import Field from '../elements/Field';
+import StyledRadioGroup from "../elements/StyledRadioGroup";
+import { SettingLevel } from "../../../settings/SettingLevel";
+import { replaceableComponent } from "../../../utils/replaceableComponent";
+import { compare } from "../../../utils/strings";
+
+import { logger } from "matrix-js-sdk/src/logger";
+
+interface IProps {
+}
+
+interface IThemeState {
+    theme: string;
+    useSystemTheme: boolean;
+}
+
+export interface CustomThemeMessage {
+    isError: boolean;
+    text: string;
+}
+
+interface IState extends IThemeState {
+    customThemeUrl: string;
+    customThemeMessage: CustomThemeMessage;
+}
+
+@replaceableComponent("views.settings.tabs.user.ThemeChoicePanel")
+export default class ThemeChoicePanel extends React.Component<IProps, IState> {
+    private themeTimer: number;
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            ...this.calculateThemeState(),
+            customThemeUrl: "",
+            customThemeMessage: { isError: false, text: "" },
+        };
+    }
+
+    private calculateThemeState(): IThemeState {
+        // We have to mirror the logic from ThemeWatcher.getEffectiveTheme so we
+        // show the right values for things.
+
+        const themeChoice: string = SettingsStore.getValue("theme");
+        const systemThemeExplicit: boolean = SettingsStore.getValueAt(
+            SettingLevel.DEVICE, "use_system_theme", null, false, true);
+        const themeExplicit: string = SettingsStore.getValueAt(
+            SettingLevel.DEVICE, "theme", null, false, true);
+
+        // If the user has enabled system theme matching, use that.
+        if (systemThemeExplicit) {
+            return {
+                theme: themeChoice,
+                useSystemTheme: true,
+            };
+        }
+
+        // If the user has set a theme explicitly, use that (no system theme matching)
+        if (themeExplicit) {
+            return {
+                theme: themeChoice,
+                useSystemTheme: false,
+            };
+        }
+
+        // Otherwise assume the defaults for the settings
+        return {
+            theme: themeChoice,
+            useSystemTheme: SettingsStore.getValueAt(SettingLevel.DEVICE, "use_system_theme"),
+        };
+    }
+
+    private onThemeChange = (newTheme: string): void => {
+        if (this.state.theme === newTheme) return;
+
+        // doing getValue in the .catch will still return the value we failed to set,
+        // so remember what the value was before we tried to set it so we can revert
+        const oldTheme: string = SettingsStore.getValue('theme');
+        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
+            dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
+            this.setState({ theme: oldTheme });
+        });
+        this.setState({ theme: newTheme });
+        // The settings watcher doesn't fire until the echo comes back from the
+        // server, so to make the theme change immediately we need to manually
+        // do the dispatch now
+        // XXX: The local echoed value appears to be unreliable, in particular
+        // when settings custom themes(!) so adding forceTheme to override
+        // the value from settings.
+        dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme, forceTheme: newTheme });
+    };
+
+    private onUseSystemThemeChanged = (checked: boolean): void => {
+        this.setState({ useSystemTheme: checked });
+        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
+        dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
+    };
+
+    private onAddCustomTheme = async (): Promise<void> => {
+        let currentThemes: string[] = SettingsStore.getValue("custom_themes");
+        if (!currentThemes) currentThemes = [];
+        currentThemes = currentThemes.map(c => c); // cheap clone
+
+        if (this.themeTimer) {
+            clearTimeout(this.themeTimer);
+        }
+
+        try {
+            const r = await fetch(this.state.customThemeUrl);
+            // XXX: need some schema for this
+            const themeInfo = await r.json();
+            if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
+                this.setState({ customThemeMessage: { text: _t("Invalid theme schema."), isError: true } });
+                return;
+            }
+            currentThemes.push(themeInfo);
+        } catch (e) {
+            logger.error(e);
+            this.setState({ customThemeMessage: { text: _t("Error downloading theme information."), isError: true } });
+            return; // Don't continue on error
+        }
+
+        await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
+        this.setState({ customThemeUrl: "", customThemeMessage: { text: _t("Theme added!"), isError: false } });
+
+        this.themeTimer = setTimeout(() => {
+            this.setState({ customThemeMessage: { text: "", isError: false } });
+        }, 3000);
+    };
+
+    private onCustomThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
+        this.setState({ customThemeUrl: e.target.value });
+    };
+
+    public render() {
+        const themeWatcher = new ThemeWatcher();
+        let systemThemeSection: JSX.Element;
+        if (themeWatcher.isSystemThemeSupported()) {
+            systemThemeSection = <div>
+                <StyledCheckbox
+                    checked={this.state.useSystemTheme}
+                    onChange={(e) => this.onUseSystemThemeChanged(e.target.checked)}
+                >
+                    { SettingsStore.getDisplayName("use_system_theme") }
+                </StyledCheckbox>
+            </div>;
+        }
+
+        let customThemeForm: JSX.Element;
+        if (SettingsStore.getValue("feature_custom_themes")) {
+            let messageElement = null;
+            if (this.state.customThemeMessage.text) {
+                if (this.state.customThemeMessage.isError) {
+                    messageElement = <div className='text-error'>{ this.state.customThemeMessage.text }</div>;
+                } else {
+                    messageElement = <div className='text-success'>{ this.state.customThemeMessage.text }</div>;
+                }
+            }
+            customThemeForm = (
+                <div className='mx_SettingsTab_section'>
+                    <form onSubmit={this.onAddCustomTheme}>
+                        <Field
+                            label={_t("Custom theme URL")}
+                            type='text'
+                            id='mx_GeneralUserSettingsTab_customThemeInput'
+                            autoComplete="off"
+                            onChange={this.onCustomThemeChange}
+                            value={this.state.customThemeUrl}
+                        />
+                        <AccessibleButton
+                            onClick={this.onAddCustomTheme}
+                            type="submit"
+                            kind="primary_sm"
+                            disabled={!this.state.customThemeUrl.trim()}
+                        >
+                            { _t("Add theme") }
+                        </AccessibleButton>
+                        { messageElement }
+                    </form>
+                </div>
+            );
+        }
+
+        // XXX: replace any type here
+        const themes = Object.entries<any>(enumerateThemes())
+            .map(p => ({ id: p[0], name: p[1] })); // convert pairs to objects for code readability
+        const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
+        const customThemes = themes.filter(p => !builtInThemes.includes(p))
+            .sort((a, b) => compare(a.name, b.name));
+        const orderedThemes = [...builtInThemes, ...customThemes];
+        return (
+            <div className="mx_SettingsTab_section mx_ThemeChoicePanel">
+                <span className="mx_SettingsTab_subheading">{ _t("Theme") }</span>
+                { systemThemeSection }
+                <div className="mx_ThemeSelectors">
+                    <StyledRadioGroup
+                        name="theme"
+                        definitions={orderedThemes.map(t => ({
+                            value: t.id,
+                            label: t.name,
+                            disabled: this.state.useSystemTheme,
+                            className: "mx_ThemeSelector_" + t.id,
+                        }))}
+                        onChange={this.onThemeChange}
+                        value={this.state.useSystemTheme ? undefined : this.state.theme}
+                        outlined
+                    />
+                </div>
+                { customThemeForm }
+            </div>
+        );
+    }
+}

src/components/views/settings/tabs/user/AppearanceUserSettingsTab.tsx

@@ -20,25 +20,17 @@ import { _t } from "../../../../../languageHandler";
 import SdkConfig from "../../../../../SdkConfig";
 import { MatrixClientPeg } from '../../../../../MatrixClientPeg';
 import SettingsStore from "../../../../../settings/SettingsStore";
-import { enumerateThemes } from "../../../../../theme";
-import ThemeWatcher from "../../../../../settings/watchers/ThemeWatcher";
-import AccessibleButton from "../../../elements/AccessibleButton";
-import dis from "../../../../../dispatcher/dispatcher";
-import { RecheckThemePayload } from '../../../../../dispatcher/payloads/RecheckThemePayload';
-import { Action } from '../../../../../dispatcher/actions';
 import StyledCheckbox from '../../../elements/StyledCheckbox';
 import SettingsFlag from '../../../elements/SettingsFlag';
 import Field from '../../../elements/Field';
-import StyledRadioGroup from "../../../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../../../settings/SettingLevel";
 import { UIFeature } from "../../../../../settings/UIFeature";
 import { Layout } from "../../../../../settings/Layout";
 import { replaceableComponent } from "../../../../../utils/replaceableComponent";
-import { compare } from "../../../../../utils/strings";
 import LayoutSwitcher from "../../LayoutSwitcher";
 
-import { logger } from "matrix-js-sdk/src/logger";
 import FontScalingPanel from '../../FontScalingPanel';
+import ThemeChoicePanel from '../../ThemeChoicePanel';
 
 interface IProps {
 }
@@ -70,7 +62,6 @@ interface IState extends IThemeState {
 export default class AppearanceUserSettingsTab extends React.Component<IProps, IState> {
     private readonly MESSAGE_PREVIEW_TEXT = _t("Hey you. You're the best!");
 
-    private themeTimer: number;
     private unmounted = false;
 
     constructor(props: IProps) {
@@ -141,68 +132,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         };
     }
 
-    private onThemeChange = (newTheme: string): void => {
-        if (this.state.theme === newTheme) return;
-
-        // doing getValue in the .catch will still return the value we failed to set,
-        // so remember what the value was before we tried to set it so we can revert
-        const oldTheme: string = SettingsStore.getValue('theme');
-        SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme).catch(() => {
-            dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
-            this.setState({ theme: oldTheme });
-        });
-        this.setState({ theme: newTheme });
-        // The settings watcher doesn't fire until the echo comes back from the
-        // server, so to make the theme change immediately we need to manually
-        // do the dispatch now
-        // XXX: The local echoed value appears to be unreliable, in particular
-        // when settings custom themes(!) so adding forceTheme to override
-        // the value from settings.
-        dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme, forceTheme: newTheme });
-    };
-
-    private onUseSystemThemeChanged = (checked: boolean): void => {
-        this.setState({ useSystemTheme: checked });
-        SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, checked);
-        dis.dispatch<RecheckThemePayload>({ action: Action.RecheckTheme });
-    };
-
-    private onAddCustomTheme = async (): Promise<void> => {
-        let currentThemes: string[] = SettingsStore.getValue("custom_themes");
-        if (!currentThemes) currentThemes = [];
-        currentThemes = currentThemes.map(c => c); // cheap clone
-
-        if (this.themeTimer) {
-            clearTimeout(this.themeTimer);
-        }
-
-        try {
-            const r = await fetch(this.state.customThemeUrl);
-            // XXX: need some schema for this
-            const themeInfo = await r.json();
-            if (!themeInfo || typeof(themeInfo['name']) !== 'string' || typeof(themeInfo['colors']) !== 'object') {
-                this.setState({ customThemeMessage: { text: _t("Invalid theme schema."), isError: true } });
-                return;
-            }
-            currentThemes.push(themeInfo);
-        } catch (e) {
-            logger.error(e);
-            this.setState({ customThemeMessage: { text: _t("Error downloading theme information."), isError: true } });
-            return; // Don't continue on error
-        }
-
-        await SettingsStore.setValue("custom_themes", null, SettingLevel.ACCOUNT, currentThemes);
-        this.setState({ customThemeUrl: "", customThemeMessage: { text: _t("Theme added!"), isError: false } });
-
-        this.themeTimer = setTimeout(() => {
-            this.setState({ customThemeMessage: { text: "", isError: false } });
-        }, 3000);
-    };
-
-    private onCustomThemeChange = (e: React.ChangeEvent<HTMLSelectElement | HTMLInputElement>): void => {
-        this.setState({ customThemeUrl: e.target.value });
-    };
-
     private onLayoutChanged = (layout: Layout): void => {
         this.setState({ layout: layout });
     };
@@ -217,85 +146,6 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
         }
     };
 
-    private renderThemeSection() {
-        const themeWatcher = new ThemeWatcher();
-        let systemThemeSection: JSX.Element;
-        if (themeWatcher.isSystemThemeSupported()) {
-            systemThemeSection = <div>
-                <StyledCheckbox
-                    checked={this.state.useSystemTheme}
-                    onChange={(e) => this.onUseSystemThemeChanged(e.target.checked)}
-                >
-                    { SettingsStore.getDisplayName("use_system_theme") }
-                </StyledCheckbox>
-            </div>;
-        }
-
-        let customThemeForm: JSX.Element;
-        if (SettingsStore.getValue("feature_custom_themes")) {
-            let messageElement = null;
-            if (this.state.customThemeMessage.text) {
-                if (this.state.customThemeMessage.isError) {
-                    messageElement = <div className='text-error'>{ this.state.customThemeMessage.text }</div>;
-                } else {
-                    messageElement = <div className='text-success'>{ this.state.customThemeMessage.text }</div>;
-                }
-            }
-            customThemeForm = (
-                <div className='mx_SettingsTab_section'>
-                    <form onSubmit={this.onAddCustomTheme}>
-                        <Field
-                            label={_t("Custom theme URL")}
-                            type='text'
-                            id='mx_GeneralUserSettingsTab_customThemeInput'
-                            autoComplete="off"
-                            onChange={this.onCustomThemeChange}
-                            value={this.state.customThemeUrl}
-                        />
-                        <AccessibleButton
-                            onClick={this.onAddCustomTheme}
-                            type="submit"
-                            kind="primary_sm"
-                            disabled={!this.state.customThemeUrl.trim()}
-                        >
-                            { _t("Add theme") }
-                        </AccessibleButton>
-                        { messageElement }
-                    </form>
-                </div>
-            );
-        }
-
-        // XXX: replace any type here
-        const themes = Object.entries<any>(enumerateThemes())
-            .map(p => ({ id: p[0], name: p[1] })); // convert pairs to objects for code readability
-        const builtInThemes = themes.filter(p => !p.id.startsWith("custom-"));
-        const customThemes = themes.filter(p => !builtInThemes.includes(p))
-            .sort((a, b) => compare(a.name, b.name));
-        const orderedThemes = [...builtInThemes, ...customThemes];
-        return (
-            <div className="mx_SettingsTab_section mx_AppearanceUserSettingsTab_themeSection">
-                <span className="mx_SettingsTab_subheading">{ _t("Theme") }</span>
-                { systemThemeSection }
-                <div className="mx_ThemeSelectors">
-                    <StyledRadioGroup
-                        name="theme"
-                        definitions={orderedThemes.map(t => ({
-                            value: t.id,
-                            label: t.name,
-                            disabled: this.state.useSystemTheme,
-                            className: "mx_ThemeSelector_" + t.id,
-                        }))}
-                        onChange={this.onThemeChange}
-                        value={this.state.useSystemTheme ? undefined : this.state.theme}
-                        outlined
-                    />
-                </div>
-                { customThemeForm }
-            </div>
-        );
-    }
-
     private renderAdvancedSection() {
         if (!SettingsStore.getValue(UIFeature.AdvancedSettings)) return null;
 
@@ -382,7 +232,7 @@ export default class AppearanceUserSettingsTab extends React.Component<IProps, I
                 <div className="mx_SettingsTab_SubHeading">
                     { _t("Appearance Settings only affect this %(brand)s session.", { brand }) }
                 </div>
-                { this.renderThemeSection() }
+                <ThemeChoicePanel />
                 { layoutSection }
                 <FontScalingPanel />
                 { this.renderAdvancedSection() }

src/i18n/strings/en_EN.json

@@ -1288,18 +1288,18 @@
     "Manage integrations": "Manage integrations",
     "Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.": "Integration managers receive configuration data, and can modify widgets, send room invites, and set power levels on your behalf.",
     "Add": "Add",
-    "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
-    "Checking for an update...": "Checking for an update...",
-    "No update available.": "No update available.",
-    "Downloading update...": "Downloading update...",
-    "New version available. <a>Update now.</a>": "New version available. <a>Update now.</a>",
-    "Check for update": "Check for update",
     "Invalid theme schema.": "Invalid theme schema.",
     "Error downloading theme information.": "Error downloading theme information.",
     "Theme added!": "Theme added!",
     "Custom theme URL": "Custom theme URL",
     "Add theme": "Add theme",
     "Theme": "Theme",
+    "Error encountered (%(errorDetail)s).": "Error encountered (%(errorDetail)s).",
+    "Checking for an update...": "Checking for an update...",
+    "No update available.": "No update available.",
+    "Downloading update...": "Downloading update...",
+    "New version available. <a>Update now.</a>": "New version available. <a>Update now.</a>",
+    "Check for update": "Check for update",
     "Set the name of a font installed on your system & %(brand)s will attempt to use it.": "Set the name of a font installed on your system & %(brand)s will attempt to use it.",
     "Enable experimental, compact IRC style layout": "Enable experimental, compact IRC style layout",
     "Customise your appearance": "Customise your appearance",

test/components/views/settings/ThemeChoicePanel-test.tsx

@@ -0,0 +1,60 @@
+/*
+Copyright 2021 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { mount } from "enzyme";
+
+import '../../../skinned-sdk';
+import * as TestUtils from "../../../test-utils";
+import _ThemeChoicePanel from '../../../../src/components/views/settings/ThemeChoicePanel';
+
+const ThemeChoicePanel = TestUtils.wrapInMatrixClientContext(_ThemeChoicePanel);
+
+// Avoid errors about global.matchMedia. See:
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(), // Deprecated
+        removeListener: jest.fn(), // Deprecated
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn(),
+    })),
+});
+
+// Fake random strings to give a predictable snapshot
+jest.mock(
+    'matrix-js-sdk/src/randomstring',
+    () => {
+        return {
+            randomString: () => "abdefghi",
+        };
+    },
+);
+
+describe('ThemeChoicePanel', () => {
+    it('renders the theme choice UI', () => {
+        TestUtils.stubClient();
+        const wrapper = mount(
+            <ThemeChoicePanel />,
+        );
+        expect(wrapper).toMatchSnapshot();
+    });
+});

test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap

@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
+<Wrapper>
+  <ThemeChoicePanel>
+    <div
+      className="mx_SettingsTab_section mx_ThemeChoicePanel"
+    >
+      <span
+        className="mx_SettingsTab_subheading"
+      >
+        Theme
+      </span>
+      <div
+        className="mx_ThemeSelectors"
+      >
+        <StyledRadioGroup
+          definitions={
+            Array [
+              Object {
+                "className": "mx_ThemeSelector_light",
+                "disabled": true,
+                "label": "Light",
+                "value": "light",
+              },
+              Object {
+                "className": "mx_ThemeSelector_dark",
+                "disabled": true,
+                "label": "Dark",
+                "value": "dark",
+              },
+            ]
+          }
+          name="theme"
+          onChange={[Function]}
+          outlined={true}
+        >
+          <StyledRadioButton
+            checked={false}
+            childrenInLabel={true}
+            className="mx_ThemeSelector_light"
+            disabled={true}
+            name="theme"
+            onChange={[Function]}
+            outlined={true}
+            value="light"
+          >
+            <label
+              className="mx_RadioButton mx_ThemeSelector_light mx_RadioButton_disabled mx_RadioButton_outlined"
+            >
+              <input
+                checked={false}
+                disabled={true}
+                name="theme"
+                onChange={[Function]}
+                type="radio"
+                value="light"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                className="mx_RadioButton_content"
+              >
+                Light
+              </div>
+              <div
+                className="mx_RadioButton_spacer"
+              />
+            </label>
+          </StyledRadioButton>
+          <StyledRadioButton
+            checked={false}
+            childrenInLabel={true}
+            className="mx_ThemeSelector_dark"
+            disabled={true}
+            name="theme"
+            onChange={[Function]}
+            outlined={true}
+            value="dark"
+          >
+            <label
+              className="mx_RadioButton mx_ThemeSelector_dark mx_RadioButton_disabled mx_RadioButton_outlined"
+            >
+              <input
+                checked={false}
+                disabled={true}
+                name="theme"
+                onChange={[Function]}
+                type="radio"
+                value="dark"
+              />
+              <div>
+                <div />
+              </div>
+              <div
+                className="mx_RadioButton_content"
+              >
+                Dark
+              </div>
+              <div
+                className="mx_RadioButton_spacer"
+              />
+            </label>
+          </StyledRadioButton>
+        </StyledRadioGroup>
+      </div>
+    </div>
+  </ThemeChoicePanel>
+</Wrapper>
+`;