From c6f3d6c338409edcfb26cc39cc0fc1437955cd71 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Tue, 14 May 2024 09:55:35 -0400
Subject: [PATCH] add test and prevent all errors

---
 packages/mui-material/src/AppBar/AppBar.js     | 10 +++-------
 packages/mui-material/src/Badge/Badge.js       | 10 +++-------
 packages/mui-material/src/Slider/Slider.js     | 18 +++++++++---------
 .../src/ToggleButton/ToggleButton.js           | 10 +++-------
 .../test-utils/src/describeConformance.tsx     |  1 +
 5 files changed, 19 insertions(+), 30 deletions(-)

diff --git a/packages/mui-material/src/AppBar/AppBar.js b/packages/mui-material/src/AppBar/AppBar.js
index 2d85cb28fb18e0..0551398ba2ddd8 100644
--- a/packages/mui-material/src/AppBar/AppBar.js
+++ b/packages/mui-material/src/AppBar/AppBar.js
@@ -114,13 +114,9 @@ const AppBarRoot = styled(Paper, {
         }),
       },
     },
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter(
-        (key) =>
-          (theme.vars ?? theme).palette[key].main &&
-          (theme.vars ?? theme).palette[key].contrastText,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main && palette.contrastText)
+      .map(([color]) => ({
         props: { color },
         style: {
           '--AppBar-background': (theme.vars ?? theme).palette[color].main,
diff --git a/packages/mui-material/src/Badge/Badge.js b/packages/mui-material/src/Badge/Badge.js
index 2b0e68da5f6001..0750bffbdcf8cc 100644
--- a/packages/mui-material/src/Badge/Badge.js
+++ b/packages/mui-material/src/Badge/Badge.js
@@ -89,13 +89,9 @@ const BadgeBadge = styled('span', {
     duration: theme.transitions.duration.enteringScreen,
   }),
   variants: [
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter(
-        (key) =>
-          (theme.vars ?? theme).palette[key].main &&
-          (theme.vars ?? theme).palette[key].contrastText,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main && palette.contrastText)
+      .map(([color]) => ({
         props: { color },
         style: {
           backgroundColor: (theme.vars || theme).palette[color].main,
diff --git a/packages/mui-material/src/Slider/Slider.js b/packages/mui-material/src/Slider/Slider.js
index 5759dc932e503c..8ed7a63e3407d1 100644
--- a/packages/mui-material/src/Slider/Slider.js
+++ b/packages/mui-material/src/Slider/Slider.js
@@ -59,9 +59,9 @@ export const SliderRoot = styled('span', {
     },
   },
   variants: [
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter((key) => (theme.vars ?? theme).palette[key].main)
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           color: (theme.vars || theme).palette[color].main,
@@ -201,9 +201,9 @@ export const SliderTrack = styled('span', {
           display: 'none',
         },
       },
-      ...Object.keys((theme.vars ?? theme).palette)
-        .filter((key) => (theme.vars ?? theme).palette[key].main)
-        .map((color) => ({
+      ...Object.entries(theme.palette)
+        .filter(([, palette]) => palette && palette.main)
+        .map(([color]) => ({
           props: { color, track: 'inverted' },
           style: {
             ...(theme.vars
@@ -301,9 +301,9 @@ export const SliderThumb = styled('span', {
         transform: 'translate(-50%, 50%)',
       },
     },
-    ...Object.keys((theme.vars ?? theme).palette)
-      .filter((key) => (theme.vars ?? theme).palette[key].main)
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&:hover, &.${sliderClasses.focusVisible}`]: {
diff --git a/packages/mui-material/src/ToggleButton/ToggleButton.js b/packages/mui-material/src/ToggleButton/ToggleButton.js
index c9224e80889d4f..f80211201960b8 100644
--- a/packages/mui-material/src/ToggleButton/ToggleButton.js
+++ b/packages/mui-material/src/ToggleButton/ToggleButton.js
@@ -87,13 +87,9 @@ const ToggleButtonRoot = styled(ButtonBase, {
         },
       },
     },
-    ...Object.keys((theme.vars || theme).palette)
-      .filter((key) =>
-        theme.vars
-          ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel
-          : theme.palette[key].main,
-      )
-      .map((color) => ({
+    ...Object.entries(theme.palette)
+      .filter(([, palette]) => palette && palette.main)
+      .map(([color]) => ({
         props: { color },
         style: {
           [`&.${toggleButtonClasses.selected}`]: {
diff --git a/packages/test-utils/src/describeConformance.tsx b/packages/test-utils/src/describeConformance.tsx
index 3063749ac0d095..1c5b6505118dfe 100644
--- a/packages/test-utils/src/describeConformance.tsx
+++ b/packages/test-utils/src/describeConformance.tsx
@@ -995,6 +995,7 @@ function testThemeCustomPalette(element: React.ReactElement, getOptions: () => C
           custom: {
             main: '#ff5252',
           },
+          unknown: null,
         },
       });