From 047b904a0b876e4ad099883aeebaaf652e2c2657 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 09:33:50 +0100
Subject: [PATCH 01/32] set cypress to enable shared array buffers

---
 cypress.config.mjs | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/cypress.config.mjs b/cypress.config.mjs
index 29e8c298e..aaad6c706 100644
--- a/cypress.config.mjs
+++ b/cypress.config.mjs
@@ -17,6 +17,13 @@ export default defineConfig({
           return null;
         },
       });
+      on("before:browser:launch", (browser = {}, launchOptions) => {
+        if (browser.name === "chrome") {
+          launchOptions.args.push("--enable-features=SharedArrayBuffer");
+          launchOptions.args.push("--disable-site-isolation-trials");
+        }
+        return launchOptions;
+      });
     },
     retries: {
       runMode: 3,

From b907e48d10cbdcde4156b987f38286dc79aad64a Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 09:34:21 +0100
Subject: [PATCH 02/32] initialise codeRunLoading as true to stop the run
 button flashing before load

---
 src/redux/EditorSlice.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index 8a73f4cc5..757fb8c8f 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -106,7 +106,7 @@ const initialState = {
   isSplitView: true,
   isThemeable: true,
   webComponent: false,
-  codeRunLoading: false,
+  codeRunLoading: true,
   codeRunStopped: false,
   projectList: [],
   projectListLoaded: "idle",

From 20ea984caf2f79e435da73d917a391a3a0afac3b Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 09:35:00 +0100
Subject: [PATCH 03/32] update pyodide tests to include headers and check for
 button states

---
 cypress/e2e/spec-wc-pyodide.cy.js | 35 ++++++++++++++++++++++++-------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/spec-wc-pyodide.cy.js b/cypress/e2e/spec-wc-pyodide.cy.js
index c9d3e51f9..5df5ae508 100644
--- a/cypress/e2e/spec-wc-pyodide.cy.js
+++ b/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,
@@ -39,21 +48,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")

From 11ee4f36dcc73a6e0972cdb71e38d462a7acfab2 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 09:47:15 +0100
Subject: [PATCH 04/32] alter initial codeRunLoading state and toggle true when
 a pyodideWorker is initialised

---
 .../Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx | 2 ++
 src/redux/EditorSlice.js                                        | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 8bb232feb..dd754e851 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -63,6 +63,8 @@ const PyodideRunner = (props) => {
 
   useEffect(() => {
     if (pyodideWorker) {
+      // initialise as loading
+      handleLoading();
       pyodideWorker.onmessage = ({ data }) => {
         switch (data.method) {
           case "handleLoading":
diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index 757fb8c8f..8a73f4cc5 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -106,7 +106,7 @@ const initialState = {
   isSplitView: true,
   isThemeable: true,
   webComponent: false,
-  codeRunLoading: true,
+  codeRunLoading: false,
   codeRunStopped: false,
   projectList: [],
   projectListLoaded: "idle",

From 263cc73734ea3197c5de950e659827a97f11c3d0 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 09:49:47 +0100
Subject: [PATCH 05/32] CHANGELOG

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 73b8ca178..75ed4ce3b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Fixed
+
+- Fixed pyodide input test and cypress config to enable further pyodide tests (#1125)
+
 ## [0.28.4] - 2024-10-23
 
 ### Added

From dd997c80b8f5af550561c352912f4bddd3b5b0db Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 13:00:38 +0100
Subject: [PATCH 06/32] ci(cypress): not sure why the browers options aren't
 working in actions

---
 .github/workflows/ci-cd.yml | 1 +
 cypress.config.mjs          | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index 8f0a5f4b1..853c4f644 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -95,6 +95,7 @@ jobs:
             yarn start
           wait-on: "http://localhost:3011"
           quiet: true
+          config-file: cypress.config.mjs
         env:
           REACT_APP_API_ENDPOINT: "https://test-editor-api.raspberrypi.org"
           PUBLIC_URL: "http://localhost:3011"
diff --git a/cypress.config.mjs b/cypress.config.mjs
index aaad6c706..f288ea033 100644
--- a/cypress.config.mjs
+++ b/cypress.config.mjs
@@ -19,6 +19,7 @@ export default defineConfig({
       });
       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");
         }

From 44b205639ae8c7c45167096819a7cddd079cbc9b Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 15:56:12 +0100
Subject: [PATCH 07/32] fix enigma warning

---
 src/PyodideWorker.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/PyodideWorker.js b/src/PyodideWorker.js
index 216fb8d25..b50981742 100644
--- a/src/PyodideWorker.js
+++ b/src/PyodideWorker.js
@@ -165,6 +165,7 @@ const PyodideWorker = () => {
           `${process.env.ASSETS_URL}/pyodide/packages/py_enigma-0.1-py3-none-any.whl`,
         );
       },
+      after: () => {},
     },
     turtle: {
       before: async () => {

From de687398ecf9fd6bcdcdc45d63ae93cd52c1d11f Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 15:56:32 +0100
Subject: [PATCH 08/32] split out runner loading and loader states

---
 src/redux/EditorSlice.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index 8a73f4cc5..37158403a 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -106,6 +106,8 @@ const initialState = {
   isSplitView: true,
   isThemeable: true,
   webComponent: false,
+  activeRunner: null,
+  loadedRunner: null,
   codeRunLoading: false,
   codeRunStopped: false,
   projectList: [],
@@ -296,7 +298,17 @@ export const EditorSlice = createSlice({
     stopDraw: (state) => {
       state.drawTriggered = false;
     },
-    loadingRunner: (state) => {
+    loadingRunner: (state, action) => {
+      state.activeRunner = action.payload;
+      state.codeRunLoading = true;
+    },
+    loadedRunner: (state, action) => {
+      state.loadedRunner = action.payload;
+      state.codeRunLoading = false;
+    },
+    resetRunner: (state) => {
+      state.activeRunner = null;
+      state.loadedRunner = null;
       state.codeRunLoading = true;
     },
     codeRunHandled: (state) => {
@@ -466,6 +478,8 @@ export const EditorSlice = createSlice({
 export const {
   addProjectComponent,
   loadingRunner,
+  loadedRunner,
+  resetRunner,
   codeRunHandled,
   expireJustLoaded,
   closeFile,

From 6966c567c34621d629258ebfc1a96feeb4e8e6d9 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 15:58:22 +0100
Subject: [PATCH 09/32] disable run button based on runner loading states

---
 src/components/RunButton/RunButton.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/RunButton/RunButton.jsx b/src/components/RunButton/RunButton.jsx
index 2b6717697..4034284f0 100644
--- a/src/components/RunButton/RunButton.jsx
+++ b/src/components/RunButton/RunButton.jsx
@@ -6,6 +6,8 @@ import { triggerCodeRun } from "../../redux/EditorSlice";
 
 const RunButton = ({ embedded = false, className, ...props }) => {
   const codeRunLoading = useSelector((state) => state.editor.codeRunLoading);
+  const activeRunner = useSelector((state) => state.editor.activeRunner);
+  const loadedRunner = useSelector((state) => state.editor.loadedRunner);
   const dispatch = useDispatch();
 
   const onClickRun = () => {
@@ -17,7 +19,9 @@ const RunButton = ({ embedded = false, className, ...props }) => {
 
   return (
     <Button
-      disabled={codeRunLoading}
+      disabled={
+        !activeRunner || activeRunner !== loadedRunner || codeRunLoading
+      }
       className={`btn--primary btn--run${className ? ` ${className}` : ""}`}
       onClickHandler={onClickRun}
       {...props}

From 50f1ef22eddd4b127e6f9bfcdd28d249814bb353 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 15:58:46 +0100
Subject: [PATCH 10/32] html loads instantly so dispatch on first render

---
 src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
index da8008d37..100c670af 100644
--- a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
+++ b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
@@ -11,6 +11,8 @@ import {
   showErrorModal,
   codeRunHandled,
   triggerCodeRun,
+  loadingRunner,
+  loadedRunner,
 } from "../../../../redux/EditorSlice";
 
 import {
@@ -166,6 +168,8 @@ function HtmlRunner() {
 
   useEffect(() => {
     eventListener();
+    dispatch(loadingRunner("html"));
+    dispatch(loadedRunner("html"));
   }, []);
 
   let timeout;

From 31b412f892fbcd6fdd76b33c5fd45bd213374ebe Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 16:00:00 +0100
Subject: [PATCH 11/32] start with no python runner and determine logically

---
 .../Runners/PythonRunner/PythonRunner.jsx     | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
index 01bcf7ca5..429c3f37a 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
@@ -2,9 +2,11 @@ import React, { useEffect, useState } from "react";
 
 import PyodideRunner from "./PyodideRunner/PyodideRunner";
 import SkulptRunner from "./SkulptRunner/SkulptRunner";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 
+import { loadingRunner } from "../../../../redux/EditorSlice";
+
 const SKULPT_ONLY_MODULES = [
   "p5",
   "py5",
@@ -14,19 +16,31 @@ const SKULPT_ONLY_MODULES = [
 ];
 
 const PythonRunner = () => {
+  const dispatch = useDispatch();
+
   const project = useSelector((state) => state.editor.project);
+  const activeRunner = useSelector((state) => state.editor.activeRunner);
   const codeRunTriggered = useSelector(
     (state) => state.editor.codeRunTriggered,
   );
   const senseHatAlwaysEnabled = useSelector(
     (state) => state.editor.senseHatAlwaysEnabled,
   );
-  const [usePyodide, setUsePyodide] = useState(true);
+  const [usePyodide, setUsePyodide] = useState(null);
+  const [skupltFallback, setSkulptFallback] = useState(false);
   const { t } = useTranslation();
 
   useEffect(() => {
-    if (!window.crossOriginIsolated) {
+    if (typeof usePyodide === "boolean") {
+      const runner = usePyodide ? "pyodide" : "skulpt";
+      dispatch(loadingRunner(runner));
+    }
+  }, [dispatch, usePyodide]);
+
+  useEffect(() => {
+    if (!!!window?.crossOriginIsolated) {
       setUsePyodide(false);
+      setSkulptFallback(true);
       return;
     }
     const getImports = (code) => {
@@ -59,7 +73,10 @@ const PythonRunner = () => {
           const hasSkulptOnlyModules = imports.some((name) =>
             SKULPT_ONLY_MODULES.includes(name),
           );
-          if (hasSkulptOnlyModules || senseHatAlwaysEnabled) {
+          if (
+            !skupltFallback &&
+            (hasSkulptOnlyModules || senseHatAlwaysEnabled)
+          ) {
             setUsePyodide(false);
             break;
           } else {
@@ -70,11 +87,11 @@ const PythonRunner = () => {
         }
       }
     }
-  }, [project, codeRunTriggered, senseHatAlwaysEnabled, t]);
+  }, [project, codeRunTriggered, senseHatAlwaysEnabled, skupltFallback, t]);
   return (
     <>
-      <PyodideRunner active={usePyodide} />
-      <SkulptRunner active={!usePyodide} />
+      <PyodideRunner active={activeRunner === "pyodide"} />
+      <SkulptRunner active={activeRunner === "skulpt"} />
     </>
   );
 };

From ce00c2d3deb63317adf5c2085b17d08426bf4eb1 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 16:01:57 +0100
Subject: [PATCH 12/32] only load pyodideWorker when needed and set loaded
 state when complete

---
 .../PyodideRunner/PyodideRunner.jsx           | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index dd754e851..795ba7b08 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -6,7 +6,7 @@ import { useTranslation } from "react-i18next";
 import {
   setError,
   codeRunHandled,
-  loadingRunner,
+  loadedRunner,
 } from "../../../../../redux/EditorSlice";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useMediaQuery } from "react-responsive";
@@ -33,9 +33,17 @@ const getWorkerURL = (url) => {
 const PyodideRunner = (props) => {
   const { active } = props;
 
-  // Blob approach + targeted headers - no errors but headers required in host app to interrupt code
-  const workerUrl = getWorkerURL(`${process.env.PUBLIC_URL}/PyodideWorker.js`);
-  const pyodideWorker = useMemo(() => new Worker(workerUrl), []);
+  const [pyodideWorker, setPyodideWorker] = useState(null);
+
+  useEffect(() => {
+    if (active) {
+      const workerUrl = getWorkerURL(
+        `${process.env.PUBLIC_URL}/PyodideWorker.js`,
+      );
+      const worker = new Worker(workerUrl);
+      setPyodideWorker(worker);
+    }
+  }, [active]);
 
   const interruptBuffer = useRef();
   const stdinBuffer = useRef();
@@ -63,8 +71,6 @@ const PyodideRunner = (props) => {
 
   useEffect(() => {
     if (pyodideWorker) {
-      // initialise as loading
-      handleLoading();
       pyodideWorker.onmessage = ({ data }) => {
         switch (data.method) {
           case "handleLoading":
@@ -99,7 +105,7 @@ const PyodideRunner = (props) => {
         }
       };
     }
-  }, []);
+  }, [pyodideWorker]);
 
   useEffect(() => {
     if (codeRunTriggered && active) {
@@ -121,12 +127,13 @@ const PyodideRunner = (props) => {
   }, [codeRunStopped]);
 
   const handleLoading = () => {
-    dispatch(loadingRunner());
+    return;
   };
 
   const handleLoaded = (stdin, interrupt) => {
     stdinBuffer.current = stdin;
     interruptBuffer.current = interrupt;
+    dispatch(loadedRunner("pyodide"));
     dispatch(codeRunHandled());
     disableInput();
   };

From 93c993abf9b74013770a8038257027532c01f52f Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 16:02:16 +0100
Subject: [PATCH 13/32] set skulpt loading state when active

---
 .../Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx     | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index dc852989c..3fb830148 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -13,6 +13,7 @@ import {
   stopDraw,
   setSenseHatEnabled,
   triggerDraw,
+  loadedRunner,
 } from "../../../../../redux/EditorSlice";
 import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
 import { createError } from "../../../../../utils/apiCallHandler";
@@ -89,6 +90,12 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     return pageInput || webComponentInput;
   };
 
+  useEffect(() => {
+    if (active) {
+      dispatch(loadedRunner("skulpt"));
+    }
+  }, [active]);
+
   useEffect(() => {
     if (codeRunTriggered && active && showRunner) {
       console.log("running with skulpt");

From 8b781d1a78e2b691bffce4b7d57755d78a42f5d8 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Fri, 25 Oct 2024 16:31:23 +0100
Subject: [PATCH 14/32] set ci cypress browser to chrome

---
 .github/workflows/ci-cd.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index 853c4f644..2536c7f35 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -96,6 +96,7 @@ jobs:
           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"

From d7c60938801e9d81cdac937457d00710af46dbd3 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Mon, 28 Oct 2024 12:02:35 +0000
Subject: [PATCH 15/32] remove showRunner logic now active logic has altered
 slightly

---
 .../PyodideRunner/PyodideRunner.jsx           | 22 +++++++----------
 .../SkulptRunner/SkulptRunner.jsx             | 24 +++++++------------
 2 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 795ba7b08..b474a801f 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -1,8 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import "../../../../../assets/stylesheets/PythonRunner.scss";
-import React, { useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
+import classNames from "classnames";
 import {
   setError,
   codeRunHandled,
@@ -67,7 +68,6 @@ const PyodideRunner = (props) => {
   const showVisualTab = queryParams.get("show_visual_tab") === "true";
   const [hasVisual, setHasVisual] = useState(showVisualTab || senseHatAlways);
   const [visuals, setVisuals] = useState([]);
-  const [showRunner, setShowRunner] = useState(active);
 
   useEffect(() => {
     if (pyodideWorker) {
@@ -114,12 +114,6 @@ const PyodideRunner = (props) => {
     }
   }, [codeRunTriggered]);
 
-  useEffect(() => {
-    if (codeRunTriggered) {
-      setShowRunner(active);
-    }
-  }, [codeRunTriggered]);
-
   useEffect(() => {
     if (codeRunStopped && active) {
       handleStop();
@@ -317,17 +311,17 @@ const PyodideRunner = (props) => {
     }
   };
 
-  if (!pyodideWorker) {
-    console.error("PyodideWorker is not initialized");
+  if (!pyodideWorker && active) {
+    console.warn("PyodideWorker is not initialized");
     return;
   }
 
   return (
     <div
-      className={`pythonrunner-container pyodiderunner${
-        active ? " pyodiderunner--active" : ""
-      }`}
-      style={{ display: showRunner ? "flex" : "none" }}
+      className={classNames("pythonrunner-container", "pyodiderunner", {
+        active: "pyodiderunner--active",
+      })}
+      style={{ display: active ? "flex" : "none" }}
     >
       {isSplitView ? (
         <>
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index 3fb830148..10097a407 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import Sk from "skulpt";
 import { useMediaQuery } from "react-responsive";
+import classNames from "classnames";
 import {
   setError,
   setErrorDetails,
@@ -23,7 +24,6 @@ import OutputViewToggle from "../OutputViewToggle";
 import { SettingsContext } from "../../../../../utils/settings";
 import RunnerControls from "../../../../RunButton/RunnerControls";
 import { MOBILE_MEDIA_QUERY } from "../../../../../utils/mediaQueryBreakpoints";
-import classNames from "classnames";
 
 const externalLibraries = {
   "./pygal/__init__.js": {
@@ -78,9 +78,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const settings = useContext(SettingsContext);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
-  const [hasVisualOutput, setHasVisualOutput] = useState(true);
-
-  const [showRunner, setShowRunner] = useState(active);
+  const [hasVisualOutput, setHasVisualOutput] = useState(false);
 
   const getInput = () => {
     const pageInput = document.getElementById("input");
@@ -97,17 +95,11 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   }, [active]);
 
   useEffect(() => {
-    if (codeRunTriggered && active && showRunner) {
+    if (codeRunTriggered && active) {
       console.log("running with skulpt");
       runCode();
     }
-  }, [codeRunTriggered, showRunner]);
-
-  useEffect(() => {
-    if (codeRunTriggered) {
-      setShowRunner(active);
-    }
-  }, [codeRunTriggered]);
+  }, [codeRunTriggered, active]);
 
   useEffect(() => {
     if (codeRunStopped && active && getInput()) {
@@ -429,10 +421,10 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
 
   return (
     <div
-      className={`pythonrunner-container skulptrunner${
-        active ? " skulptrunner--active" : ""
-      }`}
-      style={{ display: showRunner ? "flex" : "none" }}
+      className={classNames("pythonrunner-container", "skulptrunner", {
+        active: "skulptrunner--active",
+      })}
+      style={{ display: active ? "flex" : "none" }}
     >
       {isSplitView || singleOutputPanel ? (
         <>

From cd5b6dc1e2c0846eba3b457b95fa241b41d6b436 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Mon, 28 Oct 2024 12:02:59 +0000
Subject: [PATCH 16/32] update wc cypress tests

---
 cypress/e2e/spec-wc.cy.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/spec-wc.cy.js b/cypress/e2e/spec-wc.cy.js
index 4b1dbe453..a6be29878 100644
--- a/cypress/e2e/spec-wc.cy.js
+++ b/cypress/e2e/spec-wc.cy.js
@@ -113,7 +113,13 @@ 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")

From ceee145e7c4c9844e90b17155c8cac00eebcf458 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Mon, 28 Oct 2024 12:24:53 +0000
Subject: [PATCH 17/32] fix skulpt/pyodide active states

---
 .../Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx | 2 +-
 .../Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index b474a801f..6e9261739 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -319,7 +319,7 @@ const PyodideRunner = (props) => {
   return (
     <div
       className={classNames("pythonrunner-container", "pyodiderunner", {
-        active: "pyodiderunner--active",
+        "pyodiderunner--active": active,
       })}
       style={{ display: active ? "flex" : "none" }}
     >
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index 10097a407..ac1fe4797 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -422,7 +422,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   return (
     <div
       className={classNames("pythonrunner-container", "skulptrunner", {
-        active: "skulptrunner--active",
+        "skulptrunner--active": active,
       })}
       style={{ display: active ? "flex" : "none" }}
     >

From 7556fa37fa67ca40cb374ba74b26308d22a14516 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 08:01:43 +0000
Subject: [PATCH 18/32] rename loadedRunner action to avoid state name clash

---
 src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx     | 4 ++--
 .../Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx    | 4 ++--
 .../Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx      | 6 ++++--
 src/redux/EditorSlice.js                                    | 4 ++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
index 100c670af..f5bcbd13e 100644
--- a/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
+++ b/src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx
@@ -12,7 +12,7 @@ import {
   codeRunHandled,
   triggerCodeRun,
   loadingRunner,
-  loadedRunner,
+  setLoadedRunner,
 } from "../../../../redux/EditorSlice";
 
 import {
@@ -169,7 +169,7 @@ function HtmlRunner() {
   useEffect(() => {
     eventListener();
     dispatch(loadingRunner("html"));
-    dispatch(loadedRunner("html"));
+    dispatch(setLoadedRunner("html"));
   }, []);
 
   let timeout;
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 6e9261739..d49ae61ba 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -7,7 +7,7 @@ import classNames from "classnames";
 import {
   setError,
   codeRunHandled,
-  loadedRunner,
+  setLoadedRunner,
 } from "../../../../../redux/EditorSlice";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import { useMediaQuery } from "react-responsive";
@@ -127,7 +127,7 @@ const PyodideRunner = (props) => {
   const handleLoaded = (stdin, interrupt) => {
     stdinBuffer.current = stdin;
     interruptBuffer.current = interrupt;
-    dispatch(loadedRunner("pyodide"));
+    dispatch(setLoadedRunner("pyodide"));
     dispatch(codeRunHandled());
     disableInput();
   };
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index ac1fe4797..05457e158 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -14,7 +14,7 @@ import {
   stopDraw,
   setSenseHatEnabled,
   triggerDraw,
-  loadedRunner,
+  setLoadedRunner,
 } from "../../../../../redux/EditorSlice";
 import ErrorMessage from "../../../ErrorMessage/ErrorMessage";
 import { createError } from "../../../../../utils/apiCallHandler";
@@ -90,7 +90,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
 
   useEffect(() => {
     if (active) {
-      dispatch(loadedRunner("skulpt"));
+      dispatch(setLoadedRunner("skulpt"));
     }
   }, [active]);
 
@@ -156,6 +156,8 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
 
     if (visualLibraries.includes(library)) {
       setHasVisualOutput(true);
+    } else {
+      setHasVisualOutput(false);
     }
 
     let localProjectFiles = projectCode
diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index 37158403a..fbd745ca5 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -302,7 +302,7 @@ export const EditorSlice = createSlice({
       state.activeRunner = action.payload;
       state.codeRunLoading = true;
     },
-    loadedRunner: (state, action) => {
+    setLoadedRunner: (state, action) => {
       state.loadedRunner = action.payload;
       state.codeRunLoading = false;
     },
@@ -478,7 +478,7 @@ export const EditorSlice = createSlice({
 export const {
   addProjectComponent,
   loadingRunner,
-  loadedRunner,
+  setLoadedRunner,
   resetRunner,
   codeRunHandled,
   expireJustLoaded,

From 0e6cdc9c5ac19f55acc6dcb01879b1c05509fe50 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 08:02:27 +0000
Subject: [PATCH 19/32] cypress mission zero ensuring tests don't implicitly
 test other functionality

---
 cypress/e2e/missionZero-wc.cy.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/missionZero-wc.cy.js b/cypress/e2e/missionZero-wc.cy.js
index f01027003..4f9680543 100644
--- a/cypress/e2e/missionZero-wc.cy.js
+++ b/cypress/e2e/missionZero-wc.cy.js
@@ -137,19 +137,18 @@ 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');
 });
 
@@ -208,7 +207,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');

From 59d518d55240065997cce7ff0ac901ecfb66624a Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 08:13:44 +0000
Subject: [PATCH 20/32] py-enigma cypress test

---
 cypress/e2e/spec-wc-pyodide.cy.js | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/cypress/e2e/spec-wc-pyodide.cy.js b/cypress/e2e/spec-wc-pyodide.cy.js
index 5df5ae508..d09a10e42 100644
--- a/cypress/e2e/spec-wc-pyodide.cy.js
+++ b/cypress/e2e/spec-wc-pyodide.cy.js
@@ -154,6 +154,34 @@ describe("Running the code with pyodide", () => {
       .should("contain", "4");
   });
 
+  it.only("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")

From 2c495f4282a8d60623332f32e7206b7d806b4d9f Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 08:14:38 +0000
Subject: [PATCH 21/32] cypress pyodide remove the only

---
 cypress/e2e/spec-wc-pyodide.cy.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cypress/e2e/spec-wc-pyodide.cy.js b/cypress/e2e/spec-wc-pyodide.cy.js
index d09a10e42..f8cfbaa5a 100644
--- a/cypress/e2e/spec-wc-pyodide.cy.js
+++ b/cypress/e2e/spec-wc-pyodide.cy.js
@@ -154,7 +154,7 @@ describe("Running the code with pyodide", () => {
       .should("contain", "4");
   });
 
-  it.only("runs a simple program with the py-enigma library", () => {
+  it("runs a simple program with the py-enigma library", () => {
     runCode(
       `
 from enigma.machine import EnigmaMachine

From 01e326121c5aaf6176d4b917c867ff80c3db17f0 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 08:38:47 +0000
Subject: [PATCH 22/32] cypress skulpt ensure run button is not disabled i.e.
 runner is loaded

---
 cypress/e2e/spec-wc-skulpt.cy.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/spec-wc-skulpt.cy.js b/cypress/e2e/spec-wc-skulpt.cy.js
index 2c51f717b..455e7802d 100644
--- a/cypress/e2e/spec-wc-skulpt.cy.js
+++ b/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", () => {

From cb625370dcf1af43d5ceae900737ad61a8425cb3 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 08:39:06 +0000
Subject: [PATCH 23/32] default visual output to true in skulpt

---
 .../Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index 05457e158..fceea8bb2 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -78,7 +78,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const settings = useContext(SettingsContext);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
-  const [hasVisualOutput, setHasVisualOutput] = useState(false);
+  const [hasVisualOutput, setHasVisualOutput] = useState(true);
 
   const getInput = () => {
     const pageInput = document.getElementById("input");
@@ -156,8 +156,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
 
     if (visualLibraries.includes(library)) {
       setHasVisualOutput(true);
-    } else {
-      setHasVisualOutput(false);
     }
 
     let localProjectFiles = projectCode

From 0f146932b35e9bafda018425a2142d75f3822d8d Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 12:33:10 +0000
Subject: [PATCH 24/32] default skulpt to visual due to common use cases but
 toggle off if no visual dependencies

---
 .../SkulptRunner/SkulptRunner.jsx             | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index fceea8bb2..c9dbebb79 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -72,13 +72,17 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   );
   const codeRunStopped = useSelector((state) => state.editor.codeRunStopped);
   const drawTriggered = useSelector((state) => state.editor.drawTriggered);
+  const senseHatAlwaysEnabled = useSelector(
+    (state) => state.editor.senseHatAlwaysEnabled,
+  );
   const output = useRef();
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const settings = useContext(SettingsContext);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
-  const [hasVisualOutput, setHasVisualOutput] = useState(true);
+  const [hasVisualOutput, setHasVisualOutput] = useState(senseHatAlwaysEnabled);
+  const [visualOutput, setVisualOutput] = useState(true);
 
   const getInput = () => {
     const pageInput = document.getElementById("input");
@@ -95,12 +99,23 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   }, [active]);
 
   useEffect(() => {
-    if (codeRunTriggered && active) {
-      console.log("running with skulpt");
-      runCode();
+    if (active) {
+      if (codeRunTriggered) {
+        console.log("running with skulpt");
+        // setVisualOutput(true);
+        runCode();
+      } else if (!senseHatAlwaysEnabled) {
+        setHasVisualOutput(false);
+      }
     }
   }, [codeRunTriggered, active]);
 
+  useEffect(() => {
+    if (codeRunTriggered && !senseHatAlwaysEnabled) {
+      setVisualOutput(!!hasVisualOutput);
+    }
+  }, [codeRunTriggered, hasVisualOutput]);
+
   useEffect(() => {
     if (codeRunStopped && active && getInput()) {
       const input = getInput();
@@ -428,7 +443,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     >
       {isSplitView || singleOutputPanel ? (
         <>
-          {hasVisualOutput && showVisualOutput && (
+          {visualOutput && showVisualOutput && (
             <div className={outputPanelClasses("visual")}>
               <Tabs forceRenderTabPanel={true}>
                 <div
@@ -443,7 +458,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                       </span>
                     </Tab>
                   </TabList>
-                  {!isEmbedded && hasVisualOutput && <OutputViewToggle />}
+                  {!isEmbedded && visualOutput && <OutputViewToggle />}
                   {!isEmbedded && isMobile && <RunnerControls skinny />}
                 </div>
                 <TabPanel key={0}>
@@ -467,7 +482,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                       </span>
                     </Tab>
                   </TabList>
-                  {!hasVisualOutput && !isEmbedded && isMobile && (
+                  {!visualOutput && !isEmbedded && isMobile && (
                     <RunnerControls skinny />
                   )}
                 </div>
@@ -484,10 +499,10 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
           )}
         </>
       ) : (
-        <Tabs forceRenderTabPanel={true} defaultIndex={hasVisualOutput ? 0 : 1}>
+        <Tabs forceRenderTabPanel={true} defaultIndex={visualOutput ? 0 : 1}>
           <div className="react-tabs__tab-container">
             <TabList>
-              {hasVisualOutput ? (
+              {visualOutput ? (
                 <Tab key={0}>
                   <span className="react-tabs__tab-text">
                     {t("output.visualOutput")}
@@ -500,11 +515,11 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                 </span>
               </Tab>
             </TabList>
-            {!isEmbedded && hasVisualOutput && <OutputViewToggle />}
+            {!isEmbedded && visualOutput && <OutputViewToggle />}
             {!isEmbedded && isMobile && <RunnerControls skinny />}
           </div>
           {!isOutputOnly && <ErrorMessage />}
-          {hasVisualOutput ? (
+          {visualOutput ? (
             <TabPanel key={0}>
               <VisualOutputPane />
             </TabPanel>

From cab48885462250aa7f47473a697ff9332108ed86 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 12:33:30 +0000
Subject: [PATCH 25/32] sure up cypress testing

---
 cypress/e2e/spec-wc-pyodide.cy.js | 12 +++++++++++-
 cypress/e2e/spec-wc-skulpt.cy.js  | 28 ++++++++++++++++++++++++++++
 cypress/e2e/spec-wc.cy.js         |  2 ++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/spec-wc-pyodide.cy.js b/cypress/e2e/spec-wc-pyodide.cy.js
index f8cfbaa5a..a02ad20c7 100644
--- a/cypress/e2e/spec-wc-pyodide.cy.js
+++ b/cypress/e2e/spec-wc-pyodide.cy.js
@@ -36,8 +36,18 @@ describe("Running the code with pyodide", () => {
     });
   });
 
-  it("runs a simple program", () => {
+  it.only("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")
diff --git a/cypress/e2e/spec-wc-skulpt.cy.js b/cypress/e2e/spec-wc-skulpt.cy.js
index 455e7802d..8d9777ade 100644
--- a/cypress/e2e/spec-wc-skulpt.cy.js
+++ b/cypress/e2e/spec-wc-skulpt.cy.js
@@ -32,10 +32,38 @@ describe("Running the code with skulpt", () => {
     });
   });
 
+  it.only("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");
   });
 
diff --git a/cypress/e2e/spec-wc.cy.js b/cypress/e2e/spec-wc.cy.js
index a6be29878..b8b089852 100644
--- a/cypress/e2e/spec-wc.cy.js
+++ b/cypress/e2e/spec-wc.cy.js
@@ -124,6 +124,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 side bar is not displayed
@@ -166,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

From dcbb907d16362bbb45400258a80c9dc1efb9c240 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 12:35:04 +0000
Subject: [PATCH 26/32] remove only's again :facepalm:

---
 cypress/e2e/spec-wc-pyodide.cy.js | 2 +-
 cypress/e2e/spec-wc-skulpt.cy.js  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/spec-wc-pyodide.cy.js b/cypress/e2e/spec-wc-pyodide.cy.js
index a02ad20c7..858c308a9 100644
--- a/cypress/e2e/spec-wc-pyodide.cy.js
+++ b/cypress/e2e/spec-wc-pyodide.cy.js
@@ -36,7 +36,7 @@ describe("Running the code with pyodide", () => {
     });
   });
 
-  it.only("runs a simple program", () => {
+  it("runs a simple program", () => {
     runCode('print("Hello world")');
     cy.get("editor-wc")
       .shadow()
diff --git a/cypress/e2e/spec-wc-skulpt.cy.js b/cypress/e2e/spec-wc-skulpt.cy.js
index 8d9777ade..6f5e05b9f 100644
--- a/cypress/e2e/spec-wc-skulpt.cy.js
+++ b/cypress/e2e/spec-wc-skulpt.cy.js
@@ -32,7 +32,7 @@ describe("Running the code with skulpt", () => {
     });
   });
 
-  it.only("runs a simple program", () => {
+  it("runs a simple program", () => {
     runCode("print('Hello world')");
     cy.get("editor-wc")
       .shadow()

From 3e51d8b0f7f5da59bc7b77ce28e39ab902b0bf3d Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 29 Oct 2024 12:46:51 +0000
Subject: [PATCH 27/32] testing and code tidy up

---
 cypress/e2e/missionZero-wc.cy.js                              | 4 ++++
 .../Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx | 1 -
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/cypress/e2e/missionZero-wc.cy.js b/cypress/e2e/missionZero-wc.cy.js
index 4f9680543..acc0fc21f 100644
--- a/cypress/e2e/missionZero-wc.cy.js
+++ b/cypress/e2e/missionZero-wc.cy.js
@@ -150,6 +150,10 @@ it("picks up calls to input()", () => {
     .find("span[contenteditable=true]")
     .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", () => {
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index c9dbebb79..4f8cd4814 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -102,7 +102,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     if (active) {
       if (codeRunTriggered) {
         console.log("running with skulpt");
-        // setVisualOutput(true);
         runCode();
       } else if (!senseHatAlwaysEnabled) {
         setHasVisualOutput(false);

From 177e0481b7c69d4f323651e1fdeb59ea72dd2e25 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Thu, 31 Oct 2024 17:29:11 +0000
Subject: [PATCH 28/32] almost fixed all the python runner and pyodideWorker
 related unit tests

---
 .../PyodideRunner/PyodideRunner.jsx           |  13 +-
 .../PyodideRunner/PyodideRunner.test.js       | 130 +++++++++---------
 .../Runners/PythonRunner/PythonRunner.jsx     |   6 +-
 .../Runners/PythonRunner/PythonRunner.test.js |  70 ++++++----
 .../SkulptRunner/SkulptRunner.jsx             |   3 +-
 .../MobileProject/MobileProject.test.js       |   2 +
 src/redux/EditorSlice.js                      |   2 +
 7 files changed, 127 insertions(+), 99 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index d49ae61ba..6dd220e9d 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -31,9 +31,7 @@ const getWorkerURL = (url) => {
   return URL.createObjectURL(blob);
 };
 
-const PyodideRunner = (props) => {
-  const { active } = props;
-
+const PyodideRunner = ({ active }) => {
   const [pyodideWorker, setPyodideWorker] = useState(null);
 
   useEffect(() => {
@@ -49,6 +47,7 @@ const PyodideRunner = (props) => {
   const interruptBuffer = useRef();
   const stdinBuffer = useRef();
   const stdinClosed = useRef();
+  const loadedRunner = useSelector((state) => state.editor.loadedRunner);
   const projectImages = useSelector((s) => s.editor.project.image_list);
   const projectCode = useSelector((s) => s.editor.project.components);
   const projectIdentifier = useSelector((s) => s.editor.project.identifier);
@@ -108,11 +107,11 @@ const PyodideRunner = (props) => {
   }, [pyodideWorker]);
 
   useEffect(() => {
-    if (codeRunTriggered && active) {
+    if (codeRunTriggered && active && output.current) {
       console.log("running with pyodide");
       handleRun();
     }
-  }, [codeRunTriggered]);
+  }, [codeRunTriggered, output.current]);
 
   useEffect(() => {
     if (codeRunStopped && active) {
@@ -127,7 +126,9 @@ const PyodideRunner = (props) => {
   const handleLoaded = (stdin, interrupt) => {
     stdinBuffer.current = stdin;
     interruptBuffer.current = interrupt;
-    dispatch(setLoadedRunner("pyodide"));
+    if (loadedRunner !== "pyodide") {
+      dispatch(setLoadedRunner("pyodide"));
+    }
     dispatch(codeRunHandled());
     disableInput();
   };
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
index 5b1dbb9a2..da276dd11 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
@@ -1,34 +1,58 @@
 import { act, fireEvent, render, screen } from "@testing-library/react";
-import configureStore from "redux-mock-store";
 
 import PyodideRunner from "./PyodideRunner";
 import { Provider } from "react-redux";
 import PyodideWorker, { postMessage } from "./PyodideWorker.mock.js";
-import { setError } from "../../../../../redux/EditorSlice.js";
+import {
+  resetState,
+  setError,
+  triggerCodeRun,
+  setProject,
+  setLoadedRunner,
+  stopCodeRun,
+} from "../../../../../redux/EditorSlice.js";
+import store from "../../../../../app/store";
 
 jest.mock("fs");
 
-const middlewares = [];
-const mockStore = configureStore(middlewares);
-const initialState = {
-  editor: {
-    project: {
-      components: [
-        { name: "a", extension: "py", content: "print('a')" },
-        { name: "main", extension: "py", content: "print('hello')" },
-      ],
-      image_list: [
-        { filename: "image1.jpg", url: "http://example.com/image1.jpg" },
-      ],
-    },
-    codeRunTriggered: false,
-  },
-  auth: {},
+const project = {
+  components: [
+    { name: "a", extension: "py", content: "print('a')" },
+    { name: "main", extension: "py", content: "print('hello')" },
+  ],
+  image_list: [
+    { filename: "image1.jpg", url: "http://example.com/image1.jpg" },
+  ],
 };
 
+window.crossOriginIsolated = true;
+
+const updateRunner = ({ project = {}, codeRunTriggered = false }) => {
+  act(() => {
+    if (project) {
+      store.dispatch(setProject(project));
+    }
+    if (codeRunTriggered) {
+      store.dispatch(triggerCodeRun());
+    }
+  });
+};
+
+let dispatchSpy;
+
+beforeEach(() => {
+  store.dispatch(resetState());
+  window.crossOriginIsolated = true;
+  dispatchSpy = jest.spyOn(store, "dispatch");
+});
+
+afterEach(() => {
+  dispatchSpy.mockRestore();
+});
+
 describe("When active and first loaded", () => {
   beforeEach(() => {
-    const store = mockStore(initialState);
+    window.crossOriginIsolated = true;
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -49,22 +73,15 @@ describe("When active and first loaded", () => {
 
 describe("When a code run has been triggered", () => {
   beforeEach(() => {
-    jest.clearAllMocks();
-    const fetchMock = jest.fn().mockResolvedValue({
-      arrayBuffer: () => Promise.resolve("image data"),
-    });
+    window.crossOriginIsolated = true;
 
-    global.fetch = fetchMock;
-
-    const store = mockStore({
-      ...initialState,
-      editor: { ...initialState.editor, codeRunTriggered: true },
-    });
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
       </Provider>,
     );
+
+    updateRunner({ project, codeRunTriggered: true });
   });
 
   test("it writes the current files to the worker", () => {
@@ -97,18 +114,13 @@ describe("When a code run has been triggered", () => {
 });
 
 describe("When the code has been stopped", () => {
-  let store;
-
   beforeEach(() => {
-    store = mockStore({
-      ...initialState,
-      editor: { ...initialState.editor, codeRunStopped: true },
-    });
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
       </Provider>,
     );
+    store.dispatch(stopCodeRun());
   });
 
   test("it sends a message to the worker to stop the python code", () => {
@@ -119,9 +131,7 @@ describe("When the code has been stopped", () => {
 });
 
 describe("When loading pyodide", () => {
-  let store;
   beforeEach(() => {
-    store = mockStore(initialState);
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -129,18 +139,23 @@ describe("When loading pyodide", () => {
     );
 
     const worker = PyodideWorker.getLastInstance();
-    worker.postMessageFromWorker({ method: "handleLoading" });
+    worker.postMessageFromWorker({ method: "handleLoaded" });
   });
 
   test("it dispatches loadingRunner action", () => {
-    expect(store.getActions()).toEqual([{ type: "editor/loadingRunner" }]);
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/setLoadedRunner",
+      payload: "pyodide",
+    });
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/codeRunHandled",
+    });
   });
 });
 
 describe("When pyodide has loaded", () => {
-  let store;
   beforeEach(() => {
-    store = mockStore(initialState);
+    store.dispatch(setLoadedRunner("pyodide"));
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -152,15 +167,13 @@ describe("When pyodide has loaded", () => {
   });
 
   test("it dispatches codeRunHandled action", () => {
-    expect(store.getActions()).toEqual([{ type: "editor/codeRunHandled" }]);
+    expect(dispatchSpy).toHaveBeenCalledWith({ type: "editor/codeRunHandled" });
   });
 });
 
 describe("When input is required", () => {
   let input;
-  let store;
   beforeEach(() => {
-    store = mockStore(initialState);
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -199,9 +212,7 @@ describe("When input is required", () => {
 });
 
 describe("When output is received", () => {
-  let store;
   beforeEach(() => {
-    store = mockStore(initialState);
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -209,6 +220,7 @@ describe("When output is received", () => {
     );
 
     const worker = PyodideWorker.getLastInstance();
+    worker.postMessage = jest.fn();
     worker.postMessageFromWorker({
       method: "handleOutput",
       stream: "stdout",
@@ -222,9 +234,7 @@ describe("When output is received", () => {
 });
 
 describe("When visual output is received", () => {
-  let store;
   beforeEach(() => {
-    store = mockStore(initialState);
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -254,9 +264,7 @@ describe("When visual output is received", () => {
 });
 
 describe("When an error is received", () => {
-  let store;
   beforeEach(() => {
-    store = mockStore(initialState);
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -274,21 +282,17 @@ describe("When an error is received", () => {
   });
 
   test("it dispatches action to set the error with correct message", () => {
-    expect(store.getActions()).toEqual([
-      {
-        type: "editor/setError",
-        payload: "SyntaxError: something's wrong on line 2 of main.py",
-      },
-    ]);
+    expect(dispatchSpy).toHaveBeenCalledWith({
+      type: "editor/setError",
+      payload: "SyntaxError: something's wrong on line 2 of main.py",
+    });
   });
 });
 
 describe("When the code run is interrupted", () => {
   let input;
-  let store;
 
   beforeEach(() => {
-    store = mockStore(initialState);
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -309,15 +313,14 @@ describe("When the code run is interrupted", () => {
   });
 
   test("it sets an interruption error", () => {
-    expect(store.getActions()).toEqual(
-      expect.arrayContaining([setError("output.errors.interrupted")]),
+    expect(dispatchSpy).toHaveBeenCalledWith(
+      setError("output.errors.interrupted"),
     );
   });
 });
 
 describe("When not active and first loaded", () => {
   beforeEach(() => {
-    const store = mockStore(initialState);
     render(
       <Provider store={store}>
         <PyodideRunner active={false} />,
@@ -334,15 +337,12 @@ describe("When not active and first loaded", () => {
 
 describe("When not active and code run triggered", () => {
   beforeEach(() => {
-    const store = mockStore({
-      ...initialState,
-      editor: { ...initialState.editor, codeRunTriggered: true },
-    });
     render(
       <Provider store={store}>
         <PyodideRunner active={false} />,
       </Provider>,
     );
+    updateRunner({ project, codeRunTriggered: true });
   });
 
   test("it does not send a message to the worker to run the python code", () => {
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
index 429c3f37a..e599164d7 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
@@ -33,9 +33,11 @@ const PythonRunner = () => {
   useEffect(() => {
     if (typeof usePyodide === "boolean") {
       const runner = usePyodide ? "pyodide" : "skulpt";
-      dispatch(loadingRunner(runner));
+      if (runner !== activeRunner) {
+        dispatch(loadingRunner(runner));
+      }
     }
-  }, [dispatch, usePyodide]);
+  }, [dispatch, usePyodide, activeRunner]);
 
   useEffect(() => {
     if (!!!window?.crossOriginIsolated) {
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js b/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js
index d301114f9..7a93dd81b 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.test.js
@@ -1,13 +1,19 @@
 import { render } from "@testing-library/react";
 import { Provider } from "react-redux";
-import configureStore from "redux-mock-store";
+import { act } from "react-dom/test-utils";
 import PythonRunner from "./PythonRunner";
+import {
+  triggerCodeRun,
+  setProject,
+  setSenseHatAlwaysEnabled,
+} from "../../../../redux/EditorSlice";
+import store from "../../../../app/store";
 
-const middlewares = [];
-const mockStore = configureStore(middlewares);
 const initialState = {
   editor: {
     project: {
+      name: "Blank project",
+      project_type: "python",
       components: [
         {
           name: "main",
@@ -26,29 +32,43 @@ const initialState = {
   auth: {},
 };
 
-const renderRunnerWithCode = ({
+const updateRunner = ({
   code = "",
   codeRunTriggered = false,
   senseHatAlwaysEnabled = false,
 }) => {
-  let state = initialState;
-  state.editor.project.components[0].content = code;
-  state.editor.codeRunTriggered = codeRunTriggered;
-  state.editor.senseHatAlwaysEnabled = senseHatAlwaysEnabled;
-  const store = mockStore(state);
+  act(() => {
+    store.dispatch(
+      setProject({
+        ...initialState.editor.project,
+        components: [
+          {
+            ...initialState.editor.project.components[0],
+            content: code,
+          },
+          ...initialState.editor.project.components.slice(1),
+        ],
+      }),
+    );
+    if (codeRunTriggered) {
+      store.dispatch(triggerCodeRun());
+    }
+    store.dispatch(setSenseHatAlwaysEnabled(senseHatAlwaysEnabled));
+  });
+};
+
+beforeEach(() => {
+  window.crossOriginIsolated = true;
   render(
     <Provider store={store}>
       <PythonRunner />
     </Provider>,
   );
-};
-
-beforeEach(() => {
-  window.crossOriginIsolated = true;
+  updateRunner({ code: "print('some loaded code')" });
 });
 
 test("Renders with Pyodide runner initially", () => {
-  renderRunnerWithCode({});
+  updateRunner({});
   expect(
     document.querySelector(".skulptrunner--active"),
   ).not.toBeInTheDocument();
@@ -56,7 +76,7 @@ test("Renders with Pyodide runner initially", () => {
 });
 
 test("Uses pyodide when no skulpt-only modules are imported", () => {
-  renderRunnerWithCode({ code: "import math" });
+  updateRunner({ code: "import math" });
   expect(
     document.querySelector(".skulptrunner--active"),
   ).not.toBeInTheDocument();
@@ -64,7 +84,7 @@ test("Uses pyodide when no skulpt-only modules are imported", () => {
 });
 
 test("Uses skulpt when skulpt-only modules are imported", () => {
-  renderRunnerWithCode({ code: "import p5" });
+  updateRunner({ code: "import p5" });
   expect(
     document.querySelector(".pyodiderunner--active"),
   ).not.toBeInTheDocument();
@@ -72,7 +92,7 @@ test("Uses skulpt when skulpt-only modules are imported", () => {
 });
 
 test("Uses skulpt when senseHatAlwaysEnabled is true", () => {
-  renderRunnerWithCode({ code: "import math", senseHatAlwaysEnabled: true });
+  updateRunner({ code: "import math", senseHatAlwaysEnabled: true });
   expect(
     document.querySelector(".pyodiderunner--active"),
   ).not.toBeInTheDocument();
@@ -81,7 +101,7 @@ test("Uses skulpt when senseHatAlwaysEnabled is true", () => {
 
 test("Uses skulpt if not cross origin isolated", () => {
   window.crossOriginIsolated = false;
-  renderRunnerWithCode({ code: "import math" });
+  updateRunner({ code: "import math" });
   expect(
     document.querySelector(".pyodiderunner--active"),
   ).not.toBeInTheDocument();
@@ -89,7 +109,7 @@ test("Uses skulpt if not cross origin isolated", () => {
 });
 
 test("Switches runners if the import has a from clause", () => {
-  renderRunnerWithCode({ code: "from p5 import *" });
+  updateRunner({ code: "from p5 import *" });
   expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
   expect(
     document.querySelector(".pyodiderunner--active"),
@@ -97,7 +117,7 @@ test("Switches runners if the import has a from clause", () => {
 });
 
 test("Switches runners if the import is indented", () => {
-  renderRunnerWithCode({ code: "    import p5" });
+  updateRunner({ code: "    import p5" });
   expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
   expect(
     document.querySelector(".pyodiderunner--active"),
@@ -105,7 +125,7 @@ test("Switches runners if the import is indented", () => {
 });
 
 test("Uses skulpt if the py5 magic comment is used", () => {
-  renderRunnerWithCode({ code: "# input.comment.py5" });
+  updateRunner({ code: "# input.comment.py5" });
   expect(document.querySelector(".skulptrunner--active")).toBeInTheDocument();
   expect(
     document.querySelector(".pyodiderunner--active"),
@@ -113,7 +133,7 @@ test("Uses skulpt if the py5 magic comment is used", () => {
 });
 
 test("Does not switch runners while the code is running", () => {
-  renderRunnerWithCode({ code: "import p5", codeRunTriggered: true });
+  updateRunner({ code: "import p5", codeRunTriggered: true });
   expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
   expect(
     document.querySelector(".skulptrunner--active"),
@@ -121,7 +141,7 @@ test("Does not switch runners while the code is running", () => {
 });
 
 test("Does not switch runners if the import is in a comment", () => {
-  renderRunnerWithCode({ code: "# import p5" });
+  updateRunner({ code: "# import p5" });
   expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
   expect(
     document.querySelector(".skulptrunner--active"),
@@ -129,7 +149,7 @@ test("Does not switch runners if the import is in a comment", () => {
 });
 
 test("Does not switch runners if the import is in a string", () => {
-  renderRunnerWithCode({ code: 'print("import p5")' });
+  updateRunner({ code: 'print("import p5")' });
   expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
   expect(
     document.querySelector(".skulptrunner--active"),
@@ -137,7 +157,7 @@ test("Does not switch runners if the import is in a string", () => {
 });
 
 test("Does not switch runners if the import is in a multiline string", () => {
-  renderRunnerWithCode({ code: '"""\nimport p5\n"""' });
+  updateRunner({ code: '"""\nimport p5\n"""' });
   expect(document.querySelector(".pyodiderunner--active")).toBeInTheDocument();
   expect(
     document.querySelector(".skulptrunner--active"),
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index 4f8cd4814..8f2b8685a 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -56,6 +56,7 @@ const externalLibraries = {
 };
 
 const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
+  const loadedRunner = useSelector((state) => state.editor.loadedRunner);
   const projectCode = useSelector((state) => state.editor.project.components);
   const mainComponent = projectCode?.find(
     (component) => component.name === "main" && component.extension === "py",
@@ -93,7 +94,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   };
 
   useEffect(() => {
-    if (active) {
+    if (active && loadedRunner !== "skulpt") {
       dispatch(setLoadedRunner("skulpt"));
     }
   }, [active]);
diff --git a/src/components/Mobile/MobileProject/MobileProject.test.js b/src/components/Mobile/MobileProject/MobileProject.test.js
index ddea521bf..7893a8ecf 100644
--- a/src/components/Mobile/MobileProject/MobileProject.test.js
+++ b/src/components/Mobile/MobileProject/MobileProject.test.js
@@ -99,6 +99,8 @@ describe("When withSidebar is true", () => {
   beforeEach(() => {
     const initialState = {
       editor: {
+        activeRunner: "skulpt",
+        loadedRunner: "skulpt",
         project: {
           components: [
             {
diff --git a/src/redux/EditorSlice.js b/src/redux/EditorSlice.js
index fbd745ca5..cdd1bf30f 100644
--- a/src/redux/EditorSlice.js
+++ b/src/redux/EditorSlice.js
@@ -139,6 +139,7 @@ export const EditorSlice = createSlice({
   name: "editor",
   initialState,
   reducers: {
+    resetState: () => initialState,
     closeFile: (state, action) => {
       const panelIndex = state.openFiles
         .map((fileNames) => fileNames.includes(action.payload))
@@ -476,6 +477,7 @@ export const EditorSlice = createSlice({
 
 // Action creators are generated for each case reducer function
 export const {
+  resetState,
   addProjectComponent,
   loadingRunner,
   setLoadedRunner,

From fc56f2fec7b0cab3f648a535a8d40fdbf59e039e Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Mon, 4 Nov 2024 13:27:11 +0000
Subject: [PATCH 29/32] initial review changes

---
 .../Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx    | 1 -
 src/components/Editor/Runners/PythonRunner/PythonRunner.jsx | 6 +++---
 .../Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx      | 1 -
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 6dd220e9d..0b192cc0e 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -108,7 +108,6 @@ const PyodideRunner = ({ active }) => {
 
   useEffect(() => {
     if (codeRunTriggered && active && output.current) {
-      console.log("running with pyodide");
       handleRun();
     }
   }, [codeRunTriggered, output.current]);
diff --git a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
index e599164d7..cc34e65cb 100644
--- a/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PythonRunner.jsx
@@ -27,7 +27,7 @@ const PythonRunner = () => {
     (state) => state.editor.senseHatAlwaysEnabled,
   );
   const [usePyodide, setUsePyodide] = useState(null);
-  const [skupltFallback, setSkulptFallback] = useState(false);
+  const [skulptFallback, setSkulptFallback] = useState(false);
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -76,7 +76,7 @@ const PythonRunner = () => {
             SKULPT_ONLY_MODULES.includes(name),
           );
           if (
-            !skupltFallback &&
+            !skulptFallback &&
             (hasSkulptOnlyModules || senseHatAlwaysEnabled)
           ) {
             setUsePyodide(false);
@@ -89,7 +89,7 @@ const PythonRunner = () => {
         }
       }
     }
-  }, [project, codeRunTriggered, senseHatAlwaysEnabled, skupltFallback, t]);
+  }, [project, codeRunTriggered, senseHatAlwaysEnabled, skulptFallback, t]);
   return (
     <>
       <PyodideRunner active={activeRunner === "pyodide"} />
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index 8f2b8685a..91aa79a1a 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -102,7 +102,6 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   useEffect(() => {
     if (active) {
       if (codeRunTriggered) {
-        console.log("running with skulpt");
         runCode();
       } else if (!senseHatAlwaysEnabled) {
         setHasVisualOutput(false);

From cc38ef7322fcfc8cb7160f73979f3df41596b059 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 5 Nov 2024 15:40:15 +0000
Subject: [PATCH 30/32] PyodideRunner.test - fix postMessage based failures...
 waitFor AGAIN!

---
 .../PyodideRunner/PyodideRunner.test.js       | 71 ++++++++++++-------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
index da276dd11..1d0d51f05 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
@@ -1,8 +1,15 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 
 import PyodideRunner from "./PyodideRunner";
 import { Provider } from "react-redux";
 import PyodideWorker, { postMessage } from "./PyodideWorker.mock.js";
+
 import {
   resetState,
   setError,
@@ -26,6 +33,7 @@ const project = {
 };
 
 window.crossOriginIsolated = true;
+process.env.PUBLIC_URL = ".";
 
 const updateRunner = ({ project = {}, codeRunTriggered = false }) => {
   act(() => {
@@ -80,35 +88,40 @@ describe("When a code run has been triggered", () => {
         <PyodideRunner active={true} />,
       </Provider>,
     );
-
     updateRunner({ project, codeRunTriggered: true });
   });
 
-  test("it writes the current files to the worker", () => {
-    expect(postMessage).toHaveBeenCalledWith({
-      method: "writeFile",
-      filename: "a.py",
-      content: "print('a')",
-    });
-    expect(postMessage).toHaveBeenCalledWith({
-      method: "writeFile",
-      filename: "main.py",
-      content: "print('hello')",
+  test("it writes the current files to the worker", async () => {
+    await waitFor(() => {
+      expect(postMessage).toHaveBeenCalledWith({
+        method: "writeFile",
+        filename: "a.py",
+        content: "print('a')",
+      });
+      expect(postMessage).toHaveBeenCalledWith({
+        method: "writeFile",
+        filename: "main.py",
+        content: "print('hello')",
+      });
     });
   });
 
-  test("it writes the images to the worker", () => {
-    expect(postMessage).toHaveBeenCalledWith({
-      method: "writeFile",
-      filename: "image1.jpg",
-      content: "image data",
+  test("it writes the images to the worker", async () => {
+    await waitFor(() => {
+      expect(postMessage).toHaveBeenCalledWith({
+        method: "writeFile",
+        filename: "image1.jpg",
+        content: "image data",
+      });
     });
   });
 
-  test("it sends a message to the worker to run the python code", () => {
-    expect(postMessage).toHaveBeenCalledWith({
-      method: "runPython",
-      python: "print('hello')",
+  test("it sends a message to the worker to run the python code", async () => {
+    await waitFor(() => {
+      expect(postMessage).toHaveBeenCalledWith({
+        method: "runPython",
+        python: "print('hello')",
+      });
     });
   });
 });
@@ -123,9 +136,11 @@ describe("When the code has been stopped", () => {
     store.dispatch(stopCodeRun());
   });
 
-  test("it sends a message to the worker to stop the python code", () => {
-    expect(postMessage).toHaveBeenCalledWith({
-      method: "stopPython",
+  test("it sends a message to the worker to stop the python code", async () => {
+    await waitFor(() => {
+      expect(postMessage).toHaveBeenCalledWith({
+        method: "stopPython",
+      });
     });
   });
 });
@@ -252,9 +267,11 @@ describe("When visual output is received", () => {
   });
 
   test("it displays the output view toggle", async () => {
-    expect(
-      screen.queryByText("outputViewToggle.buttonSplitLabel"),
-    ).toBeInTheDocument();
+    await waitFor(() => {
+      expect(
+        screen.queryByText("outputViewToggle.buttonSplitLabel"),
+      ).toBeInTheDocument();
+    });
   });
 
   test("it shows the visual output tab", () => {

From 0fa70bf57cd0cd2d15e0f27746d9137f10fc4560 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 5 Nov 2024 17:45:38 +0000
Subject: [PATCH 31/32] PyodideRunner.test - fix remaining fetch/arraybuffer
 tests

---
 .../PythonRunner/PyodideRunner/PyodideRunner.test.js   | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
index 1d0d51f05..82cb903b6 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
@@ -21,6 +21,7 @@ import {
 import store from "../../../../../app/store";
 
 jest.mock("fs");
+global.fetch = jest.fn();
 
 const project = {
   components: [
@@ -52,6 +53,7 @@ beforeEach(() => {
   store.dispatch(resetState());
   window.crossOriginIsolated = true;
   dispatchSpy = jest.spyOn(store, "dispatch");
+  fetch.mockClear();
 });
 
 afterEach(() => {
@@ -82,7 +84,9 @@ describe("When active and first loaded", () => {
 describe("When a code run has been triggered", () => {
   beforeEach(() => {
     window.crossOriginIsolated = true;
-
+    global.fetch.mockResolvedValueOnce({
+      arrayBuffer: () => Promise.resolve(new ArrayBuffer(1)),
+    });
     render(
       <Provider store={store}>
         <PyodideRunner active={true} />,
@@ -111,7 +115,7 @@ describe("When a code run has been triggered", () => {
       expect(postMessage).toHaveBeenCalledWith({
         method: "writeFile",
         filename: "image1.jpg",
-        content: "image data",
+        content: expect.any(ArrayBuffer),
       });
     });
   });
@@ -269,7 +273,7 @@ describe("When visual output is received", () => {
   test("it displays the output view toggle", async () => {
     await waitFor(() => {
       expect(
-        screen.queryByText("outputViewToggle.buttonSplitLabel"),
+        screen.queryByText("outputViewToggle.buttonTabLabel"),
       ).toBeInTheDocument();
     });
   });

From 576f140a062fbaf1521cef72f279cb9dc55cf5c6 Mon Sep 17 00:00:00 2001
From: Scott <scott.adams@raspberrypi.org>
Date: Tue, 12 Nov 2024 13:07:32 +0000
Subject: [PATCH 32/32] fix(pythonrunner-active-styles-+-skulpt-visual-state):
 pr review comments addressed

---
 src/assets/stylesheets/PythonRunner.scss      | 16 ++++++++
 .../PyodideRunner/PyodideRunner.jsx           |  1 -
 .../PyodideRunner/PyodideRunner.test.js       | 14 +++----
 .../SkulptRunner/SkulptRunner.jsx             | 39 +++++++++++--------
 .../SkulptRunner/SkulptRunner.test.js         | 14 +++----
 5 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/src/assets/stylesheets/PythonRunner.scss b/src/assets/stylesheets/PythonRunner.scss
index abfa7091b..66b7449b8 100644
--- a/src/assets/stylesheets/PythonRunner.scss
+++ b/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;
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
index 4d43b2860..157451968 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.jsx
@@ -325,7 +325,6 @@ const PyodideRunner = ({ active }) => {
       className={classNames("pythonrunner-container", "pyodiderunner", {
         "pyodiderunner--active": active,
       })}
-      style={{ display: active ? "flex" : "none" }}
     >
       {isSplitView ? (
         <>
diff --git a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
index 82cb903b6..c8bd31f40 100644
--- a/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/PyodideRunner/PyodideRunner.test.js
@@ -74,10 +74,9 @@ describe("When active and first loaded", () => {
     expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
   });
 
-  test("it has style display: flex", () => {
-    expect(document.querySelector(".pyodiderunner")).toHaveStyle(
-      "display: flex",
-    );
+  test("it does have active styles", () => {
+    const element = document.querySelector(".pyodiderunner");
+    expect(element).toHaveClass("pyodiderunner--active");
   });
 });
 
@@ -349,10 +348,9 @@ describe("When not active and first loaded", () => {
     );
   });
 
-  test("it renders with display: none", () => {
-    expect(document.querySelector(".pyodiderunner")).toHaveStyle(
-      "display: none",
-    );
+  test("it does not have active styles", () => {
+    const element = document.querySelector(".pyodiderunner");
+    expect(element).not.toHaveClass("pyodiderunner--active");
   });
 });
 
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
index abdf94632..51eee57c9 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.jsx
@@ -83,8 +83,10 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   const settings = useContext(SettingsContext);
   const isMobile = useMediaQuery({ query: MOBILE_MEDIA_QUERY });
 
-  const [hasVisualOutput, setHasVisualOutput] = useState(senseHatAlwaysEnabled);
-  const [visualOutput, setVisualOutput] = useState(true);
+  const [codeHasVisualOutput, setCodeHasVisualOutput] = useState(
+    senseHatAlwaysEnabled,
+  );
+  const [showVisualOutput, setShowVisualOutput] = useState(true);
 
   const getInput = () => {
     const pageInput = document.getElementById("input");
@@ -105,16 +107,16 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       if (codeRunTriggered) {
         runCode();
       } else if (!senseHatAlwaysEnabled) {
-        setHasVisualOutput(false);
+        setCodeHasVisualOutput(false);
       }
     }
   }, [codeRunTriggered, active]);
 
   useEffect(() => {
     if (codeRunTriggered && !senseHatAlwaysEnabled) {
-      setVisualOutput(!!hasVisualOutput);
+      setShowVisualOutput(!!codeHasVisualOutput);
     }
-  }, [codeRunTriggered, hasVisualOutput]);
+  }, [codeRunTriggered, codeHasVisualOutput]);
 
   useEffect(() => {
     if (codeRunStopped && active && getInput()) {
@@ -170,7 +172,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
     // TODO: Handle pre-importing py5_imported when refactored py5 shim imported
 
     if (visualLibraries.includes(library)) {
-      setHasVisualOutput(true);
+      setCodeHasVisualOutput(true);
     }
 
     let localProjectFiles = projectCode
@@ -401,6 +403,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       })
       .finally(() => {
         dispatch(codeRunHandled());
+        setCodeHasVisualOutput(false);
       });
     myPromise.then(function (_mod) {});
   };
@@ -427,8 +430,8 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
   }
 
   const singleOutputPanel = outputPanels.length === 1;
-  const showVisualOutput = outputPanels.includes("visual");
-  const showTextOutput = outputPanels.includes("text");
+  const showVisualOutputPanel = outputPanels.includes("visual");
+  const showTextOutputPanel = outputPanels.includes("text");
 
   const outputPanelClasses = (panelType) => {
     return classNames("output-panel", `output-panel--${panelType}`, {
@@ -441,11 +444,10 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       className={classNames("pythonrunner-container", "skulptrunner", {
         "skulptrunner--active": active,
       })}
-      style={{ display: active ? "flex" : "none" }}
     >
       {isSplitView || singleOutputPanel ? (
         <>
-          {visualOutput && showVisualOutput && (
+          {showVisualOutput && showVisualOutputPanel && (
             <div className={outputPanelClasses("visual")}>
               <Tabs forceRenderTabPanel={true}>
                 <div
@@ -460,7 +462,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                       </span>
                     </Tab>
                   </TabList>
-                  {!isEmbedded && visualOutput && <OutputViewToggle />}
+                  {!isEmbedded && showVisualOutput && <OutputViewToggle />}
                   {!isEmbedded && isMobile && <RunnerControls skinny />}
                 </div>
                 <TabPanel key={0}>
@@ -469,7 +471,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
               </Tabs>
             </div>
           )}
-          {showTextOutput && (
+          {showTextOutputPanel && (
             <div className={outputPanelClasses("text")}>
               <Tabs forceRenderTabPanel={true}>
                 <div
@@ -484,7 +486,7 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                       </span>
                     </Tab>
                   </TabList>
-                  {!visualOutput && !isEmbedded && isMobile && (
+                  {!showVisualOutput && !isEmbedded && isMobile && (
                     <RunnerControls skinny />
                   )}
                 </div>
@@ -501,10 +503,13 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
           )}
         </>
       ) : (
-        <Tabs forceRenderTabPanel={true} defaultIndex={visualOutput ? 0 : 1}>
+        <Tabs
+          forceRenderTabPanel={true}
+          defaultIndex={showVisualOutput ? 0 : 1}
+        >
           <div className="react-tabs__tab-container">
             <TabList>
-              {visualOutput ? (
+              {showVisualOutput ? (
                 <Tab key={0}>
                   <span className="react-tabs__tab-text">
                     {t("output.visualOutput")}
@@ -517,11 +522,11 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
                 </span>
               </Tab>
             </TabList>
-            {!isEmbedded && visualOutput && <OutputViewToggle />}
+            {!isEmbedded && showVisualOutput && <OutputViewToggle />}
             {!isEmbedded && isMobile && <RunnerControls skinny />}
           </div>
           {!isOutputOnly && <ErrorMessage />}
-          {visualOutput ? (
+          {showVisualOutput ? (
             <TabPanel key={0}>
               <VisualOutputPane />
             </TabPanel>
diff --git a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js
index d3d76b1e5..293bc9925 100644
--- a/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js
+++ b/src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js
@@ -1180,10 +1180,9 @@ describe("When active and first loaded", () => {
     expect(screen.queryByText("output.textOutput")).toBeInTheDocument();
   });
 
-  test("it has style display: flex", () => {
-    expect(document.querySelector(".skulptrunner")).toHaveStyle(
-      "display: flex",
-    );
+  test("it does have active styles", () => {
+    const element = document.querySelector(".skulptrunner");
+    expect(element).toHaveClass("skulptrunner--active");
   });
 });
 
@@ -1215,10 +1214,9 @@ describe("When not active", () => {
     );
   });
 
-  test("it has style display: none", () => {
-    expect(document.querySelector(".skulptrunner")).toHaveStyle(
-      "display: none",
-    );
+  test("it does not have active styles", () => {
+    const element = document.querySelector(".skulptrunner");
+    expect(element).not.toHaveClass("skulptrunner--active");
   });
 });