Files
freeCodeCamp/cypress/integration/default/learn/challenges/multifile.js
Oliver Eyton-Williams 15309a88d0 fix: update lower jaw on ctrl enter (#47463)
* fix: update jaw on all ctrl-enter presses

* fix: show running tests while hiding feedback

Screenreaders still announcing running tests and then the output, and
the display now stops showing a flash of the new feedback message

* refactor: camelCase

* refactor: clean up and reduce renders

previousHint isn't really state, insofar as it changing should not
trigger a new render - a ref does the trick.

* chore: remove log

* fix: use ref to track latest attempts prop

* fix: allow lower jaw to trigger viewzone updates

React.render's callback cannot be relied on. It does not necessarily
get called on every update to the rendered element.

updateContainer is called on every render, so the editor will be
updated.

* refactor: attemptsNumber -> attempts

* fix: do not render on attempt changes

* refactor: more camelCase

* fix: try to prevent previous hint rendering

Co-authored-by:
Manabu Matsumoto <mmatsumoto1026@gmail.com>

* test: resetting of lower jaw

* fix: reset lower jaw when step is reset

* test: check congrats message appears on completion

* fix: hide feedback after reset

* fix: leave focus in the editor after passing tests

This is an attempt to work around a JAWS issue whereby the submit
shortcut (ctrl+enter) is ignored after the user passes all tests.

* test: submit button receives focus when tests pass

* fix: focus submit button when tests pass

Co-authored-by: Bruce Blaser <bbsmooth@gmail.com>

Co-authored-by: Bruce Blaser <bbsmooth@gmail.com>
2022-09-15 12:44:06 -05:00

62 lines
2.2 KiB
JavaScript

import translations from '../../../../../client/i18n/locales/english/translations.json';
const location =
'/learn/2022/responsive-web-design/learn-accessibility-by-building-a-quiz/step-2';
const selectors = {
testButton: '[data-cy=run-tests-button]',
monacoTabs: '.monaco-editor-tabs',
signInButton: '#action-buttons-container a[href$="/signin"]',
submitButton: '[data-cy=submit-button]'
};
describe('Challenge with multifile editor', () => {
before(() => {
cy.visit(location);
});
it('renders the file tab buttons', () => {
cy.get(selectors.monacoTabs).contains('index.html');
cy.get(selectors.monacoTabs).contains('styles.css');
});
it('checks for correct text at different widths', () => {
cy.viewport(768, 660);
cy.get(selectors.testButton).contains('Check Your Code (Ctrl + Enter)');
cy.viewport(767, 660);
cy.get(selectors.testButton)
.should('not.contain.text', '(Ctrl + Enter)')
.contains('Check Your Code');
});
it('resets the lower jaw when prompted', () => {
cy.get('[data-cy=failing-test-feedback]').should('not.exist');
cy.contains('Check Your Code').click();
cy.get('[data-cy=failing-test-feedback]').should('be.visible');
cy.contains('Restart Step').click();
cy.get('[data-cy=reset-modal-confirm').click();
cy.get('[data-cy=failing-test-feedback]').should('not.exist');
});
// Page will change after this test. If your test requires page used in previous
// tests make sure it is above this one
it('prompts unauthenticated user to sign in to save progress', () => {
cy.visit(location);
cy.focused().type('{end}{enter}<meta charset="UTF-8" />{ctrl+enter}');
cy.get(selectors.signInButton).contains(translations.learn['sign-in-save']);
cy.contains(translations.learn['congratulations']);
cy.get(selectors.signInButton).click();
cy.go('back');
cy.get(selectors.signInButton).should('not.exist');
});
it('focuses the submit button after testing a valid solution', () => {
cy.visit(location);
cy.focused().type('{end}{enter}<meta charset="UTF-8" />');
cy.get(selectors.submitButton).should('not.be.focused');
cy.get(selectors.testButton).click();
cy.get(selectors.submitButton).should('be.focused');
});
});