public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

AppChrome/MegaMenu: Fixes issue with default state being initialised to undocked (#103507)

Browse Source 
* AppChrome/MegaMenu: Fixes default mega menu docked state

* AppChrome/MegaMenu: Fixes default mega menu docked state

* Update thresholds

* Update

* pa11y fix

* remove unnessary css

* fixed pa11y config

* try fix pa11y config + unit tests

* just increase thresholds again...

---------

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>
This commit is contained in:
Torkel Ödegaard
2025-04-07 16:00:05 +01:00
committed by GitHub
co-authored by Ashley Harrison
parent 63af403897
commit b9bc069fb9
15 changed files with 125 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/old-arch/various-suite/navigation.spec.ts
-43
View File
@@ -1,43 +0,0 @@
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('/'));
});
it('should remain docked when reloading the page', () => {
// Expand, then dock the mega menu
cy.get('[aria-label="Open 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="Open 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');
});
});
e2e/various-suite/bookmarks.spec.ts
+2 -6
View File
@@ -12,9 +12,7 @@ describe('Pin nav items', () => {
});
it('should pin the selected menu item and add it as a Bookmarks menu item child', () => {
// Open, dock and check if the mega menu is visible
cy.get('[aria-label="Open menu"]').click();
cy.get('[aria-label="Dock menu"]').click();
// Check if the mega menu is visible
e2e.components.NavMenu.Menu().should('be.visible');
// Check if the Bookmark section is visible
@@ -39,9 +37,7 @@ describe('Pin nav items', () => {
e2e.flows.setUserPreferences({ navbar: { bookmarkUrls: ['/admin'] } });
cy.reload();
// Open, dock and check if the mega menu is visible
cy.get('[aria-label="Open menu"]').click();
cy.get('[aria-label="Dock menu"]').click();
// Check if the mega menu is visible
e2e.components.NavMenu.Menu().should('be.visible');
// Check if the Bookmark section is visible and open it
e2e/various-suite/navigation.spec.ts
+41 -24
View File
@@ -3,41 +3,58 @@ import { fromBaseUrl } from '../utils/support/url';
describe('Docked Navigation', () => {
beforeEach(() => {
// This is a breakpoint where the mega menu can be docked (and docked is the default state)
cy.viewport(1280, 800);
cy.clearAllLocalStorage();
e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
cy.visit(fromBaseUrl('/'));
});
it('should remain docked when reloading the page', () => {
// Expand, then dock the mega menu
cy.get('[aria-label="Open menu"]').click();
cy.get('[aria-label="Dock menu"]').click();
it('should remain un-docked when reloading the page', () => {
// Undock the menu
cy.get('[aria-label="Undock 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="Open 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('not.exist');
});
it('Can re-dock after undock', () => {
// Undock the menu
cy.get('[aria-label="Undock menu"]').click();
cy.get('[aria-label="Open menu"]').click();
cy.get('[aria-label="Dock menu"]').click();
e2e.components.NavMenu.Menu().should('be.visible');
});
it('should remain in same state when navigating to another page', () => {
// Undock the menu
cy.get('[aria-label="Undock menu"]').click();
// Navigate
cy.get('[aria-label="Open menu"]').click();
cy.contains('a', 'Administration').click();
// Still undocked
e2e.components.NavMenu.Menu().should('not.exist');
// dock the menu
cy.get('[aria-label="Open menu"]').click();
cy.get('[aria-label="Dock menu"]').click();
// Navigate
cy.contains('a', 'Users').click();
// Still docked
e2e.components.NavMenu.Menu().should('be.visible');
});
it('should undock on smaller viewport sizes', () => {
cy.viewport(1120, 1080);
cy.reload();
e2e.components.NavMenu.Menu().should('not.exist');
});
});