From fdd856d0a00cb3700e7fb0ec8e069fd185dfadb7 Mon Sep 17 00:00:00 2001 From: sai chand <60743144+sai6855@users.noreply.github.com> Date: Wed, 27 Nov 2024 00:30:37 +0530 Subject: [PATCH] [core] Remove React.ReactElement from describeConformance.tsx (#44318) --- .../test-utils/src/describeConformance.tsx | 68 +++++++++++++++++-- 1 file changed, 62 insertions(+), 6 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 86b32191440298..2270bac2bd461e 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -8,6 +8,10 @@ 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. @@ -95,7 +99,11 @@ function throwMissingPropError(field: string): never { * the root component. */ export function testClassName( - element: React.ReactElement, + element: React.ReactElement< + DataProps & { + className: string; + } + >, getOptions: () => ConformanceOptions, ) { it('applies the className to the root component', async () => { @@ -121,7 +129,12 @@ export function testClassName( * Component from @inheritComponent */ export function testComponentProp( - element: React.ReactElement, + element: React.ReactElement< + DataProps & { + className: string; + component?: string | React.ElementType; + } + >, getOptions: () => ConformanceOptions, ) { describe('prop: component', () => { @@ -157,7 +170,13 @@ export function testComponentProp( * MUI components spread additional props to its root. */ export function testPropsSpread( - element: React.ReactElement, + element: React.ReactElement< + DataProps & { + className: string; + component: string | React.ElementType; + } + >, + getOptions: () => ConformanceOptions, ) { it(`spreads props to the root component`, async () => { @@ -187,7 +206,9 @@ export function testPropsSpread( * components that forward their ref and attach it to a host component. */ export function describeRef( - element: React.ReactElement, + element: React.ReactElement<{ + ref: React.RefObject; + }>, getOptions: () => ConformanceOptions, ) { describe('ref', () => { @@ -212,7 +233,10 @@ export function describeRef( * Tests that the root component has the root class */ export function testRootClass( - element: React.ReactElement, + element: React.ReactElement<{ + className: string; + classes: Record; + }>, getOptions: () => ConformanceOptions, ) { it('applies the root class to the root component if it has this class', async () => { @@ -264,7 +288,39 @@ function forEachSlot( }); } -function testSlotsProp(element: React.ReactElement, getOptions: () => ConformanceOptions) { +function testSlotsProp( + element: React.ReactElement<{ + className: string; + classes: Record; + slots: { + [x: string]: + | SlotTestingOptions['testWithComponent'] + | keyof React.JSX.IntrinsicElements + | React.ForwardRefExoticComponent< + { + children: React.ReactNode; + } & React.RefAttributes + >; + }; + components?: { + [x: string]: + | SlotTestingOptions['testWithComponent'] + | keyof React.JSX.IntrinsicElements + | React.ForwardRefExoticComponent< + { + children: React.ReactNode; + } & React.RefAttributes + >; + }; + slotProps: { + [x: string]: DataProps; + }; + componentsProps?: { + [x: string]: DataProps; + }; + }>, + getOptions: () => ConformanceOptions, +) { const { render, slots, testLegacyComponentsProp } = getOptions(); const CustomComponent = React.forwardRef<