microsoft · YuanboXue-Amber · Feb 7, 2024 · Jan 23, 2024 · Jan 24, 2024 · Jan 24, 2024
diff --git a/change/@fluentui-react-conformance-49d283fb-c0d3-4de1-9478-33cb86abe5ca.json b/change/@fluentui-react-conformance-49d283fb-c0d3-4de1-9478-33cb86abe5ca.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "BREAKING CHANGE: change `consistent-callback-args` test option to test selected props instead of ignoring props",
+  "packageName": "@fluentui/react-conformance",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -47,6 +47,9 @@ describe('AvatarGroupPopover', () => {
           getPortalElement: getPopoverSurfaceElement,
         },
       ],
+      'consistent-callback-args': {
+        legacyCallbacks: ['onOpenChange'],
+      },
     },
     requiredProps: {
       children: (

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

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

@@ -34,6 +34,9 @@ describe('Combobox', () => {
           },
         },
       ],
+      'consistent-callback-args': {
+        legacyCallbacks: ['onOpenChange', 'onOptionSelect'],
+      },
     },
   });
 

@@ -34,6 +34,9 @@ describe('Dropdown', () => {
           },
         },
       ],
+      'consistent-callback-args': {
+        legacyCallbacks: ['onOpenChange', 'onOptionSelect'],
+      },
     },
   });
 

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

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

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

@@ -12,12 +12,6 @@ describe('List', () => {
     // Disabled because this should be ItemLayout's responsibility, but it doesn't render those.
     // Adding them there now might not be safe.
     disabledTests: ['component-has-static-classnames-object', 'has-docblock', 'has-top-level-file'],
-    testOptions: {
-      'consistent-callback-args': {
-        // onSelectionChange has an eventArgument which is React.SyntheticEvent. This throws an error during testing
-        ignoreProps: ['onSelectionChange'],
-      },
-    },
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests

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

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

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

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

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

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

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

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

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

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

@@ -8,11 +8,6 @@ describe('TagGroup', () => {
   isConformant({
     Component: TagGroup,
     displayName: 'TagGroup',
-    testOptions: {
-      'consistent-callback-args': {
-        ignoreProps: ['onDismiss'], // onDismiss uses generics, this test does not support that
-      },
-    },
   });
 
   it('should invoke onDismiss when clicking on children Tag', () => {

@@ -22,6 +22,11 @@ describe('Textarea', () => {
     Component: Textarea,
     displayName: 'Textarea',
     primarySlot: 'textarea',
+    testOptions: {
+      'consistent-callback-args': {
+        legacyCallbacks: ['onChange'],
+      },
+    },
   });
 
   // TODO create visual regression tests in /apps/vr-tests

@@ -36,6 +36,9 @@ describe('TimePicker', () => {
           },
         },
       ],
+      'consistent-callback-args': {
+        legacyCallbacks: ['onOpenChange', 'onTimeChange'],
+      },
     },
   });
 

@@ -7,6 +7,11 @@ describe('Toolbar', () => {
   isConformant({
     Component: Toolbar,
     displayName: 'Toolbar',
+    testOptions: {
+      'consistent-callback-args': {
+        legacyCallbacks: ['onCheckedValueChange'],
+      },
+    },
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests

@@ -39,6 +39,11 @@ describe('Tooltip', () => {
       'component-has-root-ref',
       'component-handles-classname',
     ],
+    testOptions: {
+      'consistent-callback-args': {
+        legacyCallbacks: ['onVisibleChange'],
+      },
+    },
   });
 
   afterEach(() => {

@@ -56,7 +56,7 @@ export interface TestOptions {
     };
     // (undocumented)
     'consistent-callback-args'?: {
-        ignoreProps?: string[];
+        legacyCallbacks?: string[];
     };
     // (undocumented)
     'consistent-callback-names'?: {

@@ -453,10 +453,21 @@ export const defaultTests: DefaultTestObject = {
       const { testOptions = {} } = testInfo;
 
       const propNames = Object.keys(componentInfo.props);
-      const ignoreProps = testOptions['consistent-callback-args']?.ignoreProps || [];
+      const legacyCallbacks = testOptions['consistent-callback-args']?.legacyCallbacks || [];
+
+      // verify that legacyCallbacks option contains real props:
+      const legacyCallbacksNotInProp = legacyCallbacks.filter(legacyCallback => !propNames.includes(legacyCallback));
+      if (legacyCallbacksNotInProp.length) {
+        throw new Error(
+          [
+            `Option "consistent-callback-args.legacyCallbacks" contains "${legacyCallbacksNotInProp.join(', ')}" prop,`,
+            'which is not present in component props.',
+          ].join(' '),
+        );
+      }
 
       const invalidProps = propNames.reduce<Record<string, Error>>((errors, propName) => {
-        if (!ignoreProps.includes(propName) && CALLBACK_REGEX.test(propName)) {
+        if (legacyCallbacks.includes(propName)) {
           const propInfo = componentInfo.props[propName];
 
           if (!propInfo.declarations) {

@@ -12,7 +12,7 @@ export interface TestOptions {
     ignoreProps?: string[];
   };
   'consistent-callback-args'?: {
-    ignoreProps?: string[];
+    legacyCallbacks?: string[];
   };
   'has-static-classnames'?: {
     props: {

@@ -91,9 +91,6 @@ describe('FocusZone', () => {
     elementRefName: 'elementRef',
     testOptions: {
       'consistent-callback-names': { ignoreProps: ['onActiveElementChanged'] },
-      'consistent-callback-args': {
-        ignoreProps: ['onActiveElementChanged', 'onBeforeFocus', 'onFocusNotification', 'onFocus'],
-      },
     },
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -30,6 +30,9 @@ describe('Card', () => { @@
               },
             },
           ],
+          'consistent-callback-args': {
+            legacyCallbacks: ['onSelectionChange'],
+          },
         },
         disabledTests: ['component-has-static-classname-exported'],
       });
@@ Expand Down @@