fix(sandpack-tests): introduce hideTestsAndSupressLogs prop

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

@@ -1,7 +1,8 @@
 import * as React from "react";
 
+import { useSandpack } from "../../hooks";
 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 +35,8 @@ interface Props {
   watchMode: boolean;
   setWatchMode: () => void;
   showSuitesOnly: boolean;
+  hideVerboseButton?: boolean;
+  hideWatchButton?: boolean;
 }
 
 const buttonsClassName = classNames(
@@ -51,7 +54,10 @@ export const Header: React.FC<Props> = ({
   watchMode,
   setWatchMode,
   showSuitesOnly,
+  hideVerboseButton,
+  hideWatchButton,
 }) => {
+  const {sandpack} = useSandpack()
   return (
     <div className={classNames(wrapperClassName, flexClassName)}>
       <div className={classNames(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>
+        {!hideVerboseButton && ! (
+          <button
+            className={buttonsClassName}
+            data-active={verbose}
+            disabled={status === "initialising" ||sandpack.hideTestsAndSupressLogs}
+            onClick={setVerbose}
+            type="button"
+          >
+            Verbose
+          </button>
+        )}
+        {!hideWatchButton && (
+          <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,8 @@ export const SandpackTests: React.FC<
     watchMode?: boolean;
     onComplete?: (specs: Record<string, Spec>) => void;
     actionsChildren?: JSX.Element;
+    hideVerboseButton?:boolean
+    hideWatchButton?:boolean;
   } & React.HtmlHTMLAttributes<HTMLDivElement>
 > = ({
   verbose = false,
@@ -66,6 +68,8 @@ export const SandpackTests: React.FC<
   className,
   onComplete,
   actionsChildren,
+  hideVerboseButton,
+  hideWatchButton,
   ...props
 }) => {
   const theme = useSandpackTheme();
@@ -379,6 +383,8 @@ export const SandpackTests: React.FC<
       <iframe ref={iframe} style={{ display: "none" }} title="Sandpack Tests" />
 
       <Header
+        hideVerboseButton={hideVerboseButton}
+        hideWatchButton={hideWatchButton}
         setSuiteOnly={(): void =>
           setState((s) => ({ ...s, suiteOnly: !s.suiteOnly }))
         }

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

@@ -1,6 +1,7 @@
 import type { TestError } from "@codesandbox/sandpack-client";
 import * as React from "react";
 
+import { useSandpack } from "../../hooks";
 import { css } from "../../styles";
 import { buttonClassName } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
@@ -78,6 +79,8 @@ export const Specs: React.FC<Props> = ({
   status,
   verbose,
 }) => {
+  const { sandpack } = useSandpack();
+  const hideFailingTests = sandpack?.hideTestsAndSupressLogs;
   return (
     <>
       {specs.map((spec) => {
@@ -90,7 +93,9 @@ export const Specs: React.FC<Props> = ({
                 Error
               </SpecLabel>
               <FilePath
-                onClick={(): void => openSpec(spec.name)}
+                onClick={(): void =>
+                  openSpec(spec.name)
+                }
                 path={spec.name}
               />
               <FormattedError error={spec.error} path={spec.name} />
@@ -138,36 +143,44 @@ export const Specs: React.FC<Props> = ({
               )}
 
               <FilePath
-                onClick={(): void => openSpec(spec.name)}
+                onClick={(): void => {
+                  if(!hideFailingTests){
+                    openSpec(spec.name)
+                  }
+                }}
                 path={spec.name}
               />
             </div>
 
-            {verbose && <Tests tests={tests} />}
+            {verbose &&!hideFailingTests && <Tests tests={tests} />}
 
-            {verbose && <Describes describes={describes} />}
+            {verbose &&!hideFailingTests && <Describes describes={describes} />}
 
-            {getFailingTests(spec).map((test) => {
-              return (
-                <div
-                  key={`failing-${test.name}`}
-                  className={classNames(gapBottomClassName)}
-                >
+            {!hideFailingTests &&
+              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/Summary.tsx

@@ -6,7 +6,7 @@ import { classNames } from "../../utils/classNames";
 import {
   failTextClassName,
   passTextClassName,
-  skipTextClassName,
+  skipTextClassName
 } from "./style";
 
 export interface TestResults {
@@ -44,7 +44,7 @@ const containerClassName = css({
 
 export const Summary: React.FC<Props> = ({ suites, tests, duration }) => {
   const widestLabel = "Test suites: ";
-
+ 
   const withMargin = (label: string): string => {
     const difference = widestLabel.length - label.length;
     const margin = Array.from({ length: difference }, () => " ").join("");

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

@@ -147,6 +147,36 @@ export const VerboseMode: React.FC = () => {
   );
 };
 
+/**
+ * This story is used to test the `hideTestsAndSupressLogs` option.
+ * 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={{
+        hideTestsAndSupressLogs:true,
+        visibleFiles: ["/add.ts"],
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout  style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests verbose/>
+      </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();
   }, []);
@@ -34,6 +33,7 @@ export const SandpackProvider: React.FC<SandpackProviderProps> = (props) => {
 
         listen: addListener,
         dispatch: dispatchMessage,
+        hideTestsAndSupressLogs: options?.hideTestsAndSupressLogs,
       }}
     >
       <ClasserProvider classes={options?.classes}>

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.
    */
@@ -402,6 +401,8 @@ interface SandpackRootProps<
   theme?: SandpackThemeProp;
 }
 
+
+
 export interface SandpackInternalOptions<
   Files extends SandpackFiles | any = any,
   TemplateName extends SandpackPredefinedTemplate = SandpackPredefinedTemplate
@@ -429,6 +430,10 @@ export interface SandpackInternalOptions<
   fileResolver?: FileResolver;
   externalResources?: string[];
   classes?: Record<string, string>;
+  /**
+   * If `hideTestsAndSupressLogs` is true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
+   */
+  hideTestsAndSupressLogs?: boolean;
 }
 
 interface SandpackInternalProps<
@@ -549,7 +554,10 @@ export interface SandpackState {
   resetFile: (path: string) => void;
   resetAllFiles: () => void;
   registerReactDevTools: (value: ReactDevToolsMode) => void;
-
+ /**
+   * If `hideTestsAndSupressLogs` is true sandpack hides test files and suppresses their output from being logged to the console when tests fails. This option will also disables verbose button.
+   */
+ hideTestsAndSupressLogs?: boolean;
   /**
    * 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,40 @@ export default () => (
 `}
 </CodeBlock>
 
+
+### Hiding Tests
+
+You can hide the test files with `visibleFiles` prop.
+Additionally if you want to supress test content and only show the test results, you can use `hideTestsAndSupressLogs` option.
+This option will hide the test files and supress the console logs. And it will disable the verbose button.
+
+<CodeBlock stack>
+{`import { 
+  SandpackProvider, 
+  SandpackLayout, 
+  SandpackCodeEditor, 
+  SandpackTests 
+} from "@codesandbox/sandpack-react";
+
+
+
+export default () => (
+  <SandpackProvider
+    template="test-ts"
+    options={{
+      hideTestsAndSupressLogs:true,
+       visibleFiles: ["/add.ts"],
+    }}
+  >
+    <SandpackLayout>
+      <SandpackCodeEditor />
+      <SandpackTests />
+    </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.