Fix typo, change loadpath

CHANGELOG.md

@@ -22,6 +22,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - CrowdIn issue for pluralised strings with no `one` version (#1234)
 - Update `imagePanel.gallery` string to remove Title Casing for consistency (#1238)
 - Update `imageUploadButton.uploadImage` string to remove Title Casing for consistency (#1238)
+- Fixed typo in the `en.json` translation file (#1241)
 
 ### Removed
 

cypress/e2e/missionZero-wc.cy.js

@@ -11,7 +11,7 @@ it("defaults to the visual output tab", () => {
     .find(".proj-runner-container");
   runnerContainer
     .find(".react-tabs__tab--selected")
-    .should("contain", "output.visualOutput");
+    .should("contain", "Visual output");
 });
 
 it("renders the astro pi component on page load", () => {
@@ -95,21 +95,13 @@ it("resets criteria correctly", () => {
       "text",
       "from sense_hat import SenseHat\nsense = SenseHat()\nsense.get_pressure()\nsense.get_humidity()\nsense.get_temperature()"
     );
-  cy.get("editor-wc")
-    .shadow()
-    .find(".btn--run")
-    .contains("runButton.run")
-    .click();
+  cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should("contain", '"readPressure":true');
   cy.get("editor-wc")
     .shadow()
     .find("div[class=cm-content]")
     .invoke("text", "from sense_hat import SenseHat");
-  cy.get("editor-wc")
-    .shadow()
-    .find(".btn--run")
-    .contains("runButton.run")
-    .click();
+  cy.get("editor-wc").shadow().find(".btn--run").contains("Run").click();
   cy.get("#results").should(
     "contain",
     '"noInputEvents":true,"readColour":false,"readHumidity":false,"readPressure":false,"readTemperature":false,"usedLEDs":false'
@@ -151,7 +143,7 @@ it("picks up calls to input()", () => {
   cy.get("editor-wc")
     .shadow()
     .find("div.pythonrunner-container.skulptrunner.skulptrunner--active")
-    .contains(".react-tabs__tab-text", "output.textOutput")
+    .contains(".react-tabs__tab-text", "Text output")
     .click();
   cy.get("editor-wc")
     .shadow()

cypress/e2e/spec-html.cy.js

@@ -18,11 +18,7 @@ const getIframeBody = () => {
 };
 
 const makeNewFile = (filename = "new.html") => {
-  cy.get("editor-wc")
-    .shadow()
-    .find("span")
-    .contains("filePanel.newFileButton")
-    .click();
+  cy.get("editor-wc").shadow().find("span").contains("Add file").click();
   cy.get("editor-wc")
     .shadow()
     .find("div[class=modal-content__input]")
@@ -31,7 +27,7 @@ const makeNewFile = (filename = "new.html") => {
   cy.get("editor-wc")
     .shadow()
     .find("div[class=modal-content__buttons]")
-    .contains("newFileModal.addFile")
+    .contains("Add file")
     .click();
 };
 
@@ -150,7 +146,7 @@ it("blocks non-permitted external links", () => {
     .shadow()
     .find("div[class=modal-content__header]")
     .find("h2")
-    .should("include.text", "modal.error.heading");
+    .should("include.text", "An error has occurred");
 });
 
 it("allows permitted external links", () => {

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

@@ -41,13 +41,13 @@ describe("Running the code with pyodide", () => {
     cy.get("editor-wc")
       .shadow()
       .find(".pyodiderunner")
-      .contains(".react-tabs__tab", "output.visualOutput")
+      .contains(".react-tabs__tab", "Visual output")
       .should("not.exist");
     cy.get("editor-wc")
       .shadow()
       .find(".pyodiderunner")
       .find(".react-tabs__tab--selected")
-      .should("contain", "output.textOutput");
+      .should("contain", "Text output");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
@@ -70,7 +70,7 @@ describe("Running the code with pyodide", () => {
     cy.get("editor-wc")
       .shadow()
       .find(".error-message__content")
-      .should("contain", "output.errors.interrupted");
+      .should("contain", "Execution interrupted");
   });
 
   it("runs a simple program with an input", () => {

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

@@ -37,13 +37,13 @@ describe("Running the code with skulpt", () => {
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")
-      .contains(".react-tabs__tab", "output.visualOutput")
+      .contains(".react-tabs__tab", "Visual output")
       .should("not.be.visible");
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")
       .find(".react-tabs__tab--selected")
-      .should("contain", "output.textOutput");
+      .should("contain", "Text output");
     cy.get("editor-wc")
       .shadow()
       .find(".pythonrunner-console-output-line")
@@ -57,13 +57,13 @@ describe("Running the code with skulpt", () => {
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")
-      .contains(".react-tabs__tab", "output.textOutput")
+      .contains(".react-tabs__tab", "Text output")
       .should("exist");
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")
       .find(".react-tabs__tab--selected")
-      .should("contain", "output.visualOutput");
+      .should("contain", "Visual output");
     cy.get("editor-wc").shadow().find(".p5Canvas").should("exist");
   });
 
@@ -83,17 +83,17 @@ describe("Running the code with skulpt", () => {
     cy.get("editor-wc")
       .shadow()
       .find(".error-message__content")
-      .should("contain", "output.errors.interrupted");
+      .should("contain", "Execution interrupted");
   });
 
   it("Py5 magic comment imports py5", () => {
-    runCode("# input.comment.py5");
-    cy.get("editor-wc").shadow().find(".p5Canvas").should("be.visible").debug();
+    runCode("# Py5: imported mode");
+    cy.get("editor-wc").shadow().find(".p5Canvas").should("be.visible");
   });
 
   it("Py5 imported mode runs sketch without explicit run call", () => {
     runCode(
-      "# input.comment.py5\ndef setup():\n\tsize(400,400)\n\ndef draw():\n\tprint('hello world')"
+      "# Py5: imported mode\ndef setup():\n\tsize(400,400)\n\ndef draw():\n\tprint('hello world')"
     );
     cy.get("editor-wc")
       .shadow()
@@ -108,7 +108,7 @@ describe("Running the code with skulpt", () => {
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")
-      .contains("output.textOutput")
+      .contains("Text output")
       .click();
 
     cy.get("editor-wc")
@@ -122,7 +122,7 @@ describe("Running the code with skulpt", () => {
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")
-      .should("contain", "output.visualOutput");
+      .should("contain", "Visual output");
   });
 
   it("does not render astro pi component on page load", () => {
@@ -134,14 +134,14 @@ describe("Running the code with skulpt", () => {
 
   it("renders astro pi component if sense hat imported", () => {
     runCode("import sense_hat");
-    cy.get("editor-wc").shadow().contains("output.visualOutput").click();
+    cy.get("editor-wc").shadow().contains("Visual output").click();
     cy.get("editor-wc").shadow().find(".skulptrunner").should("contain", "yaw");
   });
 
   it("does not render astro pi component if sense hat unimported", () => {
     runCode("import sense_hat");
     runCode("import p5");
-    cy.get("editor-wc").shadow().contains("output.visualOutput").click();
+    cy.get("editor-wc").shadow().contains("Visual output").click();
     cy.get("editor-wc")
       .shadow()
       .find(".skulptrunner")

cypress/e2e/spec-wc.cy.js

@@ -13,10 +13,7 @@ describe("default behaviour", () => {
   });
 
   it("renders the web component", () => {
-    cy.get("editor-wc")
-      .shadow()
-      .find("button")
-      .should("contain", "runButton.run");
+    cy.get("editor-wc").shadow().find("button").should("contain", "Run");
   });
 
   it("defaults to the text output tab", () => {
@@ -26,14 +23,14 @@ describe("default behaviour", () => {
       .find(".proj-runner-container");
     runnerContainer
       .find(".react-tabs__tab--selected")
-      .should("contain", "output.textOutput");
+      .should("contain", "Text output");
   });
 
   it("does not render visual output tab on page load", () => {
     cy.get("editor-wc")
       .shadow()
       .find("#root")
-      .should("not.contain", "output.visualOutput");
+      .should("not.contain", "Visual output");
   });
 });
 
@@ -122,11 +119,11 @@ describe("when embedded, output_only & output_split_view are true", () => {
       .find(".proj-runner-container");
     runnerContainer
       .find(".react-tabs__tab--selected")
-      .should("contain", "output.textOutput");
+      .should("contain", "Text output");
     cy.get("editor-wc")
       .shadow()
       .find("button")
-      .contains("runButton.run")
+      .contains("Run")
       .should("not.be.disabled")
       .should("be.visible");
 
@@ -144,21 +141,14 @@ describe("when embedded, output_only & output_split_view are true", () => {
       .should("not.exist");
 
     // Run the code and check it executed without error
-    cy.get("editor-wc")
-      .shadow()
-      .find("button")
-      .contains("runButton.run")
-      .click();
+    cy.get("editor-wc").shadow().find("button").contains("Run").click();
     cy.get("#results").should("contain", '{"errorDetails":{}}');
 
     // Check that the visual output panel is displayed in split view mode (vs tabbed view)
+    cy.get("editor-wc").shadow().contains("Visual output").should("be.visible");
     cy.get("editor-wc")
       .shadow()
-      .contains("output.visualOutput")
-      .should("be.visible");
-    cy.get("editor-wc")
-      .shadow()
-      .contains("output.visualOutput")
+      .contains("Visual output")
       .parents("ul")
       .children()
       .should("have.length", 1);
@@ -171,12 +161,12 @@ describe("when embedded, output_only & output_split_view are true", () => {
     // Important to wait for this before making the negative assertions that follow
     cy.get("editor-wc")
       .shadow()
-      .contains("index.html output.preview")
+      .contains("index.html preview")
       .should("be.visible");
     cy.get("editor-wc")
       .shadow()
       .find("button")
-      .contains("runButton.run")
+      .contains("Run")
       .should("not.be.disabled")
       .should("be.visible");
 
@@ -201,11 +191,7 @@ describe("when embedded, output_only & output_split_view are true", () => {
       .should("not.exist");
 
     // Run the code and check it executed without error
-    cy.get("editor-wc")
-      .shadow()
-      .find("button")
-      .contains("runButton.run")
-      .click();
+    cy.get("editor-wc").shadow().find("button").contains("Run").click();
     cy.get("#results").should("contain", '{"errorDetails":{}}');
   });
 });

public/translations/en.json

@@ -28,7 +28,6 @@
     },
     "files": "Project files",
     "images": "Image gallery",
-    },
     "newFileButton": "Add file",
     "newFileModal": {
       "cancel": "Cancel",

src/utils/i18n.js

@@ -111,7 +111,9 @@ i18n
     interpolation: {
       escapeValue: false, // not needed for react!!
     },
-    backend: { loadPath: "/translations/{{lng}}.json" },
+    backend: {
+      loadPath: `${process.env.PUBLIC_URL}/translations/{{lng}}.json`,
+    },
   });
 
 export default i18n;