gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(Cypress): hotkey tests (#43434)

Browse Source 
* 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>
This commit is contained in:
Sem Bauke
2021-09-20 20:53:42 +02:00
committed by GitHub
parent ea0802ad88
commit c0e0241440
2 changed files with 85 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/templates/Challenges/video/Show.tsx
View File

@ -112,6 +112,7 @@ class ShowVideo extends Component<ShowVideoProps, ShowVideoState> {
helpCategory
});
challengeMounted(challengeMeta.id);
this._container?.focus();
}
componentDidUpdate(prevProps: ShowVideoProps): void {

84
cypress/integration/learn/challenge-hot-keys.js Normal file
View File

@ -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');
});
});