Cypress tests for remaining afcStimulus tasks

task-launcher/cypress.config.js

@@ -6,4 +6,8 @@ export default defineConfig({
       // implement node event listeners here
     },
   },
+  retries: {
+    runMode: 2, 
+    openMode: 0
+  }
 });

task-launcher/cypress/e2e/helpers.cy.js

@@ -1,19 +1,33 @@
 // clicks 'OK' button until instructions are complete
 function clickThroughInstructions(){
-    cy.get('.jspsych-audio-multi-response-button').then((buttonWrapper) => {
-      if (buttonWrapper.find('.primary').length > 0){
-          cy.contains('OK').click({timeout: 15000}); 
-          clickThroughInstructions(); 
-      } else {
-        return; 
-      }
-    });
-  }
+  // if footer is present, the task has ended
+  cy.get('.lev-stimulus-container').then((content) => {
+    if (content.find('footer').length === 1){
+      return; 
+    } else {
+      // otherwise check for OK button, indicating instruction phase
+      cy.get('.jspsych-content').then((content) => {
+        const okButton = content.find('.primary');
+        if (okButton.length > 0) {
+          cy.contains('OK').click({timeout: 60000}); 
+          clickThroughInstructions();
+        } else {
+          return; 
+        }
+      })
+      return; 
+    }
+  });  
+}
 
 function handlePracticeButtons(){
-  cy.wait(500);
+  cy.wait(300);
+  // wait for fixation cross to go away
+  cy.get('.lev-stimulus-container', {timeout: 60000}).should('exist'); 
+
   cy.get('.jspsych-content').then((content) => {
     const practiceButtons = content.find('.practice-btn');
+
     if (practiceButtons.length > 0){
       cy.get('.practice-btn').each((button) => {
         button.click(); 
@@ -26,35 +40,59 @@ function handlePracticeButtons(){
 }
 
 // clicks first image option until game is over
-function selectImages(correct, imgClass, numberOfButtons){
+function selectAnswers(correctFlag, buttonClass){
+  handleMathSlider();
+  clickThroughInstructions(); 
   handlePracticeButtons(); 
-  cy.get('.lev-stimulus-container', {timeout: 10000}).should('exist'); 
+
   // wait for fixation cross to go away 
+  cy.get('.lev-stimulus-container', {timeout: 60000}).should('exist'); 
+
   cy.get('.jspsych-content').then((content) => {
-    if (content.find('.jspsych-audio-multi-response-button').length === numberOfButtons){ 
-      if (correct){ 
-        cy.get(imgClass).each((button) => {
-          const image = button.find('img')[0]; 
-          if ((image.alt).includes('correct')){
-            button.click(); 
-          } 
-        })
-      } else {
-        cy.get(imgClass).eq(0).click();
+    const responseButtons = content.find(buttonClass); 
+
+    if (responseButtons.length > 1){ 
+      if (correctFlag === 'alt') { 
+        cy.get('[aria-label="correct"]').click({timeout: 30000}); // add timeout to handle staggered buttons
+      } else { // use correct class by default 
+        cy.get('.correct').click({timeout: 30000}); // add timeout to handle staggered buttons
       }
-      selectImages(correct, imgClass, numberOfButtons);  
+
+      selectAnswers(correctFlag, buttonClass);  
+
     } else {
       cy.contains('Thank you!').should('exist');
       return; 
     }
   });
 }
 
-export function testImageAfc(correct, imgClass, numberOfButtons){
+function handleMathSlider() {
+  cy.wait(300);
+// wait for fixation cross to go away
+  cy.get('.lev-stimulus-container', {timeout: 60000}).should('exist');
+
+  cy.get('.jspsych-content').then((content) => {
+    const slider = content.find('.jspsych-slider');
+    const responseButtons = content.find('.secondary'); // should be length zero if in the movable slider phase
+
+    if (slider.length && !responseButtons.length) {
+      cy.get('.jspsych-slider').realClick(); 
+
+      cy.get('.primary').then((continueButton) => {
+        continueButton.click(); 
+        handleMathSlider();
+      })
+    } 
+  })
+
+  return; 
+}
+
+export function testAfc(correctFlag, buttonClass){
     // wait for OK button to be visible
-    cy.contains('OK', {timeout: 120000}).should('be.visible'); 
+    cy.contains('OK', {timeout: 600000}).should('be.visible'); 
     cy.contains('OK').realClick(); // real click mimics user gesture so that fullscreen can start
-    clickThroughInstructions(); 
-    selectImages(correct, imgClass, numberOfButtons);
+    selectAnswers(correctFlag, buttonClass);
     cy.contains('Exit').click(); 
 }

task-launcher/cypress/e2e/math.cy.js

@@ -0,0 +1,10 @@
+import {testAfc} from './helpers.cy.js'
+
+const math_url = 'http://localhost:8080/?task=egma-math'
+
+describe('test math', () => {
+  it('visits math and plays game', () => {
+    cy.visit(math_url);
+    testAfc('alt', '.secondary');
+  })
+})

task-launcher/cypress/e2e/matrix_reasoning.cy.js

@@ -0,0 +1,10 @@
+import {testAfc} from './helpers.cy.js'
+
+const matrix_reasoning_url = 'http://localhost:8080/?task=matrix-reasoning'
+
+describe('test matrix reasoning', () => {
+  it('visits matrix reasoning and plays game', () => {
+    cy.visit(matrix_reasoning_url);
+    testAfc('class', '.image');
+  })
+})

task-launcher/cypress/e2e/mental_rotation_test.cy.js

@@ -1,10 +1,10 @@
-import {testImageAfc} from './helpers.cy.js'
+import {testAfc} from './helpers.cy.js'
 
 const mental_rotation_url = 'http://localhost:8080/?task=mental-rotation'
 
 describe('test mental rotation', () => {
   it('visits mental rotation and plays game', () => {
     cy.visit(mental_rotation_url);
-    testImageAfc(true, '.image-large', 2);
+    testAfc('class', '.image-large');
   })
 })

task-launcher/cypress/e2e/theory_of_mind.cy.js

@@ -0,0 +1,10 @@
+import {testAfc} from './helpers.cy.js'
+
+const TOM_url = 'http://localhost:8080/?task=theory-of-mind'
+
+describe('test theory of mind', () => {
+  it('visits theory of mind and plays game', () => {
+    cy.visit(TOM_url);
+    testAfc('class', '.image');
+  })
+})

task-launcher/cypress/e2e/trog_test.cy.js

@@ -1,10 +1,10 @@
-import {testImageAfc} from './helpers.cy.js'
+import {testAfc} from './helpers.cy.js'
 
 const trog_url = 'http://localhost:8080/?task=trog'
 
 describe('test trog', () => {
   it('visits trog and plays game', () => {
     cy.visit(trog_url);
-    testImageAfc(true, '.image-medium', 4);
+    testAfc('class', '.image-medium');
   })
 })

task-launcher/cypress/e2e/vocab_test.cy.js

@@ -1,10 +1,10 @@
-import {testImageAfc} from './helpers.cy.js'
+import {testAfc} from './helpers.cy.js'
 
 const vocab_url = 'http://localhost:8080/?task=vocab'
 
 describe('test vocab', () => {
   it('visits vocab and plays game', () => {
-    cy.visit(vocab_url);
-    testImageAfc(true, '.image-medium', 4);
+    cy.visit(vocab_url, );
+    testAfc('class', '.image-medium');
   })
 })

task-launcher/cypress/support/e2e.js

@@ -20,3 +20,10 @@ import './commands'
 // require('./commands')
 
 import "cypress-real-events";
+
+// prevent firestore error from failing test
+Cypress.on('uncaught:exception', (err, runnable) => {
+    if (err.message.includes('user not in Firestore')){
+        return false
+    }
+}); 

task-launcher/src/tasks/math/trials/sliderStimulus.ts

@@ -8,6 +8,7 @@ import { camelize } from '@bdelab/roar-utils';
 //@ts-ignore
 import { arrowKeyEmojis, setSkipCurrentBlock, taskStore, replayButtonSvg, setupReplayAudio, PageAudioHandler, PageStateHandler } from '../../shared/helpers';
 import { mediaAssets } from '../../..';
+import Cypress from 'cypress';
 
 let chosenAnswer: number;
 let sliderStart: number;
@@ -165,6 +166,13 @@ export const slider = {
         const btnWrapper = document.createElement('div');
         const btn = document.createElement('button');
         btn.textContent = responseChoices[i];
+
+        // flag correct answer if running in cypress
+        if (window.Cypress && (btn.textContent == answer)) {
+          btn.setAttribute("aria-label", "correct");
+
+        }
+
         btn.classList.add('secondary');
         btn.addEventListener('click', (e) => captureValue(btn, e));
         // To not duplicate event listeners

task-launcher/src/tasks/shared/trials/afcStimulus.ts

@@ -214,10 +214,10 @@ function generateImageChoices(choices: string[], target: string) {
   return choices.map((choice) => {
     const imageUrl = mediaAssets.images[camelize(choice)] || practiceUrl;
 
-    // if the task is running in a cypress test, the correct answer should be indicated with alt text
+    // if the task is running in a cypress test, the correct answer should be indicated with 'correct' class
     if (window.Cypress && stimulus.assessmentStage !== 'practice_response'){
-      const isCorrect = choice === target ? 'correct' : '';
-      return `<img src=${imageUrl} alt=${isCorrect} />`;
+      const isCorrect = choice === target;
+      return isCorrect ? `<img src=${imageUrl} alt=${choice} class='correct'/>` : `<img src=${imageUrl} alt=${choice} />`;
     } else {
       return `<img src=${imageUrl} alt=${choice} />`;
     }
@@ -343,6 +343,17 @@ function doOnLoad(layoutConfigMap: Record<string, LayoutConfigType>) {
   let twoTrialsAgoIndex = currentTrialIndex - 2;
   if (stim.task === 'math') {
     twoTrialsAgoIndex = currentTrialIndex - 3; // math has a fixation or something
+
+    // flag correct answers with alt text for math if running a Cypress test
+    if (window.Cypress && !isPracticeTrial && !isInstructionTrial) {
+      const choices: NodeListOf<HTMLButtonElement> = document.querySelectorAll('.secondary');
+
+      for (var i = 0; i < choices.length; i++) {
+        if (choices[i].textContent == itemLayoutConfig.response.target){
+          choices[i].setAttribute("aria-label", "correct");
+        }
+      }
+    }
   }
   const twoTrialsAgoStimulus = jsPsych.data.get().filter({ trial_index: twoTrialsAgoIndex }).values();