[BD-46] fix: clean up errors in tests

src/Breadcrumb/Breadcrumb.test.jsx

@@ -90,7 +90,7 @@ describe('<Breadcrumb />', () => {
   it('passes down link props to link elements', () => {
     const linkProps = {
       label: 'Link 1',
-      url: '/link-1',
+      href: '/link-1',
       className: 'my-link',
       target: '_blank',
     };

src/ColorPicker/ColorPicker.test.jsx

@@ -20,10 +20,10 @@ describe('renders correctly', () => {
   it('renders with the passed variables ', () => {
     const className = 'testClassName';
     const { container } = render(
-      <ColorPicker color={color} setColor={setColor} className={className} size="lg" />,
+      <ColorPicker color={color} setColor={setColor} className={className} size="sm" />,
     );
     expect(container.firstChild.firstChild).toHaveClass(className);
-    expect(container.firstChild.firstChild).toHaveClass('pgn__color-picker-lg');
+    expect(container.firstChild.firstChild).toHaveClass('pgn__color-picker-sm');
   });
 });
 describe('picker works as expected', () => {

src/DataTable/filters/tests/MultiSelectDropdownFilter.test.jsx

@@ -26,11 +26,13 @@ describe('<MultiSelectDropdownFilter />', () => {
   beforeEach(() => {
     jest.resetAllMocks();
   });
-  it('renders a list of checkboxes', () => {
+  it('renders a list of checkboxes', async () => {
     const wrapper = mount(<MultiSelectDropdownFilter {...props} />);
     wrapper.find('button').simulate('click');
-    const checkbox = wrapper.find({ type: 'checkbox' }).find('input');
-    expect(checkbox.length).toEqual(3);
+    await act(async () => {
+      const checkbox = wrapper.find({ type: 'checkbox' }).find('input');
+      expect(checkbox.length).toEqual(3);
+    });
   });
   it('renders a title', () => {
     const wrapper = mount(<MultiSelectDropdownFilter {...props} />);
@@ -63,25 +65,33 @@ describe('<MultiSelectDropdownFilter />', () => {
     });
     expect(setFilterMock).toHaveBeenCalledWith([]);
   });
-  it('renders checkbox label with filter name', () => {
+  it('renders checkbox label with filter name', async () => {
     const wrapper = mount(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
     wrapper.find('button').simulate('click');
-    const label = wrapper.find('.form-check-label').at(0);
-    expect(label.text()).toContain(roan.name);
+    await act(async () => {
+      const label = wrapper.find('.form-check-label').at(0);
+      expect(label.text()).toContain(roan.name);
+    });
   });
-  it('renders checkbox label with number', () => {
+  it('renders checkbox label with number', async () => {
     const wrapper = mount(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
     wrapper.find('button').simulate('click');
-    const label = wrapper.find('.pgn__checkbox-filter').at(0);
-    const badge = label.find(Badge);
-    expect(badge).toHaveLength(1);
-    expect(badge.text()).toEqual(String(roan.number));
+
+    await act(async () => {
+      const label = wrapper.find('.pgn__checkbox-filter').at(0);
+      const badge = label.find(Badge);
+      expect(badge).toHaveLength(1);
+      expect(badge.text()).toEqual(String(roan.number));
+    });
   });
-  it('renders checkbox label with number', () => {
+  it('renders checkbox label with number', async () => {
     const wrapper = mount(<MultiSelectDropdownFilter column={{ ...props.column, filterValue: [roan.value] }} />);
     wrapper.find('button').simulate('click');
-    const label = wrapper.find('.pgn__checkbox-filter').at(1);
-    const badge = label.find(Badge);
-    expect(badge).toHaveLength(0);
+
+    await act(async () => {
+      const label = wrapper.find('.pgn__checkbox-filter').at(1);
+      const badge = label.find(Badge);
+      expect(badge).toHaveLength(0);
+    });
   });
 });

src/Dropdown/deprecated/index.jsx

@@ -161,7 +161,7 @@ class Dropdown extends React.Component {
 }
 
 Dropdown.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 Dropdown.Item = DropdownItem;

src/Form/tests/FormGroup.test.jsx

@@ -6,14 +6,16 @@ import FormControl from '../FormControl';
 import FormLabel from '../FormLabel';
 import FormControlFeedback from '../FormControlFeedback';
 
-/* eslint-disable react/prop-types */
-jest.mock('react-bootstrap/FormControl', () => function MockFormControl(props) {
-  const { children, ...otherProps } = props;
-  return (
-    <form-control {...otherProps}>
-      {children}
-    </form-control>
-  );
+jest.mock('react-bootstrap/FormControl', () => {
+  const { forwardRef } = jest.requireActual('react');
+  return forwardRef((props, ref) => {
+    const { children, ...otherProps } = props;
+    return (
+      <form-control {...otherProps} ref={ref}>
+        {children}
+      </form-control>
+    );
+  });
 });
 
 describe('FormGroup', () => {

src/IconButton/IconButton.test.jsx

@@ -16,9 +16,14 @@ describe('<IconButton />', () => {
     iconAs,
     variant,
   };
+  const iconParams = {
+    prefix: 'pgn',
+    iconName: 'InfoOutlineIcon',
+    icon: [InfoOutline],
+  };
   it('renders with required props', () => {
     const tree = renderer.create((
-      <IconButton alt={alt} />
+      <IconButton icon={iconParams} alt={alt} />
     )).toJSON();
     expect(tree).toMatchSnapshot();
   });

src/IconButton/__snapshots__/IconButton.test.jsx.snap

@@ -9,6 +9,35 @@ exports[`<IconButton /> renders with required props 1`] = `
 >
   <span
     className="btn-icon__icon-container"
-  />
+  >
+    <svg
+      aria-hidden="true"
+      className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon"
+      data-icon="InfoOutlineIcon"
+      data-prefix="pgn"
+      focusable="false"
+      role="img"
+      src={null}
+      style={Object {}}
+      viewBox="0 0 function SvgInfoOutline(props) {
+  return /*#__PURE__*/React.createElement(\\"svg\\", _extends({
+    width: 24,
+    height: 24,
+    viewBox: \\"0 0 24 24\\",
+    fill: \\"none\\",
+    xmlns: \\"http://www.w3.org/2000/svg\\"
+  }, props), /*#__PURE__*/React.createElement(\\"path\\", {
+    d: \\"M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z\\",
+    fill: \\"currentColor\\"
+  }));
+} undefined"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fill="currentColor"
+        style={Object {}}
+      />
+    </svg>
+  </span>
 </button>
 `;

src/IconButtonToggle/IconButtonToggle.test.jsx

@@ -43,11 +43,15 @@ describe('IconButtonToggle tests', () => {
 
     userEvent.click(btnDef);
 
-    waitFor(() => expect(btnDef).toHaveClass('btn-icon-primary-active'));
-    waitFor(() => expect(btnDef).toHaveAttribute('aria-selected', 'false'));
-
-    waitFor(() => expect(btnAbc).toHaveClass('btn-icon-primary'));
-    waitFor(() => expect(btnAbc).toHaveAttribute('aria-selected', 'true'));
+    waitFor(() => {
+      expect(btnDef).toHaveClass('btn-icon-primary-active');
+      expect(btnDef).toHaveAttribute('aria-selected', 'false');
+    });
+
+    waitFor(() => {
+      expect(btnAbc).toHaveClass('btn-icon-primary');
+      expect(btnAbc).toHaveAttribute('aria-selected', 'true');
+    });
 
     expect(spyChanger).toHaveBeenCalledWith('def');
   });

src/Layout/Layout.test.jsx

@@ -34,7 +34,9 @@ describe('<Layout />', () => {
       )).toEqual(true);
     });
     it('renders although dimensions are incorrect', () => {
-      const wrapper = mount(<TestLayout lg={[{ span: 6, offset: 0 }, { span: 6, offset: 0 }]} />);
+      const wrapper = mount(
+        <TestLayout lg={[{ span: 6, offset: 0 }, { span: 6, offset: 0 }, { span: 6, offset: 0 }]} />,
+      );
       const children = wrapper.find('.row div');
       expect(children.length).not.toEqual(0);
     });

src/Menu/README.md

@@ -28,7 +28,7 @@ A ``MenuItem`` is its own distinct component that is used by any kind of menu ov
       <MenuItem iconBefore={Check}>A Menu Item With an Icon Before</MenuItem>
       <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
       <MenuItem disabled>A Disabled Menu Item</MenuItem>
-      <MenuItem as={Hyperlink} href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
+      <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
       <MenuItem as={Button} variant="tertiary" size="inline">A Button Menu Item</MenuItem>
       <MenuItem as={Form.Checkbox}>A Checkbox Menu Item</MenuItem>
     </Menu>

src/Menu/SelectMenu.test.jsx

@@ -15,7 +15,7 @@ const selectMenu = mount(
       <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
       <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
       <MenuItem disabled>A Disabled Menu Item</MenuItem>
-      <MenuItem as={Hyperlink} href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
+      <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
       <MenuItem>Falstaff</MenuItem>
       <MenuItem>Scipio</MenuItem>
       <MenuItem>Faustus</MenuItem>

src/Menu/select-menu.md

@@ -24,14 +24,14 @@ The ``Modal`` brings focus to the first menu element upon the click of the trigg
   <MenuItem iconBefore={Add}>A Menu Item With an Icon Before</MenuItem>
   <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
   <MenuItem disabled>A Disabled Menu Item</MenuItem>
-  <MenuItem as={Hyperlink} href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
+  <MenuItem as={Hyperlink} destination="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
 </SelectMenu>
 ```
 
 #### Linked variant
 
 ```jsx live
-<SelectMenu isLink={true} defaultMessage="Choose Your New Best Friend">
+<SelectMenu isLink defaultMessage="Choose Your New Best Friend">
   <MenuItem>Falstaff</MenuItem>
   <MenuItem>Scipio</MenuItem>
   <MenuItem defaultSelected>Faustus</MenuItem>

src/Modal/PopperElement.jsx

@@ -10,7 +10,7 @@ function PopperElement({
   const {
     styles,
     attributes,
-  } = usePopper(target, popperElement, popperOptions);
+  } = usePopper(target?.current, popperElement, popperOptions);
 
   if (!target) {
     return null;
@@ -30,7 +30,7 @@ PopperElement.defaultProps = {
 PopperElement.propTypes = {
   children: PropTypes.node,
   target: PropTypes.shape({
-    current: PropTypes.node,
+    current: PropTypes.shape({}),
   }),
   strategy: PropTypes.oneOf(['absolute', 'fixed']),
   placement: PropTypes.oneOf([

src/Modal/PopperElement.test.jsx

@@ -45,7 +45,7 @@ describe('<PopperElement />', () => {
       </PopperElement>
     ));
     const popperEl = wrapper.find('[data-test="someValue"]');
-    expect(usePopper).toHaveBeenCalledWith(targetRef, null, defaultPopperOptions);
+    expect(usePopper).toHaveBeenCalledWith(targetRef.current, null, defaultPopperOptions);
     expect(popperEl.length).toBe(1);
     expect(popperEl.props().style.someProperty).toBe('someValue');
   });

src/Pagination/Pagination.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { act } from 'react-dom/test-utils';
 import breakpoints from '../utils/breakpoints';
 import Pagination from './index';
 import Dropdown from '../Dropdown';
@@ -290,20 +291,29 @@ describe('<Pagination />', () => {
         .toEqual(`${buttonLabels.page} 1, ${buttonLabels.currentPage}, ${buttonLabels.pageOfCount} 5`);
     });
 
-    it('for the reduced variant shows dropdown button with the page count as label', () => {
+    it('for the reduced variant shows dropdown button with the page count as label', async () => {
       wrapper = mount(<Pagination variant="reduced" {...props} />);
 
       const dropdown = wrapper.find(Dropdown);
       expect(dropdown.text()).toContain(`${baseProps.state.pageIndex} of ${baseProps.pageCount}`);
 
       const dropdownButton = wrapper.find('button.dropdown-toggle');
       dropdownButton.simulate('click');
-      const dropdownChoices = wrapper.find(Dropdown.Item);
-      expect(dropdownChoices.length).toEqual(baseProps.pageCount);
+      await act(async () => {
+        const dropdownChoices = wrapper.find(Dropdown.Item);
+        expect(dropdownChoices.length).toEqual(baseProps.pageCount);
+      });
     });
 
     it('renders only previous and next buttons in minimal variant', () => {
-      wrapper = mount(<Pagination variant="minimal" />);
+      wrapper = mount(
+        <Pagination
+          variant="minimal"
+          onPageSelect={(pageNumber) => pageNumber}
+          pageCount={12}
+          paginationLabel="Label"
+        />,
+      );
       const items = wrapper.find('li.page-item');
 
       expect(items.length).toEqual(2);

src/ProductTour/CheckpointBreadcrumbs.jsx

@@ -8,8 +8,23 @@ const CheckpointBreadcrumbs = React.forwardRef(({ currentIndex, totalCheckpoints
   return (
     <span className="pgn__checkpoint-breadcrumb-container" ref={ref}>
       {new Array(totalCheckpoints).fill(0).map((v, i) => (
-        i === currentIndex ? <span className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_active" data-testid="pgn__checkpoint-breadcrumb_active" />
-          : <span className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_inactive" data-testid="pgn__checkpoint-breadcrumb_inactive" />
+        i === currentIndex
+          ? (
+            <span
+              /* eslint-disable-next-line react/no-array-index-key */
+              key={i}
+              className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_active"
+              data-testid="pgn__checkpoint-breadcrumb_active"
+            />
+          )
+          : (
+            <span
+              /* eslint-disable-next-line react/no-array-index-key */
+              key={i}
+              className="pgn__checkpoint-breadcrumb pgn__checkpoint-breadcrumb_inactive"
+              data-testid="pgn__checkpoint-breadcrumb_inactive"
+            />
+          )
       ))}
     </span>
   );

src/ProductTour/index.jsx

@@ -10,7 +10,7 @@ const ProductTour = React.forwardRef(({ tours }, ref) => {
     advanceButtonText: tourAdvanceButtonText, dismissButtonText: tourDismissButtonText,
     endButtonText: tourEndButtonText,
   } = tourValue || {};
-  const [currentCheckpointData, setCurrentCheckpointData] = useState([]);
+  const [currentCheckpointData, setCurrentCheckpointData] = useState(null);
   const [index, setIndex] = useState(0);
   const [isTourEnabled, setIsTourEnabled] = useState(false);
   const [prunedCheckpoints, setPrunedCheckpoints] = useState([]);
@@ -170,7 +170,7 @@ ProductTour.propTypes = {
       onDismiss: PropTypes.func,
       /** A function that runs when triggering the `onClick` event of the advance
       * button if the given Checkpoint is the only or last Checkpoint in a tour. */
-      onEnd: PropTypes.func.isRequired,
+      onEnd: PropTypes.func,
       /** A string that dictates the alignment of the Checkpoint around its target. */
       placement: PropTypes.oneOf([
         'top', 'top-start', 'top-end', 'right-start', 'right', 'right-end',

src/SelectableBox/tests/SelectableBox.test.jsx

@@ -28,19 +28,23 @@ describe('<SelectableBox />', () => {
       expect(tree).toMatchSnapshot();
     });
     it('correct render when type prop is changed', () => {
-      const boxWrapper = mount(<SelectableBox />);
-      expect(boxWrapper.find(Form.Radio).length).toBeGreaterThan(0);
-      boxWrapper.setProps({ type: 'anytype' });
+      const boxWrapper = mount(<SelectableRadio />);
       expect(boxWrapper.find(Form.Radio).length).toBeGreaterThan(0);
       boxWrapper.setProps({ type: 'radio' });
       expect(boxWrapper.find(Form.Radio).length).toBeGreaterThan(0);
       boxWrapper.setProps({ type: 'checkbox' });
       expect(boxWrapper.find(Form.Checkbox).length).toBeGreaterThan(0);
     });
     it('renders with radio input type if neither checkbox nor radio is passed', () => {
-      const wrapper = mount(<SelectableBox type="wrongType" />);
+      // Mock the `console.error` is intentional because an invalid `type` prop
+      // with `wrongType` specified for `ForwardRef` expects one of the ['radio','flag'] parameters.
+      // eslint-disable-next-line no-console
+      console.error = jest.fn();
+      const wrapper = mount(<SelectableRadio type="wrongType" />);
       const selectableBox = wrapper.find('input');
       expect(selectableBox.prop('type')).toEqual(radioType);
+      // eslint-disable-next-line no-console
+      console.error.mockRestore();
     });
     it('renders with checkbox input type', () => {
       const wrapper = mount(<SelectableCheckbox />);