Keybinds: E2E tests (#88752)

* Attempt at a keybinds e2e test

* another one, thank you

* polish e2e tests, remove console.log

* an extra test

* remove anti-patterns

e2e/various-suite/keybinds.spec.ts

@@ -0,0 +1,72 @@
+import { e2e } from '../utils';
+import { fromBaseUrl } from '../utils/support/url';
+
+describe('Keyboard shortcuts', () => {
+  beforeEach(() => {
+    e2e.flows.login(Cypress.env('USERNAME'), Cypress.env('PASSWORD'));
+
+    cy.visit(fromBaseUrl('/'));
+
+    // wait for the page to load
+    e2e.components.Panels.Panel.title('Latest from the blog').should('be.visible');
+  });
+
+  it('sequence shortcuts should work', () => {
+    cy.get('body').type('ge');
+    e2e.pages.Explore.General.container().should('be.visible');
+
+    cy.get('body').type('gp');
+    e2e.components.UserProfile.preferencesSaveButton().should('be.visible');
+
+    cy.get('body').type('gh');
+    e2e.components.Panels.Panel.title('Latest from the blog').should('be.visible');
+  });
+
+  it('ctrl+z should zoom out the time range', () => {
+    cy.get('body').type('ge');
+    e2e.pages.Explore.General.container().should('be.visible');
+
+    // Time range is 1 minute, so each shortcut press should jump back or forward by 1 minute
+    e2e.flows.setTimeRange({
+      from: '2024-06-05 10:05:00',
+      to: '2024-06-05 10:06:00',
+      zone: 'Browser',
+    });
+    e2e.components.TimePicker.fromField().should('not.exist');
+
+    cy.get('body').type('{ctrl}z');
+    let expectedRange = `Time range selected: 2024-06-05 10:03:30 to 2024-06-05 10:07:30`;
+    e2e.components.TimePicker.openButton().should('have.attr', 'aria-label', expectedRange);
+  });
+
+  it('multiple time range shortcuts should work', () => {
+    cy.get('body').type('ge');
+    e2e.pages.Explore.General.container().should('be.visible');
+
+    // Time range is 1 minute, so each shortcut press should jump back or forward by 1 minute
+    e2e.flows.setTimeRange({
+      from: '2024-06-05 10:05:00',
+      to: '2024-06-05 10:06:00',
+      zone: 'Browser',
+    });
+    e2e.components.TimePicker.fromField().should('not.exist');
+
+    cy.log('Trying one shift-left');
+    cy.get('body').type('t{leftarrow}');
+    let expectedRange = `Time range selected: 2024-06-05 10:04:00 to 2024-06-05 10:05:00`; // 1 min back
+    e2e.components.TimePicker.openButton().should('have.attr', 'aria-label', expectedRange);
+
+    cy.log('Trying two shift-lefts');
+    cy.get('body').type('t{leftarrow}');
+    cy.get('body').type('t{leftarrow}');
+    expectedRange = `Time range selected: 2024-06-05 10:02:00 to 2024-06-05 10:03:00`; // 2 mins back
+    e2e.components.TimePicker.openButton().should('have.attr', 'aria-label', expectedRange);
+
+    cy.log('Trying two shift-lefts and a shift-right');
+    cy.get('body').type('t{leftarrow}');
+    cy.get('body').type('t{leftarrow}');
+    cy.get('body').type('t{rightarrow}');
+    expectedRange = `Time range selected: 2024-06-05 10:01:00 to 2024-06-05 10:02:00`; // 2 mins back, 1 min forward (1 min back total)
+    e2e.components.TimePicker.openButton().should('have.attr', 'aria-label', expectedRange);
+  });
+});

public/app/core/services/mousetrap/Mousetrap.ts

@@ -405,7 +405,7 @@ function belongsTo(element: null | ParentNode | Element | Document, ancestor: El
   return belongsTo(element.parentNode, ancestor);
 }
 
-class Mousetrap {
+export class Mousetrap {
   target: HTMLElement | Document;
 
   /**
@@ -971,7 +971,3 @@ class Mousetrap {
     REVERSE_MAP = null;
   };
 }
-
-const mousetrapInstance = new Mousetrap(document);
-
-export default mousetrapInstance;

public/app/core/services/mousetrap/index.ts

@@ -1,3 +1,3 @@
-import mousetrapInstance from './Mousetrap';
+import { Mousetrap } from './Mousetrap';
 
-export const mousetrap = mousetrapInstance;
+export const mousetrap = new Mousetrap(document);