Fix stop button in the web component (#1083)

Author: loiswells97

CHANGELOG.md

@@ -8,7 +8,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
-- Enabling web component to find the `turtle` canvas
+- Enabling web component to find the `turtle` canvas (#1082)
+- Ability to stop code in the web component (#1083)
 
 ## [0.27.0] - 2024-09-26
 

cypress/e2e/spec-wc.cy.js

@@ -38,6 +38,22 @@ describe("default behaviour", () => {
       .should("contain", "Hello world");
   });
 
+  it("interrupts the code when the stop button is clicked", () => {
+    cy.get("editor-wc")
+      .shadow()
+      .find("div[class=cm-content]")
+      .invoke(
+        "text",
+        "from time import sleep\nfor i in range(100):\n\tprint(i)\n\tsleep(1)",
+      );
+    cy.get("editor-wc").shadow().find(".btn--run").click();
+    cy.get("editor-wc").shadow().find(".btn--stop").click();
+    cy.get("editor-wc")
+      .shadow()
+      .find(".error-message__content")
+      .should("contain", "Execution interrupted");
+  });
+
   it("runs p5 code", () => {
     const code = `from p5 import *\n\ndef setup():\n    size(400, 400)  # width and height of screen\n\ndef draw():\n    fill('cyan')  # Set the fill color for the sky to cyan\n    rect(0, 0, 400, 250)  # Draw a rectangle for the sky with these values for x, y, width, height    \n  \nrun(frame_rate=2)\n`;
     cy.get("editor-wc")
@@ -61,7 +77,10 @@ describe("default behaviour", () => {
       .find("div[class=cm-content]")
       .invoke("text", "import sense_hat");
     cy.get("editor-wc").shadow().find(".btn--run").click();
-    cy.get("editor-wc").shadow().find("#root").should("contain", "Visual output");
+    cy.get("editor-wc")
+      .shadow()
+      .find("#root")
+      .should("contain", "Visual output");
   });
 
   it("does not render astro pi component on page load", () => {
@@ -84,7 +103,10 @@ describe("default behaviour", () => {
       .find("div[class=cm-content]")
       .invoke("text", "import sense_hat");
     cy.get("editor-wc").shadow().find(".btn--run").click();
-    cy.get("editor-wc").shadow().find("div[class=cm-content]").invoke("text", "");
+    cy.get("editor-wc")
+      .shadow()
+      .find("div[class=cm-content]")
+      .invoke("text", "");
     cy.get("editor-wc").shadow().find(".btn--run").click();
     cy.get("editor-wc").shadow().contains("Visual output").click();
     cy.get("editor-wc").shadow().find("#root").should("not.contain", "yaw");
@@ -106,7 +128,7 @@ describe("when load_remix_disabled is true, e.g. in editor-standalone", () => {
   };
 
   beforeEach(() => {
-    cy.on('window:before:load', (win) => {
+    cy.on("window:before:load", (win) => {
       win.localStorage.setItem(authKey, JSON.stringify(user));
     });
   });
@@ -124,22 +146,33 @@ describe("when load_remix_disabled is true, e.g. in editor-standalone", () => {
 
     // Check receipt of an event to trigger a redirect to the remixed project URL
     cy.get("#project-identifier").should("not.have.text", originalIdentifier);
-    cy.get("#project-identifier").invoke("text").then((remixIdentifier) => {
-      // Check we're still seeing the changed code
-      cy.get("editor-wc").shadow().find("[contenteditable]").should("have.text", "# remixed!");
-
-      // Visit the original project again
-      cy.visit(urlFor(originalIdentifier));
-
-      // Check we no longer see the changed code, i.e. `load_remix_disabled=true` is respected
-      cy.get("editor-wc").shadow().find("[contenteditable]").should("not.have.text", "# remixed!");
-
-      // View the remixed project
-      cy.visit(urlFor(remixIdentifier));
-
-      // Check we're still seeing the changed code
-      cy.get("editor-wc").shadow().find("[contenteditable]").should("have.text", "# remixed!");
-    });
+    cy.get("#project-identifier")
+      .invoke("text")
+      .then((remixIdentifier) => {
+        // Check we're still seeing the changed code
+        cy.get("editor-wc")
+          .shadow()
+          .find("[contenteditable]")
+          .should("have.text", "# remixed!");
+
+        // Visit the original project again
+        cy.visit(urlFor(originalIdentifier));
+
+        // Check we no longer see the changed code, i.e. `load_remix_disabled=true` is respected
+        cy.get("editor-wc")
+          .shadow()
+          .find("[contenteditable]")
+          .should("not.have.text", "# remixed!");
+
+        // View the remixed project
+        cy.visit(urlFor(remixIdentifier));
+
+        // Check we're still seeing the changed code
+        cy.get("editor-wc")
+          .shadow()
+          .find("[contenteditable]")
+          .should("have.text", "# remixed!");
+      });
   });
 });
 
@@ -160,41 +193,73 @@ describe("when embedded, output_only & output_split_view are true", () => {
     // Check text output panel is visible and has a run button
     // Important to wait for this before making the negative assertions that follow
     cy.get("editor-wc").shadow().contains("Text output").should("be.visible");
-    cy.get("editor-wc").shadow().find("button").contains("Run").should("be.visible");
+    cy.get("editor-wc")
+      .shadow()
+      .find("button")
+      .contains("Run")
+      .should("be.visible");
 
     // Check that the side bar is not displayed
     cy.get("editor-wc").shadow().contains("Project files").should("not.exist");
     // Check that the project bar is not displayed
-    cy.get("editor-wc").shadow().contains("Don't Collide: Clean Car").should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .contains("Don't Collide: Clean Car")
+      .should("not.exist");
     // Check that the editor input containing the code is not displayed
-    cy.get("editor-wc").shadow().contains("# The draw_obstacle function goes here").should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .contains("# The draw_obstacle function goes here")
+      .should("not.exist");
 
     // 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":{}}');
 
     // 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");
-    cy.get("editor-wc").shadow().contains("Visual output").parents("ul").children().should("have.length", 1);
+    cy.get("editor-wc")
+      .shadow()
+      .contains("Visual output")
+      .parents("ul")
+      .children()
+      .should("have.length", 1);
   });
 
   it("displays the embedded view for an HTML project", () => {
     cy.visit(urlFor("anime-expressions-solution"));
 
     // Check HTML preview output panel is visible and has a run button
     // Important to wait for this before making the negative assertions that follow
-    cy.get("editor-wc").shadow().contains("index.html preview").should("be.visible");
-    cy.get("editor-wc").shadow().find("button").contains("Run").should("be.visible");
+    cy.get("editor-wc")
+      .shadow()
+      .contains("index.html preview")
+      .should("be.visible");
+    cy.get("editor-wc")
+      .shadow()
+      .find("button")
+      .contains("Run")
+      .should("be.visible");
 
     // Check that the code has automatically run i.e. the HTML has been rendered
-    cy.get("editor-wc").shadow().find("iframe#output-frame").its("0.contentDocument.body").should("contain", "Draw anime with me");
+    cy.get("editor-wc")
+      .shadow()
+      .find("iframe#output-frame")
+      .its("0.contentDocument.body")
+      .should("contain", "Draw anime with me");
 
     // Check that the side bar is not displayed
     cy.get("editor-wc").shadow().contains("Project files").should("not.exist");
     // Check that the project bar is not displayed
-    cy.get("editor-wc").shadow().contains("Anime expressions solution").should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .contains("Anime expressions solution")
+      .should("not.exist");
     // Check that the editor input containing the code is not displayed
-    cy.get("editor-wc").shadow().contains("<h1>Draw anime with me</h1>").should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .contains("<h1>Draw anime with me</h1>")
+      .should("not.exist");
 
     // Run the code and check it executed without error
     cy.get("editor-wc").shadow().find("button").contains("Run").click();

cypress/e2e/spec.cy.js

@@ -9,7 +9,7 @@ it("Interrupts py5 draws when stop button clicked", () => {
   cy.visit(baseUrl);
   cy.get("div[class=cm-content]").invoke(
     "text",
-    "import py5\ndef setup():\n\tsize(400, 400)\ndef draw():\n\tbackground(255)\nrun()",
+    "import py5\ndef setup():\n\tpy5.size(400, 400)\ndef draw():\n\tpy5.background(255)\npy5.run_sketch()",
   );
   cy.get(".btn--run").click();
 

src/components/Editor/Runners/PythonRunner/PythonRunner.jsx

@@ -16,7 +16,7 @@ import {
 } from "../../../../redux/EditorSlice";
 import ErrorMessage from "../../ErrorMessage/ErrorMessage";
 import { createError } from "../../../../utils/apiCallHandler";
-import store from "../../../../app/store";
+import store from "../../../../redux/stores/WebComponentStore";
 import VisualOutputPane from "./VisualOutputPane";
 import OutputViewToggle from "./OutputViewToggle";
 import { SettingsContext } from "../../../../utils/settings";