Merge branch 'main' of https://github.com/Watts-Lab/researcher-portal …

…into angie-issue-79-sidebar

.gitignore

@@ -8,6 +8,9 @@
 # testing
 /coverage
 
+# cypress
+/cypress/screenshots
+
 # next.js
 /.next/
 /out/

.gitmodules

@@ -1,3 +1,4 @@
 [submodule "deliberation-empirica"]
 	path = deliberation-empirica
 	url = https://github.com/Watts-Lab/deliberation-empirica.git
+	branch = james-update-zod-again

@empirica-mocks/core/mocks.js

@@ -1,9 +1,10 @@
 import { useContext } from 'react';
 import { isFunctionDeclaration } from "typescript";
-// import { StageContext } from '@/editor/stageContext'; # don't know why this doesn't work
+// import { StageContext } from '@/editor/stageContext'; // # don't know why this doesn't work
 
 // file is in deliberation-empirica/client/node_modules/@empirica/core/mocks.js
-import { StageContext } from "../../../../../src/app/editor/stageContext"
+import { StageContext } from "../../src/app/editor/stageContext"
+// "../../../../src/app/editor/stageContext"
 
 
 
@@ -16,14 +17,21 @@ export function usePlayer() {
     exitStep: 0, //TODO,
     gameID: 21,
     position: 0, //TODO - set with toggle
+    stage: {
+      set: function (varName, value) {
+        this[varName] = value;
+      },
+      get: function (varName) {
+        return this[varName];
+      },
+    },
     get: function (varName) {
       return this[varName];
     },
     set: function (varName, value) {
       this[varName] = value;
     },
   };
-
   return player;
 }
 
