From 172ca7ccc564c4098e78526436b6c74f482efd9a Mon Sep 17 00:00:00 2001
From: Martin Hochel <martinhochel@microsoft.com>
Date: Wed, 4 Jun 2025 16:20:03 +0200
Subject: [PATCH] chore(react-tests-v9): mute invalid patterns and provide
 correct examples

---
 apps/react-17-tests-v9/src/issues.tsx         | 18 ++++++++++++++++++
 apps/react-18-tests-v9/src/issues.tsx         | 18 ++++++++++++++++++
 apps/react-18-tests-v9/tsconfig.react-18.json |  2 +-
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/apps/react-17-tests-v9/src/issues.tsx b/apps/react-17-tests-v9/src/issues.tsx
index 4289e49fcb838..38baf2a9f7e0c 100644
--- a/apps/react-17-tests-v9/src/issues.tsx
+++ b/apps/react-17-tests-v9/src/issues.tsx
@@ -48,8 +48,19 @@ import type {
   type AppSplitButtonSlots = {
     root: NonNullable<Slot<'div'>>;
     menuButton: NonNullable<Slot<AppMenuButtonSlot>>;
+    // @ts-expect-error - Slot type mismatch
     menu: NonNullable<Slot<ContextualMenuSlotType>>;
   };
+  type ValidAppSplitButtonSlots = {
+    root: NonNullable<Slot<'div'>>;
+    menuButton: NonNullable<Slot<AppMenuButtonProps>>;
+    menu: NonNullable<
+      Slot<
+        Pick<JSX.IntrinsicElements['div'], 'children'> &
+          (typeof AppContextualMenu extends React.ComponentType<infer Props> ? Props : {})
+      >
+    >;
+  };
   type AppSplitButtonProps = ComponentProps<Partial<AppSplitButtonSlots>> &
     Omit<SplitButtonProps, 'root' | 'menuButton' | 'primaryActionButton'>;
 
@@ -61,6 +72,7 @@ import type {
   );
 
   const props = { menuButton: {}, menu: {} } as AppSplitButtonProps;
+  const propsOk = { menuButton: {}, menu: {} } as ValidAppSplitButtonSlots;
 
   const defaultMenuProps = useGetMenuProps();
 
@@ -73,6 +85,12 @@ import type {
   };
 
   slot.always(props.menuButton, {
+    defaultProps: menuButtonDefaultProps,
+    // @ts-expect-error - Slot type mismatch
+    elementType: AppSplitButtonMenuButton,
+  });
+
+  slot.always(propsOk.menuButton, {
     defaultProps: menuButtonDefaultProps,
     elementType: AppSplitButtonMenuButton,
   });
diff --git a/apps/react-18-tests-v9/src/issues.tsx b/apps/react-18-tests-v9/src/issues.tsx
index 4289e49fcb838..fddebda42f40a 100644
--- a/apps/react-18-tests-v9/src/issues.tsx
+++ b/apps/react-18-tests-v9/src/issues.tsx
@@ -50,6 +50,17 @@ import type {
     menuButton: NonNullable<Slot<AppMenuButtonSlot>>;
     menu: NonNullable<Slot<ContextualMenuSlotType>>;
   };
+
+  type ValidAppSplitButtonSlots = {
+    root: NonNullable<Slot<'div'>>;
+    menuButton: NonNullable<Slot<AppMenuButtonProps>>;
+    menu: NonNullable<
+      Slot<
+        Pick<JSX.IntrinsicElements['div'], 'children'> &
+          (typeof AppContextualMenu extends React.ComponentType<infer Props> ? Props : {})
+      >
+    >;
+  };
   type AppSplitButtonProps = ComponentProps<Partial<AppSplitButtonSlots>> &
     Omit<SplitButtonProps, 'root' | 'menuButton' | 'primaryActionButton'>;
 
@@ -61,6 +72,7 @@ import type {
   );
 
   const props = { menuButton: {}, menu: {} } as AppSplitButtonProps;
+  const propsOk = { menuButton: {}, menu: {} } as ValidAppSplitButtonSlots;
 
   const defaultMenuProps = useGetMenuProps();
 
@@ -72,11 +84,17 @@ import type {
     ...defaultMenuProps,
   };
 
+  // @ts-expect-error - Type 'string' is not assignable to type '((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null | undefined'. caused by React.RefAttribute and Slot ref mismatch
   slot.always(props.menuButton, {
     defaultProps: menuButtonDefaultProps,
     elementType: AppSplitButtonMenuButton,
   });
 
+  slot.always(propsOk.menuButton, {
+    defaultProps: menuButtonDefaultProps,
+    elementType: AppSplitButtonMenuButton,
+  });
+
   slot.always(props.menu, {
     defaultProps: appContextualMenuProps,
     elementType: AppContextualMenu,
diff --git a/apps/react-18-tests-v9/tsconfig.react-18.json b/apps/react-18-tests-v9/tsconfig.react-18.json
index 1c335999a1fd7..bb6da46f98c2a 100644
--- a/apps/react-18-tests-v9/tsconfig.react-18.json
+++ b/apps/react-18-tests-v9/tsconfig.react-18.json
@@ -11,7 +11,7 @@
     "isolatedModules": true,
     "importHelpers": true,
     "jsx": "react",
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "preserveConstEnums": true,
     "skipLibCheck": true,
     "typeRoots": ["./node_modules/@types"],