refactor: code refactoring

openedx · Apr 25, 2023 · d3d54d4 · d3d54d4
1 parent 08a034a
commit d3d54d4
Show file tree

Hide file tree

Showing 9 changed files with 22 additions and 10 deletions.
diff --git a/src/Menu/README.md b/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="a" href="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>

diff --git a/src/Menu/SelectMenu.test.jsx b/src/Menu/SelectMenu.test.jsx
@@ -3,7 +3,6 @@ import { mount } from 'enzyme';
 import renderer from 'react-test-renderer';
 import { Add, Check } from '../../icons';
 import { MenuItem, SelectMenu } from '..';
-import Hyperlink from '../Hyperlink';
 import Button from '../Button';
 
 const app = document.createElement('div');
@@ -15,7 +14,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="a" href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
       <MenuItem>Falstaff</MenuItem>
       <MenuItem>Scipio</MenuItem>
       <MenuItem>Faustus</MenuItem>

diff --git a/src/Menu/select-menu.md b/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="a" href="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 defaultMessage="Choose Your New Best Friend">
   <MenuItem>Falstaff</MenuItem>
   <MenuItem>Scipio</MenuItem>
   <MenuItem defaultSelected>Faustus</MenuItem>

diff --git a/src/Modal/PopperElement.jsx b/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,8 @@ PopperElement.defaultProps = {
 PopperElement.propTypes = {
   children: PropTypes.node,
   target: PropTypes.shape({
-    current: PropTypes.node,
+    // eslint-disable-next-line react/forbid-prop-types
+    current: PropTypes.object,
   }),
   strategy: PropTypes.oneOf(['absolute', 'fixed']),
   placement: PropTypes.oneOf([

diff --git a/src/Modal/PopperElement.test.jsx b/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(<div />, null, defaultPopperOptions);
     expect(popperEl.length).toBe(1);
     expect(popperEl.props().style.someProperty).toBe('someValue');
   });

diff --git a/src/ProductTour/index.jsx b/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([]);

diff --git a/src/SelectableBox/index.jsx b/src/SelectableBox/index.jsx
@@ -48,7 +48,7 @@ const SelectableBox = React.forwardRef(({
     tabIndex: -1,
     onChange: () => {},
     ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),
-  }, null);
+  }, false);
 
   useEffect(() => {
     if (onClick && inputRef.current) {

diff --git a/src/SelectableBox/tests/SelectableBox.test.jsx b/src/SelectableBox/tests/SelectableBox.test.jsx
@@ -38,11 +38,17 @@ describe('<SelectableBox />', () => {
       expect(boxWrapper.find(Form.Checkbox).length).toBeGreaterThan(0);
     });
     it('renders with radio input type if neither checkbox nor radio is passed', () => {
+      // Hiding 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(
         <SelectableBox type="wrongType">SelectableBox</SelectableBox>,
       );
       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 />);

diff --git a/src/SelectableBox/tests/SelectableBoxSet.test.jsx b/src/SelectableBox/tests/SelectableBoxSet.test.jsx
@@ -71,11 +71,17 @@ describe('<SelectableBox.Set />', () => {
       expect(selectableBoxSet.length).toEqual(1);
     });
     it('renders with radio type if neither checkbox nor radio is passed', () => {
+      // Hiding the `console.error` is intentional because an invalid `type` prop
+      // with type `text` specified for `ForwardRef` expects one of the ['radio','checkbox'] parameters.
+      // eslint-disable-next-line no-console
+      console.error = jest.fn();
       const wrapper = mount(
         <SelectableCheckboxSet type="text">SelectableCheckboxSet</SelectableCheckboxSet>,
       );
       const selectableBoxSet = wrapper.find(Form.RadioSet);
       expect(selectableBoxSet.length).toEqual(1);
+      // eslint-disable-next-line no-console
+      console.error.mockRestore();
     });
     it('renders with radio type', () => {
       const wrapper = mount(