Attempt at a keybinds e2e test

e2e/various-suite/keybinds.spec.ts

@@ -0,0 +1,69 @@
+import { e2e } from '../utils';
+import { fromBaseUrl } from '../utils/support/url';
+
+const options = {
+  defaultCommandTimeout: 5 * 1000,
+};
+
+describe('Keyboard shortcuts', options, () => {
+  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.only('time range shortcuts should work', options, async () => {
+    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')
+      .then(() => {
+        console.log('asserted closed');
+      });
+
+    cy.log('One shortcut');
+    cy.get('body').type('t{leftarrow}');
+    cy.wait(500);
+    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('Two shortcuts');
+    cy.get('body').type('t{leftarrow}');
+    cy.wait(500);
+    cy.get('body').type('t{leftarrow}');
+    cy.wait(500);
+    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('Three shortcuts');
+    cy.get('body').type('t{leftarrow}');
+    cy.wait(500);
+    cy.get('body').type('t{leftarrow}');
+    cy.wait(500);
+    cy.get('body').type('t{rightarrow}');
+    cy.wait(500);
+    expectedRange = `Time range selected: 2024-06-05 10:01:00 to 2024-06-05 10:02:00`; // 1 min back in 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;
 
   /**
@@ -588,6 +588,7 @@ class Mousetrap {
    * handles a character key event
    */
   private _handleKey = (character: string, modifiers: string[], e: KeyboardEvent) => {
+    console.log('_handleKey', e.type, character);
     let callbacks = this._getMatches(character, modifiers, e);
     let i;
     let doNotReset: Record<string, number> = {};
@@ -971,7 +972,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);