jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-02-15 01:00:32 -05:00
Code Issues Projects Releases Wiki Activity

fix(client): completion modal cannot be closed using Escape key (#55431)

Browse Source
This commit is contained in:
Gagan Bhullar
2024-07-16 02:51:17 -06:00
committed by GitHub
parent c7ac59faa4
commit 806706bdee
2 changed files with 45 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/templates/Challenges/components/completion-modal.tsx
View File

@@ -128,6 +128,10 @@ class CompletionModal extends Component<
}
handleKeypress(e: React.KeyboardEvent): void {
if (e.key === 'Escape') {
e.stopPropagation();
this.props.close();
}
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
e.preventDefault();
// Since Hotkeys also listens to Ctrl + Enter we have to stop this event

41
e2e/completion-modal.spec.ts
View File

@@ -1,5 +1,6 @@
import { test, expect } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
import { authedRequest } from './utils/request';
const nextChallengeURL =
'/learn/data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer';
@@ -33,6 +34,12 @@ test.describe('Challenge Completion Modal Tests (Signed Out)', () => {
await expect(page.getByTestId('completion-success-icon')).not.toBeVisible();
});
test('should close the modal after user presses escape', async ({ page }) => {
await expect(page.getByRole('dialog')).toBeVisible();
await page.keyboard.press('Escape');
await expect(page.getByRole('dialog')).not.toBeVisible();
});
test('should display the text of go to next challenge button accordingly based on device type', async ({
page,
isMobile,
@@ -96,6 +103,40 @@ test.describe('Challenge Completion Modal Tests (Signed In)', () => {
await expect(page.getByTestId('completion-success-icon')).not.toBeVisible();
});
test('should close the modal after user presses escape while having keyboard shortcuts disabled', async ({
page,
request
}) => {
await authedRequest({
request,
endpoint: 'update-my-keyboard-shortcuts',
method: 'put',
data: {
keyboardShortcuts: false
}
});
await expect(page.getByRole('dialog')).toBeVisible();
await page.keyboard.press('Escape');
await expect(page.getByRole('dialog')).not.toBeVisible();
});
test('should close the modal after user presses escape while having keyboard shortcuts enabled', async ({
page,
request
}) => {
await authedRequest({
request,
endpoint: 'update-my-keyboard-shortcuts',
method: 'put',
data: {
keyboardShortcuts: true
}
});
await expect(page.getByRole('dialog')).toBeVisible();
await page.keyboard.press('Escape');
await expect(page.getByRole('dialog')).toBeVisible();
});
test('should display the text of go to next challenge button accordingly based on device type', async ({
page,
isMobile,