@mui/internal-test-utils 2.0.15 → 2.0.16

package/src/describeConformance.tsx

@@ -1,1257 +0,0 @@
-/* eslint-env mocha */
-import { expect } from 'chai';
-import * as React from 'react';
-import createDescribe from './createDescribe';
-import { MuiRenderResult } from './createRenderer';
-
-function capitalize(string: string): string {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-
-interface DataProps {
-  [key: `data-${string}`]: string;
-}
-
-export interface SlotTestingOptions {
-  /**
-   * A custom React component to test if the receiving props are correct.
-   *
-   * It must:
-   * - contains at least one DOM which has `data-testid="custom"`
-   * - spread `className` to the DOM
-   *
-   * If not provided, the default custom component tests if the class name is spread.
-   */
-  testWithComponent?: React.ComponentType;
-  /**
-   * A custom HTML tag to use for the `slots` prop.
-   */
-  testWithElement?: keyof React.JSX.IntrinsicElements | null;
-  /**
-   * To ensure that the slot has this class name when `slotProps` is provided.
-   */
-  expectedClassName: string;
-  isOptional?: boolean;
-}
-
-interface SlotTestOverride {
-  slotName: string;
-  slotClassName?: string;
-}
-
-export interface ConformanceOptions {
-  muiName: string;
-  classes: { root: string };
-  refInstanceof: any;
-  after?: () => void;
-  inheritComponent?: React.ElementType;
-  render: (node: React.ReactElement<DataProps>) => MuiRenderResult | Promise<MuiRenderResult>;
-  only?: Array<keyof typeof fullSuite>;
-  skip?: Array<keyof typeof fullSuite | 'classesRoot'>;
-  testComponentsRootPropWith?: string;
-  /**
-   * A custom React component to test if the component prop is implemented correctly.
-   *
-   * It must either:
-   * - Be a string that is a valid HTML tag, or
-   * - A component that spread props to the underlying rendered element.
-   *
-   * If not provided, the default 'em' element is used.
-   */
-  testComponentPropWith?: string | React.ElementType;
-  testDeepOverrides?: SlotTestOverride | SlotTestOverride[];
-  testRootOverrides?: SlotTestOverride;
-  testStateOverrides?: { prop?: string; value?: any; styleKey: string };
-  testCustomVariant?: boolean;
-  testVariantProps?: object;
-  testLegacyComponentsProp?: boolean | string[];
-  slots?: Record<string, SlotTestingOptions>;
-  ThemeProvider?: React.ElementType;
-  /**
-   * If provided, the component will be tested by the `DefaultPropsProvider` (in addition to the ThemeProvider).
-   */
-  DefaultPropsProvider?: React.ElementType;
-  createTheme?: (arg: any) => any;
-}
-
-/**
- * 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`
- */
-
-export function randomStringValue() {
-  return `s${Math.random().toString(36).slice(2)}`;
-}
-
-function throwMissingPropError(field: string): never {
-  throw new Error(`missing "${field}" in options
-
-  > describeConformance(element, () => options)
-`);
-}
-
-/**
- * MUI components have a `className` prop. The `className` is applied to
- * the root component.
- */
-export function testClassName(
-  element: React.ReactElement<
-    DataProps & {
-      className: string;
-    }
-  >,
-  getOptions: () => ConformanceOptions,
-) {
-  it('applies the className to the root component', async () => {
-    const { render } = getOptions();
-
-    if (!render) {
-      throwMissingPropError('render');
-    }
-
-    const className = randomStringValue();
-    const testId = randomStringValue();
-
-    const { getByTestId } = await render(
-      React.cloneElement(element, { className, 'data-testid': testId }),
-    );
-
-    expect(getByTestId(testId)).to.have.class(className);
-  });
-}
-
-/**
- * MUI components have a `component` prop that allows rendering a different
- * Component from @inheritComponent
- */
-export function testComponentProp(
-  element: React.ReactElement<
-    DataProps & {
-      className: string;
-      component?: string | React.ElementType;
-    }
-  >,
-  getOptions: () => ConformanceOptions,
-) {
-  describe('prop: component', () => {
-    it('can render another root component with the `component` prop', async () => {
-      const { render, testComponentPropWith: component = 'em' } = getOptions();
-      if (!render) {
-        throwMissingPropError('render');
-      }
-
-      const testId = randomStringValue();
-
-      if (typeof component === 'string') {
-        const { getByTestId } = await render(
-          React.cloneElement(element, { component, 'data-testid': testId }),
-        );
-        expect(getByTestId(testId)).not.to.equal(null);
-        expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component);
-      } else {
-        const componentWithTestId = (props: {}) =>
-          React.createElement(component, { ...props, 'data-testid': testId });
-        const { getByTestId } = await render(
-          React.cloneElement(element, {
-            component: componentWithTestId,
-          }),
-        );
-        expect(getByTestId(testId)).not.to.equal(null);
-      }
-    });
-  });
-}
-
-/**
- * MUI components spread additional props to its root.
- */
-export function testPropsSpread(
-  element: React.ReactElement<
-    DataProps & {
-      className: string;
-      component: string | React.ElementType;
-    }
-  >,
-
-  getOptions: () => ConformanceOptions,
-) {
-  it(`spreads props to the root component`, async () => {
-    // type def in ConformanceOptions
-    const { render } = getOptions();
-
-    if (!render) {
-      throwMissingPropError('render');
-    }
-
-    const testProp = 'data-test-props-spread';
-    const value = randomStringValue();
-    const testId = randomStringValue();
-
-    const { getByTestId } = await render(
-      React.cloneElement(element, { [testProp]: value, 'data-testid': testId }),
-    );
-
-    expect(getByTestId(testId)).to.have.attribute(testProp, value);
-  });
-}
-
-/**
- * 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.
- */
-export function describeRef(
-  element: React.ReactElement<{
-    ref: React.RefObject<any>;
-  }>,
-  getOptions: () => ConformanceOptions,
-) {
-  describe('ref', () => {
-    it(`attaches the ref`, async () => {
-      // type def in ConformanceOptions
-      const { render, refInstanceof } = getOptions();
-
-      if (!render) {
-        throwMissingPropError('render');
-      }
-
-      const ref = React.createRef();
-
-      await render(React.cloneElement(element, { ref }));
-
-      expect(ref.current).to.be.instanceof(refInstanceof);
-    });
-  });
-}
-
-/**
- * Tests that the root component has the root class
- */
-export function testRootClass(
-  element: React.ReactElement<{
-    className: string;
-    classes: Record<string, string>;
-  }>,
-  getOptions: () => ConformanceOptions,
-) {
-  it('applies the root class to the root component if it has this class', async () => {
-    const { classes, render, skip } = getOptions();
-    if (classes.root == null) {
-      return;
-    }
-
-    const className = randomStringValue();
-    const classesRootClassname = randomStringValue();
-    const { container } = await 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
-    expect(container.firstChild).to.have.class(className);
-    expect(container.firstChild).to.have.class(classes.root);
-    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
-      expect(container.firstChild).to.have.class(classesRootClassname);
-
-      // Test that `classes` does not spread to DOM
-      expect(document.querySelectorAll('[classes]').length).to.equal(0);
-    }
-  });
-}
-
-function forEachSlot(
-  slots: ConformanceOptions['slots'],
-  callback: (slotName: string, slot: SlotTestingOptions) => void,
-) {
-  if (!slots) {
-    return;
-  }
-
-  const slotNames = Object.keys(slots);
-  slotNames.forEach((slotName) => {
-    const slot = slots[slotName];
-    callback(slotName, slot);
-  });
-}
-
-function testSlotsProp(
-  element: React.ReactElement<{
-    className: string;
-    classes: Record<string, string>;
-    slots: {
-      [x: string]:
-        | SlotTestingOptions['testWithComponent']
-        | keyof React.JSX.IntrinsicElements
-        | React.ForwardRefExoticComponent<
-            {
-              children: React.ReactNode;
-            } & React.RefAttributes<HTMLDivElement>
-          >;
-    };
-    components?: {
-      [x: string]:
-        | SlotTestingOptions['testWithComponent']
-        | keyof React.JSX.IntrinsicElements
-        | React.ForwardRefExoticComponent<
-            {
-              children: React.ReactNode;
-            } & React.RefAttributes<HTMLDivElement>
-          >;
-    };
-    slotProps: {
-      [x: string]: DataProps;
-    };
-    componentsProps?: {
-      [x: string]: DataProps;
-    };
-  }>,
-  getOptions: () => ConformanceOptions,
-) {
-  const { render, slots, testLegacyComponentsProp } = getOptions();
-
-  const CustomComponent = React.forwardRef<
-    HTMLElement,
-    React.PropsWithChildren<{ className?: string }>
-  >(({ className, children }, ref) => (
-    <i className={className} ref={ref} data-testid="custom">
-      {children}
-    </i>
-  ));
-
-  forEachSlot(slots, (slotName, slotOptions) => {
-    it(`allows overriding the ${slotName} slot with a component using the slots.${slotName} prop`, async () => {
-      if (!render) {
-        throwMissingPropError('render');
-      }
-
-      const slotComponent = slotOptions.testWithComponent ?? CustomComponent;
-
-      const components = {
-        [slotName]: slotComponent,
-      };
-
-      const { queryByTestId } = await render(React.cloneElement(element, { slots: components }));
-      const renderedElement = queryByTestId('custom');
-      expect(renderedElement).not.to.equal(null);
-      if (slotOptions.expectedClassName) {
-        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`, async () => {
-        if (!render) {
-          throwMissingPropError('render');
-        }
-
-        const slotElement = slotOptions.testWithElement ?? 'i';
-
-        const components = {
-          [slotName]: slotElement,
-        };
-
-        const slotProps = {
-          [slotName]: {
-            'data-testid': 'customized',
-          },
-        };
-
-        const { queryByTestId } = await render(
-          React.cloneElement(element, { slots: components, slotProps }),
-        );
-
-        const renderedElement = queryByTestId('customized');
-        expect(renderedElement).not.to.equal(null);
-
-        if (typeof slotElement === 'string') {
-          expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
-        }
-        if (slotOptions.expectedClassName) {
-          expect(renderedElement).to.have.class(slotOptions.expectedClassName);
-        }
-      });
-    }
-
-    // For testing Material UI components v5, and v6. Likely to be removed in a future major release.
-    if (
-      testLegacyComponentsProp === true ||
-      (Array.isArray(testLegacyComponentsProp) && testLegacyComponentsProp.includes(slotName))
-    ) {
-      it(`allows overriding the ${slotName} slot with a component using the components.${capitalize(
-        slotName,
-      )} prop`, async () => {
-        if (!render) {
-          throwMissingPropError('render');
-        }
-
-        const slotComponent = slotOptions.testWithComponent ?? CustomComponent;
-
-        const components = {
-          [capitalize(slotName)]: slotComponent,
-        };
-
-        const { queryByTestId } = await render(React.cloneElement(element, { components }));
-        const renderedElement = queryByTestId('custom');
-        expect(renderedElement).not.to.equal(null);
-        if (slotOptions.expectedClassName) {
-          expect(renderedElement).to.have.class(slotOptions.expectedClassName);
-        }
-      });
-
-      it(`prioritizes the 'slots.${slotName}' over components.${capitalize(
-        slotName,
-      )} if both are defined`, async () => {
-        if (!render) {
-          throwMissingPropError('render');
-        }
-
-        const ComponentForComponentsProp = React.forwardRef<
-          HTMLDivElement,
-          { children: React.ReactNode }
-        >(({ children }, ref) => {
-          const SlotComponent = slotOptions.testWithComponent ?? 'div';
-          return (
-            <SlotComponent ref={ref} data-testid="from-components">
-              {children}
-            </SlotComponent>
-          );
-        });
-
-        const ComponentForSlotsProp = React.forwardRef<
-          HTMLDivElement,
-          { children: React.ReactNode }
-        >(({ children }, ref) => {
-          const SlotComponent = slotOptions.testWithComponent ?? 'div';
-          return (
-            <SlotComponent ref={ref} data-testid="from-slots">
-              {children}
-            </SlotComponent>
-          );
-        });
-
-        const components = {
-          [capitalize(slotName)]: ComponentForComponentsProp,
-        };
-
-        const slotOverrides = {
-          [slotName]: ComponentForSlotsProp,
-        };
-
-        const { queryByTestId } = await render(
-          React.cloneElement(element, { components, slots: slotOverrides }),
-        );
-
-        expect(queryByTestId('from-slots')).not.to.equal(null);
-        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`, async () => {
-          if (!render) {
-            throwMissingPropError('render');
-          }
-
-          const slotElement = slotOptions.testWithElement ?? 'i';
-
-          const components = {
-            [capitalize(slotName)]: slotElement,
-          };
-
-          const componentsProps = {
-            [slotName]: {
-              'data-testid': 'customized',
-            },
-          };
-
-          const { queryByTestId } = await render(
-            React.cloneElement(element, { components, componentsProps }),
-          );
-
-          const renderedElement = queryByTestId('customized');
-          expect(renderedElement).not.to.equal(null);
-
-          if (typeof slotElement === 'string') {
-            expect(renderedElement!.nodeName.toLowerCase()).to.equal(slotElement);
-          }
-          if (slotOptions.expectedClassName) {
-            expect(renderedElement).to.have.class(slotOptions.expectedClassName);
-          }
-        });
-      }
-    }
-  });
-}
-
-function testSlotPropsProp(
-  element: React.ReactElement<{
-    componentsProps?: Record<string, DataProps>;
-    slotProps: Record<string, DataProps>;
-  }>,
-  getOptions: () => ConformanceOptions,
-) {
-  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`, async () => {
-      const slotProps = {
-        [slotName]: {
-          'data-testid': 'custom',
-        },
-      };
-
-      const { queryByTestId } = await render(React.cloneElement(element, { slotProps }));
-      const slotComponent = queryByTestId('custom');
-      expect(slotComponent).not.to.equal(null);
-
-      if (slotOptions.expectedClassName) {
-        expect(slotComponent).to.have.class(slotOptions.expectedClassName);
-      }
-    });
-
-    if (slotOptions.expectedClassName) {
-      it(`merges the class names provided in slotsProps.${slotName} with the built-in ones`, async () => {
-        const slotProps = {
-          [slotName]: {
-            'data-testid': 'custom',
-            className: randomStringValue(),
-          },
-        };
-
-        const { getByTestId } = await render(React.cloneElement(element, { slotProps }));
-
-        expect(getByTestId('custom')).to.have.class(slotOptions.expectedClassName);
-        expect(getByTestId('custom')).to.have.class(slotProps[slotName].className);
-      });
-    }
-
-    if (
-      testLegacyComponentsProp === true ||
-      (Array.isArray(testLegacyComponentsProp) && testLegacyComponentsProp.includes(slotName))
-    ) {
-      it(`sets custom properties on the ${slotName} slot's element with the componentsProps.${slotName} prop`, async () => {
-        const componentsProps = {
-          [slotName]: {
-            'data-testid': 'custom',
-          },
-        };
-
-        const { queryByTestId } = await render(React.cloneElement(element, { componentsProps }));
-        const slotComponent = queryByTestId('custom');
-        expect(slotComponent).not.to.equal(null);
-
-        if (slotOptions.expectedClassName) {
-          expect(slotComponent).to.have.class(slotOptions.expectedClassName);
-        }
-      });
-
-      it(`prioritizes the 'slotProps.${slotName}' over componentsProps.${slotName} if both are defined`, async () => {
-        const componentsProps = {
-          [slotName]: {
-            'data-testid': 'custom',
-            'data-from-components-props': 'true',
-          },
-        };
-
-        const slotProps = {
-          [slotName]: {
-            'data-testid': 'custom',
-            'data-from-slot-props': 'true',
-          },
-        };
-
-        const { queryByTestId } = await render(
-          React.cloneElement(element, { componentsProps, slotProps }),
-        );
-        const slotComponent = queryByTestId('custom');
-        expect(slotComponent).to.have.attribute('data-from-slot-props', 'true');
-        expect(slotComponent).not.to.have.attribute('data-from-components-props');
-      });
-    }
-  });
-}
-
-function testSlotPropsCallback(
-  element: React.ReactElement<{
-    slotProps: Record<string, () => DataProps>;
-    className: string;
-  }>,
-  getOptions: () => ConformanceOptions,
-) {
-  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`, async () => {
-      const slotProps = {
-        [slotName]: () => ({
-          'data-testid': 'custom',
-        }),
-      };
-
-      const { queryByTestId } = await render(
-        React.cloneElement(element, { slotProps, className: 'custom' }),
-      );
-      const slotComponent = queryByTestId('custom');
-      expect(slotComponent).not.to.equal(null);
-    });
-  });
-}
-
-function testSlotPropsCallbackWithPropsAsOwnerState(
-  element: React.ReactElement<{
-    slotProps: Record<string, (ownerState: Record<string, any>) => DataProps>;
-    className: string;
-  }>,
-  getOptions: () => ConformanceOptions,
-) {
-  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 using the ownerState`, async () => {
-      const slotProps = {
-        [slotName]: (ownerState: Record<string, any>) => ({
-          'data-testid': ownerState.className,
-        }),
-      };
-
-      const { queryByTestId } = await render(
-        React.cloneElement(element, { slotProps, className: 'custom' }),
-      );
-      const slotComponent = queryByTestId('custom', { exact: false });
-      expect(slotComponent).not.to.equal(null);
-    });
-  });
-}
-
-/**
- * MUI components have a `components` prop that allows rendering a different
- * Components from @inheritComponent
- */
-function testComponentsProp(
-  element: React.ReactElement<
-    {
-      components?: Record<string, string>;
-    } & DataProps
-  >,
-  getOptions: () => ConformanceOptions,
-) {
-  describe('prop components:', () => {
-    it('can render another root component with the `components` prop', async () => {
-      const { render, testComponentsRootPropWith: component = 'em' } = getOptions();
-      if (!render) {
-        throwMissingPropError('render');
-      }
-
-      const testId = randomStringValue();
-
-      const { getByTestId } = await render(
-        React.cloneElement(element, { components: { Root: component }, 'data-testid': testId }),
-      );
-      expect(getByTestId(testId)).not.to.equal(null);
-      expect(getByTestId(testId).nodeName.toLowerCase()).to.eq(component);
-    });
-  });
-}
-
-/**
- * MUI theme has a components section that allows specifying default props.
- * Components from @inheritComponent
- */
-function testThemeDefaultProps(
-  element: React.ReactElement<unknown>,
-  getOptions: () => ConformanceOptions,
-) {
-  describe('theme default components:', () => {
-    it("respect theme's defaultProps", async () => {
-      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 } = await render(<ThemeProvider theme={theme}>{element}</ThemeProvider>);
-
-      expect(container.firstChild).to.have.attribute(testProp, 'testProp');
-    });
-  });
-
-  describe('default props provider:', () => {
-    it('respect custom default props', async function test(t = {}) {
-      const testProp = 'data-id';
-      const { muiName, render, DefaultPropsProvider } = getOptions();
-
-      if (!DefaultPropsProvider) {
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() ?? t?.skip();
-      }
-
-      if (!muiName) {
-        throwMissingPropError('muiName');
-      }
-
-      if (!render) {
-        throwMissingPropError('render');
-      }
-
-      const { container } = await render(
-        // @ts-expect-error we skip it above.
-        <DefaultPropsProvider
-          value={{
-            [muiName]: {
-              defaultProps: {
-                [testProp]: 'testProp',
-              },
-            },
-          }}
-        >
-          {element}
-        </DefaultPropsProvider>,
-      );
-
-      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: React.ReactElement<unknown>,
-  getOptions: () => ConformanceOptions,
-) {
-  describe('theme style overrides:', () => {
-    it("respect theme's styleOverrides custom state", async function test(t = {}) {
-      if (window.navigator.userAgent.includes('jsdom')) {
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() ?? t?.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 } = await render(
-        <ThemeProvider theme={theme}>
-          {React.cloneElement(element, {
-            [testStateOverrides.prop]: testStateOverrides.value,
-          })}
-        </ThemeProvider>,
-      );
-
-      expect(container.firstChild).to.toHaveComputedStyle(testStyle);
-    });
-
-    it("respect theme's styleOverrides slots", async function test(t = {}) {
-      if (window.navigator.userAgent.includes('jsdom')) {
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() ?? t?.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: (styles: Record<string, any>, slot: SlotTestOverride) => void,
-      ) {
-        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 } = await render(
-        <ThemeProvider theme={theme}>{element}</ThemeProvider>,
-      );
-
-      if (testRootOverrides.slotClassName) {
-        expect(
-          document.querySelector(`.${testRootOverrides.slotClassName}`),
-        ).to.toHaveComputedStyle(testStyle);
-      } else {
-        expect(container.firstChild).to.toHaveComputedStyle(testStyle);
-      }
-
-      if (testDeepOverrides) {
-        (Array.isArray(testDeepOverrides) ? testDeepOverrides : [testDeepOverrides]).forEach(
-          (slot) => {
-            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) => {
-            expect(document.querySelector(`.${slot.slotClassName}`)).to.toHaveComputedStyle(
-              testStyle,
-            );
-          },
-        );
-      }
-    });
-
-    it('overrideStyles does not replace each other in slots', async function test(t = {}) {
-      if (window.navigator.userAgent.includes('jsdom')) {
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() ?? t?.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.includes(testStateOverrides.styleKey);
-
-      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;
-      }
-
-      await render(
-        <ThemeProvider theme={theme}>
-          {React.cloneElement(element, {
-            [testStateOverrides.prop]: testStateOverrides.value,
-          })}
-        </ThemeProvider>,
-      );
-
-      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: React.ReactElement<DataProps & { variant: string }>,
-  getOptions: () => ConformanceOptions,
-) {
-  describe('theme variants:', () => {
-    it("respect theme's variants", async function test(t = {}) {
-      if (window.navigator.userAgent.includes('jsdom')) {
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() ?? t?.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 } = await render(
-        <ThemeProvider theme={theme}>
-          {React.cloneElement(element, { ...testVariantProps, 'data-testid': 'with-props' })}
-          {React.cloneElement(element, { 'data-testid': 'without-props' })}
-        </ThemeProvider>,
-      );
-
-      expect(getByTestId('with-props')).to.toHaveComputedStyle(testStyle);
-      expect(getByTestId('without-props')).not.to.toHaveComputedStyle(testStyle);
-    });
-
-    it('supports custom variant', async function test(t = {}) {
-      if (window.navigator.userAgent.includes('jsdom')) {
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() ?? t?.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: any }) => ({
-                ...(ownerState.variant === 'unknown' && {
-                  mixBlendMode: 'darken',
-                }),
-              }),
-            },
-          },
-        },
-      });
-
-      const { getByTestId } = await render(
-        <ThemeProvider theme={theme}>
-          {React.cloneElement(element, { variant: 'unknown', 'data-testid': 'custom-variant' })}
-        </ThemeProvider>,
-      );
-
-      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: React.ReactElement<unknown>,
-  getOptions: () => ConformanceOptions,
-) {
-  describe('theme extended palette:', () => {
-    it('should render without errors', function test(t = {}) {
-      const { render, ThemeProvider, createTheme } = getOptions();
-      if (
-        !window.navigator.userAgent.includes('jsdom') ||
-        !render ||
-        !ThemeProvider ||
-        !createTheme
-      ) {
-        // @ts-ignore
-        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-        this?.skip?.() ?? t?.skip();
-      }
-      // @ts-ignore
-      const theme = createTheme({
-        palette: {
-          custom: {
-            main: '#ff5252',
-          },
-          unknown: null,
-          custom2: {
-            main: {
-              blue: {
-                dark: '#FFCC00',
-              },
-            },
-          },
-        },
-      });
-      // @ts-ignore
-      expect(() => render(<ThemeProvider theme={theme}>{element}</ThemeProvider>)).not.to.throw();
-    });
-  });
-}
-
-const fullSuite = {
-  componentProp: testComponentProp,
-  componentsProp: testComponentsProp,
-  mergeClassName: testClassName,
-  propsSpread: testPropsSpread,
-  refForwarding: describeRef,
-  rootClass: testRootClass,
-  slotPropsProp: testSlotPropsProp,
-  slotPropsCallback: testSlotPropsCallback,
-  slotPropsCallbackWithPropsAsOwnerState: testSlotPropsCallbackWithPropsAsOwnerState,
-  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: React.ReactElement<any>,
-  getOptions: () => ConformanceOptions,
-) {
-  let originalMatchmedia: typeof window.matchMedia;
-  const storage: Record<string, string> = {};
-  beforeEach(() => {
-    originalMatchmedia = window.matchMedia;
-    // Create mocks of localStorage getItem and setItem functions
-    Object.defineProperty(globalThis, 'localStorage', {
-      value: {
-        getItem: (key: string) => storage[key],
-        setItem: (key: string, value: string) => {
-          storage[key] = value;
-        },
-      },
-      configurable: true,
-    });
-    window.matchMedia = () =>
-      ({
-        // Keep mocking legacy methods because @mui/material v5 still uses them
-        addListener: () => {},
-        addEventListener: () => {},
-        removeListener: () => {},
-        removeEventListener: () => {},
-      }) as unknown as MediaQueryList;
-  });
-  afterEach(() => {
-    window.matchMedia = originalMatchmedia;
-  });
-  const {
-    after: runAfterHook = () => {},
-    only = Object.keys(fullSuite),
-    slots,
-    skip = [],
-  } = getOptions();
-
-  let filteredTests = Object.keys(fullSuite).filter(
-    (testKey) => only.includes(testKey) && !skip.includes(testKey as keyof typeof fullSuite),
-  ) as (keyof typeof fullSuite)[];
-
-  const slotBasedTests = [
-    'slotsProp',
-    'slotPropsProp',
-    'slotPropsCallback',
-    'slotPropsCallbackWithPropsAsOwnerState',
-  ];
-
-  if (!slots) {
-    // if `slots` are not defined, do not run tests that depend on them
-    filteredTests = filteredTests.filter((testKey) => !slotBasedTests.includes(testKey));
-  }
-
-  after(runAfterHook);
-
-  filteredTests.forEach((testKey) => {
-    const test = fullSuite[testKey];
-    test(minimalElement, getOptions);
-  });
-}
-
-export default createDescribe('MUI component API', describeConformance);