Enable Pyodide input test (#1125)

Closes
https://github.com/RaspberryPiFoundation/digital-editor-issues/issues/327

Changes where also ensure the pyodide execution in Cypress is closer
aligned to how it's used

Author: sra405

.github/workflows/ci-cd.yml

@@ -95,6 +95,8 @@ jobs:
             yarn start
           wait-on: "http://localhost:3011"
           quiet: true
+          config-file: cypress.config.mjs
+          browser: chrome
         env:
           REACT_APP_API_ENDPOINT: "https://test-editor-api.raspberrypi.org"
           PUBLIC_URL: "http://localhost:3011"

CHANGELOG.md

@@ -33,6 +33,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- Fixed pyodide input test and cypress config to enable further pyodide tests (#1125)
 - Image sizing and wrapping in the sidebar (#1126)
 
 ## [0.28.4] - 2024-10-23

cypress.config.mjs

@@ -17,6 +17,14 @@ export default defineConfig({
           return null;
         },
       });
+      on("before:browser:launch", (browser = {}, launchOptions) => {
+        if (browser.name === "chrome") {
+          console.log("Applying Chrome launch options");
+          launchOptions.args.push("--enable-features=SharedArrayBuffer");
+          launchOptions.args.push("--disable-site-isolation-trials");
+        }
+        return launchOptions;
+      });
     },
     retries: {
       runMode: 3,

cypress/e2e/missionZero-wc.cy.js

@@ -137,20 +137,23 @@ it("picks up calls to input()", () => {
   cy.get("editor-wc")
     .shadow()
     .find("div[class=cm-content]")
-    .invoke("text", "input()");
+    .invoke("text", "name = input('What is your name?')\nprint('Hello', name)");
   cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc").shadow().find(".btn--stop").should("be.visible");
   cy.get("editor-wc")
     .shadow()
-    .find(
-      "div[class='pythonrunner-container skulptrunner skulptrunner--active']",
-    )
-    .contains("Text output")
+    .find("div.pythonrunner-container.skulptrunner.skulptrunner--active")
+    .contains(".react-tabs__tab-text", "Text output")
     .click();
   cy.get("editor-wc")
     .shadow()
     .find("span[contenteditable=true]")
-    .type("{enter}");
+    .type("Scott{enter}");
   cy.get("#results").should("contain", '"noInputEvents":false');
+  cy.get("editor-wc")
+    .shadow()
+    .find(".pythonrunner-console-output-line")
+    .should("contain", "Hello Scott");
 });
 
 it("picks up calls to wait for motion", () => {
@@ -208,7 +211,12 @@ it("returns duration of null if focus is lost", () => {
       "text",
       'from sense_hat import SenseHat\nsense = SenseHat()\nsense.show_message("a")',
     );
-  cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(".btn--run")
+    .should("not.be.disabled")
+    .click();
+  cy.get("editor-wc").shadow().find(".btn--stop").should("be.visible");
   cy.window().blur();
   cy.window().focus();
   cy.get("#results").should("contain", '"duration":null');

cypress/e2e/spec-wc-pyodide.cy.js

@@ -3,7 +3,6 @@ const origin = "http://localhost:3011/web-component.html";
 beforeEach(() => {
   cy.intercept("*", (req) => {
     req.headers["Origin"] = origin;
-    req.continue();
   });
 });
 
@@ -13,12 +12,22 @@ const runCode = (code) => {
     .shadow()
     .find("div[class=cm-content]")
     .invoke("text", `${code}\n`);
-  cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(".btn--run")
+    .should("not.be.disabled")
+    .click();
 };
 
 describe("Running the code with pyodide", () => {
   beforeEach(() => {
-    cy.visit(origin);
+    cy.visit({
+      url: origin,
+      headers: {
+        "Cross-Origin-Opener-Policy": "same-origin",
+        "Cross-Origin-Embedder-Policy": "require-corp",
+      },
+    });
     cy.window().then((win) => {
       Object.defineProperty(win, "crossOriginIsolated", {
         value: true,
@@ -29,6 +38,16 @@ describe("Running the code with pyodide", () => {
 
   it("runs a simple program", () => {
     runCode('print("Hello world")');
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pyodiderunner")
+      .contains(".react-tabs__tab", "Visual output")
+      .should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pyodiderunner")
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Text output");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
@@ -39,21 +58,33 @@ describe("Running the code with pyodide", () => {
     runCode(
       "from time import sleep\nfor i in range(100):\n\tprint(i)\n\tsleep(1)",
     );
-    cy.get("editor-wc").shadow().find(".btn--stop").click();
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "3");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".btn--stop")
+      .should("be.visible")
+      .click();
     cy.get("editor-wc")
       .shadow()
       .find(".error-message__content")
       .should("contain", "Execution interrupted");
   });
 
-  // skip this test for now until we get the headers set up
-  it.skip("runs a simple program with an input", () => {
+  it("runs a simple program with an input", () => {
     runCode('name = input("What is your name?")\nprint("Hello", name)');
+    cy.get("editor-wc").shadow().find(".btn--stop").should("be.visible");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
       .should("contain", "What is your name?");
-    cy.get("editor-wc").shadow().find("#input").invoke("text", "Lois{enter}");
+    cy.get("editor-wc")
+      .shadow()
+      .find("#input")
+      .should("be.visible")
+      .type("Lois{enter}");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
@@ -133,6 +164,34 @@ describe("Running the code with pyodide", () => {
       .should("contain", "4");
   });
 
+  it("runs a simple program with the py-enigma library", () => {
+    runCode(
+      `
+from enigma.machine import EnigmaMachine
+# Sheet settings
+ROTORS = "IV I V"
+RINGS = "20 5 10"
+PLUGBOARD = "KT AJ IV US NY HL GD XF PB CQ"
+def use_enigma_machine(msg, rotor_start):
+  # Set up the Enigma machine
+  machine = EnigmaMachine.from_key_sheet(rotors=ROTORS, reflector="B", ring_settings=RINGS, plugboard_settings=PLUGBOARD)
+  # Set the initial position of the rotors
+  machine.set_display(rotor_start)
+  # Encrypt or decrypt the message
+  transformed_msg = machine.process_text(msg)
+  return(transformed_msg)
+text_in = "This is a test message"
+rotor_start = "FNZ"
+text_out = use_enigma_machine(text_in, rotor_start)
+print(text_out)
+      `,
+    );
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "ULRYQJMVHLFQKBEFUGEOFL");
+  });
+
   it("errors when importing a non-existent module", () => {
     runCode("import i_do_not_exist");
     cy.get("editor-wc")

cypress/e2e/spec-wc-skulpt.cy.js

@@ -14,7 +14,11 @@ const runCode = (code) => {
     .find("div[class=cm-content]")
     .invoke("text", `${code}\n`);
   cy.wait(200);
-  cy.get("editor-wc").shadow().find(".btn--run").click();
+  cy.get("editor-wc")
+    .shadow()
+    .find(".btn--run")
+    .should("not.be.disabled")
+    .click();
 };
 
 describe("Running the code with skulpt", () => {
@@ -28,10 +32,38 @@ describe("Running the code with skulpt", () => {
     });
   });
 
+  it("runs a simple program", () => {
+    runCode("print('Hello world')");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .contains(".react-tabs__tab", "Visual output")
+      .should("not.exist");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Text output");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".pythonrunner-console-output-line")
+      .should("contain", "Hello world");
+  });
+
   it("runs a simple p5 program", () => {
     runCode(
       "from p5 import *\n\ndef setup():\n\tsize(400, 400)\ndef draw():\n\tfill('cyan')\n\trect(0, 0, 400, 250)\nrun(frame_rate=2)",
     );
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .contains(".react-tabs__tab", "Text output")
+      .should("exist");
+    cy.get("editor-wc")
+      .shadow()
+      .find(".skulptrunner")
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Visual output");
     cy.get("editor-wc").shadow().find(".p5Canvas").should("exist");
   });
 

cypress/e2e/spec-wc.cy.js

@@ -113,11 +113,18 @@ 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");
+    const runnerContainer = cy
+      .get("editor-wc")
+      .shadow()
+      .find(".proj-runner-container");
+    runnerContainer
+      .find(".react-tabs__tab--selected")
+      .should("contain", "Text output");
     cy.get("editor-wc")
       .shadow()
       .find("button")
       .contains("Run")
+      .should("not.be.disabled")
       .should("be.visible");
 
     // Check that the side bar is not displayed
@@ -160,6 +167,7 @@ describe("when embedded, output_only & output_split_view are true", () => {
       .shadow()
       .find("button")
       .contains("Run")
+      .should("not.be.disabled")
       .should("be.visible");
 
     // Check that the code has automatically run i.e. the HTML has been rendered

src/assets/stylesheets/PythonRunner.scss

@@ -55,6 +55,22 @@
   position: relative;
 }
 
+.pyodiderunner {
+  display: none;
+
+  &--active {
+    display: flex;
+  }
+}
+
+.skulptrunner {
+  display: none;
+
+  &--active {
+    display: flex;
+  }
+}
+
 .visual-output {
   flex: 1;
   display: flex;

src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx

@@ -11,6 +11,8 @@ import {
   showErrorModal,
   codeRunHandled,
   triggerCodeRun,
+  loadingRunner,
+  setLoadedRunner,
 } from "../../../../redux/EditorSlice";
 
 import {
@@ -166,6 +168,8 @@ function HtmlRunner() {
 
   useEffect(() => {
     eventListener();
+    dispatch(loadingRunner("html"));
+    dispatch(setLoadedRunner("html"));
   }, []);
 
   let timeout;