Fixing instructions state when set to an empty string

CHANGELOG.md

@@ -19,7 +19,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Instructions empty state to show when instructions are editable (#1165, #1168)
 - Allow `instructions` attribute to override instructions attached to the project (#1169)
 - Instructions tabs for edit and viewing (#1167)
-- Add remove instructions button modal (#1176)
+- Add remove instructions button modal (#1176, #1191)
 - Dark mode colours (#1182)
 - Dark mode for instuctions code block (#1187)
 - Change markdown links to open in new tab (#1188)

src/components/WebComponentProject/WebComponentProject.jsx

@@ -98,15 +98,16 @@ const WebComponentProject = ({
     dispatch(
       setInstructions({
         project: {
-          steps: projectInstructions
-            ? [
-                {
-                  quiz: false,
-                  title: "",
-                  content: marked.parse(projectInstructions),
-                },
-              ]
-            : [],
+          steps:
+            typeof projectInstructions === "string"
+              ? [
+                  {
+                    quiz: false,
+                    title: "",
+                    content: marked.parse(projectInstructions),
+                  },
+                ]
+              : [],
         },
         permitOverride: true,
       }),

src/components/WebComponentProject/WebComponentProject.test.js

@@ -135,6 +135,37 @@ describe("When there are instructions", () => {
   });
 });
 
+describe("When instructions are an empty string", () => {
+  beforeEach(() => {
+    renderWebComponentProject({
+      instructions: "",
+      codeRunTriggered: true,
+    });
+  });
+
+  test("Dispatches action to set instructions", () => {
+    expect(store.getActions()).toEqual(
+      expect.arrayContaining([
+        {
+          type: "instructions/setInstructions",
+          payload: {
+            permitOverride: true,
+            project: {
+              steps: [
+                {
+                  title: "",
+                  content: "",
+                  quiz: false,
+                },
+              ],
+            },
+          },
+        },
+      ]),
+    );
+  });
+});
+
 describe("When there are no instructions", () => {
   beforeEach(() => {
     renderWebComponentProject({});