fix(sandpack-tests): introduce hideTestsAndSupressLogs prop (#775)

Closes #768

Author: ubeytd

sandpack-react/src/components/Tests/Header.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { css } from "../../styles";
-import { roundedButtonClassName, buttonClassName } from "../../styles/shared";
+import { buttonClassName, roundedButtonClassName } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
 import { ConsoleIcon } from "../icons";
 
@@ -34,6 +34,9 @@ interface Props {
   watchMode: boolean;
   setWatchMode: () => void;
   showSuitesOnly: boolean;
+  showVerboseButton: boolean;
+  showWatchButton: boolean;
+  hideTestsAndSupressLogs: boolean;
 }
 
 const buttonsClassName = classNames(
@@ -51,6 +54,9 @@ export const Header: React.FC<Props> = ({
   watchMode,
   setWatchMode,
   showSuitesOnly,
+  showWatchButton,
+  showVerboseButton,
+  hideTestsAndSupressLogs,
 }) => {
   return (
     <div className={classNames(wrapperClassName, flexClassName)}>
@@ -87,24 +93,28 @@ export const Header: React.FC<Props> = ({
             Suite only
           </button>
         )}
-        <button
-          className={buttonsClassName}
-          data-active={verbose}
-          disabled={status === "initialising"}
-          onClick={setVerbose}
-          type="button"
-        >
-          Verbose
-        </button>
-        <button
-          className={buttonsClassName}
-          data-active={watchMode}
-          disabled={status === "initialising"}
-          onClick={setWatchMode}
-          type="button"
-        >
-          Watch
-        </button>
+        {showVerboseButton && (
+          <button
+            className={buttonsClassName}
+            data-active={verbose}
+            disabled={status === "initialising" || hideTestsAndSupressLogs}
+            onClick={setVerbose}
+            type="button"
+          >
+            Verbose
+          </button>
+        )}
+        {showWatchButton && (
+          <button
+            className={buttonsClassName}
+            data-active={watchMode}
+            disabled={status === "initialising"}
+            onClick={setWatchMode}
+            type="button"
+          >
+            Watch
+          </button>
+        )}
       </div>
     </div>
   );

sandpack-react/src/components/Tests/SandpackTests.tsx

@@ -58,6 +58,14 @@ export const SandpackTests: React.FC<
     watchMode?: boolean;
     onComplete?: (specs: Record<string, Spec>) => void;
     actionsChildren?: JSX.Element;
+    showVerboseButton?: boolean;
+    showWatchButton?: boolean;
+    /**
+     * Hide the tests and supress logs
+     * If `true` the tests will be hidden and the logs will be supressed. This is useful when you want to run tests in the background and don't want to show the tests to the user.
+     * @default false
+     */
+    hideTestsAndSupressLogs?: boolean;
   } & React.HtmlHTMLAttributes<HTMLDivElement>
 > = ({
   verbose = false,
@@ -66,6 +74,9 @@ export const SandpackTests: React.FC<
   className,
   onComplete,
   actionsChildren,
+  showVerboseButton = true,
+  showWatchButton = true,
+  hideTestsAndSupressLogs = false,
   ...props
 }) => {
   const theme = useSandpackTheme();
@@ -379,6 +390,7 @@ export const SandpackTests: React.FC<
       <iframe ref={iframe} style={{ display: "none" }} title="Sandpack Tests" />
 
       <Header
+        hideTestsAndSupressLogs={hideTestsAndSupressLogs}
         setSuiteOnly={(): void =>
           setState((s) => ({ ...s, suiteOnly: !s.suiteOnly }))
         }
@@ -389,6 +401,8 @@ export const SandpackTests: React.FC<
           setState((s) => ({ ...s, watchMode: !s.watchMode }));
         }}
         showSuitesOnly={state.specsCount > 1}
+        showVerboseButton={showVerboseButton}
+        showWatchButton={showWatchButton}
         status={state.status}
         suiteOnly={state.suiteOnly}
         verbose={state.verbose}
@@ -418,6 +432,7 @@ export const SandpackTests: React.FC<
         ) : (
           <>
             <Specs
+              hideTestsAndSupressLogs={hideTestsAndSupressLogs}
               openSpec={openSpec}
               specs={specs}
               status={state.status}

sandpack-react/src/components/Tests/Specs.tsx

@@ -25,6 +25,7 @@ interface Props {
   verbose: boolean;
   status: Status;
   openSpec: (name: string) => void;
+  hideTestsAndSupressLogs?: boolean;
 }
 
 const fileContainer = css({
@@ -77,6 +78,7 @@ export const Specs: React.FC<Props> = ({
   openSpec,
   status,
   verbose,
+  hideTestsAndSupressLogs,
 }) => {
   return (
     <>
@@ -138,36 +140,46 @@ export const Specs: React.FC<Props> = ({
               )}
 
               <FilePath
-                onClick={(): void => openSpec(spec.name)}
+                onClick={(): void => {
+                  if (!hideTestsAndSupressLogs) {
+                    openSpec(spec.name);
+                  }
+                }}
                 path={spec.name}
               />
             </div>
 
-            {verbose && <Tests tests={tests} />}
+            {verbose && !hideTestsAndSupressLogs && <Tests tests={tests} />}
 
-            {verbose && <Describes describes={describes} />}
+            {verbose && !hideTestsAndSupressLogs && (
+              <Describes describes={describes} />
+            )}
 
-            {getFailingTests(spec).map((test) => {
-              return (
-                <div
-                  key={`failing-${test.name}`}
-                  className={classNames(gapBottomClassName)}
-                >
+            {!hideTestsAndSupressLogs &&
+              getFailingTests(spec).map((test) => {
+                return (
                   <div
-                    className={classNames(failTestClassName, failTextClassName)}
+                    key={`failing-${test.name}`}
+                    className={classNames(gapBottomClassName)}
                   >
-                    ● {test.blocks.join(" › ")} › {test.name}
+                    <div
+                      className={classNames(
+                        failTestClassName,
+                        failTextClassName
+                      )}
+                    >
+                      ● {test.blocks.join(" › ")} › {test.name}
+                    </div>
+                    {test.errors.map((e) => (
+                      <FormattedError
+                        key={`failing-${test.name}-error`}
+                        error={e}
+                        path={test.path}
+                      />
+                    ))}
                   </div>
-                  {test.errors.map((e) => (
-                    <FormattedError
-                      key={`failing-${test.name}-error`}
-                      error={e}
-                      path={test.path}
-                    />
-                  ))}
-                </div>
-              );
-            })}
+                );
+              })}
           </div>
         );
       })}

sandpack-react/src/components/Tests/Tests.stories.tsx

@@ -147,6 +147,35 @@ export const VerboseMode: React.FC = () => {
   );
 };
 
