HTML preview doesn't show latest changes (#1484)

Closes:
RaspberryPiFoundation/digital-editor-issues#1324

Added saved snapshot on HTML preview, based on the load:

- Save/cache uses project.identifier || "project" in
hooks/useProjectPersistence.js
- Load reads with localStorage.getItem(id || "project") in
hooks/useProject.js

Author: abcampo-iry

src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx

@@ -212,6 +212,13 @@ function HtmlRunner() {
     }
   };
 
+  const cacheProjectForBrowserPreview = () => {
+    localStorage.setItem(
+      project.identifier || "project",
+      JSON.stringify(project),
+    );
+  };
+
   return (
     <div className="htmlrunner-container" data-testid="html-runner-container">
       {isEmbedded || autorunEnabled || codeHasBeenRun ? (
@@ -234,6 +241,7 @@ function HtmlRunner() {
                   href={`/${locale}/embed/viewer/${
                     project.identifier
                   }?browserPreview=true&page=${encodeURI(runningFile)}`}
+                  onClick={cacheProjectForBrowserPreview}
                   rel="noreferrer"
                 >
                   <span className="htmlrunner-link__text">

src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js

@@ -1,5 +1,12 @@
 import configureStore from "redux-mock-store";
-import { act, cleanup, render, screen, waitFor } from "@testing-library/react";
+import {
+  act,
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import React from "react";
 import { Provider } from "react-redux";
 import { parse as parseHtml } from "node-html-parser";
@@ -360,6 +367,7 @@ describe("When run is triggered", () => {
       const initialState = {
         editor: {
           project: {
+            identifier: "hello-world-project",
             components: [indexPage],
           },
           focussedFileIndices: [0],
@@ -383,6 +391,15 @@ describe("When run is triggered", () => {
     test("displays link to open preview in another browser tab", () => {
       expect(screen.queryByText("output.newTab")).toBeInTheDocument();
     });
+
+    test("caches current project before opening preview in another browser tab", () => {
+      fireEvent.click(screen.getByTestId("html-runner-open-in-new-tab"));
+
+      expect(JSON.parse(localStorage.getItem("hello-world-project"))).toEqual({
+        identifier: "hello-world-project",
+        components: [indexPage],
+      });
+    });
   });
 
   describe("When on mobile but not embedded", () => {