@@ -46,11 +54,14 @@ export function useGame() {
 export function useStageTimer() {
   const stage = useContext(StageContext);
   console.log("useStageTimerMock", stage)
+  console.log("StageElapsed", stage.elapsed)
+
 
   // This is a mock function that returns a mock stage timer object
   const stageTimer = {
     isMock: true,
-    elapsed: stage.elapsed // problem: this will be called every render cycle...
+    elapsed: stage.elapsed * 1000 // multiply by 1000 for conditionalRender component
+    // problem: this will be called every render cycle...
   };
 
   return stageTimer;
@@ -66,6 +77,10 @@ export function useStage() {
     setElapsed,
     treatment,
     setTreatment,
+    templatesMap,
+    setTemplatesMap,
+    selectedTreatmentIndex,
+    setSelectedTreatmentIndex
   } = useContext(StageContext)
   // const stage1 = useContext(StageContext);
   // console.log("useStageMock", stage1)
@@ -78,13 +93,25 @@ export function useStage() {
       //const treatmentString = localStorage.getItem("treatment");
       //const treatment = JSON.parse(treatmentString);
       if (varName === "elements") {
-        return treatment.gameStages[currentStageIndex]?.elements
+        let elements = treatment.treatments[selectedTreatmentIndex]?.gameStages[currentStageIndex]?.elements;
+        if (Array.isArray(elements)) {
+          elements = elements.flatMap((element) => {
+            if (element.template) {
+              return templatesMap.get(element.template);
+            }
+            return [element];
+          });
+        } else {
+          elements = [];
+        }
+        console.log("revised elements", elements)
+        return elements;
       } else if (varName === "discussion") {
-        return treatment.gameStages[currentStageIndex]?.discussion
+        return treatment.treatments[selectedTreatmentIndex]?.gameStages[currentStageIndex]?.discussion;
       } else if (varName === "name") {
-        return treatment.gameStages[currentStageIndex]?.name
+        return treatment.treatments[selectedTreatmentIndex]?.gameStages[currentStageIndex]?.name;
       } else if (varName === "index") {
-        return currentStageIndex
+        return currentStageIndex;
       }
     },
 
@@ -110,6 +137,7 @@ export function usePlayers() {
 
 export function useGlobal() {
   // This is a mock function that returns a mock global object
+  // UPDATE CDN IF TESTING LOCALLY / DEPLOYING
   const global = {
     isMock: true,
     recruitingBatchConfig: {

cypress/e2e/codeeditor.cy.ts

@@ -0,0 +1,125 @@
+// npm run cypress:open
+
+import { keyCodeDefinitions } from "node_modules/cypress-real-events/keyCodeDefinitions";
+
+function setInitialTreatment(appendTreatmentTextWith: string = '') {
+    // initial yaml treatment
+    let yamltreatment = `treatments: {enter}- name: cypress_code_editor_test \n  playerCount: 1 \ngameStages: {enter}{home}        - name: Stage 1 \n  duration: 100 \nelements: {enter}{home}            - name: Element 1 \n  type: survey \nsurveyName: CRT ${appendTreatmentTextWith}`
+    cy.typeInCodeEditor(`{ctrl+a}{del}${yamltreatment}`) // equivalent to clear() in cypress
+
+    // verify initial text in editor
+
+    // text values from monaco-editor will include line numbers and no line breaks
+    // the yamltreatment variable has no line numbers and line breaks
+    // so right now comparison is only on the treatmentName
+    cy.containsInCodeEditor('cypress_code_editor_test')
+    cy.get('[data-cy="yaml-save"]').realClick()
+}
+
+describe('code editor', () => {
+    beforeEach(() => {
+        cy.viewport(2000, 1000, { log: false });
+
+        cy.visit('http://localhost:3000/editor')
+        cy.typeInCodeEditor(`{ctrl+a}{del}`)
+    });
+
+    it('reflects code editor changes in stage cards', () => {
+        // add new element using code editor
+        setInitialTreatment("{enter}{backspace}{backspace}  - name: Element 2\n  type: prompt \nfile: projects/example/preDiscussionInstructions.md")
+
+        // verify changes in code editor
+        cy.containsInCodeEditor("name: Element 2")
+
+        // verify changes in stage cards
+        cy.get('[data-cy="stage-0"]').should('exist')
+        cy.get('[data-cy="element-0-1"]').contains("prompt").should("be.visible")
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible")
+    })
+
+    it('reflects stage card changes in editor', () => {
+        setInitialTreatment()
+
+        // add new element using stage cards
+        cy.get('[data-cy="add-element-button-0"]').click()
+        cy.get('[data-cy="edit-element-name-0-new"]').type("Element 2")
+        cy.get('[data-cy="edit-element-type-0-new"]').select("Survey")
+        cy.get('[data-cy="edit-element-surveyName-0-new"]').select("TIPI")
+        cy.get('[data-cy="edit-element-save-0-new"]').click()
+
+        // verify changes in stage cards
+        cy.get('[data-cy="element-0-1"]').contains("survey").should("be.visible")
+        cy.get('[data-cy="element-0-1"]').contains("TIPI").should("be.visible")
+
+        // verify changes in code editor
+        cy.containsInCodeEditor("name: Element 2")
+    })
+
+
+    it('does not save when yaml is improperly formatted', () => {
+        setInitialTreatment("{enter}{home}            name: Element 2\n  type: survey\nsurveyName: CRT")
+
+        // verify text is updated in editor but no change in stage cards
+        cy.containsInCodeEditor("name: Element 2")
+        cy.get('[data-cy="element-0-1"]').should('not.exist')
+
+        // correct mistake and save
+        setInitialTreatment("{enter}{home}            - name: Element 2\n  type: survey \nsurveyName: CRT")
+
+
+        // verify text is updated in editor and in stage cards
+        cy.containsInCodeEditor("name: Element 2")
+        cy.get('[data-cy="stage-0"]').should('exist')
+        cy.get('[data-cy="element-0-0"]').should('exist')
+        cy.get('[data-cy="element-0-1"]').contains("survey").should("be.visible")
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible")
+    })
+
+    it('does not save when treatment (stage) is improperly formatted', () => {
+        // add poorly formatted stage using code editor
+        setInitialTreatment(`{enter}{home}        - name: Stage 2 \n  duration: 300 \nelements: error`)
+
+        // verify text is updated in editor but no change in stage cards
+        cy.containsInCodeEditor("name: Stage 2")
+        cy.get('[data-cy="stage-1"]').should('not.exist')
+
+        // correct mistake and save
+        setInitialTreatment(`{enter}{home}        - name: Stage 2 \n  duration: 300 \nelements: \n- name: Element 2 \n  type: survey \nsurveyName: CRT`)
+
+        // verify text is updated in editor and in stage cards
+        cy.containsInCodeEditor("name: Stage 2")
+        cy.get('[data-cy="stage-1"]').should('exist')
+        cy.get('[data-cy="element-1-0"]').contains("survey").should("be.visible")
+        cy.get('[data-cy="element-1-0"]').contains("Element 2").should("be.visible")
+    })
+
+    it('does not save when treatment (element) is improperly formatted', () => {
+        // add poorly formatted element using code editor
+        setInitialTreatment(`{enter}{home}            - name: Element 2`)
+
+        // verify text is updated in editor but no change in stage cards
+        cy.containsInCodeEditor("name: Element 2")
+        cy.get('[data-cy="element-0-1"]').should('not.exist')
+
+        // correct mistake and save
+        setInitialTreatment(`{enter}{home}            - name: Element 2\n  type: survey \nsurveyName: CRT`)
+
+        // verify text is updated in editor and in stage cards
+        cy.containsInCodeEditor("name: Element 2")
+        cy.get('[data-cy="stage-0"]').should('exist')
+        cy.get('[data-cy="element-0-1"]').contains("survey").should("be.visible")
+        cy.get('[data-cy="element-0-1"]').contains("Element 2").should("be.visible")
+    })
+
+    it('saves when treatment (element) is an empty array', () => {
+        // add stage with elements: [] using code editor
+        setInitialTreatment(`{enter}{home}        - name: Stage 2 \n  duration: 300 \nelements: []`)
+
+        // verify text is updated in editor and in stage cards
+        cy.containsInCodeEditor("name: Stage 2")
+        cy.get('[data-cy="stage-1"]').should('exist')
+        cy.get('[data-cy="element-1-0"]').should("not.exist")
+    })
+
+
+})