Fix web component integration issues and improve Cypress commands

Co-authored-by: Chaosbit <55083+Chaosbit@users.noreply.github.com>

Author: Copilot

cypress/e2e/description-visibility.cy.js

@@ -20,8 +20,8 @@ describe('Description Visibility and Layout', () => {
 
   it('should keep workout list descriptions within bounds', () => {
     // Expand first exercise in workout list
-    cy.getExerciseItems().first().find('.exercise-header').click()
-    cy.getExerciseItems().first().should('have.class', 'expanded')
+    cy.getFirstExerciseItem().find('.exercise-header').click()
+    cy.getFirstExerciseItem().should('have.class', 'expanded')
 
     // Check visibility and bounds (allow margin for padding and mobile rendering)
     cy.get('.exercise-item.expanded .exercise-description').should('be.visible')
@@ -43,7 +43,7 @@ describe('Description Visibility and Layout', () => {
     cy.get('.description-content').should('have.css', 'text-align').and('match', /left|start/)
 
     // Workout list descriptions should be readable
-    cy.getExerciseItems().first().find('.exercise-header').click()
+    cy.getFirstExerciseItem().find('.exercise-header').click()
     cy.get('.exercise-item.expanded .exercise-description p').should('be.visible')
   })
 
@@ -60,7 +60,7 @@ describe('Description Visibility and Layout', () => {
     })
 
     // Test workout list on mobile
-    cy.getExerciseItems().first().find('.exercise-header').click()
+    cy.getFirstExerciseItem().find('.exercise-header').click()
     cy.get('.exercise-item.expanded .exercise-description').should('be.visible')
     cy.get('.exercise-item.expanded .exercise-description').then($desc => {
       const rect = $desc[0].getBoundingClientRect()
@@ -114,7 +114,7 @@ Rest - 0:02`
     cy.get('.description-content p').should('have.length', 2)
 
     // Test workout list with long text
-    cy.getExerciseItems().first().find('.exercise-header').click()
+    cy.getFirstExerciseItem().find('.exercise-header').click()
     cy.get('.exercise-item.expanded .exercise-description').should('be.visible')
     cy.get('.exercise-item.expanded .exercise-description p').should('have.length', 2)
 

cypress/e2e/timer-functionality.cy.js

@@ -18,7 +18,7 @@ describe('Timer Functionality', () => {
     cy.getWorkoutControlState('pause').should('be.enabled')
     cy.getWorkoutControlState('skip').should('be.enabled')
 
-    cy.getExerciseItems().first().should('have.class', 'current')
+    cy.getExerciseItem(0).should('have.class', 'current')
   })
 
   it('should pause and resume the timer', () => {
@@ -59,8 +59,8 @@ describe('Timer Functionality', () => {
     cy.getTimerDisplay().should('contain', '0:02')
     cy.get('#progressText').should('contain', 'Exercise 2 of 6')
 
-    cy.getExerciseItems().first().should('have.class', 'completed')
-    cy.getExerciseItems().eq(1).should('have.class', 'current')
+    cy.getExerciseItem(0).should('have.class', 'completed')
+    cy.getExerciseItem(1).should('have.class', 'current')
   })
 
   it('should reset the workout', () => {
@@ -76,7 +76,7 @@ describe('Timer Functionality', () => {
     cy.getWorkoutControlState('pause').should('be.disabled')
     cy.getWorkoutControlState('skip').should('be.disabled')
 
-    cy.getExerciseItems().first().should('have.class', 'current')
+    cy.getExerciseItem(0).should('have.class', 'current')
   })
 
   it('should automatically advance through exercises', () => {
@@ -124,14 +124,14 @@ describe('Timer Functionality', () => {
     cy.clickWorkoutControl('start')
 
     cy.clickWorkoutControl('skip')
-    cy.getExerciseItems().first().should('have.class', 'completed')
+    cy.getExerciseItem(0).should('have.class', 'completed')
 
     cy.clickWorkoutControl('skip')
-    cy.getExerciseItems().eq(1).should('have.class', 'completed')
+    cy.getExerciseItem(1).should('have.class', 'completed')
 
     cy.clickWorkoutControl('skip')
-    cy.getExerciseItems().eq(2).should('have.class', 'completed')
-    cy.getExerciseItems().eq(3).should('have.class', 'current')
+    cy.getExerciseItem(2).should('have.class', 'completed')
+    cy.getExerciseItem(3).should('have.class', 'current')
   })
 
   it('should handle timer countdown accuracy', () => {

cypress/support/commands.js

@@ -111,7 +111,38 @@ Cypress.Commands.add('clickExercise', (exerciseIndex) => {
  * Get exercise items from the exercise list component
  */
 Cypress.Commands.add('getExerciseItems', () => {
-  return cy.getShadow('exercise-list', '.exercise-item');
+  return cy.get('exercise-list').then(($component) => {
+    const component = $component[0];
+    if (!component.shadowRoot) {
+      throw new Error('ExerciseList component does not have shadow DOM');
+    }
+    const exerciseItems = component.shadowRoot.querySelectorAll('.exercise-item');
+    return cy.wrap(exerciseItems);
+  });
+});
+
+/**
+ * Get a specific exercise item by index
+ */
+Cypress.Commands.add('getExerciseItem', (index) => {
+  return cy.get('exercise-list').then(($component) => {
+    const component = $component[0];
+    if (!component.shadowRoot) {
+      throw new Error('ExerciseList component does not have shadow DOM');
+    }
+    const exerciseItems = component.shadowRoot.querySelectorAll('.exercise-item');
+    if (index >= exerciseItems.length) {
+      throw new Error(`Exercise index ${index} out of range. Found ${exerciseItems.length} exercises.`);
+    }
+    return cy.wrap(exerciseItems[index]);
+  });
+});
+
+/**
+ * Get the first exercise item
+ */
+Cypress.Commands.add('getFirstExerciseItem', () => {
+  return cy.getExerciseItem(0);
 });
 
 /**

js/workout-app.js

@@ -376,12 +376,18 @@ export class WorkoutApp {
         // Release screen wake lock when workout completes
         this.screenWakeManager.releaseWakeLock();
 
-        this.currentExercise.textContent = 'Workout Complete! 🎉';
-        this.timerDisplay.textContent = '00:00';
-        this.timerDisplay.style.display = 'block';
-        this.repsDisplay.style.display = 'none';
-        this.repCompletion.style.display = 'none';
-        this.progressFill.style.width = '100%';
+        // Update timer display component to show completion
+        if (this.timerDisplayComponent) {
+            const completionExercise = {
+                name: 'Workout Complete! 🎉',
+                duration: 0,
+                exerciseType: 'timer'
+            };
+            this.timerDisplayComponent.setExercise(completionExercise);
+            this.timerDisplayComponent.setAttribute('time-remaining', '0');
+            this.timerDisplayComponent.setAttribute('is-running', 'false');
+        }
+        
         this.updateControls();
         this.updateWorkoutList();
 
@@ -411,11 +417,8 @@ export class WorkoutApp {
      * Update progress bar
      */
     updateProgressBar() {
-        // Legacy progress bar update (if still needed)
-        if (this.progressFill) {
-            const progress = this.timerManager.getProgress();
-            this.progressFill.style.width = `${progress}%`;
-        }
+        // Progress bar is now handled by the timer display web component
+        // This method is kept for backward compatibility but no longer needed
     }
 
     /**
@@ -606,11 +609,6 @@ export class WorkoutApp {
             this.loadCurrentExercise();
         }
 
-        // Update legacy elements if they exist
-        if (this.progressFill) {
-            this.progressFill.style.width = '0%';
-        }
-        
         this.updateControls();
         this.updateWorkoutList();
         this.updateWorkoutContextComponent();
@@ -635,7 +633,6 @@ export class WorkoutApp {
         const exercise = this.workout.exercises[this.currentExerciseIndex];
         if (exercise && exercise.exerciseType === 'reps' && !exercise.completed) {
             exercise.completed = true;
-            this.progressFill.style.width = '100%';
 
             // Give enough delay to ensure UI updates properly but allow faster test execution
             setTimeout(() => {