Add conformance test for event callback typing: consistent-callback-type

change/@fluentui-react-conformance-14912322-4e02-4c42-9302-bd48ffd81217.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add 'consistent-callback-type' test, rename 'consistent-callback-args' to 'consistent-callback-args-legacy'",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-utilities-22690495-8a43-4119-afcf-e00ab42d907b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add type helper for callback props",
+  "packageName": "@fluentui/react-utilities",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx

@@ -86,7 +86,8 @@ export function isConformant(
     // v0 doesn't use the patterns these tests look at
     disabledTests: [
       'has-top-level-file',
-      'consistent-callback-args',
+      'consistent-callback-args-legacy',
+      'consistent-callback-type',
       'component-has-static-classname',
       'component-has-static-classnames-object',
       'component-has-static-classname-exported',

packages/react-components/react-accordion/src/components/Accordion/Accordion.test.tsx

@@ -8,7 +8,12 @@ describe('Accordion', () => {
     Component: Accordion,
     displayName: 'Accordion',
     // Accordion does not have own styles
-    disabledTests: ['make-styles-overrides-win', 'consistent-callback-args'],
+    disabledTests: ['make-styles-overrides-win', 'consistent-callback-args-legacy'],
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onToggle'],
+      },
+    },
   });
 
   /**

packages/react-components/react-avatar/src/components/AvatarGroupPopover/AvatarGroupPopover.test.tsx

@@ -47,6 +47,9 @@ describe('AvatarGroupPopover', () => {
           getPortalElement: getPopoverSurfaceElement,
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onOpenChange'],
+      },
     },
     requiredProps: {
       children: (

packages/react-components/react-calendar-compat/src/components/Calendar/Calendar.test.tsx

@@ -7,12 +7,13 @@ describe('Calendar', () => {
     displayName: 'Calendar',
     disabledTests: [
       // compat components that are closer to their v8 counterparts do not adhere to this test
-      'consistent-callback-args',
+      'consistent-callback-args-legacy',
       // Calendar is not exported at the top level since it's an internal component
       'exported-top-level',
       // Calendar classnames are not exported since they are internal and are used differently compared to how v9
       // uses classnames
       'component-has-static-classnames-object',
+      'consistent-callback-type',
     ],
   });
 });

packages/react-components/react-calendar-compat/src/components/CalendarDayGrid/CalendarDayGrid.test.tsx

@@ -29,9 +29,10 @@ describe('CalendarDayGrid', () => {
       'component-handles-ref',
       'component-has-root-ref',
       // This test doesn't apply for compat components that are closer to their v8 counterpart
-      'consistent-callback-args',
+      'consistent-callback-args-legacy',
       // Some classnames are applied conditionally
       'component-has-static-classnames-object',
+      'consistent-callback-type',
     ],
   });
 });

packages/react-components/react-card/src/components/Card/Card.test.tsx

@@ -30,6 +30,9 @@ describe('Card', () => {
           },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onSelectionChange'],
+      },
     },
     disabledTests: ['component-has-static-classname-exported'],
   });

packages/react-components/react-checkbox/src/components/Checkbox/Checkbox.test.tsx

@@ -23,6 +23,9 @@ describe('Checkbox', () => {
           props: { label: 'Test Label' },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
     },
   });
 

packages/react-components/react-combobox/src/components/Combobox/Combobox.test.tsx

@@ -26,6 +26,9 @@ describe('Combobox', () => {
           },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onOptionSelect', 'onOpenChange'],
+      },
     },
   });
 

packages/react-components/react-combobox/src/components/Dropdown/Dropdown.test.tsx

@@ -26,6 +26,9 @@ describe('Dropdown', () => {
           },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onOptionSelect', 'onOpenChange'],
+      },
     },
   });
 

packages/react-components/react-combobox/src/components/Listbox/Listbox.test.tsx

@@ -8,6 +8,11 @@ describe('Listbox', () => {
   isConformant({
     Component: Listbox,
     displayName: 'Listbox',
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onOptionSelect'],
+      },
+    },
   });
 
   it('renders a default state', () => {

packages/react-components/react-datepicker-compat/src/components/DatePicker/DatePicker.test.tsx

@@ -52,7 +52,7 @@ describe('DatePicker', () => {
     displayName: 'DatePicker',
     // component-has-root-ref is disabled because the root is an Input component, the conformance test thinks the
     // wrapper is the root, not the input itself. This is a bug in the conformance test.
-    disabledTests: ['consistent-callback-args', 'component-has-root-ref'],
+    disabledTests: ['consistent-callback-args-legacy', 'consistent-callback-type', 'component-has-root-ref'],
     testOptions: {
       'has-static-classnames': [
         {

packages/react-components/react-dialog/src/components/Dialog/Dialog.test.tsx

@@ -19,10 +19,15 @@ describe('Dialog', () => {
       'component-has-static-classnames-object',
       // TODO:
       // onOpenChange: A second (data) argument cannot be a union
-      'consistent-callback-args',
+      'consistent-callback-args-legacy',
       // Dialog does not have own styles
       'make-styles-overrides-win',
     ],
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onOpenChange'],
+      },
+    },
   });
 
   it('renders a default state', () => {

packages/react-components/react-drawer/src/components/Drawer/Drawer.test.tsx

@@ -22,7 +22,7 @@ describe('Drawer', () => {
    * Why these tests are disabled:
    * component-handles-ref|component-has-root-ref: Drawer uses the Dialog under the hood and Dialog do not handle ref, as it is a renderless component
    * component-handles-classname|component-has-static-classnames-object|make-styles-overrides-win: Drawer uses the DialogSurface component to render the classname, so the main component do not handle classname.
-   * consistent-callback-args: Disabled that as the Drawer callback function uses the same signature as the Dialog, and Dialog has those tests disabled.
+   * consistent-callback-args-legacy: Disabled that as the Drawer callback function uses the same signature as the Dialog, and Dialog has those tests disabled.
    */
   isConformant({
     Component: Drawer,
@@ -32,11 +32,16 @@ describe('Drawer', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classnames-object',
-      'consistent-callback-args',
+      'consistent-callback-args-legacy',
       'make-styles-overrides-win',
     ],
     requiredProps: props,
     getTargetElement: result => result.getByTestId(testid),
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onOpenChange'],
+      },
+    },
   });
 
   it('renders a default state', () => {

packages/react-components/react-drawer/src/components/OverlayDrawer/OverlayDrawer.test.tsx

@@ -20,7 +20,7 @@ describe('OverlayDrawer', () => {
    * Why these tests are disabled:
    * component-handles-ref|component-has-root-ref: OverlayDrawer uses the Dialog under the hood and Dialog do not handle ref, as it is a renderless component
    * component-handles-classname|component-has-static-classnames-object|make-styles-overrides-win: OverlayDrawer uses the DialogSurface component to render the className, so the main component do not handle className.
-   * consistent-callback-args: Disabled that as the OverlayDrawer callback function uses the same signature as the Dialog, and Dialog has those tests disabled.
+   * consistent-callback-args-legacy: Disabled that as the OverlayDrawer callback function uses the same signature as the Dialog, and Dialog has those tests disabled.
    */
   isConformant({
     Component: OverlayDrawer,
@@ -30,10 +30,15 @@ describe('OverlayDrawer', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classnames-object',
-      'consistent-callback-args',
+      'consistent-callback-args-legacy',
     ],
     requiredProps: props,
     getTargetElement: result => result.getByTestId(testid),
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onOpenChange'],
+      },
+    },
   });
 
   it('renders a default state', () => {

packages/react-components/react-input/src/components/Input/Input.test.tsx

@@ -31,6 +31,9 @@ describe('Input', () => {
           },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
     },
   });
 

packages/react-components/react-menu/src/components/Menu/Menu.test.tsx

@@ -23,7 +23,7 @@ describe('Menu', () => {
       'make-styles-overrides-win',
       // TODO:
       // onOpenChange: A second (data) argument cannot be a union
-      'consistent-callback-args',
+      'consistent-callback-args-legacy',
     ],
     Component: Menu,
     displayName: 'Menu',
@@ -39,6 +39,11 @@ describe('Menu', () => {
         </MenuPopover>,
       ],
     },
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onCheckedValueChange', 'onOpenChange'],
+      },
+    },
   });
 
   beforeEach(() => {

packages/react-components/react-menu/src/components/MenuList/MenuList.test.tsx

@@ -14,6 +14,11 @@ describe('MenuList', () => {
       // MenuTrigger does not have own styles
       'make-styles-overrides-win',
     ],
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onCheckedValueChange'],
+      },
+    },
   });
 
   /**

packages/react-components/react-migration-v0-v9/src/components/List/List/List.test.tsx

@@ -13,10 +13,13 @@ describe('List', () => {
     // Adding them there now might not be safe.
     disabledTests: ['component-has-static-classnames-object', 'has-docblock', 'has-top-level-file'],
     testOptions: {
-      'consistent-callback-args': {
+      'consistent-callback-args-legacy': {
         // onSelectionChange has an eventArgument which is React.SyntheticEvent. This throws an error during testing
         ignoreProps: ['onSelectionChange'],
       },
+      'consistent-callback-type': {
+        ignoreProps: ['onSelectionChange'],
+      },
     },
   });
 

packages/react-components/react-nav-preview/src/components/Nav/Nav.test.tsx

@@ -6,6 +6,6 @@ describe('Nav', () => {
     Component: Nav,
     displayName: 'Nav',
     // todo - # 30012, remove when conformance is updated
-    disabledTests: ['consistent-callback-args'],
+    disabledTests: ['consistent-callback-args-legacy'],
   });
 });

packages/react-components/react-popover/src/components/Popover/Popover.test.tsx

@@ -18,6 +18,11 @@ describe('Popover', () => {
       // Popover does not have own styles
       'make-styles-overrides-win',
     ],
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onOpenChange'],
+      },
+    },
   });
 
   /**

packages/react-components/react-radio/src/components/Radio/Radio.test.tsx

@@ -19,6 +19,9 @@ describe('Radio', () => {
           },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
     },
   });
 

packages/react-components/react-radio/src/components/RadioGroup/RadioGroup.test.tsx

@@ -10,6 +10,11 @@ describe('RadioGroup', () => {
   isConformant({
     Component: RadioGroup,
     displayName: 'RadioGroup',
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
+    },
   });
 
   it('renders a default state', () => {

packages/react-components/react-search-preview/src/components/SearchBox/SearchBox.test.tsx

@@ -43,6 +43,9 @@ describe('SearchBox', () => {
           },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
     },
   });
 

packages/react-components/react-select/src/components/Select/Select.test.tsx

@@ -9,6 +9,11 @@ describe('Select', () => {
     Component: Select,
     displayName: 'Select',
     primarySlot: 'select',
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
+    },
   });
 
   // Note for Select tests: avoid using getByRole;

packages/react-components/react-slider/src/components/Slider/Slider.test.tsx

@@ -10,6 +10,11 @@ describe('Slider', () => {
     Component: Slider,
     displayName: 'Slider',
     primarySlot: 'input',
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
+    },
   });
 
   afterEach(() => {

packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx

@@ -15,6 +15,11 @@ describe('SpinButton', () => {
     Component: SpinButton,
     displayName: 'SpinButton',
     primarySlot: 'input',
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
+    },
   });
 
   it('renders a default uncontrolled state', () => {

packages/react-components/react-switch/src/components/Switch/Switch.test.tsx

@@ -19,6 +19,9 @@ describe('Switch', () => {
           },
         },
       ],
+      'consistent-callback-type': {
+        ignoreProps: ['onChange'],
+      },
     },
   });
 

packages/react-components/react-table/src/components/DataGrid/DataGrid.test.tsx

@@ -43,6 +43,9 @@ describe('DataGrid', () => {
       'make-styles-overrides-win': {
         callCount: 2,
       },
+      'consistent-callback-type': {
+        ignoreProps: ['onSortChange', 'onSelectionChange', 'onColumnResize'],
+      },
     },
     // TODO: https://github.com/microsoft/fluentui/issues/19618
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/react-components/react-tabs/src/components/TabList/TabList.test.tsx

@@ -8,6 +8,11 @@ describe('TabList', () => {
   isConformant({
     Component: TabList,
     displayName: 'TabList',
+    testOptions: {
+      'consistent-callback-type': {
+        ignoreProps: ['onTabSelect'],
+      },
+    },
   });
 
   it('renders with tabs', () => {

packages/react-components/react-tags/src/components/TagGroup/TagGroup.test.tsx

@@ -9,9 +9,12 @@ describe('TagGroup', () => {
     Component: TagGroup,
     displayName: 'TagGroup',
     testOptions: {
-      'consistent-callback-args': {
+      'consistent-callback-args-legacy': {
         ignoreProps: ['onDismiss'], // onDismiss uses generics, this test does not support that
       },
+      'consistent-callback-type': {
+        ignoreProps: ['onDismiss'],
+      },
     },
   });