feat: add test for new single_video resource page (#1574)

* Add video resource test

* fix conversation test

Author: annarhughes

components/common/ProgressStatus.tsx

@@ -17,15 +17,15 @@ const ProgressStatus = (props: ProgressStatusProps) => {
 
   if (status === PROGRESS_STATUS.STARTED) {
     return (
-      <Box sx={{ ...iconTextRowStyle, marginTop: '0 !important' }}>
+      <Box data-testid="progress-status" sx={{ ...iconTextRowStyle, marginTop: '0 !important' }}>
         <DonutLargeIcon color="error" />
         <Typography>{tS('started')}</Typography>
       </Box>
     );
   }
   if (status === PROGRESS_STATUS.COMPLETED) {
     return (
-      <Box sx={{ ...iconTextRowStyle, marginTop: '0 !important' }}>
+      <Box data-testid="progress-status" sx={{ ...iconTextRowStyle, marginTop: '0 !important' }}>
         <CheckCircleIcon color="error" />
         <Typography>{tS('completed')}</Typography>
       </Box>

cypress/integration/tests/conversations.cy.tsx

@@ -7,7 +7,7 @@ describe('Conversations Flow', () => {
     cy.createUser({ emailInput: email, passwordInput: password });
   });
 
-  it('Should allow a user to navigate to Courses, select a conversation, log in, play audio, and submit feedback.', () => {
+  it('Should allow a user to navigate to Courses, select a conversation, log in and play audio', () => {
     // User visits the home page
     cy.visit('/');
 
@@ -28,7 +28,7 @@ describe('Conversations Flow', () => {
     cy.get('#email').type(email);
     cy.get('#password').type(password);
     cy.get('button[type=submit]').click();
-    cy.wait(2000); // wait to ensure user is redirected to the session
+    cy.wait(2000); // wait to ensure user is redirected to the conversation
 
     // User plays the conversation
     cy.get('audio')
@@ -39,7 +39,6 @@ describe('Conversations Flow', () => {
         audio.playbackRate = 6;
         audio.play();
       });
-    cy.wait(2000); // wait to ensure user plays the session
   });
 
   after(() => {

cypress/integration/tests/videos.cy.tsx

@@ -0,0 +1,61 @@
+describe('Videos Flow', () => {
+  const email = `cypresstestemail+${Date.now()}@chayn.co`;
+  const password = 'testtesttest';
+
+  before(() => {
+    cy.cleanUpTestState();
+    cy.createUser({ emailInput: email, passwordInput: password });
+  });
+
+  it('Should allow a user to navigate to Courses, select a video, log in and play video', () => {
+    // User visits the home page
+    cy.visit('/');
+
+    // User clicks on Courses
+    cy.get(`[qa-id=secondary-nav-courses-button]`, { timeout: 10000 }).should('exist').click();
+
+    // User clicks on a conversation
+    cy.contains('What is somatics?', {
+      timeout: 10000,
+    })
+      .should('exist')
+      .click();
+
+    // User is prompted to login
+    cy.get('a[qa-id="dialogLoginButton"]').click();
+
+    // User logs in
+    cy.get('#email').type(email);
+    cy.get('#password').type(password);
+    cy.get('button[type=submit]').click();
+    cy.wait(2000); // wait to ensure user is redirected to the video
+
+    // User plays the short video
+    cy.get('.react-player__preview', { timeout: 10000 }).should('be.visible').click();
+    cy.wait(2000); // wait to ensure user plays the video
+
+    cy.get('[data-testid="progress-status"]', { timeout: 10000 }).should('be.visible');
+    cy.get('[data-testid="team-member-card"]').should('exist');
+
+    // Feedback form appears
+    cy.contains('h2', 'How was this session?').should('be.visible');
+
+    // Click the Send button and check for error message
+    cy.get('button').contains('Send').click();
+    cy.contains('p', 'Please select a rating before sending.').should('be.visible');
+
+    // User selects a rating
+    cy.get('input[name="feedback-radio-buttons"]').first().check();
+
+    // User submits feedback
+    cy.contains('button', 'Send').click();
+    cy.wait(2000);
+
+    // Confirmation message appears
+    cy.contains('h3', 'Thank you for submitting your feedback').should('exist');
+  });
+
+  after(() => {
+    cy.logout();
+  });
+});