@mui/internal-test-utils 1.0.0-dev.20240529-082515-213b5e33ab

package/build/describeConformance.js

@@ -0,0 +1,815 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.testReactTestRenderer = exports.testRootClass = exports.describeRef = exports.testPropsSpread = exports.testComponentProp = exports.testClassName = exports.randomStringValue = exports.findRootComponent = void 0;
+/* eslint-env mocha */
+const React = __importStar(require("react"));
+const chai_1 = require("chai");
+const react_test_renderer_1 = __importDefault(require("react-test-renderer"));
+const createMount_1 = __importDefault(require("./createMount"));
+const createDescribe_1 = __importDefault(require("./createDescribe"));
+const findOutermostIntrinsic_1 = __importDefault(require("./findOutermostIntrinsic"));
+function capitalize(string) {
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+/**
+ * @param {object} node
+ * @returns
+ */
+function assertDOMNode(node) {
+    // duck typing a DOM node
+    (0, chai_1.expect)(typeof node.nodeName).to.equal('string');
+}
+/**
+ * Utility method to make assertions about the ref on an element
+ * The element should have a component wrapped in withStyles as the root
+ */
+function testRef(element, mount, onRef = assertDOMNode) {
+    if (!mount) {
+        throwMissingPropError('mount');
+    }
+    const ref = React.createRef();
+    const wrapper = mount(React.createElement(React.Fragment, null, React.cloneElement(element, { ref })));
+    onRef(ref.current, wrapper);
+}
+/**
+ * Glossary
+ * - root component:
+ *   - renders the outermost host component
+ *   - has the `root` class if the component has one
+ *   - excess props are spread to this component
+ *   - has the type of `inheritComponent`
+ */
+/**
+ * Returns the component with the same constructor as `component` that renders
+ * the outermost host
+ */
+function findRootComponent(wrapper, component) {
+    const outermostHostElement = (0, findOutermostIntrinsic_1.default)(wrapper).getElement();
+    return wrapper.find(component).filterWhere((componentWrapper) => {
+        return componentWrapper.contains(outermostHostElement);
+    });
+}
+exports.findRootComponent = findRootComponent;
+function randomStringValue() {
+    return `s${Math.random().toString(36).slice(2)}`;
+}
+exports.randomStringValue = randomStringValue;
+function throwMissingPropError(field) {
+    throw new Error(`missing "${field}" in options
+
+  > describeConformance(element, () => options)
+`);
+}
+/**
+ * MUI components have a `className` prop. The `className` is applied to
+ * the root component.
+ */
+function testClassName(element, getOptions) {
+    it('applies the className to the root component', () => {
+        const { mount } = getOptions();
+        if (!mount) {
+            throwMissingPropError('mount');
+        }
+        const className = randomStringValue();
+        const wrapper = mount(React.cloneElement(element, { className }));
+        (0, chai_1.expect)((0, findOutermostIntrinsic_1.default)(wrapper).instance()).to.have.class(className);
+    });
+}
+exports.testClassName = testClassName;
+/**
+ * MUI components have a `component` prop that allows rendering a different
+ * Component from @inheritComponent
+ */
+function testComponentProp(element, getOptions) {
+    describe('prop: component', () => {
+        it('can render another root component with the `component` prop', () => {
+            const { mount, testComponentPropWith: component = 'em' } = getOptions();
+            if (!mount) {
+                throwMissingPropError('mount');
+            }
+            const wrapper = mount(React.cloneElement(element, { component }));
+            (0, chai_1.expect)(findRootComponent(wrapper, component).exists()).to.equal(true);
+        });
+    });
+}
+exports.testComponentProp = testComponentProp;
+/**
+ * MUI components can spread additional props to a documented component.
+ */
+function testPropsSpread(element, getOptions) {
+    it(`spreads props to the root component`, () => {
+        // type def in ConformanceOptions
+        const { inheritComponent, mount } = getOptions();
+        if (!mount) {
+            throwMissingPropError('mount');
+        }
+        if (inheritComponent === undefined) {
+            throw new TypeError('Unable to test props spread without `inheritComponent`. Either skip the test or pass a React element type.');
+        }
+        const testProp = 'data-test-props-spread';
+        const value = randomStringValue();
+        const wrapper = mount(React.cloneElement(element, { [testProp]: value }));
+        const root = findRootComponent(wrapper, inheritComponent);
+        (0, chai_1.expect)(root.props()).to.have.property(testProp, value);
+    });
+}
+exports.testPropsSpread = testPropsSpread;
+/**
+ * Tests that the `ref` of a component will return the correct instance
+ *
+ * This is determined by a given constructor i.e. a React.Component or HTMLElement for
+ * components that forward their ref and attach it to a host component.
+ */
+function describeRef(element, getOptions) {
+    describe('ref', () => {
+        it(`attaches the ref`, () => {
+            // type def in ConformanceOptions
+            const { inheritComponent, mount, refInstanceof } = getOptions();
+            testRef(element, mount, (instance, wrapper) => {
+                (0, chai_1.expect)(instance).to.be.instanceof(refInstanceof);
+                if (inheritComponent !== undefined && instance.nodeType === 1) {
+                    const rootHost = (0, findOutermostIntrinsic_1.default)(wrapper);
+                    (0, chai_1.expect)(instance).to.equal(rootHost.instance());
+                }
+            });
+        });
+    });
+}
+exports.describeRef = describeRef;
+/**
+ * Tests that the root component has the root class
+ */
+function testRootClass(element, getOptions) {
+    it('applies the root class to the root component if it has this class', () => {
+        const { classes, render, skip } = getOptions();
+        if (classes.root == null) {
+            return;
+        }
+        const className = randomStringValue();
+        const classesRootClassname = randomStringValue();
+        const { container } = render(React.cloneElement(element, {
+            className,
+            classes: { ...classes, root: `${classes.root} ${classesRootClassname}` },
+        }));
+        // we established that the root component renders the outermost host previously. We immediately
+        // jump to the host component because some components pass the `root` class
+        // to the `classes` prop of the root component.
+        // https://github.com/mui/material-ui/blob/f9896bcd129a1209153106296b3d2487547ba205/packages/material-ui/src/OutlinedInput/OutlinedInput.js#L101
+        (0, chai_1.expect)(container.firstChild).to.have.class(className);
+        (0, chai_1.expect)(container.firstChild).to.have.class(classes.root);
+        (0, chai_1.expect)(document.querySelectorAll(`.${classes.root}`).length).to.equal(1);
+        // classes test only for @mui/material
+        if (!skip || !skip.includes('classesRoot')) {
+            // Test that classes prop works
+            (0, chai_1.expect)(container.firstChild).to.have.class(classesRootClassname);
+            // Test that `classes` does not spread to DOM
+            (0, chai_1.expect)(document.querySelectorAll('[classes]').length).to.equal(0);
+        }
+    });
+}
+exports.testRootClass = testRootClass;
+/**
+ * Tests that the component can be rendered with react-test-renderer.
+ * This is important for snapshot testing with Jest (even if we don't encourage it).
+ */
+function testReactTestRenderer(element) {
+    it('should render without errors in ReactTestRenderer', () => {
+        react_test_renderer_1.default.act(() => {
+            react_test_renderer_1.default.create(element, {
+                createNodeMock: (node) => {
+                    return document.createElement(node.type);
+                },
+            });
+        });
+    });
+}
+exports.testReactTestRenderer = testReactTestRenderer;
+function forEachSlot(slots, callback) {
+    if (!slots) {
+        return;
+    }
+    const slotNames = Object.keys(slots);
+    slotNames.forEach((slotName) => {
+        const slot = slots[slotName];
+        callback(slotName, slot);
+    });
+}
+function testSlotsProp(element, getOptions) {
+    const { render, slots, testLegacyComponentsProp } = getOptions();
+    const CustomComponent = React.forwardRef(({ className, children }, ref) => (React.createElement("i", { className: className, ref: ref, "data-testid": "custom" }, children)));
+    forEachSlot(slots, (slotName, slotOptions) => {
+        it(`allows overriding the ${slotName} slot with a component using the slots.${slotName} prop`, () => {
+            if (!render) {
+                throwMissingPropError('render');
+            }
+            const slotComponent = slotOptions.testWithComponent ?? CustomComponent;
+            const components = {
+                [slotName]: slotComponent,
+            };
+            const { queryByTestId } = render(React.cloneElement(element, { slots: components }));
+            const renderedElement = queryByTestId('custom');
+            (0, chai_1.expect)(renderedElement).not.to.equal(null);
+            if (slotOptions.expectedClassName) {
+                (0, chai_1.expect)(renderedElement).to.have.class(slotOptions.expectedClassName);
+            }
+        });
+        if (slotOptions.testWithElement !== null) {
+            it(`allows overriding the ${slotName} slot with an element using the slots.${slotName} prop`, () => {
+                if (!render) {
+                    throwMissingPropError('render');
+                }
+                const slotElement = slotOptions.testWithElement ?? 'i';
+                const components = {
+                    [slotName]: slotElement,
+                };
+                const slotProps = {
+                    [slotName]: {
+                        'data-testid': 'customized',
+                    },
+                };
+                const { queryByTestId } = render(React.cloneElement(element, { slots: components, slotProps }));
+                const renderedElement = queryByTestId('customized');
+                (0, chai_1.expect)(renderedElement).not.to.equal(null);
+                (0, chai_1.expect)(renderedElement.nodeName.toLowerCase()).to.equal(slotElement);
+                if (slotOptions.expectedClassName) {
+                    (0, chai_1.expect)(renderedElement).to.have.class(slotOptions.expectedClassName);
+                }
+            });
+        }
+        // For testing Material UI components v5, and v6. Likely to be removed in v7.
+        if (testLegacyComponentsProp) {
+            it(`allows overriding the ${slotName} slot with a component using the components.${capitalize(slotName)} prop`, () => {
+                if (!render) {
+                    throwMissingPropError('render');
+                }
+                const slotComponent = slotOptions.testWithComponent ?? CustomComponent;
+                const components = {
+                    [capitalize(slotName)]: slotComponent,
+                };
+                const { queryByTestId } = render(React.cloneElement(element, { components }));
+                const renderedElement = queryByTestId('custom');
+                (0, chai_1.expect)(renderedElement).not.to.equal(null);
+                if (slotOptions.expectedClassName) {
+                    (0, chai_1.expect)(renderedElement).to.have.class(slotOptions.expectedClassName);
+                }
+            });
+            it(`prioritizes the 'slots.${slotName}' over components.${capitalize(slotName)} if both are defined`, () => {
+                if (!render) {
+                    throwMissingPropError('render');
+                }
+                const ComponentForComponentsProp = React.forwardRef(({ children }, ref) => {
+                    const SlotComponent = slotOptions.testWithComponent ?? 'div';
+                    return (React.createElement(SlotComponent, { ref: ref, "data-testid": "from-components" }, children));
+                });
+                const ComponentForSlotsProp = React.forwardRef(({ children }, ref) => {
+                    const SlotComponent = slotOptions.testWithComponent ?? 'div';
+                    return (React.createElement(SlotComponent, { ref: ref, "data-testid": "from-slots" }, children));
+                });
+                const components = {
+                    [capitalize(slotName)]: ComponentForComponentsProp,
+                };
+                const slotOverrides = {
+                    [slotName]: ComponentForSlotsProp,
+                };
+                const { queryByTestId } = render(React.cloneElement(element, { components, slots: slotOverrides }));
+                (0, chai_1.expect)(queryByTestId('from-slots')).not.to.equal(null);
+                (0, chai_1.expect)(queryByTestId('from-components')).to.equal(null);
+            });
+            if (slotOptions.testWithElement !== null) {
+                it(`allows overriding the ${slotName} slot with an element using the components.${capitalize(slotName)} prop`, () => {
+                    if (!render) {
+                        throwMissingPropError('render');
+                    }
+                    const slotElement = slotOptions.testWithElement ?? 'i';
+                    const components = {
+                        [capitalize(slotName)]: slotElement,
+                    };
+                    const componentsProps = {
+                        [slotName]: {
+                            'data-testid': 'customized',
+                        },
+                    };
+                    const { queryByTestId } = render(React.cloneElement(element, { components, componentsProps }));
+                    const renderedElement = queryByTestId('customized');
+                    (0, chai_1.expect)(renderedElement).not.to.equal(null);
+                    (0, chai_1.expect)(renderedElement.nodeName.toLowerCase()).to.equal(slotElement);
+                    if (slotOptions.expectedClassName) {
+                        (0, chai_1.expect)(renderedElement).to.have.class(slotOptions.expectedClassName);
+                    }
+                });
+            }
+        }
+    });
+}
+function testSlotPropsProp(element, getOptions) {
+    const { render, slots, testLegacyComponentsProp } = getOptions();
+    if (!render) {
+        throwMissingPropError('render');
+    }
+    forEachSlot(slots, (slotName, slotOptions) => {
+        it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} prop`, () => {
+            const slotProps = {
+                [slotName]: {
+                    'data-testid': 'custom',
+                },
+            };
+            const { queryByTestId } = render(React.cloneElement(element, { slotProps }));
+            const slotComponent = queryByTestId('custom');
+            (0, chai_1.expect)(slotComponent).not.to.equal(null);
+            if (slotOptions.expectedClassName) {
+                (0, chai_1.expect)(slotComponent).to.have.class(slotOptions.expectedClassName);
+            }
+        });
+        if (slotOptions.expectedClassName) {
+            it(`merges the class names provided in slotsProps.${slotName} with the built-in ones`, () => {
+                const slotProps = {
+                    [slotName]: {
+                        'data-testid': 'custom',
+                        className: randomStringValue(),
+                    },
+                };
+                const { getByTestId } = render(React.cloneElement(element, { slotProps }));
+                (0, chai_1.expect)(getByTestId('custom')).to.have.class(slotOptions.expectedClassName);
+                (0, chai_1.expect)(getByTestId('custom')).to.have.class(slotProps[slotName].className);
+            });
+        }
+        if (testLegacyComponentsProp) {
+            it(`sets custom properties on the ${slotName} slot's element with the componentsProps.${slotName} prop`, () => {
+                const componentsProps = {
+                    [slotName]: {
+                        'data-testid': 'custom',
+                    },
+                };
+                const { queryByTestId } = render(React.cloneElement(element, { componentsProps }));
+                const slotComponent = queryByTestId('custom');
+                (0, chai_1.expect)(slotComponent).not.to.equal(null);
+                if (slotOptions.expectedClassName) {
+                    (0, chai_1.expect)(slotComponent).to.have.class(slotOptions.expectedClassName);
+                }
+            });
+            it(`prioritizes the 'slotProps.${slotName}' over componentsProps.${slotName} if both are defined`, () => {
+                const componentsProps = {
+                    [slotName]: {
+                        'data-testid': 'custom',
+                        'data-from-components-props': 'true',
+                    },
+                };
+                const slotProps = {
+                    [slotName]: {
+                        'data-testid': 'custom',
+                        'data-from-slot-props': 'true',
+                    },
+                };
+                const { queryByTestId } = render(React.cloneElement(element, { componentsProps, slotProps }));
+                const slotComponent = queryByTestId('custom');
+                (0, chai_1.expect)(slotComponent).to.have.attribute('data-from-slot-props', 'true');
+                (0, chai_1.expect)(slotComponent).not.to.have.attribute('data-from-components-props');
+            });
+        }
+    });
+}
+function testSlotPropsCallback(element, getOptions) {
+    const { render, slots } = getOptions();
+    if (!render) {
+        throwMissingPropError('render');
+    }
+    forEachSlot(slots, (slotName) => {
+        it(`sets custom properties on the ${slotName} slot's element with the slotProps.${slotName} callback`, () => {
+            const slotProps = {
+                [slotName]: (ownerState) => ({
+                    'data-testid': ownerState.className,
+                }),
+            };
+            const { queryByTestId } = render(React.cloneElement(element, { slotProps, className: 'custom' }));
+            const slotComponent = queryByTestId('custom');
+            (0, chai_1.expect)(slotComponent).not.to.equal(null);
+        });
+    });
+}
+/**
+ * MUI components have a `components` prop that allows rendering a different
+ * Components from @inheritComponent
+ */
+function testComponentsProp(element, getOptions) {
+    describe('prop components:', () => {
+        it('can render another root component with the `components` prop', () => {
+            const { mount, testComponentsRootPropWith: component = 'em' } = getOptions();
+            if (!mount) {
+                throwMissingPropError('mount');
+            }
+            const wrapper = mount(React.cloneElement(element, { components: { Root: component } }));
+            (0, chai_1.expect)(findRootComponent(wrapper, component).exists()).to.equal(true);
+        });
+    });
+}
+/**
+ * MUI theme has a components section that allows specifying default props.
+ * Components from @inheritComponent
+ */
+function testThemeDefaultProps(element, getOptions) {
+    describe('theme default components:', () => {
+        it("respect theme's defaultProps", () => {
+            const testProp = 'data-id';
+            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({
+                components: {
+                    [muiName]: {
+                        defaultProps: {
+                            [testProp]: 'testProp',
+                        },
+                    },
+                },
+            });
+            const { container } = render(React.createElement(ThemeProvider, { theme: theme }, element));
+            (0, chai_1.expect)(container.firstChild).to.have.attribute(testProp, 'testProp');
+        });
+    });
+}
+/**
+ * MUI theme has a components section that allows specifying style overrides.
+ * Components from @inheritComponent
+ */
+function testThemeStyleOverrides(element, getOptions) {
+    describe('theme style overrides:', () => {
+        it("respect theme's styleOverrides custom state", function test() {
+            if (/jsdom/.test(window.navigator.userAgent)) {
+                this.skip();
+            }
+            const { muiName, testStateOverrides, render, ThemeProvider, createTheme } = getOptions();
+            if (!testStateOverrides) {
+                return;
+            }
+            if (!muiName) {
+                throwMissingPropError('muiName');
+            }
+            if (!render) {
+                throwMissingPropError('render');
+            }
+            if (!ThemeProvider) {
+                throwMissingPropError('ThemeProvider');
+            }
+            if (!createTheme) {
+                throwMissingPropError('createTheme');
+            }
+            const testStyle = {
+                marginTop: '13px',
+            };
+            const theme = createTheme({
+                components: {
+                    [muiName]: {
+                        styleOverrides: {
+                            [testStateOverrides.styleKey]: testStyle,
+                        },
+                    },
+                },
+            });
+            if (!testStateOverrides.prop) {
+                return;
+            }
+            const { container } = render(React.createElement(ThemeProvider, { theme: theme }, React.cloneElement(element, {
+                [testStateOverrides.prop]: testStateOverrides.value,
+            })));
+            (0, chai_1.expect)(container.firstChild).to.toHaveComputedStyle(testStyle);
+        });
+        it("respect theme's styleOverrides slots", function test() {
+            if (/jsdom/.test(window.navigator.userAgent)) {
+                this.skip();
+            }
+            const { muiName, testDeepOverrides, testRootOverrides = { slotName: 'root' }, render, ThemeProvider, createTheme, } = getOptions();
+            if (!ThemeProvider) {
+                throwMissingPropError('ThemeProvider');
+            }
+            if (!createTheme) {
+                throwMissingPropError('createTheme');
+            }
+            const testStyle = {
+                mixBlendMode: 'darken',
+            };
+            function resolveDeepOverrides(callback) {
+                if (!testDeepOverrides) {
+                    return {};
+                }
+                const styles = {};
+                if (Array.isArray(testDeepOverrides)) {
+                    testDeepOverrides.forEach((slot) => {
+                        callback(styles, slot);
+                    });
+                }
+                else {
+                    callback(styles, testDeepOverrides);
+                }
+                return styles;
+            }
+            const theme = createTheme({
+                components: {
+                    [muiName]: {
+                        styleOverrides: {
+                            [testRootOverrides.slotName]: {
+                                ...testStyle,
+                                ...resolveDeepOverrides((styles, slot) => {
+                                    styles[`& .${slot.slotClassName}`] = {
+                                        fontVariantCaps: 'all-petite-caps',
+                                    };
+                                }),
+                            },
+                            ...resolveDeepOverrides((styles, slot) => {
+                                styles[slot.slotName] = {
+                                    mixBlendMode: 'darken',
+                                };
+                            }),
+                        },
+                    },
+                },
+            });
+            const { container, setProps } = render(React.createElement(ThemeProvider, { theme: theme }, element));
+            if (testRootOverrides.slotClassName) {
+                (0, chai_1.expect)(document.querySelector(`.${testRootOverrides.slotClassName}`)).to.toHaveComputedStyle(testStyle);
+            }
+            else {
+                (0, chai_1.expect)(container.firstChild).to.toHaveComputedStyle(testStyle);
+            }
+            if (testDeepOverrides) {
+                (Array.isArray(testDeepOverrides) ? testDeepOverrides : [testDeepOverrides]).forEach((slot) => {
+                    (0, chai_1.expect)(document.querySelector(`.${slot.slotClassName}`)).to.toHaveComputedStyle({
+                        fontVariantCaps: 'all-petite-caps',
+                        mixBlendMode: 'darken',
+                    });
+                });
+                const themeWithoutRootOverrides = createTheme({
+                    components: {
+                        [muiName]: {
+                            styleOverrides: {
+                                ...resolveDeepOverrides((styles, slot) => {
+                                    styles[slot.slotName] = testStyle;
+                                }),
+                            },
+                        },
+                    },
+                });
+                setProps({ theme: themeWithoutRootOverrides });
+                (Array.isArray(testDeepOverrides) ? testDeepOverrides : [testDeepOverrides]).forEach((slot) => {
+                    (0, chai_1.expect)(document.querySelector(`.${slot.slotClassName}`)).to.toHaveComputedStyle(testStyle);
+                });
+            }
+        });
+        it('overrideStyles does not replace each other in slots', function test() {
+            if (/jsdom/.test(window.navigator.userAgent)) {
+                this.skip();
+            }
+            const { muiName, classes, testStateOverrides, render, ThemeProvider, createTheme } = getOptions();
+            if (!ThemeProvider) {
+                throwMissingPropError('ThemeProvider');
+            }
+            if (!createTheme) {
+                throwMissingPropError('createTheme');
+            }
+            const classKeys = Object.keys(classes);
+            // only test the component that has `root` and other classKey
+            if (!testStateOverrides || !classKeys.includes('root') || classKeys.length === 1) {
+                return;
+            }
+            // `styleKey` in some tests is `foo` or `bar`, so need to check if it is a valid classKey.
+            const isStyleKeyExists = classKeys.indexOf(testStateOverrides.styleKey) !== -1;
+            if (!isStyleKeyExists) {
+                return;
+            }
+            const theme = createTheme({
+                components: {
+                    [muiName]: {
+                        styleOverrides: {
+                            root: {
+                                [`&.${classes.root}`]: {
+                                    filter: 'blur(1px)',
+                                    mixBlendMode: 'darken',
+                                },
+                            },
+                            ...(testStateOverrides && {
+                                [testStateOverrides.styleKey]: {
+                                    [`&.${classes.root}`]: {
+                                        mixBlendMode: 'color',
+                                    },
+                                },
+                            }),
+                        },
+                    },
+                },
+            });
+            if (!testStateOverrides.prop) {
+                return;
+            }
+            render(React.createElement(ThemeProvider, { theme: theme }, React.cloneElement(element, {
+                [testStateOverrides.prop]: testStateOverrides.value,
+            })));
+            (0, chai_1.expect)(document.querySelector(`.${classes.root}`)).toHaveComputedStyle({
+                filter: 'blur(1px)', // still valid in root
+                mixBlendMode: 'color', // overridden by `styleKey`
+            });
+        });
+    });
+}
+/**
+ * MUI theme has a components section that allows specifying custom variants.
+ * Components from @inheritComponent
+ */
+function testThemeVariants(element, getOptions) {
+    describe('theme variants:', () => {
+        it("respect theme's variants", function test() {
+            if (/jsdom/.test(window.navigator.userAgent)) {
+                this.skip();
+            }
+            const { muiName, testVariantProps, render, ThemeProvider, createTheme } = getOptions();
+            if (!testVariantProps) {
+                throw new Error('missing testVariantProps');
+            }
+            if (!muiName) {
+                throwMissingPropError('muiName');
+            }
+            if (!render) {
+                throwMissingPropError('render');
+            }
+            if (!ThemeProvider) {
+                throwMissingPropError('ThemeProvider');
+            }
+            if (!createTheme) {
+                throwMissingPropError('createTheme');
+            }
+            const testStyle = {
+                mixBlendMode: 'darken',
+            };
+            const theme = createTheme({
+                components: {
+                    [muiName]: {
+                        variants: [
+                            {
+                                props: testVariantProps,
+                                style: testStyle,
+                            },
+                        ],
+                    },
+                },
+            });
+            const { getByTestId } = render(React.createElement(ThemeProvider, { theme: theme },
+                React.cloneElement(element, { ...testVariantProps, 'data-testid': 'with-props' }),
+                React.cloneElement(element, { 'data-testid': 'without-props' })));
+            (0, chai_1.expect)(getByTestId('with-props')).to.toHaveComputedStyle(testStyle);
+            (0, chai_1.expect)(getByTestId('without-props')).not.to.toHaveComputedStyle(testStyle);
+        });
+        it('supports custom variant', function test() {
+            if (/jsdom/.test(window.navigator.userAgent)) {
+                this.skip();
+            }
+            const { muiName, testCustomVariant, render, ThemeProvider, createTheme } = getOptions();
+            if (!ThemeProvider) {
+                throwMissingPropError('ThemeProvider');
+            }
+            if (!createTheme) {
+                throwMissingPropError('createTheme');
+            }
+            if (!testCustomVariant) {
+                return;
+            }
+            const theme = createTheme({
+                components: {
+                    [muiName]: {
+                        styleOverrides: {
+                            root: ({ ownerState }) => ({
+                                ...(ownerState.variant === 'unknown' && {
+                                    mixBlendMode: 'darken',
+                                }),
+                            }),
+                        },
+                    },
+                },
+            });
+            const { getByTestId } = render(React.createElement(ThemeProvider, { theme: theme }, React.cloneElement(element, { variant: 'unknown', 'data-testid': 'custom-variant' })));
+            (0, chai_1.expect)(getByTestId('custom-variant')).toHaveComputedStyle({ mixBlendMode: 'darken' });
+        });
+    });
+}
+/**
+ * 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, getOptions) {
+    describe('theme extended palette:', () => {
+        it('should render without errors', function test() {
+            const { render, ThemeProvider, createTheme } = getOptions();
+            if (!/jsdom/.test(window.navigator.userAgent) || !render || !ThemeProvider || !createTheme) {
+                this.skip();
+            }
+            const theme = createTheme({
+                palette: {
+                    custom: {
+                        main: '#ff5252',
+                    },
+                    unknown: null,
+                },
+            });
+            (0, chai_1.expect)(() => render(React.createElement(ThemeProvider, { theme: theme }, element))).not.to.throw();
+        });
+    });
+}
+const fullSuite = {
+    componentProp: testComponentProp,
+    componentsProp: testComponentsProp,
+    mergeClassName: testClassName,
+    propsSpread: testPropsSpread,
+    refForwarding: describeRef,
+    rootClass: testRootClass,
+    reactTestRenderer: testReactTestRenderer,
+    slotPropsProp: testSlotPropsProp,
+    slotPropsCallback: testSlotPropsCallback,
+    slotsProp: testSlotsProp,
+    themeDefaultProps: testThemeDefaultProps,
+    themeStyleOverrides: testThemeStyleOverrides,
+    themeVariants: testThemeVariants,
+    themeCustomPalette: testThemeCustomPalette,
+};
+/**
+ * Tests various aspects of a component that should be equal across MUI
+ * components.
+ */
+function describeConformance(minimalElement, getOptions) {
+    let originalMatchmedia;
+    const storage = {};
+    beforeEach(() => {
+        originalMatchmedia = window.matchMedia;
+        // Create mocks of localStorage getItem and setItem functions
+        Object.defineProperty(global, 'localStorage', {
+            value: {
+                getItem: (key) => storage[key],
+                setItem: (key, value) => {
+                    storage[key] = value;
+                },
+            },
+            configurable: true,
+        });
+        window.matchMedia = () => ({
+            addListener: () => { },
+            removeListener: () => { },
+        });
+    });
+    afterEach(() => {
+        window.matchMedia = originalMatchmedia;
+    });
+    const { after: runAfterHook = () => { }, only = Object.keys(fullSuite), slots, skip = [], wrapMount, } = getOptions();
+    let filteredTests = Object.keys(fullSuite).filter((testKey) => only.indexOf(testKey) !== -1 && skip.indexOf(testKey) === -1);
+    const slotBasedTests = ['slotsProp', 'slotPropsProp', 'slotPropsCallback'];
+    if (!slots) {
+        // if `slots` are not defined, do not run tests that depend on them
+        filteredTests = filteredTests.filter((testKey) => !slotBasedTests.includes(testKey));
+    }
+    const baseMount = (0, createMount_1.default)();
+    const mount = wrapMount !== undefined ? wrapMount(baseMount) : baseMount;
+    after(runAfterHook);
+    function getTestOptions() {
+        return {
+            ...getOptions(),
+            mount,
+        };
+    }
+    filteredTests.forEach((testKey) => {
+        const test = fullSuite[testKey];
+        test(minimalElement, getTestOptions);
+    });
+}
+exports.default = (0, createDescribe_1.default)('MUI component API', describeConformance);
+//# sourceMappingURL=describeConformance.js.map