issue 1185 - enable Scratch project download (#1360)

Author: DNR500

src/components/DownloadButton/DownloadButton.jsx

@@ -1,7 +1,8 @@
 import React from "react";
 import FileSaver from "file-saver";
-import { toSnakeCase } from "js-convert-case";
+import { toKebabCase, toSnakeCase } from "js-convert-case";
 import JSZip from "jszip";
+import { postMessageToScratchIframe } from "../../utils/scratchIframe";
 import JSZipUtils from "jszip-utils";
 import { useTranslation } from "react-i18next";
 import { useSelector } from "react-redux";
@@ -37,6 +38,14 @@ const DownloadButton = (props) => {
       window.plausible("Download");
     }
 
+    if (project.project_type === "code_editor_scratch") {
+      postMessageToScratchIframe({
+        type: "scratch-gui-download",
+        filename: `${toKebabCase(project?.name) || "project"}.sb3`,
+      });
+      return;
+    }
+
     const zip = new JSZip();
 
     if (project.instructions) {

src/components/DownloadButton/DownloadButton.test.js

@@ -6,12 +6,14 @@ import DownloadButton from "./DownloadButton";
 import FileSaver from "file-saver";
 import JSZip from "jszip";
 import JSZipUtils from "jszip-utils";
+import { postMessageToScratchIframe } from "../../utils/scratchIframe";
 
 jest.mock("file-saver");
 jest.mock("jszip");
 jest.mock("jszip-utils", () => ({
   getBinaryContent: jest.fn(),
 }));
+jest.mock("../../utils/scratchIframe");
 
 describe("Downloading project with name set", () => {
   let downloadButton;
@@ -181,3 +183,83 @@ describe("Downloading project with no instructions set", () => {
     );
   });
 });
+
+describe("When project is Scratch", () => {
+  let downloadButton;
+
+  beforeEach(() => {
+    postMessageToScratchIframe.mockClear();
+    JSZip.mockClear();
+    FileSaver.saveAs.mockClear();
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          name: "Cool Scratch",
+          project_type: "code_editor_scratch",
+          identifier: "cool-scratch",
+          components: [],
+          image_list: [],
+        },
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <DownloadButton buttonText="Download" Icon={() => {}} />
+      </Provider>,
+    );
+    downloadButton = screen.queryByText("Download").parentElement;
+  });
+
+  test("clicking download sends scratch-gui-download message with kebab filename", () => {
+    fireEvent.click(downloadButton);
+    expect(postMessageToScratchIframe).toHaveBeenCalledTimes(1);
+    expect(postMessageToScratchIframe).toHaveBeenCalledWith({
+      type: "scratch-gui-download",
+      filename: "cool-scratch.sb3",
+    });
+  });
+
+  test("does not use JSZip or FileSaver", () => {
+    fireEvent.click(downloadButton);
+    expect(JSZip).not.toHaveBeenCalled();
+    expect(FileSaver.saveAs).not.toHaveBeenCalled();
+  });
+});
+
+describe("When project is Scratch with no name", () => {
+  let downloadButton;
+
+  beforeEach(() => {
+    postMessageToScratchIframe.mockClear();
+    const middlewares = [];
+    const mockStore = configureStore(middlewares);
+    const initialState = {
+      editor: {
+        project: {
+          project_type: "code_editor_scratch",
+          identifier: "cool-scratch",
+          components: [],
+          image_list: [],
+        },
+      },
+    };
+    const store = mockStore(initialState);
+    render(
+      <Provider store={store}>
+        <DownloadButton buttonText="Download" Icon={() => {}} />
+      </Provider>,
+    );
+    downloadButton = screen.queryByText("Download").parentElement;
+  });
+
+  test("clicking download uses default filename project.sb3", () => {
+    fireEvent.click(downloadButton);
+    expect(postMessageToScratchIframe).toHaveBeenCalledWith({
+      type: "scratch-gui-download",
+      filename: "project.sb3",
+    });
+  });
+});

src/components/ProjectBar/ProjectBar.jsx

@@ -9,6 +9,7 @@ import SaveButton from "../SaveButton/SaveButton";
 
 import "../../assets/stylesheets/ProjectBar.scss";
 import { isOwner } from "../../utils/projectHelpers";
