chore: improve menu and menu item tests

dhis2 · May 4, 2024 · fb7571a · fb7571a
1 parent b9ba8e7
commit fb7571a
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 17 deletions.
diff --git a/components/menu/src/menu-item/__tests__/menu-item.test.js b/components/menu/src/menu-item/__tests__/menu-item.test.js
@@ -3,19 +3,18 @@ import React from 'react'
 import { MenuItem } from '../menu-item.js'
 
 describe('Menu Component', () => {
-    it('Default menu item has aria role', () => {
+    it('Default menu item has role', () => {
         const menuItemDataTest = 'data-test-menu-item'
         const wrapper = mount(
             <MenuItem dataTest={menuItemDataTest} label="Menu item" />
         )
         const menuItem = wrapper.find({ 'data-test': menuItemDataTest })
-        expect(menuItem.prop('role')).toBe('menuitem')
-        //     expect(menuItem.prop('aria-disabled')).toBe(false)
-        //     expect(menuItem.prop('role')).not.toBe('menuitemcheckbox')
-        //
+        expect(menuItem.childAt(0).prop('role')).toBe('menuitem')
+        expect(menuItem.childAt(0).prop('aria-disabled')).toBe(undefined)
+        expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item')
     })
 
-    it('Disabled menu item has aria disabled attribute', () => {
+    it('Disabled menu item has aria-disabled attribute', () => {
         const menuItemDataTest = 'data-test-menu-item'
         const wrapper = mount(
             <MenuItem
@@ -25,9 +24,12 @@ describe('Menu Component', () => {
             />
         )
         const menuItem = wrapper.find({ 'data-test': menuItemDataTest })
-        expect(menuItem.prop('role')).toBe('menuitem')
-        // expect(menuItem.prop('role')).not.toBe('menuitemcheckbox')
-        // expect(menuItem.prop('aria-disabled')).toBe(true)
+
+        expect(menuItem.childAt(0).prop('role')).toBe('menuitem')
+        expect(menuItem.childAt(0).prop('aria-disabled')).toBe(true)
+        expect(menuItem.childAt(0).prop('aria-label')).toBe(
+            'Disabled menu item'
+        )
     })
 
     it('Toggle-able menu item has menuitemcheckbox role', () => {
@@ -37,10 +39,16 @@ describe('Menu Component', () => {
                 dataTest={menuItemDataTest}
                 label="Toggle-able menu item"
                 checkbox={true}
+                checked={false}
             />
         )
         const menuItem = wrapper.find({ 'data-test': menuItemDataTest })
-        expect(menuItem.prop('role')).toBe('menuitemcheckbox')
-        // expect(menuItem.prop('aria-disabled')).toBe(false)
+
+        expect(menuItem.childAt(0).prop('role')).not.toBe('menuitem')
+        expect(menuItem.childAt(0).prop('role')).toBe('menuitemcheckbox')
+        expect(menuItem.childAt(0).prop('aria-checked')).toBe(false)
+        expect(menuItem.childAt(0).prop('aria-label')).toBe(
+            'Toggle-able menu item'
+        )
     })
 })
diff --git a/components/menu/src/menu/__tests__/menu.test.js b/components/menu/src/menu/__tests__/menu.test.js
@@ -6,29 +6,58 @@ import { MenuSectionHeader } from '../../menu-section-header/menu-section-header
 import { Menu } from '../menu.js'
 
 describe('Menu Component', () => {
-    it('Menu has aria attributes', () => {
+    it('Menu and menu items have aria attributes', () => {
         const menuDataTest = 'data-test-menu'
         const menuItemDataTest = 'data-test-menu-item'
         const dividerDataTest = 'data-test-menu-divider'
         const wrapper = mount(
             <Menu dataTest={menuDataTest} dense={false}>
-                <MenuSectionHeader label="First - no divider above" />
-                <MenuDivider dataTest={'data-test-menu-divider'} />
+                <MenuSectionHeader label="Header" />
+                <MenuDivider dataTest={dividerDataTest} />
                 <MenuItem dataTest={menuItemDataTest} label="Menu item" />
             </Menu>
         )
         const menuElement = wrapper.find({ 'data-test': menuDataTest })
         const menuItem = wrapper.find({ 'data-test': menuItemDataTest })
         const menuDivider = wrapper.find({ 'data-test': dividerDataTest })
-        expect(menuItem.firstChild.prop('role')).toBe('menuitem')
-        expect(menuDivider.prop('role')).toBe('separator')
+
         expect(menuElement.prop('role')).toBe('menu')
+
+        expect(menuItem.childAt(0).props().role).toBe('menuitem')
+        expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item')
+        expect(menuDivider.prop('role')).toBe('separator')
     })
 
-    it('Empty menu has aria attributes', () => {
+    it('Empty menu has role menu', () => {
         const menuDataTest = 'data-test-menu'
         const wrapper = mount(<Menu dataTest={menuDataTest} dense={false} />)
         const menuElement = wrapper.find({ 'data-test': menuDataTest })
         expect(menuElement.prop('role')).toBe('menu')
     })
+
+    it('Submenu has relevant aria attributes', () => {
+        const showSubMenu = false
+        const wrapper = mount(
+            <Menu>
+                <MenuItem
+                    showSubMenu={showSubMenu}
+                    toggleSubMenu={() => jest.fn()}
+                    label="Parent of submenus"
+                >
+                    <MenuItem label="Test submenu child" />
+                </MenuItem>
+            </Menu>
+        )
+
+        const menuItem = wrapper.find({ role: 'menuitem' })
+
+        expect(menuItem.prop('aria-haspopup')).toBe('menu')
+        expect(menuItem.prop('aria-expanded')).toBe(false)
+        expect(menuItem.prop('aria-expanded')).toBe(false)
+        expect(menuItem.prop('aria-label')).toBe('Parent of submenus')
+        expect(wrapper.find({ label: 'Test submenu child' }).exists()).toBe(
+            false
+        )
+        // todo: simulate click to show submenu
+    })
 })