Navigation: Basic e2e tests for docked mega menu (#77000)

* Navigation: Basic e2e tests for docked mega menu

* give mega menu an e2e selector

* make existing tests narrower so menu doesn't default to docked. add test for auto docking at large viewport

* use new selector in nondocked menu

e2e/various-suite/navigation.spec.ts

@@ -0,0 +1,47 @@
+import { e2e } from '../utils';
+import { fromBaseUrl } from '../utils/support/url';
+
+describe('Docked Navigation', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 800);
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+
+    cy.visit(fromBaseUrl('/'), {
+      onBeforeLoad(window) {
+        window.localStorage.setItem('grafana.featureToggles', 'dockedMegaMenu=1');
+      },
+    });
+  });
+
+  it('should remain docked when reloading the page', () => {
+    // Expand, then dock the mega menu
+    cy.get('[aria-label="Toggle menu"]').click();
+    cy.get('[aria-label="Dock menu"]').click();
+
+    e2e.components.NavMenu.Menu().should('be.visible');
+
+    cy.reload();
+    e2e.components.NavMenu.Menu().should('be.visible');
+  });
+
+  it('should remain docked when navigating to another page', () => {
+    // Expand, then dock the mega menu
+    cy.get('[aria-label="Toggle menu"]').click();
+    cy.get('[aria-label="Dock menu"]').click();
+
+    cy.contains('a', 'Administration').click();
+    e2e.components.NavMenu.Menu().should('be.visible');
+
+    cy.contains('a', 'Users').click();
+    e2e.components.NavMenu.Menu().should('be.visible');
+  });
+
+  it('should become docked at larger viewport sizes', () => {
+    e2e.components.NavMenu.Menu().should('not.exist');
+
+    cy.viewport(1920, 1080);
+    cy.reload();
+
+    e2e.components.NavMenu.Menu().should('be.visible');
+  });
+});

packages/grafana-e2e-selectors/src/selectors/components.ts

@@ -264,6 +264,7 @@ export const Components = {
     },
   },
   NavMenu: {
+    Menu: 'data-testid navigation mega-menu',
     item: 'data-testid Nav menu item',
   },
   NavToolbar: {

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.test.tsx

@@ -5,6 +5,7 @@ import { Router } from 'react-router-dom';
 import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
 
 import { NavModelItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { locationService } from '@grafana/runtime';
 
 import { TestProvider } from '../../../../../test/helpers/TestProvider';
@@ -53,7 +54,7 @@ describe('MegaMenu', () => {
   it('should render component', async () => {
     setup();
 
-    expect(await screen.findByTestId('navbarmenu')).toBeInTheDocument();
+    expect(await screen.findByTestId(selectors.components.NavMenu.Menu)).toBeInTheDocument();
     expect(await screen.findByRole('link', { name: 'Section name' })).toBeInTheDocument();
   });
 

public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx

@@ -4,6 +4,7 @@ import React, { forwardRef } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { CustomScrollbar, Icon, IconButton, useStyles2 } from '@grafana/ui';
 import { Flex } from '@grafana/ui/src/unstable';
 import { useGrafana } from 'app/core/context/GrafanaContext';
@@ -39,7 +40,7 @@ export const MegaMenu = React.memo(
     };
 
     return (
-      <div data-testid="navbarmenu" ref={ref} {...restProps}>
+      <div data-testid={selectors.components.NavMenu.Menu} ref={ref} {...restProps}>
         <div className={styles.mobileHeader}>
           <Icon name="bars" size="xl" />
           <IconButton

public/app/core/components/AppChrome/MegaMenu/MegaMenu.test.tsx

@@ -4,6 +4,7 @@ import { Router } from 'react-router-dom';
 import { getGrafanaContextMock } from 'test/mocks/getGrafanaContextMock';
 
 import { NavModelItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { locationService } from '@grafana/runtime';
 
 import { TestProvider } from '../../../../../test/helpers/TestProvider';
@@ -44,7 +45,7 @@ describe('MegaMenu', () => {
   it('should render component', async () => {
     setup();
 
-    expect(await screen.findByTestId('navbarmenu')).toBeInTheDocument();
+    expect(await screen.findByTestId(selectors.components.NavMenu.Menu)).toBeInTheDocument();
     expect(await screen.findByRole('link', { name: 'Section name' })).toBeInTheDocument();
   });
 

public/app/core/components/AppChrome/MegaMenu/NavBarMenu.tsx

@@ -6,6 +6,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import CSSTransition from 'react-transition-group/CSSTransition';
 
 import { GrafanaTheme2, NavModelItem } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
 import { CustomScrollbar, Icon, IconButton, useTheme2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 
@@ -62,7 +63,13 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
         onExited={onClose}
       >
         <FocusScope contain autoFocus>
-          <div data-testid="navbarmenu" ref={ref} {...overlayProps} {...dialogProps} className={styles.container}>
+          <div
+            data-testid={selectors.components.NavMenu.Menu}
+            ref={ref}
+            {...overlayProps}
+            {...dialogProps}
+            className={styles.container}
+          >
             <div className={styles.mobileHeader}>
               <Icon name="bars" size="xl" />
               <IconButton