Cypress Tests for Reference Data

cypress/e2e/referenceData.cy.ts

@@ -1,49 +1,99 @@
-describe('ReferenceData Component', () => {
-  const stageIndex = 0;
 
-  beforeEach(() => {
-    // Clear localStorage 
-    cy.clearLocalStorage();
+describe('test spec', () => {
+  it('passes', () => {
 
-    // Set initial localStorage data using Cypress window object
-    const initialData = {
-      [`stage_${stageIndex}`]: { reference1: 'Test Value 1' },
-    };
+    // initial yaml code for treatment, including a survey element 
+    let yamltreatment = "treatments: {enter}- name: no_refs_stage{enter}  playerCount: 1{enter}gameStages: {enter}- name: test_no_refs_stage{enter}  duration: 60{enter}elements:{enter}- name: test_element{enter}  type: prompt \nfile: projects/example/preDiscussionInstructions.md"
 
+    cy.viewport(2000, 1000, { log: false });
+    cy.visit('http://localhost:3000/editor')
+    //  cmd for mac
+    cy.typeInCodeEditor(`{ctrl+a}{del}${yamltreatment}`)
+
+
+    cy.containsInCodeEditor('no_refs_stage')
+    cy.get('[data-cy="yaml-save"]').click()
+
+    // test confirm the stage title
+    cy.contains('[data-cy="stage-title"]', 'Stage Refs and Dependencies')
+      .should('exist')
+
+    // "No references found"
+    cy.contains('[data-cy="no-references-message"]', 'No references found')
+      .should('exist')
+  })
+
+
+  it('shows references if present and allows saving', () => {
+    let yamltreatmentWithRefs = "treatments: {enter}- name: no_refs_stage{enter}  playerCount: 1{enter}gameStages: {enter}- name: test_no_refs_stage{enter}  duration: 60{enter}elements:{enter}- type: display\n  reference: participantInfo.name\nfile: projects/example/preDiscussionInstructions.md"
+
+    cy.viewport(2000, 1000, { log: false });
+    cy.visit('http://localhost:3000/editor')
+
+    cy.typeInCodeEditor(`{ctrl+a}{del}${yamltreatmentWithRefs}`)
+
+    cy.get('[data-cy="yaml-save"]').click()
+
+    // make sure the component loads with references
+    cy.contains('[data-cy="stage-title"]', 'Stage Refs and Dependencies')
+      .should('exist')
+
+    // check that we do NOT see "No references found"
+    cy.get('[data-cy="no-references-message"]').should('not.exist')
+
+    // For the reference "participantInfo.name", the label should appear
+    cy.get('[data-cy="reference-label-participantInfo.name"]')
+      .should('contain', 'ParticipantInfo: Name')
+
+    //  input should exist & have placeholder matching the last part 
+    cy.get('[data-cy="reference-input-participantInfo.name"]')
+      .should('have.attr', 'placeholder', 'Enter value for Name')
+      .type('Hello from Cypress')
+      .should('have.value', 'Hello from Cypress')
+
+    cy.get('[data-cy="save-button"]').click()
+    cy.get('[data-cy="reference-display-participantInfo.name"]')
+      .should('contain', 'Saved Value: Hello from Cypress')
+  })
+
+
+  it('handles multiple references and saves to localStorage', () => {
+    // two references: participantInfo.name & participantInfo.age
+    let yamltreatmentWithMultipleRefs = "treatments: {enter}- name: no_refs_stage{enter}  playerCount: 1{enter}gameStages: {enter}- name: test_no_refs_stage{enter}  duration: 60{enter}elements:{enter}- type: display\n  reference: participantInfo.name\nfile: projects/example/preDiscussionInstructions.md{enter}{backspace}- type: display\n  reference: participantInfo.age\nfile: projects/example/hi.md"
+
+    cy.viewport(2000, 1000, { log: false });
     cy.visit('http://localhost:3000/editor');
 
+    cy.typeInCodeEditor(`{ctrl+a}{del}${yamltreatmentWithMultipleRefs}`);
 
-    cy.window().then((win) => {
-      win.localStorage.setItem('jsonData', JSON.stringify(initialData));
-      console.log('Initial LocalStorage jsonData:', win.localStorage.getItem('jsonData'));
-    });
+    cy.get('[data-cy="yaml-save"]').click();
 
-    cy.wait(500);
-    cy.reload();
-  });
+    // confirm the references exist
+    cy.get('[data-cy="reference-label-participantInfo.name"]')
+      .should('contain', 'ParticipantInfo: Name');
 
-  it('confirms localStorage is set correctly', () => {
-    // Verify that localStorage contains the expected data
-    cy.window().then((win) => {
-      const jsonData = JSON.parse(win.localStorage.getItem('jsonData') || '{}');
-      expect(jsonData[`stage_${stageIndex}`].reference1).to.equal('Test Value 1');
-    });
-  });
+    cy.get('[data-cy="reference-label-participantInfo.age"]')
+      .should('contain', 'ParticipantInfo: Age');
+
+    cy.get('[data-cy="reference-input-participantInfo.name"]')
+      .type('Jane Doe')
+      .should('have.value', 'Jane Doe');
+
+    cy.get('[data-cy="reference-input-participantInfo.age"]')
+      .type('30')
+      .should('have.value', '30');
 
-  it('keeps values isolated by stage', () => {
-    const stage2Data = { reference2: 'Stage 2 Value' };
+    cy.get('[data-cy="save-button"]').click();
 
-    cy.window().then((win) => {
-      win.localStorage.setItem('jsonData', JSON.stringify({ stage_1: stage2Data }));
-    });
+    //confirm saved values displayed
+    cy.get('[data-cy="reference-display-participantInfo.name"]')
+      .should('contain', 'Saved Value: Jane Doe');
 
-    cy.wait(500);
-    cy.reload();
+    cy.get('[data-cy="reference-display-participantInfo.age"]')
+      .should('contain', 'Saved Value: 30');
 
-    // Verify that the stage 2 value is set correctly in localStorage
-    cy.window().then((win) => {
-      const jsonData = JSON.parse(win.localStorage.getItem('jsonData') || '{}');
-      expect(jsonData['stage_1'].reference2).to.equal('Stage 2 Value');
-    });
+    cy.get('[data-cy="save-button"]').click();
   });
+
 });
+