fix iterating palette and add tests

mui · Mar 1, 2024 · 0689c63 · 0689c63
1 parent eb39558
commit 0689c63
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 3 deletions.
diff --git a/packages/mui-material/src/Alert/Alert.js b/packages/mui-material/src/Alert/Alert.js
@@ -58,7 +58,7 @@ const AlertRoot = styled(Paper, {
     padding: '6px 16px',
     variants: [
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value.main && value.light)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'standard' },
           style: {
@@ -76,7 +76,7 @@ const AlertRoot = styled(Paper, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value.main && value.light)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'outlined' },
           style: {
@@ -92,7 +92,7 @@ const AlertRoot = styled(Paper, {
           },
         })),
       ...Object.entries(theme.palette)
-        .filter(([, value]) => value.main)
+        .filter(([, value]) => value.main && value.dark)
         .map(([color]) => ({
           props: { colorSeverity: color, variant: 'filled' },
           style: {

diff --git a/packages/test-utils/src/describeConformance.tsx b/packages/test-utils/src/describeConformance.tsx
@@ -978,6 +978,47 @@ function testThemeVariants(element: React.ReactElement, getOptions: () => Confor
   });
 }
 
+/**
+ * MUI theme supports custom palettes.
+ * The components that iterate over the palette via `variants` should be able to render with or without applying the custom palette styles.
+ */
+function testThemeCustomPalette(element: React.ReactElement, getOptions: () => ConformanceOptions) {
+  describe('theme extended palette:', () => {
+    it.only('should render without errors', function test() {
+      if (!/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+      const { muiName, render, ThemeProvider, createTheme } = getOptions();
+
+      if (!muiName) {
+        throwMissingPropError('muiName');
+      }
+
+      if (!render) {
+        throwMissingPropError('render');
+      }
+
+      if (!ThemeProvider) {
+        throwMissingPropError('ThemeProvider');
+      }
+
+      if (!createTheme) {
+        throwMissingPropError('createTheme');
+      }
+
+      const theme = createTheme({
+        palette: {
+          custom: {
+            main: '#ff5252',
+          },
+        },
+      });
+
+      expect(() => render(<ThemeProvider theme={theme}>{element}</ThemeProvider>)).not.to.throw();
+    });
+  });
+}
+
 const fullSuite = {
   componentProp: testComponentProp,
   componentsProp: testComponentsProp,
@@ -992,6 +1033,7 @@ const fullSuite = {
   themeDefaultProps: testThemeDefaultProps,
   themeStyleOverrides: testThemeStyleOverrides,
   themeVariants: testThemeVariants,
+  themeCustomPalette: testThemeCustomPalette,
 };
 
 /**