+/**
+ * This story is used to test the `hideTestsAndSupressLogs` prop.
+ * Tests content should not be visible in the tests console.
+ * It is useful when you want to hide the tests from the user.
+ *
+ */
+export const HiddenTests: React.FC = () => {
+  return (
+    <SandpackProvider
+      customSetup={{ entry: "add.ts" }}
+      files={{
+        "/add.test.ts": addTests,
+        "/add.ts": add,
+        "/src/app/sub.ts": sub,
+        "/src/app/sub.test.ts": subTests,
+      }}
+      options={{
+        visibleFiles: ["/add.ts"],
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests hideTestsAndSupressLogs />
+      </SandpackLayout>
+    </SandpackProvider>
+  );
+};
+
 export const OneTestFile: React.FC = () => {
   return (
     <SandpackProvider

sandpack-react/src/contexts/sandpackContext.tsx

@@ -17,7 +17,6 @@ export const SandpackProvider: React.FC<SandpackProviderProps> = (props) => {
   const [clientState, { dispatchMessage, addListener, ...clientOperations }] =
     useClient(props, fileState);
   const appState = useAppState(props, fileState.files);
-
   React.useEffect(() => {
     clientOperations.initializeSandpackIframe();
   }, []);

sandpack-react/src/types.ts

@@ -107,7 +107,6 @@ export interface SandpackOptions {
   wrapContent?: boolean;
   resizablePanels?: boolean;
   codeEditor?: SandpackCodeOptions;
-
   /**
    * This disables editing of content by the user in all files.
    */
@@ -549,7 +548,6 @@ export interface SandpackState {
   resetFile: (path: string) => void;
   resetAllFiles: () => void;
   registerReactDevTools: (value: ReactDevToolsMode) => void;
-
   /**
    * Element refs
    * Different components inside the SandpackProvider might register certain elements of interest for sandpack

website/docs/src/pages/advanced-usage/components.mdx

@@ -504,6 +504,36 @@ export default () => (
 `}
 </CodeBlock>
 
+### Hiding Tests
+
+You can hide the test files using the `visibleFiles` prop. Additionally, if you want to suppress test content and only show the test results, you can use the `hideTestsAndSuppressLogs` option.
+This option will hide the test files, suppress the console logs, and disable the verbose button.
+
+<CodeBlock stack>
+  {`
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackTests,
+} from "@codesandbox/sandpack-react";
+
+export default () => (
+  <SandpackProvider
+    template="test-ts"
+    options={{
+      visibleFiles: ["/add.ts"],
+    }}
+  >
+    <SandpackLayout>
+      <SandpackCodeEditor />
+      <SandpackTests hideTestsAndSupressLogs />
+    </SandpackLayout>
+  </SandpackProvider>
+);
+`}
+</CodeBlock>
+
 ## Console
 
 `SandpackConsole` is a Sandpack devtool that allows printing the console logs from a Sandpack client. It is designed to be a light version of a browser console, which means that it's limited to a set of common use cases you may encounter when coding.
@@ -672,4 +702,4 @@ of them comunicate with sandpack through the shared context.
 <Callout icon="🎉">
 **Congrats!**<br/>
 You can now easily create a custom Sandpack component by reusing some of the building components of the library. The next step is to build your own sandpack components with the help of our custom hooks.
-</Callout>
+</Callout>