add menu item tests

tests/unit/design-system/components/menu-item/MenuItem.spec.jsx

@@ -0,0 +1,74 @@
+import { render, fireEvent, screen } from '@testing-library/react'
+import MenuItem from '~scss-components/menu-item/MenuItem'
+
+const resourceMenuItemTitle = 'Lesson'
+
+const icon = <svg data-testid='lesson-icon' />
+
+const checkbox = <input type='checkbox' />
+
+const additionalInfo = 'This is a lesson'
+
+describe('MenuItem Component', () => {
+  test('should render menu item', () => {
+    render(<MenuItem title={resourceMenuItemTitle} />)
+    expect(screen.getByText(resourceMenuItemTitle)).toBeInTheDocument()
+  })
+
+  test('should call onClick when menu item is clicked', () => {
+    const onClick = vi.fn()
+    render(<MenuItem title={resourceMenuItemTitle} onClick={onClick} />)
+    fireEvent.click(screen.getByText(resourceMenuItemTitle))
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  test('should render svg graphics', () => {
+    render(<MenuItem title={resourceMenuItemTitle} graphics={icon} />)
+    expect(screen.getByTestId('lesson-icon')).toBeInTheDocument()
+  })
+
+  test('should render checkbox', () => {
+    render(<MenuItem title={resourceMenuItemTitle} graphics={checkbox} />)
+    expect(screen.getByRole('checkbox')).toBeInTheDocument()
+  })
+
+  test('should check checkbox when menu item clicked', () => {
+    render(<MenuItem title={resourceMenuItemTitle} graphics={checkbox} />)
+    fireEvent.click(screen.getByText(resourceMenuItemTitle))
+    expect(screen.getByRole('checkbox')).toBeChecked()
+  })
+
+  test('should display close button when removal is enabled', () => {
+    const { container } = render(
+      <MenuItem title={resourceMenuItemTitle} onRemove={() => {}} />
+    )
+    const closeButton = container.querySelector('.s2s-item__close')
+
+    expect(closeButton).toBeInTheDocument()
+  })
+
+  test('should not display close button when dropdown is enabled', () => {
+    const { container } = render(
+      <MenuItem title={resourceMenuItemTitle} isDropdown onRemove={() => {}} />
+    )
+    const closeButton = container.querySelector('.s2s-item__close')
+
+    expect(closeButton).not.toBeInTheDocument()
+  })
+
+  test('should call onRemove when close button is clicked', () => {
+    const onRemove = vi.fn()
+    const { container } = render(
+      <MenuItem title={resourceMenuItemTitle} onRemove={onRemove} />
+    )
+    fireEvent.click(container.querySelector('.s2s-item__close'))
+    expect(onRemove).toHaveBeenCalled()
+  })
+
+  test('should render additional info', () => {
+    render(
+      <MenuItem title={resourceMenuItemTitle} additionalInfo={additionalInfo} />
+    )
+    expect(screen.getByText(additionalInfo)).toBeInTheDocument()
+  })
+})

tests/unit/design-system/components/menu/Menu.spec.jsx

@@ -1,4 +1,4 @@
-import { render, fireEvent, screen, waitFor } from '@testing-library/react'
+import { render, fireEvent, screen } from '@testing-library/react'
 import Menu from '~scss-components/menu/Menu'
 
 const resourcesMenuItems = [
@@ -19,18 +19,9 @@ const resourcesMenuItemsWithAdditionalInfo = [
   { title: 'Lesson', additionalInfo: 'This is a lesson' }
 ]
 
-const circleIcon = (
-  <svg
-    height='100'
-    width='100'
-    xmlns='http://www.w3.org/2000/svg'
-    data-testid='lesson-icon'
-  >
-    <circle r='45' cx='50' cy='50' fill='red' />
-  </svg>
-)
-
-const resourcesMenuItemsWithIcon = [{ title: 'Lesson', graphics: circleIcon }]
+const lessonIcon = <svg data-testid='lesson-icon' />
+
+const resourcesMenuItemsWithIcon = [{ title: 'Lesson', graphics: lessonIcon }]
 
 const noItemsCustomMessage = 'No items available.'