Unit test ThemeProvider

Author: fzaninotto

packages/ra-ui-materialui/src/button/Button.stories.tsx

@@ -85,10 +85,10 @@ const theme = createTheme({
 
 declare module '@mui/material/styles' {
     interface Palette {
-        userDefined: PaletteColor;
+        userDefined?: PaletteColor;
     }
     interface PaletteOptions {
-        userDefined: PaletteColor;
+        userDefined?: PaletteColor;
     }
 }
 

packages/ra-ui-materialui/src/layout/Theme/ThemeProvider.spec.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import expect from 'expect';
+import { StoreContextProvider, memoryStore } from 'ra-core';
+import { Button, ThemeOptions } from '@mui/material';
+
+import { ThemeProvider } from './ThemeProvider';
+import { ThemesContext } from './ThemesContext';
+import { ThemeTestWrapper } from '../ThemeTestWrapper';
+
+const lightTheme: ThemeOptions = {};
+const darkTheme: ThemeOptions = { palette: { mode: 'dark' } };
+
+const LIGHT_MODE_TEXT_COLOR = 'rgb(25, 118, 210)'; // text is dark blue in light mode
+const DARK_MODE_TEXT_COLOR = 'rgb(144, 202, 249)'; // text is light blue in dark mode
+
+describe('ThemeProvider', () => {
+    it('should create a material-ui theme context based on the ThemesContext and theme preference light', () => {
+        render(
+            <StoreContextProvider value={memoryStore({ theme: 'light' })}>
+                <ThemesContext.Provider value={{ lightTheme, darkTheme }}>
+                    <ThemeProvider>
+                        <Button>Test</Button>
+                    </ThemeProvider>
+                </ThemesContext.Provider>
+            </StoreContextProvider>
+        );
+        const button = screen.getByText('Test');
+        expect(getComputedStyle(button).color).toBe(LIGHT_MODE_TEXT_COLOR);
+    });
+
+    it('should create a material-ui theme context based on the ThemesContext and theme preference dark', () => {
+        render(
+            <StoreContextProvider value={memoryStore({ theme: 'dark' })}>
+                <ThemesContext.Provider value={{ lightTheme, darkTheme }}>
+                    <ThemeProvider>
+                        <Button>Test</Button>
+                    </ThemeProvider>
+                </ThemesContext.Provider>
+            </StoreContextProvider>
+        );
+        const button = screen.getByText('Test');
+        expect(getComputedStyle(button).color).toBe(DARK_MODE_TEXT_COLOR);
+    });
+
+    it('should default to a light theme when no theme preference is set', () => {
+        render(
+            <ThemesContext.Provider value={{ lightTheme, darkTheme }}>
+                <ThemeProvider>
+                    <Button>Test</Button>
+                </ThemeProvider>
+            </ThemesContext.Provider>
+        );
+        const button = screen.getByText('Test');
+        expect(getComputedStyle(button).color).toBe(LIGHT_MODE_TEXT_COLOR);
+    });
+
+    it('should default to light theme when the browser detects a light mode preference', () => {
+        render(
+            <ThemeTestWrapper mode="light">
+                <ThemesContext.Provider value={{ lightTheme, darkTheme }}>
+                    <ThemeProvider>
+                        <Button>Test</Button>
+                    </ThemeProvider>
+                </ThemesContext.Provider>
+            </ThemeTestWrapper>
+        );
+        const button = screen.getByText('Test');
+        expect(getComputedStyle(button).color).toBe(LIGHT_MODE_TEXT_COLOR);
+    });
+
+    it('should default to dark theme when the browser detects a dark mode preference', () => {
+        render(
+            <ThemeTestWrapper mode="dark">
+                <ThemesContext.Provider value={{ lightTheme, darkTheme }}>
+                    <ThemeProvider>
+                        <Button>Test</Button>
+                    </ThemeProvider>
+                </ThemesContext.Provider>
+            </ThemeTestWrapper>
+        );
+        const button = screen.getByText('Test');
+        expect(getComputedStyle(button).color).toBe(DARK_MODE_TEXT_COLOR);
+    });
+
+    it('should fallback to using theme prop when used outside of a ThemesContext (for backwards compatibility)', () => {
+        render(
+            <ThemeProvider theme={darkTheme}>
+                <Button>Test</Button>
+            </ThemeProvider>
+        );
+        const button = screen.getByText('Test');
+        expect(getComputedStyle(button).color).toBe(DARK_MODE_TEXT_COLOR);
+    });
+});

packages/ra-ui-materialui/src/layout/Theme/ThemeProvider.tsx

@@ -11,11 +11,23 @@ import { useTheme } from './useTheme';
 import { useThemesContext } from './useThemesContext';
 
 /**
- * This sets the Material UI theme based on the store.
+ * This sets the Material UI theme based on the preferred theme type.
  *
  * @param props
  * @param props.children The children of the component.
- * @param props.theme The initial theme.
+ * @param {ThemeOptions} props.theme The initial theme. Optional, use the one from the context if not provided.
+ *
+ * @example
+ *
+ * import { ThemesContext, ThemeProvider } from 'react-admin';
+ *
+ * const App = () => (
+ *    <ThemesContext.Provider value={{ lightTheme, darkTheme }}>
+ *      <ThemeProvider>
+ *        <Button>Test</Button>
+ *      </ThemeProvider>
+ *   </ThemesContext.Provider>
+ * );
  */
 export const ThemeProvider = ({
     children,
@@ -50,5 +62,8 @@ export const ThemeProvider = ({
 
 export interface ThemeProviderProps {
     children: ReactNode;
+    /**
+     * @deprecated Use the `ThemesProvider` component instead.
+     */
     theme?: RaThemeOptions;
 }

packages/ra-ui-materialui/src/layout/Theme/types.ts

@@ -11,3 +11,5 @@ export interface RaThemeOptions extends MuiThemeOptions {
     };
     components?: ComponentsTheme;
 }
+
+export type ThemeType = 'light' | 'dark';

packages/ra-ui-materialui/src/layout/Theme/useTheme.ts

@@ -1,7 +1,6 @@
 import { useStore } from 'ra-core';
-import { RaThemeOptions } from './types';
+import { RaThemeOptions, ThemeType } from './types';
 
-export type ThemeType = 'light' | 'dark';
 export type ThemeSetter = (theme: ThemeType | RaThemeOptions) => void;
 
 /**

packages/ra-ui-materialui/src/layout/ThemeTestWrapper.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+
+/**
+ * Test utility to simulate a preferred theme mode (light or dark)
+ *
+ * Do not use inside a browser.
+ *
+ * @example
+ *
+ * <ThemeTestWrapper mode="dark">
+ *     <MyComponent />
+ * <ThemeTestWrapper>
+ */
+export const ThemeTestWrapper = ({
+    mode = 'light',
+    children,
+}: ThemeTestWrapperProps): JSX.Element => {
+    const theme = createTheme();
+    const ssrMatchMedia = query => ({
+        matches:
+            mode === 'dark' && query === '(prefers-color-scheme: dark)'
+                ? true
+                : false,
+    });
+
+    return (
+        <ThemeProvider
+            theme={{
+                ...theme,
+                components: {
+                    MuiUseMediaQuery: {
+                        defaultProps: {
+                            ssrMatchMedia,
+                            matchMedia: ssrMatchMedia,
+                        },
+                    },
+                },
+            }}
+        >
+            {children}
+        </ThemeProvider>
+    );
+};
+
+export interface ThemeTestWrapperProps {
+    mode: 'light' | 'dark';
+    children: JSX.Element;
+}