+import { postMessageToScratchIframe } from "../../utils/scratchIframe";
 
 const ProjectBar = ({ nameEditable = true }) => {
   const { t } = useTranslation();
@@ -22,13 +23,7 @@ const ProjectBar = ({ nameEditable = true }) => {
   const readOnly = useSelector((state) => state.editor.readOnly);
 
   const saveScratchProject = () => {
-    const webComponent = document.querySelector("editor-wc");
-    webComponent.shadowRoot
-      .querySelector("iframe[title='Scratch']")
-      .contentWindow.postMessage(
-        { type: "scratch-gui-save" },
-        process.env.ASSETS_URL,
-      );
+    postMessageToScratchIframe({ type: "scratch-gui-save" });
   };
 
   return (

src/components/ProjectBar/ProjectBar.test.js

@@ -1,11 +1,13 @@
 import React from "react";
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { Provider } from "react-redux";
 import configureStore from "redux-mock-store";
 import { MemoryRouter } from "react-router-dom";
 import ProjectBar from "./ProjectBar";
+import { postMessageToScratchIframe } from "../../utils/scratchIframe";
 
 jest.mock("axios");
+jest.mock("../../utils/scratchIframe");
 
 jest.mock("react-router-dom", () => ({
   ...jest.requireActual("react-router-dom"),
@@ -189,3 +191,31 @@ describe("When read only", () => {
     expect(screen.queryByText(/saveStatus.saved/)).not.toBeInTheDocument();
   });
 });
+
+describe("When project is Scratch", () => {
+  const scratchProject = {
+    ...project,
+    project_type: "code_editor_scratch",
+  };
+
+  beforeEach(() => {
+    postMessageToScratchIframe.mockClear();
+    renderProjectBar({
+      editor: {
+        project: scratchProject,
+        loading: "success",
+      },
+      auth: {
+        user: user,
+      },
+    });
+  });
+
+  test("clicking Save sends scratch-gui-save message", () => {
+    fireEvent.click(screen.getByRole("button", { name: "Save" }));
+    expect(postMessageToScratchIframe).toHaveBeenCalledTimes(1);
+    expect(postMessageToScratchIframe).toHaveBeenCalledWith({
+      type: "scratch-gui-save",
+    });
+  });
+});

src/components/ScratchEditor/ScratchIntegrationHOC.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import { connect } from "react-redux";
+import { saveAs } from "file-saver";
 import {
   remixProject,
   manualUpdateProject,
@@ -63,7 +64,7 @@ const ScratchIntegrationHOC = function (WrappedComponent) {
     handleDownload(event) {
       const filename = event.data.filename;
       this.props.saveProjectSb3().then((content) => {
-        console.log("Downloading project as", content, filename);
+        saveAs(content, filename);
       });
     }
     handleUpload(event) {

src/components/ScratchEditor/ScratchIntegrationHOC.test.jsx

@@ -0,0 +1,75 @@
+const React = require("react");
+const { render, waitFor } = require("@testing-library/react");
+const { Provider } = require("react-redux");
+const configureStore = require("redux-mock-store").default;
+const ScratchIntegrationHOC = require("./ScratchIntegrationHOC").default;
+
+jest.mock("file-saver", () => ({ saveAs: jest.fn() }));
+jest.mock("@scratch/scratch-gui", () => ({
+  remixProject: () => ({ type: "remix" }),
+  manualUpdateProject: () => ({ type: "manualUpdate" }),
+  setStageSize: () => ({ type: "setStageSize" }),
+}));
+
+describe("ScratchIntegrationHOC", () => {
+  const mockSaveProjectSb3 = jest.fn();
+  const mockLoadProject = jest.fn();
+  const allowedOrigin = "https://editor.example.com";
+  let store;
+  let Wrapped;
+  let saveAs;
+
+  beforeEach(() => {
+    const fileSaver = require("file-saver");
+    saveAs = fileSaver.saveAs || fileSaver;
+    if (typeof saveAs.mockClear === "function") {
+      saveAs.mockClear();
+    }
+    mockSaveProjectSb3.mockClear();
+    process.env.REACT_APP_ALLOWED_IFRAME_ORIGINS = allowedOrigin;
+    const mockStore = configureStore([]);
+    store = mockStore({
+      scratchGui: {
+        vm: {
+          saveProjectSb3: mockSaveProjectSb3,
+          loadProject: mockLoadProject,
+        },
+      },
+    });
+    const Dummy = () =>
+      React.createElement("div", { "data-testid": "wrapped" });
+    Wrapped = ScratchIntegrationHOC(Dummy);
+  });
+
+  afterEach(() => {
+    delete process.env.REACT_APP_ALLOWED_IFRAME_ORIGINS;
+  });
+
+  describe("scratch-gui-download message", () => {
+    it("calls saveProjectSb3 and saveAs with blob and filename", async () => {
+      const mockBlob = new Blob(["x"], {
+        type: "application/octet-stream",
+      });
+      mockSaveProjectSb3.mockResolvedValue(mockBlob);
+
+      render(
+        React.createElement(Provider, { store }, React.createElement(Wrapped)),
+      );
+
+      window.dispatchEvent(
+        new MessageEvent("message", {
+          origin: allowedOrigin,
+          data: {
+            type: "scratch-gui-download",
+            filename: "my-project.sb3",
+          },
+        }),
+      );
+
+      await waitFor(() => {
+        expect(saveAs).toHaveBeenCalledWith(mockBlob, "my-project.sb3");
+      });
+      expect(mockSaveProjectSb3).toHaveBeenCalledTimes(1);
+    });
+  });
+});

src/utils/scratchIframe.js

@@ -0,0 +1,9 @@
+export const getScratchIframeContentWindow = () => {
+  const webComponent = document.querySelector("editor-wc");
+  return webComponent.shadowRoot.querySelector("iframe[title='Scratch']")
+    .contentWindow;
+};
+
+export const postMessageToScratchIframe = (message) => {
+  getScratchIframeContentWindow().postMessage(message, process.env.ASSETS_URL);
+};

src/utils/scratchIframe.test.js

@@ -0,0 +1,69 @@
+import {
+  getScratchIframeContentWindow,
+  postMessageToScratchIframe,
+} from "./scratchIframe";
+
+describe("scratchIframe", () => {
+  let mockPostMessage;
+  let mockContentWindow;
+  let mockShadowQuerySelector;
+  let originalQuerySelector;
+
+  beforeEach(() => {
+    mockPostMessage = jest.fn();
+    mockContentWindow = { postMessage: mockPostMessage };
+    mockShadowQuerySelector = jest.fn(() => ({
+      contentWindow: mockContentWindow,
+    }));
+    originalQuerySelector = document.querySelector;
+    document.querySelector = jest.fn(() => ({
+      shadowRoot: {
+        querySelector: mockShadowQuerySelector,
+      },
+    }));
+  });
+
+  afterEach(() => {
+    document.querySelector = originalQuerySelector;
+  });
+
+  describe("getScratchIframeContentWindow", () => {
+    it("returns the Scratch iframe contentWindow", () => {
+      const result = getScratchIframeContentWindow();
+      expect(document.querySelector).toHaveBeenCalledWith("editor-wc");
+      expect(result).toBe(mockContentWindow);
+    });
+
+    it("queries iframe by Scratch title", () => {
+      getScratchIframeContentWindow();
+      expect(mockShadowQuerySelector).toHaveBeenCalledWith(
+        "iframe[title='Scratch']",
+      );
+    });
+  });
+
+  describe("postMessageToScratchIframe", () => {
+    const originalEnv = process.env;
+
+    beforeEach(() => {
+      process.env = {
+        ...originalEnv,
+        ASSETS_URL: "https://assets.example.com",
+      };
+    });
+
+    afterEach(() => {
+      process.env = originalEnv;
+    });
+
+    it("calls postMessage on the Scratch iframe with message and ASSETS_URL", () => {
+      const message = { type: "scratch-gui-download", filename: "cool.sb3" };
+      postMessageToScratchIframe(message);
+      expect(mockPostMessage).toHaveBeenCalledTimes(1);
+      expect(mockPostMessage).toHaveBeenCalledWith(
+        message,
+        "https://assets.example.com",
+      );
+    });
+  });
+});