test: use challenge with visible buttons for spec (freeCodeCamp#54566)

TyMick · Nov 6, 2024 · 04fba1e · 04fba1e
1 parent 0ee6ba5
commit 04fba1e
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 28 deletions.
diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(
-    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
   );
 });
 

diff --git a/e2e/lower-jaw.spec.ts b/e2e/lower-jaw.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(
-    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
   );
 });
 

diff --git a/e2e/preview.spec.ts b/e2e/preview.spec.ts
@@ -3,7 +3,7 @@ import translations from '../client/i18n/locales/english/translations.json';
 
 test.beforeEach(async ({ page }) => {
   await page.goto(
-    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
   );
 });
 

diff --git a/e2e/progress-bar.spec.ts b/e2e/progress-bar.spec.ts
@@ -1,31 +1,18 @@
-import { expect, test, type Page } from '@playwright/test';
-
-let page: Page;
-
-test.beforeAll(async ({ browser }) => {
-  page = await browser.newPage();
-  await page.goto(
-    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
-  );
-});
+import { expect, test } from '@playwright/test';
 
 test.describe('Progress bar component', () => {
   test('Should appear with the correct content after the user has submitted their code', async ({
-    isMobile,
-    browserName
+    page
   }) => {
-    const monacoEditor = page.getByLabel('Editor content');
+    await page.goto(
+      '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    );
 
-    // The editor has an overlay div, which prevents the click event from bubbling up in iOS Safari.
-    // This is a quirk in this browser-OS combination, and the workaround here is to use `.focus()`
-    // in place of `.click()` to focus on the editor.
-    // Ref: https://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
-    if (isMobile && browserName === 'webkit') {
-      await monacoEditor.focus();
-    } else {
-      await monacoEditor.click();
-    }
+    const monacoEditor = page.getByLabel('Editor content');
 
+    // Using focus instead of click since we're not testing if the editor
+    // behaves correctly, we're using it to complete the challenge.
+    await monacoEditor.focus();
     await page.keyboard.press('Control+A');
     //Meta + A works in webkit
     await page.keyboard.press('Meta+A');

diff --git a/e2e/reset-modal.spec.ts b/e2e/reset-modal.spec.ts
@@ -4,7 +4,7 @@ import translations from '../client/i18n/locales/english/translations.json';
 
 test('should render the modal content correctly', async ({ page }) => {
   await page.goto(
-    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
   );
 
   await page.getByRole('button', { name: translations.buttons.reset }).click();
@@ -48,7 +48,7 @@ test('User can reset challenge', async ({ page }) => {
     .getByText(updatedText);
 
   await page.goto(
-    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
   );
 
   // Building the preview can take a while
@@ -137,7 +137,7 @@ test('User can reset classic challenge', async ({ page, isMobile }) => {
 
 test('should close when the user clicks the close button', async ({ page }) => {
   await page.goto(
-    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-2'
+    '/learn/2022/responsive-web-design/learn-html-by-building-a-cat-photo-app/step-3'
   );
 
   await page.getByRole('button', { name: translations.buttons.reset }).click();