gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(UI): added specific label for MacOS check-code button (#54276)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Tomas Bern <bekjon_98@mail.ru>
This commit is contained in:
Giovanni Ruberto
2024-04-05 08:49:32 +02:00
committed by GitHub
parent 387f938975
commit c82a57e1d3
4 changed files with 24 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/i18n/locales/english/translations.json
+1
View File
@@ -57,6 +57,7 @@
"run-test": "Run the Tests (Ctrl + Enter)",
"check-code": "Check Your Code (Ctrl + Enter)",
"check-code-2": "Check Your Code",
"check-code-3": "Check Your Code (Command + Enter)",
"reset": "Reset",
"reset-step": "Reset This Step",
"help": "Help",
client/src/templates/Challenges/classic/lower-jaw.tsx
+6 -3
View File
@@ -285,10 +285,13 @@ const LowerJaw = ({
testsLength &&
(currentAttempts >= testsLength || currentAttempts >= 3);
const showDesktopButton = window.innerWidth > MAX_MOBILE_WIDTH;
const isDesktop = window.innerWidth > MAX_MOBILE_WIDTH;
const isMacOS = navigator.userAgent.includes('Mac OS');
const checkButtonText = showDesktopButton
? t('buttons.check-code')
const checkButtonText = isDesktop
? isMacOS
? t('buttons.check-code-3')
: t('buttons.check-code')
: t('buttons.check-code-2');
const showSignInButton = !isSignedIn && challengeIsCompleted;
e2e/lower-jaw.spec.ts
+16 -10
View File
@@ -19,7 +19,7 @@ test('Check the initial states of submit button and "check your code" button', a
});
test('Click on the "check your code" button', async ({ page }) => {
const checkButton = page.getByTestId('lowerJaw-check-button');
const checkButton = page.getByRole('button', { name: 'Check Your Code' });
await checkButton.click();
@@ -43,20 +43,26 @@ test('Should render UI correctly', async ({ page }) => {
name: 'Check Your Code'
});
const lowerJawTips = page.getByTestId('failing-test-feedback');
await expect(codeCheckButton).toHaveText('Check Your Code (Ctrl + Enter)');
await expect(codeCheckButton).toBeVisible();
await expect(lowerJawTips).toHaveCount(0);
});
test('Should display full button text on desktop but hide (Ctrl + Enter on mobile)', async ({
test('Should display the text of the check code button accordingly based on device type and screen size', async ({
page,
isMobile
isMobile,
browserName
}) => {
const codeCheckButton = page.getByRole('button', {
name: 'Check Your Code'
});
await expect(codeCheckButton).toHaveText('Check Your Code (Ctrl + Enter)');
if (isMobile) {
await expect(codeCheckButton).toHaveText('Check Your Code');
await expect(
page.getByRole('button', { name: 'Check Your Code', exact: true })
).toBeVisible();
} else if (browserName === 'webkit') {
await expect(
page.getByRole('button', { name: 'Check Your Code (Command + Enter)' })
).toBeVisible();
} else {
await expect(
page.getByRole('button', { name: 'Check Your Code (Ctrl + Enter)' })
).toBeVisible();
}
});
e2e/progress-bar.spec.ts
+1 -10
View File
@@ -1,5 +1,4 @@
import { expect, test, type Page } from '@playwright/test';
import translations from '../client/i18n/locales/english/translations.json';
let page: Page;
@@ -36,15 +35,7 @@ test.describe('Progress bar component', () => {
'<html><body><h1>CatPhotoApp</h1><h2>Cat Photos</h2></body></html>'
);
if (isMobile) {
await page
.getByRole('button', { name: translations.buttons['check-code-2'] })
.click();
} else {
await page
.getByRole('button', { name: translations.buttons['check-code'] })
.click();
}
await page.getByRole('button', { name: 'Check Your Code' }).click();
const progressBarContainer = page.getByTestId('progress-bar-container');
await expect(progressBarContainer).toContainText(