Update error message for ImportErrors (#1105)

## Closes:
[#309](RaspberryPiFoundation/digital-editor-issues#309)

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+### Changed
+
+- Updated the ImportErrors message
+- In ErrorMessage component added the way to display html elements in string
+
 ### Added
 
 - PyodideWorker setup for the editor (#1104)

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

@@ -134,7 +134,7 @@ describe("Running the code with skulpt", () => {
       .find(".error-message__content")
       .should(
         "contain.text",
-        "If you are using p5, py5, sense_hat or turtle, matplotlib might not work.",
+        "ImportError: No module named matplotlib on line 2 of main.py. You should check your code for typos. If you are using p5, py5, sense_hat or turtle, matplotlib might not work - read this article for more information.",
       );
   });
 });

src/components/Editor/ErrorMessage/ErrorMessage.jsx

@@ -1,15 +1,21 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef } from "react";
 import "../../../assets/stylesheets/ErrorMessage.scss";
 import { useSelector } from "react-redux";
 import { SettingsContext } from "../../../utils/settings";
 
 const ErrorMessage = () => {
+  const message = useRef();
   const error = useSelector((state) => state.editor.error);
   const settings = useContext(SettingsContext);
 
+  useEffect(() => {
+    if (message.current) {
+      message.current.innerHTML = error;
+    }
+  }, [error]);
   return error ? (
     <div className={`error-message error-message--${settings.fontSize}`}>
-      <pre className="error-message__content">{error}</pre>
+      <pre ref={message} className="error-message__content"></pre>
     </div>
   ) : null;
 };

src/components/Editor/ErrorMessage/ErrorMessage.test.js

@@ -5,12 +5,42 @@ import ErrorMessage from "./ErrorMessage";
 import { render, screen } from "@testing-library/react";
 
 describe("When error is set", () => {
-  beforeEach(() => {
-    const middlewares = [];
-    const mockStore = configureStore(middlewares);
+  const middlewares = [];
+  const mockStore = configureStore(middlewares);
+
+  describe("When error is set", () => {
+    beforeEach(() => {
+      const initialState = {
+        editor: {
+          error: "Oops",
+        },
+      };
+      const store = mockStore(initialState);
+      render(
+        <Provider store={store}>
+          <SettingsContext.Provider
+            value={{ theme: "dark", fontSize: "myFontSize" }}
+          >
+            <ErrorMessage />
+          </SettingsContext.Provider>
+        </Provider>,
+      );
+    });
+
+    test("Error message displays", () => {
+      expect(screen.queryByText("Oops")).toBeInTheDocument();
+    });
+
+    test("Font size class is set correctly", () => {
+      const errorMessage = screen.queryByText("Oops").parentElement;
+      expect(errorMessage).toHaveClass("error-message--myFontSize");
+    });
+  });
+
+  it("should render links correctly within the error message", () => {
     const initialState = {
       editor: {
-        error: "Oops",
+        error: `ImportError: No module named pd on line 2 of main.py. You should check your code for typos. If you are using p5, py5, sense_hat or turtle, pd might not work - read this <a href=https://help.editor.raspberrypi.org/hc/en-us/articles/30841379339924-What-Python-libraries-are-available-in-the-Code-Editor>article</a> for more information.`,
       },
     };
     const store = mockStore(initialState);
@@ -23,14 +53,12 @@ describe("When error is set", () => {
         </SettingsContext.Provider>
       </Provider>,
     );
-  });
-
-  test("Error message displays", () => {
-    expect(screen.queryByText("Oops")).toBeInTheDocument();
-  });
 
-  test("Font size class is set correctly", () => {
-    const errorMessage = screen.queryByText("Oops").parentElement;
-    expect(errorMessage).toHaveClass("error-message--myFontSize");
+    const linkElement = screen.getByRole("link", { name: "article" });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute(
+      "href",
+      "https://help.editor.raspberrypi.org/hc/en-us/articles/30841379339924-What-Python-libraries-are-available-in-the-Code-Editor",
+    );
   });
 });

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

@@ -304,8 +304,9 @@ const SkulptRunner = ({ active, outputPanels = ["text", "visual"] }) => {
       const fileName = err.traceback[0].filename.replace(/^\.\//, "");
 
       if (errorType === "ImportError" && window.crossOriginIsolated) {
+        const articleLink = `https://help.editor.raspberrypi.org/hc/en-us/articles/30841379339924-What-Python-libraries-are-available-in-the-Code-Editor`;
         const moduleName = errorDescription.replace(/No module named /, "");
-        explanation = `You should check your code for typos. If you are using p5, py5, sense_hat or turtle, ${moduleName} might not work.`;
+        explanation = `You should check your code for typos. If you are using p5, py5, sense_hat or turtle, ${moduleName} might not work - read this <a href=${articleLink}>article</a> for more information.`;
       }
 
       let userId;

src/components/Editor/Runners/PythonRunner/SkulptRunner/SkulptRunner.test.js

@@ -283,7 +283,6 @@ describe("When there is an import error and the site is cross-origin isolated",
   let store;
   beforeEach(() => {
     window.crossOriginIsolated = true;
-
     const middlewares = [];
     const mockStore = configureStore(middlewares);
     const initialState = {
@@ -312,12 +311,10 @@ describe("When there is an import error and the site is cross-origin isolated",
     );
   });
   test("it shows the original error message and the explanation", () => {
-    expect(store.getActions()).toEqual(
-      expect.arrayContaining([
-        setError(
-          "ImportError: No module named fake_module on line 1 of main.py. You should check your code for typos. If you are using p5, py5, sense_hat or turtle, fake_module might not work.",
-        ),
-      ]),
+    expect(store.getActions()).toContainEqual(
+      setError(
+        `ImportError: No module named fake_module on line 1 of main.py. You should check your code for typos. If you are using p5, py5, sense_hat or turtle, fake_module might not work - read this <a href=https://help.editor.raspberrypi.org/hc/en-us/articles/30841379339924-What-Python-libraries-are-available-in-the-Code-Editor>article</a> for more information.`,
+      ),
     );
   });
 });