diff --git a/tests/unit/design-system/components/menu/Menu.spec.jsx b/tests/unit/design-system/components/menu/Menu.spec.jsx index 39ee32eba..35773880c 100644 --- a/tests/unit/design-system/components/menu/Menu.spec.jsx +++ b/tests/unit/design-system/components/menu/Menu.spec.jsx @@ -7,6 +7,31 @@ const resourcesMenuItems = [ { title: 'Attachment' } ] +const resourcesMenuItemsWithCustomArgs = [ + { title: 'Lesson', defaultOnItemClickArgs: { path: '/lesson' } } +] + +const resourcesMenuItemsWithNestedItems = [ + { title: 'Lesson', nestedMenuItems: [{ title: 'Art' }, { title: 'Math' }] } +] + +const resourcesMenuItemsWithAdditionalInfo = [ + { title: 'Lesson', additionalInfo: 'This is a lesson' } +] + +const circleIcon = ( + + + +) + +const resourcesMenuItemsWithIcon = [{ title: 'Lesson', graphics: circleIcon }] + const noItemsCustomMessage = 'No items available.' describe('Menu Component', () => { @@ -16,7 +41,6 @@ describe('Menu Component', () => { anchorEl={document.createElement('div')} setAnchorEl={() => {}} menuItems={resourcesMenuItems} - toggledItemsTitles={[]} /> ) @@ -25,7 +49,7 @@ describe('Menu Component', () => { expect(screen.getByText('Attachment')).toBeInTheDocument() }) - test('should remove item when removal is enabled', async () => { + test('should remove item when removal is enabled', () => { const { getByText } = render( { const removeButton = getByText('Clear all') fireEvent.click(removeButton) - await waitFor(() => { - expect(screen.queryByText('Lesson')).not.toBeInTheDocument() - expect(screen.queryByText('Quiz')).not.toBeInTheDocument() - expect(screen.queryByText('Attachment')).not.toBeInTheDocument() - }) + expect(screen.queryByText('Lesson')).toBeNull() + expect(screen.queryByText('Quiz')).toBeNull() + expect(screen.queryByText('Attachment')).toBeNull() }) test('should show no items message when no items left and removal is enabled', () => { @@ -58,4 +80,125 @@ describe('Menu Component', () => { expect(screen.getByText(noItemsCustomMessage)).toBeInTheDocument() }) + + test('should set anchor element when clicking the button', () => { + const setAnchorEl = vi.fn() + const handleClick = vi.fn((event) => setAnchorEl(event.currentTarget)) + + render( +
+ + +
+ ) + + const button = screen.getByText('Open Menu') + fireEvent.click(button) + expect(handleClick).toHaveBeenCalled() + expect(setAnchorEl).toHaveBeenCalledWith(button) + }) + + test('should trigger defaultOnItemClick with default arguments when a menu item is clicked', () => { + const defaultOnItemClick = vi.fn() + render( + {}} + menuItems={resourcesMenuItems} + defaultOnItemClick={defaultOnItemClick} + /> + ) + + const lesson = screen.getByText('Lesson') + fireEvent.click(lesson) + expect(defaultOnItemClick).toHaveBeenCalledWith({ title: 'Lesson' }) + }) + + test('should trigger defaultOnItemClick with custom arguments when a menu item is clicked', () => { + const defaultOnItemClick = vi.fn() + render( + {}} + menuItems={resourcesMenuItemsWithCustomArgs} + defaultOnItemClick={defaultOnItemClick} + /> + ) + + const lesson = screen.getByText('Lesson') + fireEvent.click(lesson) + expect(defaultOnItemClick).toHaveBeenCalledWith({ + title: 'Lesson', + path: '/lesson' + }) + }) + + test('should trigger defaultOnItemClick default arguments when a nested menu item is clicked', () => { + const defaultOnItemClick = vi.fn() + render( + {}} + menuItems={resourcesMenuItemsWithNestedItems} + defaultOnItemClick={defaultOnItemClick} + /> + ) + + const lesson = screen.getByText('Lesson') + fireEvent.click(lesson) + + const art = screen.getByText('Art') + fireEvent.click(art) + expect(defaultOnItemClick).toHaveBeenCalledWith({ title: 'Art' }) + }) + + test('should show nested items when a menu item is clicked', () => { + render( + {}} + menuItems={resourcesMenuItemsWithNestedItems} + /> + ) + + const lesson = screen.getByText('Lesson') + fireEvent.click(lesson) + + expect(screen.getByText('Art')).toBeInTheDocument() + expect(screen.getByText('Math')).toBeInTheDocument() + }) + + test('should display additional info when it is provided', () => { + render( + {}} + menuItems={resourcesMenuItemsWithAdditionalInfo} + /> + ) + + const lesson = screen.getByText('Lesson') + fireEvent.click(lesson) + + expect(screen.getByText('This is a lesson')).toBeInTheDocument() + }) + + test('should display icon when it is provided', () => { + render( + {}} + menuItems={resourcesMenuItemsWithIcon} + /> + ) + + const lesson = screen.getByText('Lesson') + fireEvent.click(lesson) + + expect(screen.getByTestId('lesson-icon')).toBeInTheDocument() + }) })