From 2ab3dee515ab1df56e62d75286026c63d72095e3 Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Thu, 27 Jan 2022 10:06:21 +0000 Subject: [PATCH] test(sandpackutils): cover getSandpackStateFromProps [skip ci] (#336) * tests(sandpackutils): cover getSandpackStateFromProps * Update sandpackUtils.test.ts --- .../src/utils/sandpackUtils.test.ts | 164 +++++++++++++++--- sandpack-react/src/utils/sandpackUtils.ts | 2 +- 2 files changed, 138 insertions(+), 28 deletions(-) diff --git a/sandpack-react/src/utils/sandpackUtils.test.ts b/sandpack-react/src/utils/sandpackUtils.test.ts index 337449c74..b13e416f2 100644 --- a/sandpack-react/src/utils/sandpackUtils.test.ts +++ b/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"); }); }); diff --git a/sandpack-react/src/utils/sandpackUtils.ts b/sandpack-react/src/utils/sandpackUtils.ts index 0bc6f3e0e..151e57cd8 100644 --- a/sandpack-react/src/utils/sandpackUtils.ts +++ b/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]; }