From 0b53f9135d20a9fecdad682fb29f90ea05b51773 Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 4 Nov 2024 12:19:53 +0530 Subject: [PATCH 1/4] fix --- .../test-utils/src/describeConformance.tsx | 44 ++++++++++++++++--- 1 file changed, 38 insertions(+), 6 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 3f9dd40eccfe80..7798d477e118cd 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -95,7 +95,10 @@ function throwMissingPropError(field: string): never { * the root component. */ export function testClassName( - element: React.ReactElement, + element: React.ReactElement<{ + 'data-testid': string; + className: string; + }>, getOptions: () => ConformanceOptions, ) { it('applies the className to the root component', async () => { @@ -121,7 +124,11 @@ export function testClassName( * Component from @inheritComponent */ export function testComponentProp( - element: React.ReactElement, + element: React.ReactElement<{ + 'data-testid': string; + className: string; + component?: string | React.ElementType; + }>, getOptions: () => ConformanceOptions, ) { describe('prop: component', () => { @@ -157,7 +164,13 @@ export function testComponentProp( * MUI components spread additional props to its root. */ export function testPropsSpread( - element: React.ReactElement, + element: React.ReactElement<{ + 'data-testid': string; + className: string; + component: string | React.ElementType; + 'data-test-props-spread': string; + }>, + getOptions: () => ConformanceOptions, ) { it(`spreads props to the root component`, async () => { @@ -187,7 +200,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 +227,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 +282,21 @@ function forEachSlot( }); } -function testSlotsProp(element: React.ReactElement, getOptions: () => ConformanceOptions) { +function testSlotsProp( + element: React.ReactElement<{ + className: string; + classes: Record; + slots: { + [x: string]: keyof React.JSX.IntrinsicElements; + }; + slotProps: { + [x: string]: { + 'data-testid': string; + }; + }; + }>, + getOptions: () => ConformanceOptions, +) { const { render, slots, testLegacyComponentsProp } = getOptions(); const CustomComponent = React.forwardRef< From b713008c97486d5f8b7c726dc73c783e349a016f Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 4 Nov 2024 12:42:05 +0530 Subject: [PATCH 2/4] final fix --- .../test-utils/src/describeConformance.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index 7798d477e118cd..ad608176975663 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -287,13 +287,35 @@ function testSlotsProp( className: string; classes: Record; slots: { - [x: string]: keyof React.JSX.IntrinsicElements; + [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]: { 'data-testid': string; }; }; + componentsProps: { + [x: string]: { + 'data-testid': string; + }; + }; }>, getOptions: () => ConformanceOptions, ) { From df2a2c05c7044d236581ebc2e982e07e5ab70edf Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 4 Nov 2024 12:59:25 +0530 Subject: [PATCH 3/4] create generic data props interface --- .../test-utils/src/describeConformance.tsx | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index ad608176975663..ea268abb536f14 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,10 +99,11 @@ function throwMissingPropError(field: string): never { * the root component. */ export function testClassName( - element: React.ReactElement<{ - 'data-testid': string; - className: string; - }>, + element: React.ReactElement< + DataProps & { + className: string; + } + >, getOptions: () => ConformanceOptions, ) { it('applies the className to the root component', async () => { @@ -124,11 +129,12 @@ export function testClassName( * Component from @inheritComponent */ export function testComponentProp( - element: React.ReactElement<{ - 'data-testid': string; - className: string; - component?: string | React.ElementType; - }>, + element: React.ReactElement< + DataProps & { + className: string; + component?: string | React.ElementType; + } + >, getOptions: () => ConformanceOptions, ) { describe('prop: component', () => { @@ -164,12 +170,13 @@ export function testComponentProp( * MUI components spread additional props to its root. */ export function testPropsSpread( - element: React.ReactElement<{ - 'data-testid': string; - className: string; - component: string | React.ElementType; - 'data-test-props-spread': string; - }>, + element: React.ReactElement< + DataProps & { + className: string; + component: string | React.ElementType; + 'data-test-props-spread': string; + } + >, getOptions: () => ConformanceOptions, ) { @@ -307,14 +314,10 @@ function testSlotsProp( >; }; slotProps: { - [x: string]: { - 'data-testid': string; - }; + [x: string]: DataProps; }; componentsProps: { - [x: string]: { - 'data-testid': string; - }; + [x: string]: DataProps; }; }>, getOptions: () => ConformanceOptions, From 5da23c75661cda9b3e15159c5005f2befd89461e Mon Sep 17 00:00:00 2001 From: sai6855 Date: Mon, 4 Nov 2024 13:00:13 +0530 Subject: [PATCH 4/4] fix --- packages-internal/test-utils/src/describeConformance.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages-internal/test-utils/src/describeConformance.tsx b/packages-internal/test-utils/src/describeConformance.tsx index ea268abb536f14..25be7ade35def1 100644 --- a/packages-internal/test-utils/src/describeConformance.tsx +++ b/packages-internal/test-utils/src/describeConformance.tsx @@ -174,7 +174,6 @@ export function testPropsSpread( DataProps & { className: string; component: string | React.ElementType; - 'data-test-props-spread': string; } >,