From d3d54d42015728f4aef2906fb41a6d0626007e5a Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Tue, 25 Apr 2023 22:38:07 +0300 Subject: [PATCH] refactor: code refactoring --- src/Menu/README.md | 2 +- src/Menu/SelectMenu.test.jsx | 3 +-- src/Menu/select-menu.md | 4 ++-- src/Modal/PopperElement.jsx | 5 +++-- src/Modal/PopperElement.test.jsx | 2 +- src/ProductTour/index.jsx | 2 +- src/SelectableBox/index.jsx | 2 +- src/SelectableBox/tests/SelectableBox.test.jsx | 6 ++++++ src/SelectableBox/tests/SelectableBoxSet.test.jsx | 6 ++++++ 9 files changed, 22 insertions(+), 10 deletions(-) diff --git a/src/Menu/README.md b/src/Menu/README.md index a3587477ff..2f24911767 100644 --- 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 A Menu Item With an Icon Before A Menu Item With an Icon After A Disabled Menu Item - A Link Menu Item + A Link Menu Item A Button Menu Item A Checkbox Menu Item diff --git a/src/Menu/SelectMenu.test.jsx b/src/Menu/SelectMenu.test.jsx index c9b5a954b8..16cc8d6679 100644 --- 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( A Menu Item With an Icon Before A Menu Item With an Icon After A Disabled Menu Item - A Link Menu Item + A Link Menu Item Falstaff Scipio Faustus diff --git a/src/Menu/select-menu.md b/src/Menu/select-menu.md index ed90b22714..11d783e523 100644 --- 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 A Menu Item With an Icon Before A Menu Item With an Icon After A Disabled Menu Item - A Link Menu Item + A Link Menu Item ``` #### Linked variant ```jsx live - + Falstaff Scipio Faustus diff --git a/src/Modal/PopperElement.jsx b/src/Modal/PopperElement.jsx index 6a774720d2..f18e1c970a 100644 --- 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 index e1fd2366aa..2ef8c1a3db 100644 --- a/src/Modal/PopperElement.test.jsx +++ b/src/Modal/PopperElement.test.jsx @@ -45,7 +45,7 @@ describe('', () => { )); const popperEl = wrapper.find('[data-test="someValue"]'); - expect(usePopper).toHaveBeenCalledWith(targetRef, null, defaultPopperOptions); + expect(usePopper).toHaveBeenCalledWith(
, 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 index 9f04535e56..05327effa5 100644 --- 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 index 8ba2da9ae9..bf23effcbb 100644 --- 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 index b61094add8..bdab6f9b10 100644 --- a/src/SelectableBox/tests/SelectableBox.test.jsx +++ b/src/SelectableBox/tests/SelectableBox.test.jsx @@ -38,11 +38,17 @@ describe('', () => { 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, ); 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(); diff --git a/src/SelectableBox/tests/SelectableBoxSet.test.jsx b/src/SelectableBox/tests/SelectableBoxSet.test.jsx index 477b98e22f..6ee7a83eff 100644 --- a/src/SelectableBox/tests/SelectableBoxSet.test.jsx +++ b/src/SelectableBox/tests/SelectableBoxSet.test.jsx @@ -71,11 +71,17 @@ describe('', () => { 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, ); 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(