Merge remote-tracking branch 'refs/remotes/origin/MPI-152' into MPI-152

GuillermoC66 · GuillermoC66 · commit e0510b266a1d · 2025-11-05T19:35:40.000Z
diff --git a/src/components/Instructions.tsx b/src/components/Instructions.tsx
@@ -188,6 +188,7 @@ const handlePauseToggle = () => {
           size={24}
           className="text-[#ffffff] cursor-pointer hover:opacity-70 transition-opacity duration-300"
           onClick={handleBack}
+          data-testid="back-button"
         />
       </motion.div>
 
@@ -213,6 +214,7 @@ const handlePauseToggle = () => {
               transition={{ duration: 0.5, delay: 0.3 }}
               className="mt-8 cursor-pointer"
               onClick={toggleSound}
+              data-testid="sound-toggle"
             >
               <div className="flex items-center justify-center gap-2 mt-16 text-[#ffffff] hover:text-[#ffffff] transition-colors">
                 {isSoundEnabled ? (
@@ -238,7 +240,7 @@ const handlePauseToggle = () => {
             transition={{ duration: 1 }}
             className="flex flex-col justify-between items-center text-center min-h-[90vh] gap-6 px-4 py-24 md:py-8 w-full"
           >
-            <h2 className="text-4xl font-bold -mt-24 md:mt-0">
+            <h2 className="text-4xl font-bold -mt-24 md:mt-0" data-testid="timer">
               {formatTime(timeLeft)}
             </h2>
 
@@ -252,6 +254,7 @@ const handlePauseToggle = () => {
                   <button
                     onClick={handlePauseToggle}
                     className="transition-transform duration-300 cursor-pointer hover:scale-125 hover:opacity-70"
+                    data-testid={isPaused ? "play-button" : "pause-button"}
                   >
                     {isPaused ? (
                       <Play size={32} className="text-[#ffffff]" />
@@ -268,6 +271,7 @@ const handlePauseToggle = () => {
                 animate={{ opacity: 1, y: 0 }}
                 transition={{ duration: 1.5, delay: 0.3 }}
                 className="text-lg md:text-xl text-[#ffffff] text-center max-w-md mx-auto"
+                data-testid="instruction-text"
               >
                 {t(
                   `instructions.${exerciseType}.${exercise.instructions[currentInstruction].key}`
@@ -280,6 +284,7 @@ const handlePauseToggle = () => {
                 transition={{ duration: 0.5, delay: 1 }}
                 className="mt-8 cursor-pointer"
                 onClick={toggleSound}
+                data-testid="sound-toggle"
               >
                 <div className="flex items-center justify-center gap-2 text-[#ffffff] hover:text-gray-900 transition-colors">
                   {isSoundEnabled ? (
diff --git a/src/components/ToggleButton.tsx b/src/components/ToggleButton.tsx
@@ -16,6 +16,7 @@ const ToggleButton = () => {
     <button
       onClick={handleChangeLanguage}
       className="w-16 h-8 sm:w-16 sm:h-8 rounded-full relative bg-[var(--color-button)]"
+      data-testid="language-toggle"
     >
       <div
         className={`w-6 h-6 sm:w-6 sm:h-6 rounded-full absolute top-1 transition-transform bg-cover bg-center flex justify-end items-center ${
diff --git a/src/components/WelcomePage.tsx b/src/components/WelcomePage.tsx
@@ -23,14 +23,16 @@ const WelcomePage = () => {
           {t("title-text")}
           <span title={t("Explanation478")} className="cursor-pointer text-center"></span>
           <button 
-            id='infoButton' 
+            id='infoButton'
+            data-testid="info-button"
             title={t("Explanation478")}
             onClick={toggleInfo}
             className="hover:underline flex px-3.5 sm:px-3.5 py-1 sm:py-1 text-[#ffffff] bg-[var(--gradient-1-1)] rounded-full shadow-md hover:opacity-80 text-sm sm:text-base max-w-[5.5rem] items-center justify-center"
           >
             <p className="text-[--font-global]  text-[15px] font-bold">i</p>
           </button>
-          <p id='infoText' 
+          <p id='infoText'
+            data-testid="info-text"
             className={`absolute flex px-3.5 sm:px-3.5 py-1 sm:py-1 text-[--font-global] text-[15px] text-[#ffffff] bg-[var(--gradient-1-1)] rounded-md lg:mr-120 ${
               isInfoVisible ? 'visible' : 'hidden'}`}
           >{t("Explanation478")}</p>
diff --git a/tests/e2e/BreathingExercise.spec.ts b/tests/e2e/BreathingExercise.spec.ts
@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 import TestData from '../fixtures/testData';
-import { waitForBreathingExerciseToStart } from '../fixtures/testHelpers';
+import { waitForBreathingExerciseToStart, waitForExerciseTimer } from '../fixtures/testHelpers';
 
 test.describe('Breathing Exercise', () => {
   test.beforeEach(async ({ page }) => {
@@ -22,7 +22,7 @@ test.describe('Breathing Exercise', () => {
       await expect(page.locator('h2').filter({ hasText: /breathing exercise/i })).toBeVisible();
       await expect(page.locator('p').filter({ hasText: /inhale.*for.*4.*seconds.*hold.*for.*7.*seconds.*and.*exhale.*for.*8.*seconds/i })).toBeVisible();
       
-      const soundToggle = page.locator('svg[class*="lucide-volume"]');
+      const soundToggle = page.locator(TestData.selectors.soundToggle);
       await expect(soundToggle).toBeVisible();
     });
 
@@ -35,8 +35,7 @@ test.describe('Breathing Exercise', () => {
       console.log('H2 elements found:', h2Elements);
       
       // The exercise should show a timer when running
-      // Look for any h2 that contains time format (MM:SS or M:SS)
-      const timerElement = page.locator('h2').filter({ hasText: /\d+:\d+/ });
+      const timerElement = page.locator(TestData.selectors.timer);
       const isTimerVisible = await timerElement.isVisible();
       
       if (!isTimerVisible) {
@@ -52,17 +51,17 @@ test.describe('Breathing Exercise', () => {
         // If timer is visible, check for controls
         await expect(timerElement).toBeVisible();
       
-      const pausePlayButton = page.locator('button svg[class*="lucide-pause"], button svg[class*="lucide-play"]');
+      const pausePlayButton = page.locator(TestData.selectors.pauseButton).or(page.locator(TestData.selectors.playButton));
       await expect(pausePlayButton).toBeVisible();
-      await expect(page.locator('p').filter({ hasText: /through your nose|hold your breath|through your mouth|inhale|exhale/i })).toBeVisible();
+      await expect(page.locator(TestData.selectors.instructionText)).toBeVisible();
       }
     });
 
     test('should have back navigation button', async ({ page }) => {
       // Wait for the page to load first
       await waitForBreathingExerciseToStart(page);
       
-      const backButton = page.locator('svg[class*="lucide-arrow-left"]');
+      const backButton = page.locator(TestData.selectors.backButton);
       await expect(backButton).toBeVisible();
     });
   });
@@ -71,54 +70,58 @@ test.describe('Breathing Exercise', () => {
     test('should toggle pause/play when pause button is clicked', async ({ page }) => {
       await waitForBreathingExerciseToStart(page);
       
-      await page.waitForFunction(
-        () => {
-          const h1Elements = Array.from(document.querySelectorAll('h1'));
-          const timerH2 = Array.from(document.querySelectorAll('h2')).find(
-            el => /\d+:\d+/.test(el.textContent || '')
-          );
-          return h1Elements.length === 0 && timerH2 !== undefined;
-        },
-        { timeout: 15000 }
-      );
-      
-      const timerElement = page.locator('h2').filter({ hasText: /\d+:\d+/ });
-      await expect(timerElement).toBeVisible();
-      
-      const pauseButton = page.locator('button').filter({ has: page.locator('svg[class*="lucide-pause"]') });
-      await expect(pauseButton).toBeVisible();
-      await pauseButton.click();
-      
-      const playButton = page.locator('button').filter({ has: page.locator('svg[class*="lucide-play"]') });
-      await expect(playButton).toBeVisible();
-      await playButton.click();
-      await expect(pauseButton).toBeVisible();
+      // Wait for timer to appear (exercise has started, intro phase is over)
+      // This accounts for the ~13 second intro phase in CI
+      await waitForExerciseTimer(page, 25000);
+      
+      // Wait for pause button to be visible
+      const pauseButton = page.locator(TestData.selectors.pauseButton);
+      await expect(pauseButton).toBeVisible({ timeout: 15000 });
+      
+      // Click pause button and wait for play button to appear
+      // Use force: true because button is constantly animating (never "stable")
+      await pauseButton.click({ force: true });
+      
+      // Wait for play button to appear after pause
+      const playButton = page.locator(TestData.selectors.playButton);
+      await expect(playButton).toBeVisible({ timeout: 15000 });
+      
+      // Click play button
+      // Use force: true because button is constantly animating (never "stable")
+      await playButton.click({ force: true });
+      
+      // Wait for pause button to reappear
+      await expect(pauseButton).toBeVisible({ timeout: 15000 });
     });
 
     test('should navigate back when back button is clicked', async ({ page }) => {
       await waitForBreathingExerciseToStart(page);
       
-      const backButton = page.locator('svg[class*="lucide-arrow-left"]');
+      const backButton = page.locator(TestData.selectors.backButton);
       await backButton.click();
       await expect(page).toHaveURL('/');
     });
 
     test('should toggle sound when sound button is clicked', async ({ page }) => {
       await waitForBreathingExerciseToStart(page);
       
-      const soundButton = page.locator('div.mt-8.cursor-pointer');
-      const initialVolume = await page.locator('svg[class*="lucide-volume2"]').isVisible();
+      const soundToggle = page.locator(TestData.selectors.soundToggle);
+      await expect(soundToggle).toBeVisible({ timeout: 15000 });
+      
+      // Check initial state - look for Volume2 icon (sound enabled) or VolumeX (sound disabled)
+      const initialSoundEnabled = await page.locator('svg[class*="lucide-volume2"]').isVisible();
       
-      await soundButton.click();
+      await soundToggle.click();
       
-      if (initialVolume) {
-        await expect(page.locator('svg[class*="lucide-volume2"]')).not.toBeVisible();
+      // Wait for state to change
+      if (initialSoundEnabled) {
+        await expect(page.locator('svg[class*="lucide-volume2"]')).not.toBeVisible({ timeout: 5000 });
       } else {
-        await expect(page.locator('svg[class*="lucide-volume2"]')).toBeVisible();
+        await expect(page.locator('svg[class*="lucide-volume2"]')).toBeVisible({ timeout: 5000 });
       }
       
-      const newVolume = await page.locator('svg[class*="lucide-volume2"]').isVisible();
-      expect(newVolume).not.toBe(initialVolume);
+      const newSoundEnabled = await page.locator('svg[class*="lucide-volume2"]').isVisible();
+      expect(newSoundEnabled).not.toBe(initialSoundEnabled);
     });
   });
 
@@ -127,8 +130,8 @@ test.describe('Breathing Exercise', () => {
       await waitForBreathingExerciseToStart(page);
       
       // Check if timer is already visible (exercise started)
-      const timer = page.locator('h2').filter({ hasText: /\d+:\d+/ });
-      const isTimerVisible = await timer.isVisible();
+      const timer = page.locator(TestData.selectors.timer);
+      const isTimerVisible = await timer.isVisible({ timeout: 5000 }).catch(() => false);
       
       if (!isTimerVisible) {
         // Exercise is in intro mode, skip this test
@@ -150,12 +153,12 @@ test.describe('Breathing Exercise', () => {
       await expect(introInstructions).toBeVisible();
       
       // Check if exercise is running (has timer)
-      const timer = page.locator('h2').filter({ hasText: /\d+:\d+/ });
-      const isTimerVisible = await timer.isVisible();
+      const timer = page.locator(TestData.selectors.timer);
+      const isTimerVisible = await timer.isVisible({ timeout: 5000 }).catch(() => false);
       
       if (isTimerVisible) {
         // Exercise is running, check for dynamic instructions
-      const instructions = page.locator('p').filter({ hasText: /inhale|exhale|hold/i });
+      const instructions = page.locator(TestData.selectors.instructionText);
       await expect(instructions).toBeVisible();
       
       const instructionText = await instructions.textContent();
@@ -170,8 +173,8 @@ test.describe('Breathing Exercise', () => {
       
       await page.setViewportSize(TestData.viewports.mobile);
       await expect(page.locator('h2').filter({ hasText: /breathing exercise/i })).toBeVisible();
-      await expect(page.locator('svg[class*="lucide-arrow-left"]')).toBeVisible();
-      await expect(page.locator('svg[class*="lucide-volume"]')).toBeVisible();
+      await expect(page.locator(TestData.selectors.backButton)).toBeVisible();
+      await expect(page.locator(TestData.selectors.soundToggle)).toBeVisible();
     });
 
     test('should maintain functionality on tablet', async ({ page }) => {
diff --git a/tests/e2e/HomePage.spec.ts b/tests/e2e/HomePage.spec.ts
@@ -45,16 +45,16 @@ test.describe('Homepage', () => {
     test('should handle language switching', async ({ page }) => {
       await closeQuickEscapeModal(page);
   
-    // Visible En
-    await expectUiLanguage(page, 'EN');
+      // Visible En
+      await expectUiLanguage(page, 'EN');
 
-    // Change to Es and Verify
-    await homePage.switchLanguage('ES');
-    await expectUiLanguage(page, 'ES');
+      // Change to Es and Verify
+      await homePage.switchLanguage('ES');
+      await expectUiLanguage(page, 'ES');
 
-    // Change to En and Verify
-    await homePage.switchLanguage('EN');
-    await expectUiLanguage(page, 'EN');
+      // Change to En and Verify
+      await homePage.switchLanguage('EN');
+      await expectUiLanguage(page, 'EN');
 
 });
 
@@ -64,34 +64,42 @@ test.describe('Homepage', () => {
     });
 
     test('should navigate to correct donate page in Spanish', async ({ page }) => {
-
-      const languageToggle = page.locator('button').filter({ hasText: 'En' });
-      const DonateButtonEs = page.getByRole ('link').filter({hasText: 'Donar'});
-      
       await closeQuickEscapeModal(page);
-        await languageToggle.click();
-        await expect(page.locator('text="Donar"')).toBeVisible();
-        const [newPageEs] = await Promise.all([
-        page.waitForEvent('popup'),
-        DonateButtonEs.click(),
-        ]);
-        await newPageEs.waitForLoadState();
-        await newPageEs.waitForURL('https://www.thetrevorproject.mx/dona/');
-        await expect(newPageEs).toHaveURL('https://www.thetrevorproject.mx/dona/');
+      
+      const languageToggle = page.locator(TestData.selectors.languageToggle);
+      await languageToggle.waitFor({ state: 'visible', timeout: 10000 });
+      await languageToggle.click({ timeout: 15000 });
+      
+      // Wait for language switch to complete - check for Spanish text
+      await expect(page.locator('text="Donar"')).toBeVisible({ timeout: 10000 });
+      
+      const DonateButtonEs = page.getByRole('link').filter({ hasText: 'Donar' });
+      await DonateButtonEs.waitFor({ state: 'visible', timeout: 10000 });
+      
+      const [newPageEs] = await Promise.all([
+        page.waitForEvent('popup', { timeout: 15000 }),
+        DonateButtonEs.click({ timeout: 15000 }),
+      ]);
+      // Wait for page to load - use domcontentloaded instead of networkidle for external sites
+      // External sites often have continuous network activity (analytics, ads) so networkidle never fires
+      await newPageEs.waitForLoadState('domcontentloaded', { timeout: 15000 });
+      await newPageEs.waitForURL('https://www.thetrevorproject.mx/dona/', { timeout: 15000 });
+      await expect(newPageEs).toHaveURL('https://www.thetrevorproject.mx/dona/');
     });
 
     test('should go to correct donate page in English', async ({ page }) => {
-
-        const DonateButtonEn = page.getByRole ('link').filter({hasText: 'Donate'});
-        
         await closeQuickEscapeModal(page);
+        
+        const DonateButtonEn = page.getByRole('link').filter({ hasText: 'Donate' });
         await expect(page.locator('text="Donate"')).toBeVisible();
+        
         const [newPageEn] = await Promise.all([
-        page.waitForEvent('popup'),
-        DonateButtonEn.click(),
+          page.waitForEvent('popup', { timeout: 15000 }),
+          DonateButtonEn.click({ timeout: 15000 }),
         ]);
-        await newPageEn.waitForLoadState();
-        await newPageEn.waitForURL('https://give.thetrevorproject.org/campaign/716635/donate');
+        // Wait for page to load - use domcontentloaded instead of networkidle for external sites
+        await newPageEn.waitForLoadState('domcontentloaded', { timeout: 15000 });
+        await newPageEn.waitForURL('https://give.thetrevorproject.org/campaign/716635/donate', { timeout: 15000 });
         await expect(newPageEn).toHaveURL('https://give.thetrevorproject.org/campaign/716635/donate');
     });
 
diff --git a/tests/e2e/Navigation.spec.ts b/tests/e2e/Navigation.spec.ts
@@ -199,7 +199,10 @@ test.describe('Navigation', () => {
         const homePage = new HomePage(page);
         await expect(homePage.logo).toBeVisible();
         
-        await expect(homePage.logo).toBeEnabled();
+        // Logo is clickable (has pointer cursor), not a form element so we check visibility instead of enabled
+        const logoParent = homePage.logo.locator('..');
+        const cursorStyle = await logoParent.evaluate((el) => window.getComputedStyle(el).cursor).catch(() => '');
+        expect(cursorStyle).toBe('pointer');
       }
     });
   });
diff --git a/tests/e2e/WelcomePage.spec.ts b/tests/e2e/WelcomePage.spec.ts
@@ -57,18 +57,23 @@ test.describe('WelcomePage', () => {
     });
 
     test('should maintain info button functionality across language switches', async () => {
+      // Wait for info button to be ready
+      await homePage.infoButton.waitFor({ state: 'visible', timeout: 10000 });
+      
       await homePage.clickInfoButton();
-      await expect(homePage.infoText).toHaveClass(/visible/);
+      await expect(homePage.infoText).toHaveClass(/visible/, { timeout: 10000 });
       
       await homePage.switchLanguage('ES');
-      await expect(homePage.infoButton).toBeVisible();
-      await expect(homePage.infoText).toHaveClass(/visible/);
+      await expect(homePage.infoButton).toBeVisible({ timeout: 10000 });
+      await expect(homePage.infoText).toHaveClass(/visible/, { timeout: 10000 });
       
+      await homePage.infoButton.waitFor({ state: 'visible', timeout: 10000 });
       await homePage.clickInfoButton();
-      await expect(homePage.infoText).toHaveClass(/hidden/);
+      await expect(homePage.infoText).toHaveClass(/hidden/, { timeout: 10000 });
       
+      await homePage.infoButton.waitFor({ state: 'visible', timeout: 10000 });
       await homePage.clickInfoButton();
-      await expect(homePage.infoText).toHaveClass(/visible/);
+      await expect(homePage.infoText).toHaveClass(/visible/, { timeout: 10000 });
     });
   });
 
diff --git a/tests/fixtures/testData.ts b/tests/fixtures/testData.ts
@@ -56,7 +56,16 @@ export const TestData = {
     // Breathing Exercise
     breathingCircle: '[data-testid="breathing-circle"]',
     pauseButton: '[data-testid="pause-button"]',
+    playButton: '[data-testid="play-button"]',
     resetButton: '[data-testid="reset-button"]',
+    timer: '[data-testid="timer"]',
+    soundToggle: '[data-testid="sound-toggle"]',
+    backButton: '[data-testid="back-button"]',
+    instructionText: '[data-testid="instruction-text"]',
+    
+    // Welcome Page
+    infoButton: '[data-testid="info-button"]',
+    infoText: '[data-testid="info-text"]',
     
     // Mobile
     mobileMenu: '[data-testid="mobile-menu"]',
diff --git a/tests/fixtures/testHelpers.ts b/tests/fixtures/testHelpers.ts
diff --git a/tests/page-objects/BreathingExercisePage.ts b/tests/page-objects/BreathingExercisePage.ts
diff --git a/tests/page-objects/HomePage.ts b/tests/page-objects/HomePage.ts
diff --git a/tests/playwright.config.ts b/tests/playwright.config.ts

Original file line number	Diff line number	Diff line change
`@@ -16,6 +16,7 @@ const ToggleButton = () => {`
`16`	`16`	`<button`
`17`	`17`	`onClick={handleChangeLanguage}`
`18`	`18`	`className="w-16 h-8 sm:w-16 sm:h-8 rounded-full relative bg-[var(--color-button)]"`
	`19`	`+ data-testid="language-toggle"`
`19`	`20`	`>`
`20`	`21`	`<div`
`21`	`22`	className={`w-6 h-6 sm:w-6 sm:h-6 rounded-full absolute top-1 transition-transform bg-cover bg-center flex justify-end items-center ${