test(sandpackutils): cover getSandpackStateFromProps [skip ci] (#336)

* tests(sandpackutils): cover getSandpackStateFromProps

* Update sandpackUtils.test.ts

sandpack-react/src/utils/sandpackUtils.test.ts

@@ -6,6 +6,19 @@ import {
 } from "./sandpackUtils";
 
 describe(getSandpackStateFromProps, () => {
+  /**
+   * activePath
+   */
+  test("it returns the main file in case activePath doesn't exist", () => {
+    const setup = getSandpackStateFromProps({
+      template: "react",
+      activePath: "NO_EXIST.js",
+    });
+
+    expect(setup.activePath).not.toBe("NO_EXIST.js");
+    expect(setup.activePath).toBe(REACT_TEMPLATE.main);
+  });
+
   test("always return an activeFile", () => {
     const template = getSandpackStateFromProps({ template: "react" });
     expect(template.activePath).toBe("/App.js");
@@ -19,8 +32,42 @@ describe(getSandpackStateFromProps, () => {
     expect(customSetup.activePath).toBe("foo.js");
   });
 
+  test("show activePath even when it's hidden", () => {
+    const setup = getSandpackStateFromProps({
+      template: "react",
+      activePath: "/App.js",
+      customSetup: {
+        files: {
+          "/App.js": { hidden: true, code: "" },
+          "/custom.js": { hidden: true, code: "" },
+        },
+      },
+    });
+
+    expect(setup.activePath).toEqual("/App.js");
+  });
+
+  test("activePath overrides the customSetup.main", () => {
+    const setup = getSandpackStateFromProps({
+      template: "react",
+      activePath: "/App.js",
+      customSetup: {
+        main: "/custom.js",
+        files: {
+          "/App.js": "",
+          "/custom.js": "",
+        },
+      },
+    });
+
+    expect(setup.activePath).toEqual("/App.js");
+  });
+
+  /**
+   * hidden file
+   */
   test("exclude hidden files from template", () => {
-    const output = getSandpackStateFromProps({ template: "react" });
+    const setup = getSandpackStateFromProps({ template: "react" });
     const collectFilenames = Object.entries(REACT_TEMPLATE.files).reduce(
       (acc, [key, value]) => {
         if (!value.hidden) {
@@ -32,11 +79,11 @@ describe(getSandpackStateFromProps, () => {
       [] as string[]
     );
 
-    expect(output.openPaths.sort()).toEqual(collectFilenames.sort());
+    expect(setup.openPaths.sort()).toEqual(collectFilenames.sort());
   });
 
   test("exclude hidden files from custom files", () => {
-    const output = getSandpackStateFromProps({
+    const setup = getSandpackStateFromProps({
       customSetup: {
         entry: "/App.js",
         files: {
@@ -46,11 +93,11 @@ describe(getSandpackStateFromProps, () => {
       },
     });
 
-    expect(output.openPaths.sort()).toEqual(["/App.js"]);
+    expect(setup.openPaths.sort()).toEqual(["/App.js"]);
   });
 
   test("exclude hidden files from custom files & template", () => {
-    const output = getSandpackStateFromProps({
+    const setup = getSandpackStateFromProps({
       template: "react",
       customSetup: {
         files: {
@@ -60,14 +107,30 @@ describe(getSandpackStateFromProps, () => {
       },
     });
 
-    expect(output.openPaths.sort()).toEqual(["/App.js"]);
+    expect(setup.openPaths.sort()).toEqual(["/App.js"]);
   });
 
-  test("not allow to hidden the entry file", () => {
+  test("show files which are `hidden` & `active` at the same time", () => {
+    const setup = getSandpackStateFromProps({
+      template: "react",
+      customSetup: {
+        files: {
+          "/App.js": { hidden: true, active: true, code: "" },
+          "/custom.js": { hidden: true, code: "" },
+        },
+      },
+    });
+
+    expect(setup.openPaths.sort()).toEqual(["/App.js"]);
+  });
+
+  /**
+   * entry file
+   */
+  test("it needs to provide a entry file, when template is omitted", () => {
     try {
       getSandpackStateFromProps({
         customSetup: {
-          entry: "/App.js",
           files: {
             "/App.js": { hidden: true, code: "" },
             "/custom.js": { hidden: true, code: "" },
@@ -82,42 +145,89 @@ describe(getSandpackStateFromProps, () => {
     }
   });
 
-  test("show files which are `hidden` & `active` at the same time", () => {
-    const output = getSandpackStateFromProps({
+  test("it updates the entry file in the package.json", () => {
+    const setup = getSandpackStateFromProps({
       template: "react",
       customSetup: {
-        files: {
-          "/App.js": { hidden: true, active: true, code: "" },
-          "/custom.js": { hidden: true, code: "" },
-        },
+        entry: "foo.ts",
+        files: { "foo.ts": "" },
       },
     });
 
-    expect(output.openPaths.sort()).toEqual(["/App.js"]);
+    const packageContent = JSON.parse(setup.files["/package.json"].code);
+    expect(packageContent.main).toBe("foo.ts");
   });
 
-  test("show `activePath` even when it's hidden", () => {
-    const output = getSandpackStateFromProps({
+  /**
+   * openPaths
+   */
+  test("should not show invalid files into `openPaths`", () => {
+    const setup = getSandpackStateFromProps({
       template: "react",
-      activePath: "/App.js",
+      openPaths: ["/App.js", "not-exist.js"],
+    });
+
+    expect(setup.openPaths).toEqual(["/App.js"]);
+  });
+
+  /**
+   * main file (will be deprecated)
+   */
+  test("it uses main as activePath", () => {
+    const setup = getSandpackStateFromProps({
+      template: "react",
+      customSetup: {
+        main: "myfile.js",
+        files: { "myfile.js": "" },
+      },
+    });
+
+    expect(setup.activePath).toEqual("myfile.js");
+  });
+
+  /**
+   * dependencies
+   */
+  test("it creates a package.json with the dependencies", () => {
+    const setup = getSandpackStateFromProps({
+      customSetup: {
+        entry: "index.js",
+        files: { "index.js": "" },
+        dependencies: { foo: "*" },
+      },
+    });
+
+    const packageContent = JSON.parse(setup.files["/package.json"].code);
+    expect(packageContent.dependencies).toEqual({ foo: "*" });
+  });
+
+  test("it defatuls to a package.json", () => {
+    const setup = getSandpackStateFromProps({
       customSetup: {
+        entry: "index.js",
         files: {
-          "/App.js": { hidden: true, code: "" },
-          "/custom.js": { hidden: true, code: "" },
+          "index.js": "",
         },
       },
     });
 
-    expect(output.activePath).toEqual("/App.js");
+    const packageContent = JSON.parse(setup.files["/package.json"].code);
+    expect(packageContent.dependencies).toEqual({});
   });
 
-  test("should not show invalid files into `openPaths`", () => {
-    const output = getSandpackStateFromProps({
-      template: "react",
-      openPaths: ["/App.js", "not-exist.js"],
-    });
+  /**
+   * environment
+   */
+  it("environment default to parcel", () => {
+    const setup = getSandpackStateFromProps({});
+
+    expect(setup.environment).toBe("parcel");
+  });
+
+  it("environment default to the custom template environment", () => {
+    const setup = getSandpackStateFromProps({ template: "svelte" });
 
-    expect(output.openPaths).toEqual(["/App.js"]);
+    expect(setup.environment).toBe("svelte");
   });
 });
 

sandpack-react/src/utils/sandpackUtils.ts

@@ -66,7 +66,7 @@ export const getSandpackStateFromProps = (
   }
 
   // If no activePath is specified, use the first open file
-  if (!activePath) {
+  if (!activePath || !projectSetup.files[activePath]) {
     activePath = projectSetup.main || openPaths[0];
   }