pushing to test cypress

cypress/e2e/referenceData.cy.ts

@@ -1,49 +1,68 @@
-describe('ReferenceData Component', () => {
-  const stageIndex = 0;
-
+describe('ReferenceData Component - Input and Save References', () => {
   beforeEach(() => {
-    // Clear localStorage 
-    cy.clearLocalStorage();
-
-    // Set initial localStorage data using Cypress window object
-    const initialData = {
-      [`stage_${stageIndex}`]: { reference1: 'Test Value 1' },
-    };
+    // initial test yaml
+    let yamlTreatment = `
+          name: reference_test
+          playerCount: 1
+          gameStages:
+            - name: Stage 1
+              elements:
+                - type: display
+                  reference: participantInfo.name
+                - type: display
+                  reference: participantInfo.age
+      `;
 
+    // viewport & visit editor page
+    cy.viewport(2000, 1000);
     cy.visit('http://localhost:3000/editor');
 
+    // entering YAML treatment into code editor & save
+    cy.get('[data-cy="code-editor"]').clear().type(yamlTreatment);
+    cy.get('[data-cy="yaml-save"]').click();
 
-    cy.window().then((win) => {
-      win.localStorage.setItem('jsonData', JSON.stringify(initialData));
-      console.log('Initial LocalStorage jsonData:', win.localStorage.getItem('jsonData'));
-    });
+    cy.get('[data-cy="stage-title"]', { timeout: 10000 }).should("be.visible");
 
-    cy.wait(500);
-    cy.reload();
+    // verifying stage & elements are added successfully
+    cy.get('[data-cy="stage-title"]').should("be.visible");
+    cy.get('[data-cy="reference-label-participantInfo.name"]').contains("Participant Info: Name").should("be.visible");
+    cy.get('[data-cy="reference-label-participantInfo.age"]').contains("Participant Info: Age").should("be.visible");
   });
 
-  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');
-    });
-  });
+  it('allows input of reference values, saves, and displays them correctly', () => {
+    const nameValue = 'Alice';
+    const ageValue = '30';
 
-  it('keeps values isolated by stage', () => {
-    const stage2Data = { reference2: 'Stage 2 Value' };
+    // type values into input fields for each reference
+    cy.get('[data-cy="reference-input-participantInfo.name"]').type(nameValue);
+    cy.get('[data-cy="reference-input-participantInfo.age"]').type(ageValue);
 
-    cy.window().then((win) => {
-      win.localStorage.setItem('jsonData', JSON.stringify({ stage_1: stage2Data }));
-    });
+    // click Save button
+    cy.get('[data-cy="save-button"]').click();
 
-    cy.wait(500);
-    cy.reload();
-
-    // Verify that the stage 2 value is set correctly in localStorage
+    // verify values r stored in localStorage
     cy.window().then((win) => {
       const jsonData = JSON.parse(win.localStorage.getItem('jsonData') || '{}');
-      expect(jsonData['stage_1'].reference2).to.equal('Stage 2 Value');
+      expect(jsonData['stage_0']['participantInfo.name']).to.equal(nameValue);
+      expect(jsonData['stage_0']['participantInfo.age']).to.equal(ageValue);
     });
+
+    // verify saved values r displayed in UI
+    cy.get('[data-cy="reference-display-participantInfo.name"]').should('contain', `Saved Value: ${nameValue}`);
+    cy.get('[data-cy="reference-display-participantInfo.age"]').should('contain', `Saved Value: ${ageValue}`);
+  });
+
+  it('displays "No references found" message when no references exist', () => {
+    // clear YAML treatment
+    let emptyYamlTreatment = `
+          name: reference_test
+          playerCount: 1
+          gameStages: []
+      `;
+    cy.get('[data-cy="code-editor"]').clear().type(emptyYamlTreatment);
+    cy.get('[data-cy="yaml-save"]').click();
+
+    // check
+    cy.get('[data-cy="no-references-message"]').should('contain', 'No references found');
   });
 });

src/app/editor/components/ReferenceData.tsx

@@ -147,7 +147,7 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => {
 
   return (
     <div className="p-4 bg-white rounded-lg shadow-md">
-      <h2 className="text-lg font-semibold mb-4">
+      <h2 className="text-lg font-semibold mb-4" data-cy="stage-title">
         Stage Refs and Dependencies
       </h2>
 
@@ -161,13 +161,16 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => {
 
             return (
               <div key={index} className="mb-6">
-                <label className="block text-sm font-medium text-gray-700">
+                <label className="block text-sm font-medium text-gray-700" data-cy={`reference-label-${reference}`}>
                   {formatReference(reference)}
                 </label>
 
                 {/* saved val */}
                 {savedValue && (
-                  <p className="text-sm text-gray-500 mt-1">
+                  <p
+                    className="text-sm text-gray-500 mt-1"
+                    data-cy={`reference-display-${reference}`}
+                  >
                     <strong>Saved Value:</strong> {savedValue}
                   </p>
                 )}
@@ -176,6 +179,7 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => {
                 <input
                   type="text"
                   className="mt-2 block w-full rounded-md border-gray-300 bg-gray-100 p-2 shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+                  data-cy={`reference-input-${reference}`}
                   placeholder={`Enter value for ${getPlaceholderText(
                     formatReference(reference)
                   )}`}
@@ -189,12 +193,15 @@ const ReferenceData = ({ treatment, stageIndex }: ReferenceDataProps) => {
           <button
             onClick={saveAsJson}
             className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+            data-cy="save-button"
           >
             Save
           </button>
         </>
       ) : (
-        <p className="text-sm text-gray-500">No references found</p>
+        <p className="text-sm text-gray-500" data-cy="no-references-message">
+          No references found
+        </p>
       )}
     </div>
   )