From d0019399bfa26f133f2f2081f6efffc6002c3812 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sara=20Beatriz=20Mendon=C3=A7a=20de=20Santana?= Date: Tue, 30 Apr 2024 09:44:47 -0300 Subject: [PATCH] refactor(menu): improves types and component readbility improves types and component readbility by screen readers --- components/Menu/Menu.jsx | 50 +++++++++++---------- components/Menu/Menu.unit.test.jsx | 30 ++++++------- components/Menu/index.d.ts | 4 +- stories/Menu/Menu.mdx | 22 +++++---- stories/Menu/Menu.regression-test.story.jsx | 11 +++-- stories/Menu/Menu.stories.jsx | 26 +++++------ 6 files changed, 71 insertions(+), 72 deletions(-) diff --git a/components/Menu/Menu.jsx b/components/Menu/Menu.jsx index 98e40c55b..97f240e54 100644 --- a/components/Menu/Menu.jsx +++ b/components/Menu/Menu.jsx @@ -26,11 +26,16 @@ const Menu = (props) => { anchorEl, anchorOrigin, transformOrigin, - handleClose, + onClose, items, keepMounted, } = props; + const itemOnClick = (item) => { + const { onClick } = item; + onClick(); + onClose(); + }; return ( { anchorReference="anchorEl" anchorEl={anchorEl} open={open} - onClose={handleClose} - onBlur={handleClose} + onClose={onClose} + onBlur={onClose} anchorOrigin={anchorOrigin} transformOrigin={transformOrigin} keepMounted={keepMounted} > - {items.map((item) => { - const onClickFunc = () => { - const { handleClick } = item; - handleClose(); - handleClick(); - }; - return ( - - {item.content} - - ); - })} + {items.map((item) => ( + itemOnClick(item)} + theme={materialThemeOverride} + color="textPrimary" + > + {item.content} + + ))} ); }; @@ -71,7 +69,13 @@ Menu.propTypes = { /** If true, the component is shown. */ open: PropTypes.bool, /** Menu contents, has a content parameter, an id and a handleClick function. */ - items: PropTypes.array, + items: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + content: PropTypes.ReactNode, + onClick: PropTypes.func, + }), + ), /** An HTML element, or a function that returns one. It's used to set the position of the menu. */ anchorEl: PropTypes.object, /** The point on the anchor where the popover's anchorEl will attach to. @@ -87,7 +91,7 @@ Menu.propTypes = { /** Always keep the children in the DOM. */ keepMounted: PropTypes.bool, /** Callback fired when the component requests to be closed. */ - handleClose: PropTypes.func, + onClose: PropTypes.func, }; Menu.defaultProps = { @@ -103,7 +107,7 @@ Menu.defaultProps = { horizontal: 'left', }, keepMounted: false, - handleClose: () => {}, + onClose: () => {}, }; export default Menu; diff --git a/components/Menu/Menu.unit.test.jsx b/components/Menu/Menu.unit.test.jsx index a5dde5eca..797ee9553 100644 --- a/components/Menu/Menu.unit.test.jsx +++ b/components/Menu/Menu.unit.test.jsx @@ -4,8 +4,8 @@ import Menu from './Menu'; describe('', () => { const mockItems = [ - { id: 'item-1', content: 'Item 1', handleClick: jest.fn() }, - { id: 'item-2', content: 'Item 2', handleClick: jest.fn() }, + { id: 'item-1', content: 'Item 1', onClick: jest.fn() }, + { id: 'item-2', content: 'Item 2', onClick: jest.fn() }, ]; const mockAnchorEl = document.createElement('div'); @@ -21,7 +21,7 @@ describe('', () => { open: true, items: mockItems, anchorEl: mockAnchorEl, - handleClose: mockHandleClose, + onClose: mockHandleClose, }); mockItems.forEach((item) => { @@ -30,29 +30,29 @@ describe('', () => { }); }); - it('calls handleClose when an item is clicked', () => { + it('calls onClose when an item is clicked', () => { const { getByText } = renderMenu({ open: true, items: mockItems, anchorEl: mockAnchorEl, - handleClose: mockHandleClose, + onClose: mockHandleClose, }); mockItems.forEach((item) => { const renderedItem = getByText(item.content); fireEvent.click(renderedItem); - expect(item.handleClick).toHaveBeenCalledTimes(1); + expect(item.onClick).toHaveBeenCalledTimes(1); }); }); it('renders with anchorEl when open is true', () => { - const { getByTestId } = renderMenu({ + const { getByRole } = renderMenu({ open: true, items: mockItems, anchorEl: mockAnchorEl, - handleClose: mockHandleClose, + onClose: mockHandleClose, }); - const menu = getByTestId('menu'); + const menu = getByRole('presentation'); expect(menu).toBeInTheDocument(); }); @@ -61,20 +61,20 @@ describe('', () => { open: false, items: mockItems, anchorEl: mockAnchorEl, - handleClose: mockHandleClose, + onClose: mockHandleClose, }); const menu = queryByTestId('menu'); expect(menu).toBeNull(); }); - it('calls handleClose when onBlur event is triggered', () => { - const { getByTestId } = renderMenu({ + it('calls onClose when onBlur event is triggered', () => { + const { getByRole } = renderMenu({ open: true, items: mockItems, anchorEl: mockAnchorEl, - handleClose: mockHandleClose, + onClose: mockHandleClose, }); - const menu = getByTestId('menu'); + const menu = getByRole('presentation'); fireEvent.blur(menu); expect(mockHandleClose).toHaveBeenCalledTimes(1); }); @@ -84,7 +84,7 @@ describe('', () => { open: true, items: [], anchorEl: mockAnchorEl, - handleClose: mockHandleClose, + onClose: mockHandleClose, }); mockItems.forEach((item) => { const renderedItem = queryByText(item.content); diff --git a/components/Menu/index.d.ts b/components/Menu/index.d.ts index 1b20e6550..8cf0cfce6 100644 --- a/components/Menu/index.d.ts +++ b/components/Menu/index.d.ts @@ -4,7 +4,7 @@ import { FC } from 'react'; export interface MenuItemProps { id: string | number; content: React.ReactNode; - handleClick: Function; + onClick: Function; } export interface MenuProps { @@ -20,7 +20,7 @@ export interface MenuProps { horizontal: 'left' | 'center' | 'right'; }; keepMounted?: boolean; - handleClose?: (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => void; + onClose?: (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => void; } declare const Menu: FC; diff --git a/stories/Menu/Menu.mdx b/stories/Menu/Menu.mdx index b2f71a9d6..2e044b276 100644 --- a/stories/Menu/Menu.mdx +++ b/stories/Menu/Menu.mdx @@ -42,10 +42,9 @@ export default function BasicMenu() { return (
diff --git a/stories/Menu/Menu.regression-test.story.jsx b/stories/Menu/Menu.regression-test.story.jsx index 11057735d..4c37d19fe 100644 --- a/stories/Menu/Menu.regression-test.story.jsx +++ b/stories/Menu/Menu.regression-test.story.jsx @@ -12,12 +12,12 @@ const menuItems = [ { id: 'test-candidate', content: 'Testar candidato', - handleClick: () => {}, + onClick: () => {}, }, { id: 'print-cv', content: 'Imprimir currículo', - handleClick: () => {}, + onClick: () => {}, }, ]; @@ -34,10 +34,9 @@ const Template = (args) => { return (