From 373ab4329692820d6cb6760c88a21b0222708cc9 Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <ubeytdemir4se@gmail.com>
Date: Tue, 28 Feb 2023 22:14:02 +0700
Subject: [PATCH] fix(sandpack-tests): introduce `hideTestsAndSupressLogs` prop
 (#775)

Closes https://github.com/codesandbox/sandpack/issues/768
---
 .../src/components/Tests/Header.tsx           | 48 ++++++++++-------
 .../src/components/Tests/SandpackTests.tsx    | 15 ++++++
 sandpack-react/src/components/Tests/Specs.tsx | 54 +++++++++++--------
 .../src/components/Tests/Tests.stories.tsx    | 29 ++++++++++
 .../src/contexts/sandpackContext.tsx          |  1 -
 sandpack-react/src/types.ts                   |  2 -
 .../src/pages/advanced-usage/components.mdx   | 32 ++++++++++-
 7 files changed, 137 insertions(+), 44 deletions(-)

diff --git a/sandpack-react/src/components/Tests/Header.tsx b/sandpack-react/src/components/Tests/Header.tsx
index 1a93fea49..33d41c523 100644
--- a/sandpack-react/src/components/Tests/Header.tsx
+++ b/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>
   );
diff --git a/sandpack-react/src/components/Tests/SandpackTests.tsx b/sandpack-react/src/components/Tests/SandpackTests.tsx
index 51978b476..3812847d4 100644
--- a/sandpack-react/src/components/Tests/SandpackTests.tsx
+++ b/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}
diff --git a/sandpack-react/src/components/Tests/Specs.tsx b/sandpack-react/src/components/Tests/Specs.tsx
index c3fedc513..95e389806 100644
--- a/sandpack-react/src/components/Tests/Specs.tsx
+++ b/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>
         );
       })}
diff --git a/sandpack-react/src/components/Tests/Tests.stories.tsx b/sandpack-react/src/components/Tests/Tests.stories.tsx
index 0c1f4fe33..c08ba82fc 100644
--- a/sandpack-react/src/components/Tests/Tests.stories.tsx
+++ b/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
diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
index 6b458d5b1..63b8a94da 100644
--- a/sandpack-react/src/contexts/sandpackContext.tsx
+++ b/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();
   }, []);
diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
index ee734d268..7314e403f 100644
--- a/sandpack-react/src/types.ts
+++ b/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
diff --git a/website/docs/src/pages/advanced-usage/components.mdx b/website/docs/src/pages/advanced-usage/components.mdx
index 60cd8b841..03f4df9c4 100644
--- a/website/docs/src/pages/advanced-usage/components.mdx
+++ b/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>
\ No newline at end of file