GraphBurgerMenu: Add tests

Unit tests for GraphBurgerMenu

CMK-37026

Change-Id: I717417f3a4938efd9b0ee016be5d64854c2fa83a

Author: lpetrora

packages/cmk-frontend-vue/src/graphing/components/GraphBurgerMenu.vue

@@ -7,33 +7,61 @@ conditions defined in the file COPYING, which is part of this source code packag
 import CmkIcon from 'cmk-ui-library/components/CmkIcon/CmkIcon.vue'
 import CmkMultitoneIcon from 'cmk-ui-library/components/CmkIcon/CmkMultitoneIcon.vue'
 import CmkSpace from 'cmk-ui-library/components/CmkSpace.vue'
-import { onUnmounted, ref } from 'vue'
+import { onUnmounted, ref, watch } from 'vue'
 
 import type { BurgerMenuCallable, BurgerMenuGroup } from '../types'
 import { BOTTOM_SCREEN_MARGIN } from './constants'
 
-withDefaults(defineProps<{ groups?: BurgerMenuGroup[]; scrollable?: boolean }>(), {
-  groups: () => [],
-  scrollable: true
-})
+interface BurgerMenuProps {
+  ariaLabel?: string | undefined
+  groups?: BurgerMenuGroup[]
+  scrollable?: boolean
+}
+
+const { groups = [], ariaLabel, scrollable = true } = defineProps<BurgerMenuProps>()
 
 const emit = defineEmits<{ doAction: [onClick: BurgerMenuCallable] }>()
 
 const isOpen = ref(false)
 const containerRef = ref<HTMLElement | null>(null)
-
-// Consumed by the <style> block below via v-bind().
-const viewportBottomMargin = `${BOTTOM_SCREEN_MARGIN}px`
+const dropdownMaxHeight = ref<number | null>(null)
 
 function onDocumentClick(e: MouseEvent) {
   if (containerRef.value && !containerRef.value.contains(e.target as Node)) {
     isOpen.value = false
   }
 }
 
+function onDocumentKeydown(e: KeyboardEvent) {
+  if (e.key === 'Escape') {
+    isOpen.value = false
+  }
+}
+
+function updateDropdownMaxHeight() {
+  if (!scrollable || !containerRef.value) {
+    dropdownMaxHeight.value = null
+    return
+  }
+  dropdownMaxHeight.value =
+    window.innerHeight - containerRef.value.getBoundingClientRect().bottom - BOTTOM_SCREEN_MARGIN
+}
+
+watch(isOpen, (open) => {
+  if (open) {
+    updateDropdownMaxHeight()
+    window.addEventListener('resize', updateDropdownMaxHeight)
+  } else {
+    window.removeEventListener('resize', updateDropdownMaxHeight)
+  }
+})
+
 document.addEventListener('click', onDocumentClick)
