Fixing instructions state when set to an empty string (#1191)

This is fixing a bug where the user deletes everything in the
instructions box and it suddenly switches back to the empty instructions
state. This was caused by the fact that an empty string is `falsy` in
Javascript, so when the instructions content was deleted we would get
`projectInstructions = ""` which resulted in the instructions being
deleted.

Author: loiswells97

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({});