feat(react): add display names to forward ref components (#9591)

* feat(react): add display names to forward ref components * chore(snapshot): updated snapshot tests * test(combo-box): update combobox test * test(combo-box): update ListBoxMenuItem forward ref Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Sep 22, 2021 · a1e11df · a1e11df
1 parent 1d7d399
commit a1e11df
Show file tree

Hide file tree

Showing 28 changed files with 88 additions and 52 deletions.
diff --git a/packages/carbon-react/src/components/Popover/index.js b/packages/carbon-react/src/components/Popover/index.js
@@ -42,6 +42,7 @@ function Popover({
   );
 }
 
+Popover.displayName = 'Popover';
 Popover.propTypes = {
   /**
    * Specify how the popover should align with the trigger element
@@ -122,6 +123,8 @@ const PopoverContent = React.forwardRef(function PopoverContent(
   );
 });
 
+PopoverContent.displayName = 'PopoverContent';
+
 PopoverContent.propTypes = {
   /**
    * Provide a custom element or component to render the top-level node for the

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -447,6 +447,7 @@ Map {
       "shouldFilterItem": [Function],
       "type": "default",
     },
+    "displayName": "ComboBox",
     "propTypes": Object {
       "ariaLabel": Object {
         "type": "string",
@@ -4692,6 +4693,7 @@ Map {
   },
   "PaginationNav" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "PaginationNav",
     "propTypes": Object {
       "className": Object {
         "type": "string",
@@ -4730,6 +4732,7 @@ Map {
       "onClick": [Function],
       "size": "",
     },
+    "displayName": "ControlledPasswordInput",
     "propTypes": Object {
       "className": Object {
         "type": "string",
@@ -4841,6 +4844,7 @@ Map {
       "onClick": [Function],
       "size": "",
     },
+    "displayName": "PasswordInput",
     "propTypes": Object {
       "className": Object {
         "type": "string",
@@ -6046,6 +6050,7 @@ Map {
         "onClick": [Function],
         "size": "",
       },
+      "displayName": "ControlledPasswordInput",
       "propTypes": Object {
         "className": Object {
           "type": "string",
@@ -6157,6 +6162,7 @@ Map {
         "onClick": [Function],
         "size": "",
       },
+      "displayName": "PasswordInput",
       "propTypes": Object {
         "className": Object {
           "type": "string",
@@ -6901,6 +6907,7 @@ Map {
   },
   "ToolbarTitle" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "ToolbarTitle",
     "propTypes": Object {
       "title": Object {
         "type": "string",
@@ -6910,6 +6917,7 @@ Map {
   },
   "ToolbarOption" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "ToolbarOption",
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -6919,6 +6927,7 @@ Map {
   },
   "ToolbarDivider" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "ToolbarDivider",
     "render": [Function],
   },
   "ToolbarSearch" => Object {
@@ -7589,6 +7598,7 @@ Map {
   },
   "HeaderMenuItem" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "HeaderMenuItem",
     "propTypes": Object {
       "children": Object {
         "isRequired": true,
@@ -7701,6 +7711,7 @@ Map {
   },
   "Switcher" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "Switcher",
     "propTypes": Object {
       "aria-label": [Function],
       "aria-labelledby": [Function],
@@ -7716,6 +7727,7 @@ Map {
   },
   "SwitcherItem" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "SwitcherItem",
     "propTypes": Object {
       "aria-label": [Function],
       "aria-labelledby": [Function],
@@ -7769,6 +7781,7 @@ Map {
       "isFixedNav": false,
       "isPersistent": true,
     },
+    "displayName": "SideNav",
     "propTypes": Object {
       "addFocusListeners": Object {
         "type": "bool",
@@ -7936,6 +7949,7 @@ Map {
       "element": "a",
       "large": false,
     },
+    "displayName": "SideNavLink",
     "propTypes": Object {
       "children": Object {
         "isRequired": true,
@@ -7987,6 +8001,7 @@ Map {
   },
   "SideNavMenuItem" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "SideNavMenuItem",
     "propTypes": Object {
       "children": Object {
         "type": "node",
@@ -8002,6 +8017,7 @@ Map {
   },
   "SideNavSwitcher" => Object {
     "$$typeof": Symbol(react.forward_ref),
+    "displayName": "SideNavSwitcher",
     "propTypes": Object {
       "className": Object {
         "type": "string",

diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -60,7 +60,7 @@ describe('ComboBox', () => {
 
     for (let i = 0; i < mockProps.items.length; i++) {
       openMenu(wrapper);
-      wrapper.find('ForwardRef(ListBoxMenuItem)').at(i).simulate('click');
+      wrapper.find('ListBoxMenuItem').at(i).simulate('click');
       expect(mockProps.onChange).toHaveBeenCalledTimes(i + 1);
       expect(mockProps.onChange).toHaveBeenCalledWith({
         selectedItem: mockProps.items[i],
@@ -94,7 +94,7 @@ describe('ComboBox', () => {
   it('should let the user select an option by clicking on the option node', () => {
     const wrapper = mount(<ComboBox {...mockProps} />);
     openMenu(wrapper);
-    wrapper.find('ForwardRef(ListBoxMenuItem)').at(0).simulate('click');
+    wrapper.find('ListBoxMenuItem').at(0).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[0],
@@ -104,7 +104,7 @@ describe('ComboBox', () => {
     mockProps.onChange.mockClear();
 
     openMenu(wrapper);
-    wrapper.find('ForwardRef(ListBoxMenuItem)').at(1).simulate('click');
+    wrapper.find('ListBoxMenuItem').at(1).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[1],

diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -402,6 +402,7 @@ const ComboBox = React.forwardRef((props, ref) => {
   );
 });
 
+ComboBox.displayName = 'ComboBox';
 ComboBox.propTypes = {
   /**
    * 'aria-label' of the ListBox component.

diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -133,7 +133,7 @@ describe('Dropdown', () => {
   it('should let the user select an option by clicking on the option node', () => {
     const wrapper = mount(<Dropdown {...mockProps} />);
     openMenu(wrapper);
-    wrapper.find('ForwardRef(ListBoxMenuItem)').at(0).simulate('click');
+    wrapper.find('ListBoxMenuItem').at(0).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[0],
@@ -143,7 +143,7 @@ describe('Dropdown', () => {
     mockProps.onChange.mockClear();
 
     openMenu(wrapper);
-    wrapper.find('ForwardRef(ListBoxMenuItem)').at(1).simulate('click');
+    wrapper.find('ListBoxMenuItem').at(1).simulate('click');
     expect(mockProps.onChange).toHaveBeenCalledTimes(1);
     expect(mockProps.onChange).toHaveBeenCalledWith({
       selectedItem: mockProps.items[1],

diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
@@ -295,7 +295,7 @@ exports[`Dropdown should render custom item components 1`] = `
             role="listbox"
             tabIndex={-1}
           >
-            <ForwardRef(ListBoxMenuItem)
+            <ListBoxMenuItem
               aria-selected="false"
               id="downshift-6-item-0"
               isActive={false}
@@ -330,8 +330,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ForwardRef(ListBoxMenuItem)>
-            <ForwardRef(ListBoxMenuItem)
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
               aria-selected="false"
               id="downshift-6-item-1"
               isActive={false}
@@ -366,8 +366,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ForwardRef(ListBoxMenuItem)>
-            <ForwardRef(ListBoxMenuItem)
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
               aria-selected="false"
               id="downshift-6-item-2"
               isActive={false}
@@ -402,8 +402,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ForwardRef(ListBoxMenuItem)>
-            <ForwardRef(ListBoxMenuItem)
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
               aria-selected="false"
               id="downshift-6-item-3"
               isActive={false}
@@ -438,8 +438,8 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ForwardRef(ListBoxMenuItem)>
-            <ForwardRef(ListBoxMenuItem)
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
               aria-selected="false"
               id="downshift-6-item-4"
               isActive={false}
@@ -474,7 +474,7 @@ exports[`Dropdown should render custom item components 1`] = `
                   </itemToElement>
                 </div>
               </div>
-            </ForwardRef(ListBoxMenuItem)>
+            </ListBoxMenuItem>
           </div>
         </ListBoxMenu>
       </div>
@@ -604,7 +604,7 @@ exports[`Dropdown should render with strings as items 1`] = `
             role="listbox"
             tabIndex={-1}
           >
-            <ForwardRef(ListBoxMenuItem)
+            <ListBoxMenuItem
               aria-selected="false"
               id="downshift-4-item-0"
               isActive={false}
@@ -628,8 +628,8 @@ exports[`Dropdown should render with strings as items 1`] = `
                   zar
                 </div>
               </div>
-            </ForwardRef(ListBoxMenuItem)>
-            <ForwardRef(ListBoxMenuItem)
+            </ListBoxMenuItem>
+            <ListBoxMenuItem
               aria-selected="false"
               id="downshift-4-item-1"
               isActive={false}
@@ -653,7 +653,7 @@ exports[`Dropdown should render with strings as items 1`] = `
                   doz
                 </div>
               </div>
-            </ForwardRef(ListBoxMenuItem)>
+            </ListBoxMenuItem>
           </div>
         </ListBoxMenu>
       </div>

diff --git a/packages/react/src/components/ListBox/ListBoxMenuItem.js b/packages/react/src/components/ListBox/ListBoxMenuItem.js
@@ -53,6 +53,7 @@ const ListBoxMenuItem = React.forwardRef(function ListBoxMenuItem(
   );
 });
 
+ListBoxMenuItem.displayName = 'ListBoxMenuItem';
 ListBoxMenuItem.propTypes = {
   /**
    * Specify any children nodes that should be rendered inside of the ListBox

diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenu-test.js.snap
@@ -9,7 +9,7 @@ exports[`ListBoxMenu should render 1`] = `
     id="test-listbox"
     role="listbox"
   >
-    <ForwardRef(ListBoxMenuItem)
+    <ListBoxMenuItem
       isActive={false}
       isHighlighted={false}
     >
@@ -22,7 +22,7 @@ exports[`ListBoxMenu should render 1`] = `
           Hello
         </div>
       </div>
-    </ForwardRef(ListBoxMenuItem)>
+    </ListBoxMenuItem>
   </div>
 </ListBoxMenu>
 `;
diff --git a/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuItem-test.js.snap b/packages/react/src/components/ListBox/__tests__/__snapshots__/ListBoxMenuItem-test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ListBoxMenuItem should render 1`] = `
-<ForwardRef(ListBoxMenuItem)
+<ListBoxMenuItem
   isActive={false}
   isHighlighted={false}
 >
@@ -16,11 +16,11 @@ exports[`ListBoxMenuItem should render 1`] = `
       </span>
     </div>
   </div>
-</ForwardRef(ListBoxMenuItem)>
+</ListBoxMenuItem>
 `;
 
 exports[`ListBoxMenuItem should render 2`] = `
-<ForwardRef(ListBoxMenuItem)
+<ListBoxMenuItem
   isActive={true}
   isHighlighted={false}
 >
@@ -35,11 +35,11 @@ exports[`ListBoxMenuItem should render 2`] = `
       </span>
     </div>
   </div>
-</ForwardRef(ListBoxMenuItem)>
+</ListBoxMenuItem>
 `;
 
 exports[`ListBoxMenuItem should render 3`] = `
-<ForwardRef(ListBoxMenuItem)
+<ListBoxMenuItem
   isActive={false}
   isHighlighted={true}
 >
@@ -54,5 +54,5 @@ exports[`ListBoxMenuItem should render 3`] = `
       </span>
     </div>
   </div>
-</ForwardRef(ListBoxMenuItem)>
+</ListBoxMenuItem>
 `;
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -16,7 +16,7 @@ import {
   generateGenericItem,
 } from '../../ListBox/test-helpers';
 
-const listItemName = 'ForwardRef(ListBoxMenuItem)';
+const listItemName = 'ListBoxMenuItem';
 const openMenu = (wrapper) => {
   wrapper.find(`[role="combobox"]`).simulate('click');
 };

diff --git a/packages/react/src/components/PaginationNav/PaginationNav.js b/packages/react/src/components/PaginationNav/PaginationNav.js
@@ -426,6 +426,7 @@ PaginationOverflow.propTypes = {
   translateWithId: PropTypes.func,
 };
 
+PaginationNav.displayName = 'PaginationNav';
 PaginationNav.propTypes = {
   /**
    * Additional CSS class names.

diff --git a/packages/react/src/components/Popover/index.js b/packages/react/src/components/Popover/index.js
@@ -122,6 +122,7 @@ const PopoverContent = React.forwardRef(function PopoverContent(
   );
 });
 
+PopoverContent.displayName = 'PopoverContent';
 PopoverContent.propTypes = {
   /**
    * Provide a custom element or component to render the top-level node for the

diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -153,6 +153,7 @@ const ControlledPasswordInput = React.forwardRef(
   }
 );
 
+ControlledPasswordInput.displayName = 'ControlledPasswordInput';
 ControlledPasswordInput.propTypes = {
   /**
    * Provide a custom className that is applied directly to the underlying

diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
@@ -204,6 +204,7 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   );
 });
 
+PasswordInput.displayName = 'PasswordInput';
 PasswordInput.propTypes = {
   /**
    * Provide a custom className that is applied directly to the underlying
-Original file line number
+Diff line change
@@ Expand Up / @@ -402,6 +402,7 @@ const ComboBox = React.forwardRef((props, ref) => { @@
       );
     });
+    ComboBox.displayName = 'ComboBox';
     ComboBox.propTypes = {
       /**
        * 'aria-label' of the ListBox component.
@@ Expand Down @@