From c0e0241440bf8644d22a389817ea33026853ebaf Mon Sep 17 00:00:00 2001
From: Sem Bauke <46919888+Sembauke@users.noreply.github.com>
Date: Mon, 20 Sep 2021 20:53:42 +0200
Subject: [PATCH] feat(Cypress): hotkey tests (#43434)

* feat(Cypress): hotkey tests

* fix: test previous next for projects

* fix: link time-out firefox

* feat: test the "r" hotkey

* fix: change select back to body for now

* fix: retain navigation mode for video challenges

* test: find focused elements

* fix: move focus from panel before pressing 'r'

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* test: add hotkey test for backend

* test: remove redundant {esc} presses

* refactor: naming change

* fix: refactor properly

* fix: actually refactor it properly

Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
---
 .../src/templates/Challenges/video/Show.tsx   |  1 +
 .../integration/learn/challenge-hot-keys.js   | 84 +++++++++++++++++++
 2 files changed, 85 insertions(+)
 create mode 100644 cypress/integration/learn/challenge-hot-keys.js

diff --git a/client/src/templates/Challenges/video/Show.tsx b/client/src/templates/Challenges/video/Show.tsx
index 5ea0275421..be654f303d 100644
--- a/client/src/templates/Challenges/video/Show.tsx
+++ b/client/src/templates/Challenges/video/Show.tsx
@@ -112,6 +112,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
       helpCategory
     });
     challengeMounted(challengeMeta.id);
+    this._container?.focus();
   }
 
   componentDidUpdate(prevProps: ShowVideoProps): void {
diff --git a/cypress/integration/learn/challenge-hot-keys.js b/cypress/integration/learn/challenge-hot-keys.js
new file mode 100644
index 0000000000..eb8fa54bc5
--- /dev/null
+++ b/cypress/integration/learn/challenge-hot-keys.js
@@ -0,0 +1,84 @@
+const selectors = {
+  instructions: '.challenge-instructions',
+  instructionsPanel: '.instructions-panel',
+  editorContainer: '.monaco-editor',
+  console: '.output-text'
+};
+
+const links = {
+  classic1:
+    '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements',
+  classic2:
+    '/learn/responsive-web-design/basic-html-and-html5/headline-with-the-h2-element',
+  frontEnd1:
+    '/learn/responsive-web-design/responsive-web-design-projects/build-a-tribute-page',
+  frontEnd2:
+    '/learn/responsive-web-design/responsive-web-design-projects/build-a-survey-form',
+  backEnd1:
+    '/learn/back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice',
+  backEnd2:
+    'learn/back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice',
+  video1:
+    '/learn/scientific-computing-with-python/python-for-everybody/introduction-why-program',
+  video2:
+    'learn/scientific-computing-with-python/python-for-everybody/introduction-hardware-architecture'
+};
+
+describe('The hotkeys should work correctly', () => {
+  beforeEach(() => {
+    cy.visit(links.classic1);
+  });
+
+  it('should be possible to navigate to the next challenge/projects and previous', () => {
+    cy.focused().type('{esc}');
+    cy.focused().type('n');
+    cy.url().should('include', links.classic2);
+    cy.focused().type('p');
+    cy.url().should('include', links.classic1);
+    cy.visit(links.frontEnd1);
+    cy.focused().type('{esc}').type('n');
+    cy.url().should('include', links.frontEnd2);
+    cy.focused().type('p');
+    cy.url().should('include', links.frontEnd1);
+  });
+
+  it('should be possible to navigate to the next (and previous) video', () => {
+    cy.visit(links.video1);
+    cy.focused().type('{esc}').type('n');
+    cy.url().should('include', links.video2);
+    cy.focused().type('p');
+    cy.url().should('include', links.video1);
+  });
+
+  it('should be possible to navigate to the next (and previous) backend project', () => {
+    cy.visit(links.backEnd1);
+    cy.focused().type('{esc}').type('n');
+    cy.url().should('include', links.backEnd2);
+    cy.focused().type('p');
+    cy.url().should('include', links.backEnd1);
+  });
+
+  it('should be possible to focus on the editor with pressing "e"', () => {
+    cy.get(selectors.editorContainer).click();
+    cy.focused().as('editor').type('{esc}');
+    cy.get(selectors.instructions).click().type('e');
+    cy.get('@editor').should('have.focus');
+  });
+
+  it('should be possible to press ctrl enter to run the test', () => {
+    cy.get(selectors.instructions).click().type('{ctrl}{enter}');
+    cy.get(selectors.console).contains('// running tests');
+  });
+
+  it('should be possible to go to navigation view by pressing escape', () => {
+    cy.get(selectors.editorContainer).click();
+    cy.focused().as('editor').type('{esc}');
+    cy.get('@editor').should('not.have.focus');
+  });
+
+  it('it should be possible to focus on the instructions by pressing r', () => {
+    cy.get(selectors.editorContainer).type('{esc}');
+    cy.get(selectors.console).click().type('r');
+    cy.get(selectors.instructionsPanel).should('have.focus');
+  });
+});