add current step to code changed, run started and run completed events (#1327)

This PR adds the currentStepPosition value to the details of the
following events:

- codeChanged
- runStarted
- runCompleted

Will be used for reporting on editor usage in projects-ui.

Author: rammodhvadia

cypress/e2e/spec-wc-block-to-text.cy.js

@@ -37,5 +37,5 @@ it("runs p5 sketch including image loaded from project ", () => {
 
   cy.get("button").contains("Run code").click();
 
-  cy.get("#results").should("contain", '{"errorDetails":{}}');
+  cy.get("#results").should("contain", '"errorDetails":{}');
 });

cypress/e2e/spec-wc.cy.js

@@ -142,7 +142,7 @@ describe("when embedded, output_only & output_split_view are true", () => {
 
     // Run the code and check it executed without error
     cy.get("editor-wc").shadow().find("button").contains("Run").click();
-    cy.get("#results").should("contain", '{"errorDetails":{}}');
+    cy.get("#results").should("contain", '"errorDetails":{}');
 
     // Check that the visual output panel is displayed in split view mode (vs tabbed view)
     cy.get("editor-wc").shadow().contains("Visual output").should("be.visible");
@@ -192,6 +192,6 @@ describe("when embedded, output_only & output_split_view are true", () => {
 
     // Run the code and check it executed without error
     cy.get("editor-wc").shadow().find("button").contains("Run").click();
-    cy.get("#results").should("contain", '{"errorDetails":{}}');
+    cy.get("#results").should("contain", '"errorDetails":{}');
   });
 });

src/components/WebComponentProject/WebComponentProject.jsx

@@ -74,10 +74,10 @@ const WebComponentProject = ({
   useEffect(() => {
     setCodeHasRun(false);
     const timeout = setTimeout(() => {
-      document.dispatchEvent(codeChangedEvent);
+      document.dispatchEvent(codeChangedEvent({ step: currentStepPosition }));
     }, 2000);
     return () => clearTimeout(timeout);
-  }, [project]);
+  }, [project, currentStepPosition]);
 
   useEffect(() => {
     if (projectIdentifier) {
@@ -118,20 +118,31 @@ const WebComponentProject = ({
 
   useEffect(() => {
     if (codeRunTriggered) {
-      document.dispatchEvent(runStartedEvent);
+      document.dispatchEvent(runStartedEvent({ step: currentStepPosition }));
       setCodeHasRun(true);
     } else if (codeHasRun) {
       const mz_criteria = Sk.sense_hat
         ? Sk.sense_hat.mz_criteria
         : { ...defaultMZCriteria };
 
       const payload = outputOnly
-        ? { errorDetails }
-        : { isErrorFree: error === "", ...mz_criteria };
+        ? { errorDetails, step: currentStepPosition }
+        : {
+            isErrorFree: error === "",
+            step: currentStepPosition,
+            ...mz_criteria,
+          };
 
       document.dispatchEvent(runCompletedEvent(payload));
     }
-  }, [codeRunTriggered, codeHasRun, outputOnly, error, errorDetails]);
+  }, [
+    codeRunTriggered,
+    codeHasRun,
+    outputOnly,
+    error,
+    errorDetails,
+    currentStepPosition,
+  ]);
 
   useEffect(() => {
     document.dispatchEvent(stepChangedEvent(currentStepPosition));

src/components/WebComponentProject/WebComponentProject.test.js

@@ -79,14 +79,17 @@ describe("When state set", () => {
       jest.runAllTimers();
     });
     expect(codeChangedHandler).toHaveBeenCalled();
+    expect(codeChangedHandler.mock.lastCall[0].detail).toHaveProperty("step");
   });
 
   test("Triggers runStarted event", () => {
     expect(runStartedHandler).toHaveBeenCalled();
+    expect(runStartedHandler.mock.lastCall[0].detail).toHaveProperty("step");
   });
 
   test("Triggers stepChanged event", () => {
     expect(stepChangedHandler).toHaveBeenCalled();
+    expect(stepChangedHandler.mock.lastCall[0].detail).toBe(3);
   });
 
   test("Defaults to not showing the sidebar", () => {
@@ -233,6 +236,7 @@ describe("When code run finishes", () => {
     expect(runCompletedHandler.mock.lastCall[0].detail).toHaveProperty(
       "isErrorFree",
     );
+    expect(runCompletedHandler.mock.lastCall[0].detail).toHaveProperty("step");
   });
 
   test("Triggers runCompletedEvent with error details when outputOnly is true", () => {
@@ -244,6 +248,7 @@ describe("When code run finishes", () => {
     expect(runCompletedHandler.mock.lastCall[0].detail).toHaveProperty(
       "errorDetails",
     );
+    expect(runCompletedHandler.mock.lastCall[0].detail).toHaveProperty("step");
   });
 });
 

src/events/WebComponentCustomEvents.js

@@ -6,7 +6,8 @@ const webComponentCustomEvent = (type, detail) =>
     detail: detail,
   });
 
-export const codeChangedEvent = webComponentCustomEvent("editor-codeChanged");
+export const codeChangedEvent = (detail) =>
+  webComponentCustomEvent("editor-codeChanged", detail);
 
 export const navigateToProjectsPageEvent = webComponentCustomEvent(
   "editor-navigateToProjectsPage",
@@ -25,7 +26,8 @@ export const projectOwnerLoadedEvent = (detail) =>
 export const runCompletedEvent = (detail) =>
   webComponentCustomEvent("editor-runCompleted", detail);
 
-export const runStartedEvent = webComponentCustomEvent("editor-runStarted");
+export const runStartedEvent = (detail) =>
+  webComponentCustomEvent("editor-runStarted", detail);
 
 export const stepChangedEvent = (detail) =>
   webComponentCustomEvent("editor-stepChanged", detail);