Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rammodhvadia merged 3 commits into from
Feb 13, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
34f6655
add current step to code changed, run started and run completed events
rammodhvadia Feb 13, 2026
8ddde2c
fix tests
rammodhvadia Feb 13, 2026
8088f1e
add tests to check for step property
rammodhvadia Feb 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cypress/e2e/spec-wc-block-to-text.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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":{}');
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test assertion could be more comprehensive by also verifying that the step field is present and has a valid value in the payload. Consider using a more specific assertion that checks for both "errorDetails":{} and "step": to ensure the new functionality is properly tested.

Suggested change
cy.get("#results").should("contain", '"errorDetails":{}');
cy.get("#results").should(($el) => {
const text = $el.text();
expect(text).to.contain('"errorDetails":{}');
expect(text).to.match(/"step":"[^"]+"/);
});

Copilot uses AI. Check for mistakes.
});
4 changes: 2 additions & 2 deletions cypress/e2e/spec-wc.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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":{}');
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Cypress tests now check for a substring '"errorDetails":{} instead of the exact JSON string. While this works, the tests could be more comprehensive by also verifying that the step field is present and has a valid value. Consider using a more specific assertion like checking for both "errorDetails":{} and "step": to ensure the new functionality is properly tested.

Copilot uses AI. Check for mistakes.

// 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");
Expand Down Expand Up @@ -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":{}');
Copy link

Copilot AI Feb 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar to the previous test, this assertion could be more comprehensive by also verifying that the step field is present and has a valid value. Consider using a more specific assertion that checks for both "errorDetails":{} and "step": to ensure the new functionality is properly tested.

Suggested change
cy.get("#results").should("contain", '"errorDetails":{}');
cy.get("#results")
.should("contain", '"errorDetails":{}')
.and("contain", '"step":');

Copilot uses AI. Check for mistakes.
});
});
23 changes: 17 additions & 6 deletions src/components/WebComponentProject/WebComponentProject.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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));
Expand Down
5 changes: 5 additions & 0 deletions src/components/WebComponentProject/WebComponentProject.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -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", () => {
Expand All @@ -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");
});
});

Expand Down
6 changes: 4 additions & 2 deletions src/events/WebComponentCustomEvents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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);
Expand Down