From c82a57e1d32f15380c2204ad6fd2f6454804f744 Mon Sep 17 00:00:00 2001
From: Giovanni Ruberto <31985931+Rabberpoli@users.noreply.github.com>
Date: Fri, 5 Apr 2024 08:49:32 +0200
Subject: [PATCH] feat(UI): added specific label for MacOS check-code button
 (#54276)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Co-authored-by: Tomas Bern <bekjon_98@mail.ru>
---
 client/i18n/locales/english/translations.json |  1 +
 .../Challenges/classic/lower-jaw.tsx          |  9 ++++---
 e2e/lower-jaw.spec.ts                         | 26 ++++++++++++-------
 e2e/progress-bar.spec.ts                      | 11 +-------
 4 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index cf41e8f3c1c..4a971036d8a 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -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",
diff --git a/client/src/templates/Challenges/classic/lower-jaw.tsx b/client/src/templates/Challenges/classic/lower-jaw.tsx
index 58ce7923c9e..2c3064b5a59 100644
--- a/client/src/templates/Challenges/classic/lower-jaw.tsx
+++ b/client/src/templates/Challenges/classic/lower-jaw.tsx
@@ -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;
diff --git a/e2e/lower-jaw.spec.ts b/e2e/lower-jaw.spec.ts
index 0936e93b380..232490a14d5 100644
--- a/e2e/lower-jaw.spec.ts
+++ b/e2e/lower-jaw.spec.ts
@@ -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();
   }
 });
diff --git a/e2e/progress-bar.spec.ts b/e2e/progress-bar.spec.ts
index 28ce001bf82..4fea790c405 100644
--- a/e2e/progress-bar.spec.ts
+++ b/e2e/progress-bar.spec.ts
@@ -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(