+document.addEventListener('keydown', onDocumentKeydown)
 onUnmounted(() => {
   document.removeEventListener('click', onDocumentClick)
+  document.removeEventListener('keydown', onDocumentKeydown)
+  window.removeEventListener('resize', updateDropdownMaxHeight)
 })
 
 function doAction(onClick: BurgerMenuCallable) {
@@ -48,6 +76,7 @@ function doAction(onClick: BurgerMenuCallable) {
       class="graphing-graph-burger-menu__trigger"
       :class="{ 'graphing-graph-burger-menu__trigger_open': isOpen }"
       :aria-expanded="isOpen"
+      :aria-label="ariaLabel"
       tabindex="0"
       @click="isOpen = !isOpen"
     >
@@ -58,6 +87,11 @@ function doAction(onClick: BurgerMenuCallable) {
       v-if="isOpen"
       class="graphing-graph-burger-menu__dropdown"
       :class="{ 'graphing-graph-burger-menu__dropdown_scrollable': scrollable }"
+      :style="
+        scrollable && dropdownMaxHeight !== null
+          ? { maxHeight: `${dropdownMaxHeight}px` }
+          : undefined
+      "
     >
       <ul
         v-for="group in groups"
@@ -148,27 +182,6 @@ function doAction(onClick: BurgerMenuCallable) {
   overflow-y: auto;
 }
 
-/* Sized and placed by the layout engine: correct on scroll, resize and zoom, no JS. */
-@supports (anchor-name: --x) and (anchor-scope: all) {
-  .graphing-graph-burger-menu {
-    anchor-name: --graphing-graph-burger-menu-anchor;
-
-    /* Confine the anchor name so each menu tethers to its own trigger, not a single shared one. */
-    anchor-scope: --graphing-graph-burger-menu-anchor;
-  }
-
-  .graphing-graph-burger-menu__dropdown_scrollable {
-    position: fixed;
-    position-anchor: --graphing-graph-burger-menu-anchor;
-    position-area: block-end span-inline-start;
-    inset: auto;
-    block-size: fit-content;
-    /* -1px overlaps the trigger's bottom border, matching the static top offset. */
-    margin-block: -1px v-bind(viewportBottomMargin);
-    margin-inline-end: 10px;
-  }
-}
-
 .graphing-graph-burger-menu__group {
   list-style-type: none;
   padding-left: 0 !important;

packages/cmk-frontend-vue/src/graphing/components/GraphFigure/GraphFigure.vue

@@ -5,6 +5,7 @@ conditions defined in the file COPYING, which is part of this source code packag
 -->
 <script setup lang="ts">
 import CmkIcon from 'cmk-ui-library/components/CmkIcon'
+import usei18n from 'cmk-ui-library/lib/i18n'
 import { LOADING_AFFORDANCE_DELAY_MS, useDelayedFlag } from 'cmk-ui-library/lib/useDelayedFlag'
 import { useResizeObserver } from 'cmk-ui-library/lib/useResizeObserver'
 import useTimer from 'cmk-ui-library/lib/useTimer.ts'
@@ -26,6 +27,8 @@ import GraphLegendCompact from '../legend/GraphLegendCompact.vue'
 import { computeEpochTimeRange } from './computeEpochTimeRange'
 import type { GraphFigureProps } from './types.ts'
 
+const { _t } = usei18n()
+
 const MIN_FIGURE_SIZE = 50
 const REFRESH_INTERVAL_MS = 60_000
 const CONSOLIDATION_FUNCTION: ConsolidationFn = 'max'
@@ -196,6 +199,7 @@ onBeforeUnmount(() => {
         <GraphTimestamp v-if="showTimestamp" :time-range="graph.timeRange" />
         <GraphBurgerMenu
           v-if="showBurgerMenu"
+          :aria-label="_t('Action menu')"
           class="graphing-graph-figure__burger-menu"
           :groups="burgerMenuGroups"
         />

packages/cmk-frontend-vue/src/graphing/components/GraphHeader.vue

@@ -95,7 +95,7 @@ const resolutionLabel = computed(() =>
 <template>
   <div class="graphing-graph-header" :class="{ 'graphing-graph-header--compact': !!isCompact }">
     <GraphTitle v-if="showTitle" :title="title ?? ''" :is-compact="!!isCompact" />
-    <div class="graphing-graph-header__controls">
+    <div class="graphing-graph-header__controls" role="group" :aria-label="_t('Graph controls')">
       <template v-if="showConsolidation">
         <span class="graphing-graph-header__values-label">{{ _t('Graph values') }}</span>
         <CmkDropdown
@@ -120,6 +120,7 @@ const resolutionLabel = computed(() =>
       <GraphBurgerMenu
         v-if="showBurgerMenu"
         :groups="burgerMenuGroups ?? []"
+        :aria-label="_t('Action menu')"
         @do-action="(onClick) => emit('doAction', onClick)"
       />
     </div>

packages/cmk-frontend-vue/tests/graphing/components/GraphBurgerMenu.test.ts

@@ -22,51 +22,71 @@ const GROUPS: BurgerMenuGroup[] = [
   }
 ]
 
-test('renders a trigger button', () => {
-  render(GraphBurgerMenu, { props: { groups: GROUPS } })
-  expect(screen.getByRole('button')).toBeInTheDocument()
+const ARIA_LABEL = 'Action menu'
+
+test('exposes the trigger button via its ariaLabel', () => {
+  render(GraphBurgerMenu, { props: { groups: GROUPS, ariaLabel: ARIA_LABEL } })
+  expect(screen.getByRole('button', { name: ARIA_LABEL })).toBeInTheDocument()
 })
 
 test('dropdown is not visible initially', () => {
-  render(GraphBurgerMenu, { props: { groups: GROUPS } })
+  render(GraphBurgerMenu, { props: { groups: GROUPS, ariaLabel: ARIA_LABEL } })
   expect(screen.queryByText('Add to dashboard')).not.toBeInTheDocument()
 })
 
 test('clicking the trigger shows the dropdown with group headings and actions', async () => {
-  render(GraphBurgerMenu, { props: { groups: GROUPS } })
-  await fireEvent.click(screen.getByRole('button'))
+  render(GraphBurgerMenu, { props: { groups: GROUPS, ariaLabel: ARIA_LABEL } })
+  await fireEvent.click(screen.getByRole('button', { name: ARIA_LABEL }))
   expect(screen.getByText('Add to dashboard')).toBeInTheDocument()
   expect(screen.getByRole('button', { name: 'Dashboard One' })).toBeInTheDocument()
   expect(screen.getByText('Export')).toBeInTheDocument()
 })
 
 test('clicking an action emits doAction with its onClick and closes the dropdown', async () => {
-  const { emitted } = render(GraphBurgerMenu, { props: { groups: GROUPS } })
-  await fireEvent.click(screen.getByRole('button'))
+  const { emitted } = render(GraphBurgerMenu, { props: { groups: GROUPS, ariaLabel: ARIA_LABEL } })
+  await fireEvent.click(screen.getByRole('button', { name: ARIA_LABEL }))
   await fireEvent.click(screen.getByRole('button', { name: 'Dashboard One' }))
   expect(emitted().doAction![0]).toEqual([GROUPS[0]!.actions[0]!.onClick])
   expect(screen.queryByText('Dashboard One')).not.toBeInTheDocument()
 })
 
 test('clicking outside the component closes the dropdown', async () => {
-  render(GraphBurgerMenu, { props: { groups: GROUPS } })
-  await fireEvent.click(screen.getByRole('button'))
+  render(GraphBurgerMenu, { props: { groups: GROUPS, ariaLabel: ARIA_LABEL } })
+  await fireEvent.click(screen.getByRole('button', { name: ARIA_LABEL }))
   expect(screen.getByText('Add to dashboard')).toBeInTheDocument()
   await fireEvent.click(document.body)
   expect(screen.queryByText('Add to dashboard')).not.toBeInTheDocument()
 })
 
-test.each([true, false])(
-  'reflects the scrollable prop on the dropdown class (scrollable=%s)',
-  async (scrollable) => {
-    render(GraphBurgerMenu, { props: { groups: GROUPS, scrollable } })
-    await fireEvent.click(screen.getByRole('button'))
+test('pressing escape key closes the dropdown', async () => {
+  render(GraphBurgerMenu, { props: { groups: GROUPS, ariaLabel: ARIA_LABEL } })
+  await fireEvent.click(screen.getByRole('button', { name: ARIA_LABEL }))
+  expect(screen.getByText('Add to dashboard')).toBeInTheDocument()
+  await fireEvent.keyDown(document.body, { key: 'Escape', code: 'Escape' })
+  expect(screen.queryByText('Add to dashboard')).not.toBeInTheDocument()
+})
+
+test('constrains the dropdown height to the remaining viewport space when scrollable', async () => {
+  vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(500)
+  vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
+    bottom: 100
+  } as DOMRect)
 
-    const dropdown = screen
-      .getByText('Add to dashboard')
-      .closest('.graphing-graph-burger-menu__dropdown')
-    expect(dropdown?.classList.contains('graphing-graph-burger-menu__dropdown_scrollable')).toBe(
-      scrollable
-    )
-  }
-)
+  render(GraphBurgerMenu, { props: { groups: GROUPS, scrollable: true, ariaLabel: ARIA_LABEL } })
+  await fireEvent.click(screen.getByRole('button', { name: ARIA_LABEL }))
+
+  const dropdown = screen
+    .getByText('Add to dashboard')
+    .closest('.graphing-graph-burger-menu__dropdown')
+  expect(dropdown).toHaveStyle({ maxHeight: '360px' })
+})
+
+test('does not constrain the dropdown height when scrollable is disabled', async () => {
+  render(GraphBurgerMenu, { props: { groups: GROUPS, scrollable: false, ariaLabel: ARIA_LABEL } })
+  await fireEvent.click(screen.getByRole('button', { name: ARIA_LABEL }))
+
+  const dropdown = screen
+    .getByText('Add to dashboard')
+    .closest('.graphing-graph-burger-menu__dropdown')
+  expect((dropdown as HTMLElement).style.maxHeight).toBe('')
+})

packages/cmk-frontend-vue/tests/graphing/components/GraphHeader.test.ts

@@ -119,7 +119,7 @@ test('hides the zoom selector when showControls is false', () => {
   expect(screen.queryByRole('switch')).not.toBeInTheDocument()
 })
 
-test('shows the burger action menu when showBurgerMenu is set', async () => {
+test('shows the burger action menu when showBurgerMenu is set - BP-C01', async () => {
   const groups: BurgerMenuGroup[] = [
     {
       heading: 'Export',
@@ -134,3 +134,39 @@ test('shows the burger action menu when showBurgerMenu is set', async () => {
 
   expect(screen.getByText('Export')).toBeInTheDocument()
 })
+
+test('exposes the controls as an accessible group', () => {
+  render(GraphHeader, { props: { showBurgerMenu: true, burgerMenuGroups: [] } })
+
+  expect(screen.getByRole('group', { name: 'Graph controls' })).toBeInTheDocument()
+})
+
+test('draws the burger menu at the right-hand end of the header', () => {
+  const groups: BurgerMenuGroup[] = [
+    {
+      heading: 'Export',
+      actions: [{ label: 'Export as JSON', ariaLabel: 'Export as JSON', onClick: vi.fn() }]
+    }
+  ]
+  render(GraphHeader, {
+    props: {
+      showTitle: true,
+      title: 'CPU utilization',
+      showConsolidation: true,
+      showBurgerMenu: true,
+      burgerMenuGroups: groups
+    }
+  })
+
+  const title = screen.getByText('CPU utilization')
+  const dropdown = screen.getByRole('combobox', { name: 'Graph values' })
+  const zoomSwitch = screen.getByRole('switch')
+  const burgerMenuButton = screen.getByRole('button')
+
+  // The header lays its children out left to right, so DOM order matches
+  // visual order. The burger menu must follow every other control to end
+  // up drawn furthest to the right.
+  for (const control of [title, dropdown, zoomSwitch]) {
+    expect(control.compareDocumentPosition(burgerMenuButton)).toBe(Node.DOCUMENT_POSITION_FOLLOWING)
+  }
+})

packages/cmk-frontend-vue/tests/graphing/components/GraphPanel.test.ts

@@ -203,7 +203,7 @@ test('does not render GraphBurgerMenu when showBurgerMenu is not set', () => {
       interaction: INTERACTION_NONE
     }
   })
-  expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  expect(screen.queryByRole('button', { name: 'Action menu' })).not.toBeInTheDocument()
 })
 
 test('does not render GraphBurgerMenu when the burger interaction is disabled', () => {
@@ -216,10 +216,10 @@ test('does not render GraphBurgerMenu when the burger interaction is disabled',
       interaction: INTERACTION_NONE
     }
   })
-  expect(screen.queryByRole('button')).not.toBeInTheDocument()
+  expect(screen.queryByRole('button', { name: 'Action menu' })).not.toBeInTheDocument()
 })
 
-test('renders GraphBurgerMenu when the burger interaction is enabled', () => {
+test('renders GraphBurgerMenu when the burger interaction is enabled, and is accessible by role="button" and its "Action menu" aria label', () => {
   render(GraphPanel, {
     props: {
       metrics: [CPU],
@@ -229,7 +229,7 @@ test('renders GraphBurgerMenu when the burger interaction is enabled', () => {
       interaction: { ...INTERACTION_NONE, burger: 'enabled' }
     }
   })
-  expect(screen.getByRole('button')).toBeInTheDocument()
+  expect(screen.getByRole('button', { name: 'Action menu' })).toBeInTheDocument()
 })
 
 test('a do-action from the header runs the callback with the graph the backends address', async () => {