feat(SandpackTests): Add SandpackTests component

.codesandbox/tasks.json

@@ -46,14 +46,18 @@
       "command": "yarn workspace @codesandbox/sandpack-react build"
     },
     "dev:website-docs": {
-      "name": "Website docs",
+      "name": "Documentation",
       "command": "yarn dev:docs",
       "runAtStart": false
     },
     "dev:sandpack-react": {
       "name": "Storybook",
       "command": "yarn dev:react",
-      "runAtStart": true
+      "runAtStart": true,
+      "preview": {
+        "port": 6006,
+        "pr-link": "direct"
+      }
     },
     "dev:website-landing": {
       "name": "Website landing",
@@ -66,4 +70,4 @@
       "runAtStart": false
     }
   }
-}
+}

cypress/integration/Templates.spec.js

@@ -20,6 +20,8 @@ const getIframeBody = () => {
 
 describe("Templates", () => {
   Object.keys(SANDBOX_TEMPLATES).forEach((template) => {
+    if (template === "test-ts") return null; // tests there is no preview
+
     it(`Should run the ${template} template`, () => {
       accessPage(template);
 

sandpack-client/src/types.ts

@@ -169,6 +169,125 @@ export interface NpmRegistry {
   registryAuthToken?: string;
 }
 
+type TestStatus = "running" | "pass" | "fail";
+
+export type TestError = Error & {
+  matcherResult?: boolean;
+  mappedErrors?: Array<{
+    fileName: string;
+    _originalFunctionName: string;
+    _originalColumnNumber: number;
+    _originalLineNumber: number;
+    _originalScriptCode: Array<{
+      lineNumber: number;
+      content: string;
+      highlight: boolean;
+    }> | null;
+  }>;
+};
+
+export interface Test {
+  name: string;
+  blocks: string[];
+  status: TestStatus;
+  path: string;
+  errors: TestError[];
+  duration?: number | undefined;
+}
+
+export type SandboxTestMessage =
+  | RunAllTests
+  | RunTests
+  | ClearJestErrors
+  | ({ type: "test" } & (
+      | InitializedTestsMessage
+      | TestCountMessage
+      | TotalTestStartMessage
+      | TotalTestEndMessage
+      | AddFileMessage
+      | RemoveFileMessage
+      | FileErrorMessage
+      | DescribeStartMessage
+      | DescribeEndMessage
+      | AddTestMessage
+      | TestStartMessage
+      | TestEndMessage
+    ));
+
+interface InitializedTestsMessage {
+  event: "initialize_tests";
+}
+
+interface ClearJestErrors {
+  type: "action";
+  action: "clear-errors";
+  source: "jest";
+  path: string;
+}
+
+interface TestCountMessage {
+  event: "test_count";
+  count: number;
+}
+
+interface TotalTestStartMessage {
+  event: "total_test_start";
+}
+
+interface TotalTestEndMessage {
+  event: "total_test_end";
+}
+
+interface AddFileMessage {
+  event: "add_file";
+  path: string;
+}
+
+interface RemoveFileMessage {
+  event: "remove_file";
+  path: string;
+}
+
+interface FileErrorMessage {
+  event: "file_error";
+  path: string;
+  error: TestError;
+}
+
+interface DescribeStartMessage {
+  event: "describe_start";
+  blockName: string;
+}
+
+interface DescribeEndMessage {
+  event: "describe_end";
+}
+
+interface AddTestMessage {
+  event: "add_test";
+  testName: string;
+  path: string;
+}
+
+interface TestStartMessage {
+  event: "test_start";
+  test: Test;
+}
+
+interface TestEndMessage {
+  event: "test_end";
+  test: Test;
+}
+
+interface RunAllTests {
+  type: "run-all-tests";
+}
+
+interface RunTests {
+  type: "run-tests";
+  path: string;
+}
+
 export type SandpackMessage = BaseSandpackMessage &
   (
     | {
@@ -258,6 +377,7 @@ export type SandpackMessage = BaseSandpackMessage &
           data: string[];
         }>;
       }
+    | SandboxTestMessage
   );
 
 export type Template =

sandpack-react/.storybook/main.css

@@ -10,3 +10,29 @@ p {
   margin: 0;
   margin-bottom: 0.3em;
 }
+
+.playground-grid {
+  display: grid;
+  grid-template-columns: 200px 400px 400px;
+  grid-template-rows: repeat(2, 250px);
+  gap: 1px;
+}
+
+.playground-grid .sp-file-explorer {
+  grid-area: 1 / 1 / 3 / 2;
+}
+
+.playground-grid .sp-editor {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+.playground-grid .sp-previe {
+  grid-area: 1 / 3 / 2 / 4;
+}
+
+.playground-grid .sp-consol {
+  grid-area: 2 / 2 / 3 / 3;
+}
+.playground-grid .sp-tests {
+  grid-area: 2 / 3 / 3 / 4;
+}

sandpack-react/package.json

@@ -51,6 +51,7 @@
     "@codesandbox/sandpack-client": "^1.5.4",
     "@react-hook/intersection-observer": "^3.1.1",
     "@stitches/core": "^1.2.6",
+    "clean-set": "^1.1.2",
     "codesandbox-import-util-types": "^2.2.3",
     "lodash.isequal": "^4.5.0",
     "lz-string": "^1.4.4",

sandpack-react/src/Playground.stories.tsx

@@ -12,6 +12,7 @@ import {
   SandpackLayout,
   SandpackFileExplorer,
   SandpackConsole,
+  SandpackTests,
 } from "./";
 
 export default {
@@ -25,21 +26,22 @@ export const Main = (): JSX.Element => {
       Editor: true,
       FileExplorer: true,
       Console: true,
+      Tests: true,
     },
     Options: {
       showTabs: true,
       showLineNumbers: true,
       showInlineErrors: true,
       closableTabs: true,
-      wrapContent: true,
+      wrapContent: false,
       readOnly: false,
       showReadOnly: true,
       showNavigator: true,
       showRefreshButton: true,
       consoleShowHeader: true,
     },
-    Template: "react" as const,
-    Theme: "auto",
+    Template: "exhaustedFilesTests" as const,
+    Theme: "light",
   });
 
   const update = (key: any, value: any): void => {
@@ -80,6 +82,9 @@ export const Main = (): JSX.Element => {
                     }
                     value={config.Template}
                   >
+                    <option value="exhaustedFilesTests">
+                      exhaustedFilesTests
+                    </option>
                     {Object.keys(SANDBOX_TEMPLATES).map((tem) => (
                       <option value={tem}>{tem}</option>
                     ))}
@@ -135,25 +140,68 @@ export const Main = (): JSX.Element => {
       </div>
 
       <SandpackProvider
-        template={config.Template}
+        customSetup={{
+          dependencies:
+            config.Template === "exhaustedFilesTests"
+              ? exhaustedFilesTests.dependencies
+              : {},
+        }}
+        files={
+          config.Template === "exhaustedFilesTests"
+            ? exhaustedFilesTests.files
+            : {}
+        }
+        template={
+          config.Template === "exhaustedFilesTests" ? null : config.Template
+        }
         theme={themes[config.Theme] || config.Theme}
       >
         <SandpackLayout>
-          {config.Components.FileExplorer && <SandpackFileExplorer />}
-          {config.Components.Editor && (
-            <SandpackCodeEditor {...codeEditorOptions} />
-          )}
-          {config.Components.Preview && (
-            <SandpackPreview
-              showNavigator={config.Options?.showNavigator}
-              showRefreshButton={config.Options?.showRefreshButton}
-            />
-          )}
-          {config.Components.Console && (
-            <SandpackConsole showHeader={config.Options.consoleShowHeader} />
-          )}
+          <div className="playground-grid">
+            {config.Components.FileExplorer && <SandpackFileExplorer />}
+            {config.Components.Editor && (
+              <SandpackCodeEditor {...codeEditorOptions} />
+            )}
+            {config.Components.Preview && (
+              <SandpackPreview
+                showNavigator={config.Options?.showNavigator}
+                showRefreshButton={config.Options?.showRefreshButton}
+              />
+            )}
+
+            {config.Components.Console && (
+              <SandpackConsole showHeader={config.Options.consoleShowHeader} />
+            )}
+            {config.Components.Tests && <SandpackTests />}
+          </div>
         </SandpackLayout>
       </SandpackProvider>
     </div>
   );
 };
+
+const defaultTemplate = SANDBOX_TEMPLATES["react-ts"];
+
+const exhaustedFilesTests = {
+  ...defaultTemplate,
+  dependencies: {
+    ...defaultTemplate.dependencies,
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/jest-dom": "^5.16.5",
+  },
+  files: {
+    "/src/index.tsx": SANDBOX_TEMPLATES["react-ts"].files["/index.tsx"],
+    "/src/App.tsx": `console.log("Hello world");\n\n${SANDBOX_TEMPLATES["react-ts"].files["/App.tsx"].code}`,
+    "/src/App.test.tsx": `import '@testing-library/jest-dom';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders welcome message', () => {
+  render(<App />);
+  expect(screen.getByText('Hello World')).toBeInTheDocument();
+});`,
+    "/src/styles.css": SANDBOX_TEMPLATES["react-ts"].files["/styles.css"],
+    "/package.json": JSON.stringify({ main: "/src/index.tsx" }),
+  },
+};

sandpack-react/src/common/OpenInCodeSandboxButton/OpenInCodeSandboxButton.tsx

@@ -6,7 +6,7 @@ import { THEME_PREFIX } from "../../styles";
 import {
   buttonClassName,
   iconStandaloneClassName,
-  actionButtonClassName,
+  roundedButtonClassName,
 } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
 
@@ -24,7 +24,7 @@ export const OpenInCodeSandboxButton = (): JSX.Element | null => {
         c("button", "icon-standalone"),
         buttonClassName,
         iconStandaloneClassName,
-        actionButtonClassName
+        roundedButtonClassName
       )}
     >
       <ExportIcon />

sandpack-react/src/common/RunButton.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useSandpack } from "../hooks/useSandpack";
 import { RunIcon } from "../icons";
 import { css, THEME_PREFIX } from "../styles";
-import { actionButtonClassName, buttonClassName } from "../styles/shared";
+import { roundedButtonClassName, buttonClassName } from "../styles/shared";
 import { classNames } from "../utils/classNames";
 
 const runButtonClassName = css({
@@ -30,7 +30,7 @@ export const RunButton = ({
       className={classNames(
         c("button"),
         buttonClassName,
-        actionButtonClassName,
+        roundedButtonClassName,
         runButtonClassName,
         className
       )}

sandpack-react/src/common/Stack.tsx

@@ -15,6 +15,10 @@ export const stackClassName = css({
   backgroundColor: "$colors$surface1",
   transition: "height $transitions$default",
   gap: 1, // border between components
+
+  [`&:has(.${THEME_PREFIX}-stack)`]: {
+    backgroundColor: "$colors$surface2",
+  },
 });
 
 /**

sandpack-react/src/components/CodeEditor/index.tsx

@@ -104,7 +104,7 @@ export const SandpackCodeEditor = React.forwardRef<
     };
 
     return (
-      <SandpackStack style={style}>
+      <SandpackStack className={c("editor")} style={style}>
         {shouldShowTabs && <FileTabs closableTabs={closableTabs} />}
 
         <div className={classNames(c("code-editor"), editorClassName)}>