Fix ThemeChoicePanel-test.tsx

matrix-org · Jun 18, 2024 · 27188d8 · 27188d8
1 parent 1abdbc4
commit 27188d8
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 43 deletions.
diff --git a/src/components/views/settings/ThemeChoicePanel.tsx b/src/components/views/settings/ThemeChoicePanel.tsx
@@ -27,6 +27,7 @@ import {
 } from "@vector-im/compound-web";
 import { Icon as DeleteIcon } from "@vector-im/compound-design-tokens/icons/delete.svg";
 import classNames from "classnames";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import { _t } from "../../../languageHandler";
 import SettingsSubsection from "./shared/SettingsSubsection";
@@ -39,7 +40,6 @@ import { Action } from "../../../dispatcher/actions";
 import { useTheme } from "../../../hooks/useTheme";
 import { findHighContrastTheme, getOrderedThemes, CustomTheme as CustomThemeType, ITheme } from "../../../theme";
 import { useSettingValue } from "../../../hooks/useSettings";
-import { logger } from "../../../../../matrix-js-sdk/src/logger";
 
 /**
  * Interface for the theme state

diff --git a/test/components/views/settings/ThemeChoicePanel-test.tsx b/test/components/views/settings/ThemeChoicePanel-test.tsx
@@ -18,7 +18,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 
 import * as TestUtils from "../../../test-utils";
-import ThemeChoicePanel from "../../../../src/components/views/settings/ThemeChoicePanel";
+import { ThemeChoicePanel } from "../../../../src/components/views/settings/ThemeChoicePanel";
 
 describe("ThemeChoicePanel", () => {
     it("renders the theme choice UI", () => {

diff --git a/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap b/test/components/views/settings/__snapshots__/ThemeChoicePanel-test.tsx.snap
@@ -3,71 +3,133 @@
 exports[`ThemeChoicePanel renders the theme choice UI 1`] = `
 <DocumentFragment>
   <div
-    class="mx_SettingsSubsection"
-    data-testid="mx_ThemeChoicePanel"
+    class="mx_SettingsSubsection mx_SettingsSubsection_newUi"
   >
     <div
       class="mx_SettingsSubsectionHeading"
     >
       <h3
-        class="mx_Heading_h4 mx_SettingsSubsectionHeading_heading"
+        class="mx_Heading_h3 mx_SettingsSubsectionHeading_heading"
       >
         Theme
       </h3>
     </div>
     <div
-      class="mx_SettingsSubsection_content"
+      class="mx_SettingsSubsection_content mx_SettingsSubsection_content_newUi"
     >
-      <div
-        class="mx_ThemeChoicePanel_themeSelectors"
-        data-testid="theme-choice-panel-selectors"
+      <form
+        class="_root_578ve_24 mx_ThemeChoicePanel_ThemeSelectors"
       >
-        <label
-          class="mx_StyledRadioButton mx_ThemeSelector_light mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
+        <div
+          class="_inline-field_578ve_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
         >
-          <input
-            disabled=""
-            id="theme-light"
-            name="theme"
-            type="radio"
-            value="light"
-          />
-          <div>
-            <div />
-          </div>
           <div
-            class="mx_StyledRadioButton_content"
+            class="_inline-field-control_578ve_52"
           >
-            Light
+            <div
+              class="_container_bdln6_18"
+            >
+              <input
+                class="_input_bdln6_26"
+                disabled=""
+                id="radix-0"
+                name="themeSelector"
+                title=""
+                type="radio"
+                value="light"
+              />
+              <div
+                class="_ui_bdln6_27"
+              />
+            </div>
           </div>
           <div
-            class="mx_StyledRadioButton_spacer"
-          />
-        </label>
-        <label
-          class="mx_StyledRadioButton mx_ThemeSelector_dark mx_StyledRadioButton_disabled mx_StyledRadioButton_outlined"
+            class="_inline-field-body_578ve_46"
+          >
+            <label
+              class="_label_578ve_67 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-0"
+            >
+              Light
+            </label>
+          </div>
+        </div>
+        <div
+          class="_inline-field_578ve_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-dark"
         >
-          <input
-            disabled=""
-            id="theme-dark"
-            name="theme"
-            type="radio"
-            value="dark"
-          />
-          <div>
-            <div />
+          <div
+            class="_inline-field-control_578ve_52"
+          >
+            <div
+              class="_container_bdln6_18"
+            >
+              <input
+                class="_input_bdln6_26"
+                disabled=""
+                id="radix-1"
+                name="themeSelector"
+                title=""
+                type="radio"
+                value="dark"
+              />
+              <div
+                class="_ui_bdln6_27"
+              />
+            </div>
+          </div>
+          <div
+            class="_inline-field-body_578ve_46"
+          >
+            <label
+              class="_label_578ve_67 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-1"
+            >
+              Dark
+            </label>
           </div>
+        </div>
+        <div
+          class="_inline-field_578ve_40 mx_ThemeChoicePanel_themeSelector mx_ThemeChoicePanel_themeSelector_disabled cpd-theme-light"
+        >
           <div
-            class="mx_StyledRadioButton_content"
+            class="_inline-field-control_578ve_52"
           >
-            Dark
+            <div
+              class="_container_bdln6_18"
+            >
+              <input
+                class="_input_bdln6_26"
+                disabled=""
+                id="radix-2"
+                name="themeSelector"
+                title=""
+                type="radio"
+                value="light-high-contrast"
+              />
+              <div
+                class="_ui_bdln6_27"
+              />
+            </div>
           </div>
           <div
-            class="mx_StyledRadioButton_spacer"
-          />
-        </label>
-      </div>
+            class="_inline-field-body_578ve_46"
+          >
+            <label
+              class="_label_578ve_67 mx_ThemeChoicePanel_themeSelector_Label"
+              for="radix-2"
+            >
+              High contrast
+            </label>
+          </div>
+        </div>
+      </form>
     </div>
+    <div
+      class="_separator_144s5_17"
+      data-kind="primary"
+      data-orientation="horizontal"
+      role="separator"
+    />
   </div>
 </DocumentFragment>
 `;