From 51b3116730d963d1ef67fb23b51a4684fc35ed0d Mon Sep 17 00:00:00 2001
From: Josh Hunt <joshhunt@users.noreply.github.com>
Date: Thu, 6 Jun 2024 12:10:11 +0100
Subject: [PATCH] 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            | 72 +++++++++++++++++++
 .../app/core/services/mousetrap/Mousetrap.ts  |  6 +-
 public/app/core/services/mousetrap/index.ts   |  4 +-
 3 files changed, 75 insertions(+), 7 deletions(-)
 create mode 100644 e2e/various-suite/keybinds.spec.ts

diff --git a/e2e/various-suite/keybinds.spec.ts b/e2e/various-suite/keybinds.spec.ts
new file mode 100644
index 00000000000..9576c992006
--- /dev/null
+++ b/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);
+  });
+});
diff --git a/public/app/core/services/mousetrap/Mousetrap.ts b/public/app/core/services/mousetrap/Mousetrap.ts
index 24eb7928861..3f7d1503135 100644
--- a/public/app/core/services/mousetrap/Mousetrap.ts
+++ b/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;
diff --git a/public/app/core/services/mousetrap/index.ts b/public/app/core/services/mousetrap/index.ts
index a18401d74e7..ddbd8d20ade 100644
--- a/public/app/core/services/mousetrap/index.ts
+++ b/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);