From d063801fb31e1c4b5cd17a308c95ea2f762f030a Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 16:22:13 +0700
Subject: [PATCH 1/8] adds global options to supress test logs from test
 console and adds options to hide verbose and watch buttons

---
 .../src/components/Tests/Header.tsx           | 46 ++++++++-------
 .../src/components/Tests/SandpackTests.tsx    |  6 ++
 sandpack-react/src/components/Tests/Specs.tsx | 57 ++++++++++++-------
 .../src/components/Tests/Summary.tsx          |  4 +-
 .../src/components/Tests/Tests.stories.tsx    | 25 ++++++++
 .../src/contexts/sandpackContext.tsx          |  2 +-
 sandpack-react/src/types.ts                   | 19 ++++++-
 7 files changed, 113 insertions(+), 46 deletions(-)

diff --git a/sandpack-react/src/components/Tests/Header.tsx b/sandpack-react/src/components/Tests/Header.tsx
index 1a93fea49..2f31f0a11 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,8 @@ interface Props {
   watchMode: boolean;
   setWatchMode: () => void;
   showSuitesOnly: boolean;
+  hideVerboseButton?: boolean;
+  hideWatchButton?: boolean;
 }
 
 const buttonsClassName = classNames(
@@ -51,6 +53,8 @@ export const Header: React.FC<Props> = ({
   watchMode,
   setWatchMode,
   showSuitesOnly,
+  hideVerboseButton,
+  hideWatchButton,
 }) => {
   return (
     <div className={classNames(wrapperClassName, flexClassName)}>
@@ -87,24 +91,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"}
+            onClick={setVerbose}
+            type="button"
+          >
+            Verbose
+          </button>
+        )}
+        {!hideWatchButton && (
+          <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..03d16dfb4 100644
--- a/sandpack-react/src/components/Tests/SandpackTests.tsx
+++ b/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 }))
         }
diff --git a/sandpack-react/src/components/Tests/Specs.tsx b/sandpack-react/src/components/Tests/Specs.tsx
index c3fedc513..10fdb6fb6 100644
--- a/sandpack-react/src/components/Tests/Specs.tsx
+++ b/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?.testOptions?.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>
         );
       })}
diff --git a/sandpack-react/src/components/Tests/Summary.tsx b/sandpack-react/src/components/Tests/Summary.tsx
index 9af3a3733..0fa83aed0 100644
--- a/sandpack-react/src/components/Tests/Summary.tsx
+++ b/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("");
diff --git a/sandpack-react/src/components/Tests/Tests.stories.tsx b/sandpack-react/src/components/Tests/Tests.stories.tsx
index 0c1f4fe33..0ad98598c 100644
--- a/sandpack-react/src/components/Tests/Tests.stories.tsx
+++ b/sandpack-react/src/components/Tests/Tests.stories.tsx
@@ -147,6 +147,31 @@ export const VerboseMode: React.FC = () => {
   );
 };
 
+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={{
+        testOptions:{
+          hideTestsAndSupressLogs:true
+        }
+      }}
+      theme={dracula}
+    >
+      <SandpackLayout  style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+        <SandpackCodeEditor showRunButton={false} showLineNumbers />
+        <SandpackTests />
+      </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..887e50d92 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();
   }, []);
@@ -34,6 +33,7 @@ export const SandpackProvider: React.FC<SandpackProviderProps> = (props) => {
 
         listen: addListener,
         dispatch: dispatchMessage,
+        testOptions: options?.testOptions,
       }}
     >
       <ClasserProvider classes={options?.classes}>
diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
index ee734d268..dfd54feca 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.
    */
@@ -402,6 +401,13 @@ interface SandpackRootProps<
   theme?: SandpackThemeProp;
 }
 
+export interface SandpackTestGlobalOptions {
+  /**
+   * If `hideTestsAndSupressLogs` is true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
+   */
+  hideTestsAndSupressLogs?: boolean;
+}
+
 export interface SandpackInternalOptions<
   Files extends SandpackFiles | any = any,
   TemplateName extends SandpackPredefinedTemplate = SandpackPredefinedTemplate
@@ -429,6 +435,11 @@ export interface SandpackInternalOptions<
   fileResolver?: FileResolver;
   externalResources?: string[];
   classes?: Record<string, string>;
+  /**
+   * Global options for sandpack tests
+   * - hideTestsAndSupressLogs - if true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
+   */
+  testOptions?: SandpackTestGlobalOptions;
 }
 
 interface SandpackInternalProps<
@@ -549,7 +560,11 @@ export interface SandpackState {
   resetFile: (path: string) => void;
   resetAllFiles: () => void;
   registerReactDevTools: (value: ReactDevToolsMode) => void;
-
+  /**
+   * Global options for sandpack tests
+   * - hideTestsAndSupressLogs - if true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
+   */
+  testOptions?: SandpackTestGlobalOptions;
   /**
    * Element refs
    * Different components inside the SandpackProvider might register certain elements of interest for sandpack

From 7a0a676f073536a648cf790d4b9823722de1b8cc Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 17:03:53 +0700
Subject: [PATCH 2/8] moves hideTestsAndSupressLogs option into options adds
 documentation

---
 .../src/components/Tests/Header.tsx           |  6 ++--
 sandpack-react/src/components/Tests/Specs.tsx |  2 +-
 .../src/components/Tests/Tests.stories.tsx    | 13 ++++---
 .../src/contexts/sandpackContext.tsx          |  2 +-
 sandpack-react/src/types.ts                   | 19 ++++-------
 .../src/pages/advanced-usage/components.mdx   | 34 +++++++++++++++++++
 6 files changed, 55 insertions(+), 21 deletions(-)

diff --git a/sandpack-react/src/components/Tests/Header.tsx b/sandpack-react/src/components/Tests/Header.tsx
index 2f31f0a11..5f7a5c264 100644
--- a/sandpack-react/src/components/Tests/Header.tsx
+++ b/sandpack-react/src/components/Tests/Header.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 
+import { useSandpack } from "../../hooks";
 import { css } from "../../styles";
 import { buttonClassName, roundedButtonClassName } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
@@ -56,6 +57,7 @@ export const Header: React.FC<Props> = ({
   hideVerboseButton,
   hideWatchButton,
 }) => {
+  const {sandpack} = useSandpack()
   return (
     <div className={classNames(wrapperClassName, flexClassName)}>
       <div className={classNames(flexClassName)}>
@@ -91,11 +93,11 @@ export const Header: React.FC<Props> = ({
             Suite only
           </button>
         )}
-        {!hideVerboseButton && (
+        {!hideVerboseButton && ! (
           <button
             className={buttonsClassName}
             data-active={verbose}
-            disabled={status === "initialising"}
+            disabled={status === "initialising" ||sandpack.hideTestsAndSupressLogs}
             onClick={setVerbose}
             type="button"
           >
diff --git a/sandpack-react/src/components/Tests/Specs.tsx b/sandpack-react/src/components/Tests/Specs.tsx
index 10fdb6fb6..c68bb8cb0 100644
--- a/sandpack-react/src/components/Tests/Specs.tsx
+++ b/sandpack-react/src/components/Tests/Specs.tsx
@@ -80,7 +80,7 @@ export const Specs: React.FC<Props> = ({
   verbose,
 }) => {
   const { sandpack } = useSandpack();
-  const hideFailingTests = sandpack?.testOptions?.hideTestsAndSupressLogs;
+  const hideFailingTests = sandpack?.hideTestsAndSupressLogs;
   return (
     <>
       {specs.map((spec) => {
diff --git a/sandpack-react/src/components/Tests/Tests.stories.tsx b/sandpack-react/src/components/Tests/Tests.stories.tsx
index 0ad98598c..41deba395 100644
--- a/sandpack-react/src/components/Tests/Tests.stories.tsx
+++ b/sandpack-react/src/components/Tests/Tests.stories.tsx
@@ -147,6 +147,12 @@ 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
@@ -158,15 +164,14 @@ export const HiddenTests: React.FC = () => {
         "/src/app/sub.test.ts": subTests,
       }}
       options={{
-        testOptions:{
-          hideTestsAndSupressLogs:true
-        }
+        hideTestsAndSupressLogs:true,
+        visibleFiles: ["/add.ts"],
       }}
       theme={dracula}
     >
       <SandpackLayout  style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
         <SandpackCodeEditor showRunButton={false} showLineNumbers />
-        <SandpackTests />
+        <SandpackTests verbose/>
       </SandpackLayout>
     </SandpackProvider>
   );
diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
index 887e50d92..4d70db016 100644
--- a/sandpack-react/src/contexts/sandpackContext.tsx
+++ b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -33,7 +33,7 @@ export const SandpackProvider: React.FC<SandpackProviderProps> = (props) => {
 
         listen: addListener,
         dispatch: dispatchMessage,
-        testOptions: options?.testOptions,
+        hideTestsAndSupressLogs: options?.hideTestsAndSupressLogs,
       }}
     >
       <ClasserProvider classes={options?.classes}>
diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
index dfd54feca..42639e8de 100644
--- a/sandpack-react/src/types.ts
+++ b/sandpack-react/src/types.ts
@@ -401,12 +401,7 @@ interface SandpackRootProps<
   theme?: SandpackThemeProp;
 }
 
-export interface SandpackTestGlobalOptions {
-  /**
-   * If `hideTestsAndSupressLogs` is true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
-   */
-  hideTestsAndSupressLogs?: boolean;
-}
+ 
 
 export interface SandpackInternalOptions<
   Files extends SandpackFiles | any = any,
@@ -436,10 +431,9 @@ export interface SandpackInternalOptions<
   externalResources?: string[];
   classes?: Record<string, string>;
   /**
-   * Global options for sandpack tests
-   * - hideTestsAndSupressLogs - if true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
+   * If `hideTestsAndSupressLogs` is true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
    */
-  testOptions?: SandpackTestGlobalOptions;
+  hideTestsAndSupressLogs?: boolean;
 }
 
 interface SandpackInternalProps<
@@ -560,11 +554,10 @@ export interface SandpackState {
   resetFile: (path: string) => void;
   resetAllFiles: () => void;
   registerReactDevTools: (value: ReactDevToolsMode) => void;
-  /**
-   * Global options for sandpack tests
-   * - hideTestsAndSupressLogs - if true sandpack hides test files and suppresses their output from being logged to the console when a test fails.
+ /**
+   * 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.
    */
-  testOptions?: SandpackTestGlobalOptions;
+ hideTestsAndSupressLogs?: boolean;
   /**
    * 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..d968fb3e3 100644
--- a/website/docs/src/pages/advanced-usage/components.mdx
+++ b/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.

From ad18b2281c452d48ee1888ccaaae71d63e96bf65 Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 18:58:29 +0700
Subject: [PATCH 3/8] formats documentation

---
 sandpack-react/rollup.config.js               |   2 +-
 .../src/components/Tests/Header.tsx           |  18 +--
 .../src/components/Tests/SandpackTests.tsx    |  21 ++-
 sandpack-react/src/components/Tests/Specs.tsx |  21 ++-
 .../src/components/Tests/Summary.tsx          |   4 +-
 .../src/components/Tests/Tests.stories.tsx    |   9 +-
 .../src/contexts/sandpackContext.tsx          |   1 -
 sandpack-react/src/types.ts                   |  10 --
 .../src/pages/advanced-usage/components.mdx   | 129 ++++++++----------
 9 files changed, 100 insertions(+), 115 deletions(-)

diff --git a/sandpack-react/rollup.config.js b/sandpack-react/rollup.config.js
index c9733d88e..2bf131e74 100644
--- a/sandpack-react/rollup.config.js
+++ b/sandpack-react/rollup.config.js
@@ -29,7 +29,7 @@ const configBase = {
     commonjs({ requireReturnsDefault: "preferred" }),
   ],
   external: [
-    'react/jsx-runtime',
+    "react/jsx-runtime",
     ...Object.keys(pkg.dependencies),
     ...Object.keys(pkg.devDependencies),
     ...Object.keys(pkg.peerDependencies),
diff --git a/sandpack-react/src/components/Tests/Header.tsx b/sandpack-react/src/components/Tests/Header.tsx
index 5f7a5c264..80f5f53a8 100644
--- a/sandpack-react/src/components/Tests/Header.tsx
+++ b/sandpack-react/src/components/Tests/Header.tsx
@@ -1,6 +1,5 @@
 import * as React from "react";
 
-import { useSandpack } from "../../hooks";
 import { css } from "../../styles";
 import { buttonClassName, roundedButtonClassName } from "../../styles/shared";
 import { classNames } from "../../utils/classNames";
@@ -35,8 +34,9 @@ interface Props {
   watchMode: boolean;
   setWatchMode: () => void;
   showSuitesOnly: boolean;
-  hideVerboseButton?: boolean;
-  hideWatchButton?: boolean;
+  showVerboseButton?: boolean;
+  showWatchButton?: boolean;
+  hideTestsAndSupressLogs?: boolean;
 }
 
 const buttonsClassName = classNames(
@@ -54,10 +54,10 @@ export const Header: React.FC<Props> = ({
   watchMode,
   setWatchMode,
   showSuitesOnly,
-  hideVerboseButton,
-  hideWatchButton,
+  showWatchButton,
+  showVerboseButton,
+  hideTestsAndSupressLogs,
 }) => {
-  const {sandpack} = useSandpack()
   return (
     <div className={classNames(wrapperClassName, flexClassName)}>
       <div className={classNames(flexClassName)}>
@@ -93,18 +93,18 @@ export const Header: React.FC<Props> = ({
             Suite only
           </button>
         )}
-        {!hideVerboseButton && ! (
+        {showVerboseButton && (
           <button
             className={buttonsClassName}
             data-active={verbose}
-            disabled={status === "initialising" ||sandpack.hideTestsAndSupressLogs}
+            disabled={status === "initialising" || hideTestsAndSupressLogs}
             onClick={setVerbose}
             type="button"
           >
             Verbose
           </button>
         )}
-        {!hideWatchButton && (
+        {showWatchButton && (
           <button
             className={buttonsClassName}
             data-active={watchMode}
diff --git a/sandpack-react/src/components/Tests/SandpackTests.tsx b/sandpack-react/src/components/Tests/SandpackTests.tsx
index 03d16dfb4..374783ddb 100644
--- a/sandpack-react/src/components/Tests/SandpackTests.tsx
+++ b/sandpack-react/src/components/Tests/SandpackTests.tsx
@@ -58,8 +58,14 @@ export const SandpackTests: React.FC<
     watchMode?: boolean;
     onComplete?: (specs: Record<string, Spec>) => void;
     actionsChildren?: JSX.Element;
-    hideVerboseButton?:boolean
-    hideWatchButton?:boolean;
+    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,
@@ -68,8 +74,9 @@ export const SandpackTests: React.FC<
   className,
   onComplete,
   actionsChildren,
-  hideVerboseButton,
-  hideWatchButton,
+  showVerboseButton,
+  showWatchButton,
+  hideTestsAndSupressLogs,
   ...props
 }) => {
   const theme = useSandpackTheme();
@@ -383,8 +390,7 @@ export const SandpackTests: React.FC<
       <iframe ref={iframe} style={{ display: "none" }} title="Sandpack Tests" />
 
       <Header
-        hideVerboseButton={hideVerboseButton}
-        hideWatchButton={hideWatchButton}
+        hideTestsAndSupressLogs={hideTestsAndSupressLogs}
         setSuiteOnly={(): void =>
           setState((s) => ({ ...s, suiteOnly: !s.suiteOnly }))
         }
@@ -395,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}
@@ -424,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 c68bb8cb0..95e389806 100644
--- a/sandpack-react/src/components/Tests/Specs.tsx
+++ b/sandpack-react/src/components/Tests/Specs.tsx
@@ -1,7 +1,6 @@
 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";
@@ -26,6 +25,7 @@ interface Props {
   verbose: boolean;
   status: Status;
   openSpec: (name: string) => void;
+  hideTestsAndSupressLogs?: boolean;
 }
 
 const fileContainer = css({
@@ -78,9 +78,8 @@ export const Specs: React.FC<Props> = ({
   openSpec,
   status,
   verbose,
+  hideTestsAndSupressLogs,
 }) => {
-  const { sandpack } = useSandpack();
-  const hideFailingTests = sandpack?.hideTestsAndSupressLogs;
   return (
     <>
       {specs.map((spec) => {
@@ -93,9 +92,7 @@ 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} />
@@ -144,19 +141,21 @@ export const Specs: React.FC<Props> = ({
 
               <FilePath
                 onClick={(): void => {
-                  if(!hideFailingTests){
-                    openSpec(spec.name)
+                  if (!hideTestsAndSupressLogs) {
+                    openSpec(spec.name);
                   }
                 }}
                 path={spec.name}
               />
             </div>
 
-            {verbose &&!hideFailingTests && <Tests tests={tests} />}
+            {verbose && !hideTestsAndSupressLogs && <Tests tests={tests} />}
 
-            {verbose &&!hideFailingTests && <Describes describes={describes} />}
+            {verbose && !hideTestsAndSupressLogs && (
+              <Describes describes={describes} />
+            )}
 
-            {!hideFailingTests &&
+            {!hideTestsAndSupressLogs &&
               getFailingTests(spec).map((test) => {
                 return (
                   <div
diff --git a/sandpack-react/src/components/Tests/Summary.tsx b/sandpack-react/src/components/Tests/Summary.tsx
index 0fa83aed0..9af3a3733 100644
--- a/sandpack-react/src/components/Tests/Summary.tsx
+++ b/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("");
diff --git a/sandpack-react/src/components/Tests/Tests.stories.tsx b/sandpack-react/src/components/Tests/Tests.stories.tsx
index 41deba395..c08ba82fc 100644
--- a/sandpack-react/src/components/Tests/Tests.stories.tsx
+++ b/sandpack-react/src/components/Tests/Tests.stories.tsx
@@ -148,10 +148,10 @@ export const VerboseMode: React.FC = () => {
 };
 
 /**
- * This story is used to test the `hideTestsAndSupressLogs` option.
+ * 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 (
@@ -164,14 +164,13 @@ export const HiddenTests: React.FC = () => {
         "/src/app/sub.test.ts": subTests,
       }}
       options={{
-        hideTestsAndSupressLogs:true,
         visibleFiles: ["/add.ts"],
       }}
       theme={dracula}
     >
-      <SandpackLayout  style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
+      <SandpackLayout style={{ "--sp-layout-height": "70vh" } as CSSProperties}>
         <SandpackCodeEditor showRunButton={false} showLineNumbers />
-        <SandpackTests verbose/>
+        <SandpackTests hideTestsAndSupressLogs />
       </SandpackLayout>
     </SandpackProvider>
   );
diff --git a/sandpack-react/src/contexts/sandpackContext.tsx b/sandpack-react/src/contexts/sandpackContext.tsx
index 4d70db016..63b8a94da 100644
--- a/sandpack-react/src/contexts/sandpackContext.tsx
+++ b/sandpack-react/src/contexts/sandpackContext.tsx
@@ -33,7 +33,6 @@ export const SandpackProvider: React.FC<SandpackProviderProps> = (props) => {
 
         listen: addListener,
         dispatch: dispatchMessage,
-        hideTestsAndSupressLogs: options?.hideTestsAndSupressLogs,
       }}
     >
       <ClasserProvider classes={options?.classes}>
diff --git a/sandpack-react/src/types.ts b/sandpack-react/src/types.ts
index 42639e8de..7314e403f 100644
--- a/sandpack-react/src/types.ts
+++ b/sandpack-react/src/types.ts
@@ -401,8 +401,6 @@ interface SandpackRootProps<
   theme?: SandpackThemeProp;
 }
 
- 
-
 export interface SandpackInternalOptions<
   Files extends SandpackFiles | any = any,
   TemplateName extends SandpackPredefinedTemplate = SandpackPredefinedTemplate
@@ -430,10 +428,6 @@ 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<
@@ -554,10 +548,6 @@ 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
diff --git a/website/docs/src/pages/advanced-usage/components.mdx b/website/docs/src/pages/advanced-usage/components.mdx
index d968fb3e3..2e061aec0 100644
--- a/website/docs/src/pages/advanced-usage/components.mdx
+++ b/website/docs/src/pages/advanced-usage/components.mdx
@@ -1,6 +1,7 @@
 import { Callout } from "nextra-theme-docs";
 
 import { CodeBlock } from "../../components/CodeBlock";
+
 import SandpackDecorators from "../../components/Decorators";
 
 # Components
@@ -100,18 +101,11 @@ export default () => (
 </CodeBlock>
 
 <details>
-  
-  <summary>Options</summary>
-  
-| Prop | Type | Default |
-| :- | :- | :- |
-| `showNavigator` | `boolean` | `false`|
-| `showOpenInCodeSandbox`| `boolean` | `true` |
-| `showRefreshButton`| `boolean` | `true` |
-| `showSandpackErrorOverlay`| `boolean` | `true` |
-| `showOpenNewtab` | `boolean` | `true` |
-| `actionsChildren` | JSX.Element | `null` | 
-  
+  <summary>Options</summary>| Prop | Type | Default | | :- | :- | :- | |
+  `showNavigator` | `boolean` | `false`| | `showOpenInCodeSandbox`| `boolean` |
+  `true` | | `showRefreshButton`| `boolean` | `true` | |
+  `showSandpackErrorOverlay`| `boolean` | `true` | | `showOpenNewtab` |
+  `boolean` | `true` | | `actionsChildren` | JSX.Element | `null` |
 </details>
 
 ### Additional buttons
@@ -217,21 +211,21 @@ export default () => (
 <details>
   <summary>Options</summary>
 
-| Prop | Description      | Type  | Default     |
-| :- | :- | :- | :- |
-| `showTabs`            | | `boolean` | `false` |
-| `showLineNumbers`     | | `boolean` | `false` |
-| `showInlineErrors`    | | `boolean` | `false` |
-| `showRunButton`       | | `boolean` | `false` |
-| `wrapContent`         | | `boolean` | `false` |
-| `closableTabs`        | | `boolean` | `false` |
+| Prop                  | Description                                                                                                                                                                                                                                                | Type                                      | Default     |
+| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
+| `showTabs`            |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `showLineNumbers`     |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `showInlineErrors`    |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `showRunButton`       |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `wrapContent`         |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `closableTabs`        |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
 | `initMode`            | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"`    |
-| `extensions`          | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component.    | `Extension[]`           | `undefined` |
-| `extensionsKeymap`    | Property to register CodeMirror extension keymap.    | `KeyBinding[]`          | `undefined  |
-| `id`| By default, Sandpack generates a random value to use as an id. Use this to override this value if you need predictable values.                 | `string`                | `undefined` |
-| `readOnly`            | This disables editing of the editor content by the user.               | `boolean`               | `false`     |
-| `showReadOnly`        | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true`              | `boolean`               | `true`      |
-| `additionalLanguages` | Provides a way to add custom language modes by supplying a language type, applicable file extensions, and a LanguageSupport instance for that syntax mode        | `CustomLanguage[]`      | `undefined` |
+| `extensions`          | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component.                                                                                                                                  | `Extension[]`                             | `undefined` |
+| `extensionsKeymap`    | Property to register CodeMirror extension keymap.                                                                                                                                                                                                          | `KeyBinding[]`                            | `undefined  |
+| `id`                  | By default, Sandpack generates a random value to use as an id. Use this to override this value if you need predictable values.                                                                                                                             | `string`                                  | `undefined` |
+| `readOnly`            | This disables editing of the editor content by the user.                                                                                                                                                                                                   | `boolean`                                 | `false`     |
+| `showReadOnly`        | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true`                                                                                                                                                              | `boolean`                                 | `true`      |
+| `additionalLanguages` | Provides a way to add custom language modes by supplying a language type, applicable file extensions, and a LanguageSupport instance for that syntax mode                                                                                                  | `CustomLanguage[]`                        | `undefined` |
 
 </details>
 
@@ -368,7 +362,7 @@ This is especially useful to get the cursor's current position, add custom decor
 
 ## File Explorer
 
-The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders,  and open new files.
+The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders, and open new files.
 
 <CodeBlock stack>
 {`import { 
@@ -389,7 +383,6 @@ export default () => (
 `}
 </CodeBlock>
 
-
 <details>
   <summary>Options</summary>
   
@@ -452,8 +445,8 @@ export default () => (
 <details>
   <summary>Options</summary>
 
-| Prop | Description      | Type  | Default     |
-| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`| 
+| Prop | Description | Type | Default |
+| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`|
 | `watchMode` | Watch files for changes and rerun all tests. Note if changing a test file then the current file will run on it's own | `boolean` | `true` |
 | `onComplete` | A callback that is invoked with the completed specs. | Function | `undefined` |
 
@@ -477,15 +470,15 @@ Add the matchers either as a dependency or as a file and then import the matcher
   SandpackTests 
 } from "@codesandbox/sandpack-react";
 
-const extendedTest = \`import * as matchers from 'jest-extended';
+const extendedTest = \`import \* as matchers from 'jest-extended';
 import { add } from './add';
 
 expect.extend(matchers);
 
 describe('jest-extended matchers are supported', () => {
-  test('adding two positive integers yields a positive integer', () => {
-    expect(add(1, 2)).toBePositive();
-  });
+test('adding two positive integers yields a positive integer', () => {
+expect(add(1, 2)).toBePositive();
+});
 });
 \`;
 
@@ -504,34 +497,30 @@ 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.
+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 
+  {`
+import {
+  SandpackProvider,
+  SandpackLayout,
+  SandpackCodeEditor,
+  SandpackTests,
 } from "@codesandbox/sandpack-react";
 
- 
-
 export default () => (
   <SandpackProvider
     template="test-ts"
     options={{
-      hideTestsAndSupressLogs:true,
-       visibleFiles: ["/add.ts"],
+      visibleFiles: ["/add.ts"],
     }}
   >
     <SandpackLayout>
       <SandpackCodeEditor />
-      <SandpackTests />
+      <SandpackTests hideTestsAndSupressLogs />
     </SandpackLayout>
   </SandpackProvider>
 );
@@ -552,8 +541,6 @@ There are three ways to print the logs:
 - `<SandpackConsole />`: standalone component to render the logs;
 - `useSandpackConsole`: React hook to consume the console logs from a Sandpack client;
 
-
-
 <CodeBlock stack>
 {`import { Sandpack } from "@codesandbox/sandpack-react";
 
@@ -571,15 +558,15 @@ export default () => (
 <details>
   <summary>`SandpackConsole` Options</summary>
 
-| Prop | Type  | Default | Description | 
-| :- | :- | :- | :- |
-| `clientId` | `string` | `undefined` | |
-| `showHeader` | `boolean` | `true` | |
-| `showSyntaxError` | `boolean` | `false` | |
-| `maxMessageCount` | `number` | `800` | |
-| `onLogsChange` | `(logs: SandpackConsoleData) => void` | | |
-| `resetOnPreviewRestart` | `boolean` | `false` | Reset the console list on every preview restart |
-| `ref` | `SandpackConsoleRef` | `SandpackConsoleRef` | Make possible to imperatively interact with the console component |
+| Prop                    | Type                                  | Default              | Description                                                       |
+| :---------------------- | :------------------------------------ | :------------------- | :---------------------------------------------------------------- |
+| `clientId`              | `string`                              | `undefined`          |                                                                   |
+| `showHeader`            | `boolean`                             | `true`               |                                                                   |
+| `showSyntaxError`       | `boolean`                             | `false`              |                                                                   |
+| `maxMessageCount`       | `number`                              | `800`                |                                                                   |
+| `onLogsChange`          | `(logs: SandpackConsoleData) => void` |                      |                                                                   |
+| `resetOnPreviewRestart` | `boolean`                             | `false`              | Reset the console list on every preview restart                   |
+| `ref`                   | `SandpackConsoleRef`                  | `SandpackConsoleRef` | Make possible to imperatively interact with the console component |
 
 </details>
 
@@ -620,14 +607,14 @@ export default () => (
 <details>
   <summary>Options</summary>
 
-| Prop | Description | Type  | Default |
-| :- | :- | :- | :- |
-| `showTabs`            | | `boolean` | `false` |
-| `showLineNumbers`     | | `boolean` | `false` |
-| `decorators` | Provides a way to draw or style a piece of the content. | `Decorators` | `undefined` |
-| `code` | | `string` | `undefined` |
-| `wrapContent`         | | `boolean` | `false` |
-| `initMode`            | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"`    |
+| Prop              | Description                                                                                                                                                                                                                                                | Type                                      | Default     |
+| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
+| `showTabs`        |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `showLineNumbers` |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `decorators`      | Provides a way to draw or style a piece of the content.                                                                                                                                                                                                    | `Decorators`                              | `undefined` |
+| `code`            |                                                                                                                                                                                                                                                            | `string`                                  | `undefined` |
+| `wrapContent`     |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| `initMode`        | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"`    |
 
 </details>
 
@@ -668,7 +655,6 @@ export default () => (
 `}
 </CodeBlock>
 
-
 The `UnstyledOpenInCodeSandboxButton` is a basic component that does not carry any styles. If you want a ready-to-use component, use the `OpenInCodeSandboxButton` instead, which has the same functionality but includes the CodeSandbox logo.
 
 ## Other components
@@ -704,6 +690,9 @@ Some of the components have configuration props that toggle subparts on/off or t
 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.
+  **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>

From 7ea90233ceccba3aece8ca2b66c4bc0efc3ec618 Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 19:11:04 +0700
Subject: [PATCH 4/8] fixing markdown table syntax

---
 .../docs/src/pages/advanced-usage/components.mdx   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/website/docs/src/pages/advanced-usage/components.mdx b/website/docs/src/pages/advanced-usage/components.mdx
index 2e061aec0..ba9247eae 100644
--- a/website/docs/src/pages/advanced-usage/components.mdx
+++ b/website/docs/src/pages/advanced-usage/components.mdx
@@ -101,11 +101,15 @@ export default () => (
 </CodeBlock>
 
 <details>
-  <summary>Options</summary>| Prop | Type | Default | | :- | :- | :- | |
-  `showNavigator` | `boolean` | `false`| | `showOpenInCodeSandbox`| `boolean` |
-  `true` | | `showRefreshButton`| `boolean` | `true` | |
-  `showSandpackErrorOverlay`| `boolean` | `true` | | `showOpenNewtab` |
-  `boolean` | `true` | | `actionsChildren` | JSX.Element | `null` |
+  <summary>Options</summary>
+  |Prop | Type | Default | 
+  |:- | :- | :- | 
+  |`showNavigator` | `boolean` | `false`| 
+  |`showOpenInCodeSandbox`| `boolean` |`true`| 
+  |`showRefreshButton`| `boolean` | `true`|
+  |`showSandpackErrorOverlay`| `boolean` | `true`|
+  |`showOpenNewtab` |`boolean` | `true` |
+  |`actionsChildren` | JSX.Element | `null`|
 </details>
 
 ### Additional buttons

From 9285793ac3c9bb7807f299ef668e4c41e65cd522 Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 19:13:38 +0700
Subject: [PATCH 5/8] using exam same table format

---
 .../src/pages/advanced-usage/components.mdx   | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/website/docs/src/pages/advanced-usage/components.mdx b/website/docs/src/pages/advanced-usage/components.mdx
index ba9247eae..b606bae33 100644
--- a/website/docs/src/pages/advanced-usage/components.mdx
+++ b/website/docs/src/pages/advanced-usage/components.mdx
@@ -101,15 +101,18 @@ export default () => (
 </CodeBlock>
 
 <details>
+
   <summary>Options</summary>
-  |Prop | Type | Default | 
-  |:- | :- | :- | 
-  |`showNavigator` | `boolean` | `false`| 
-  |`showOpenInCodeSandbox`| `boolean` |`true`| 
-  |`showRefreshButton`| `boolean` | `true`|
-  |`showSandpackErrorOverlay`| `boolean` | `true`|
-  |`showOpenNewtab` |`boolean` | `true` |
-  |`actionsChildren` | JSX.Element | `null`|
+
+| Prop | Type | Default |
+| :- | :- | :- |
+| `showNavigator` | `boolean` | `false`|
+| `showOpenInCodeSandbox`| `boolean` | `true` |
+| `showRefreshButton`| `boolean` | `true` |
+| `showSandpackErrorOverlay`| `boolean` | `true` |
+| `showOpenNewtab` | `boolean` | `true` |
+| `actionsChildren` | JSX.Element | `null` | 
+
 </details>
 
 ### Additional buttons

From a48a7b550ab875d1082fcea01b6f2d1f317b96b4 Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 19:19:16 +0700
Subject: [PATCH 6/8] revert back to original docs and re-add hiding-tests

---
 .../src/pages/advanced-usage/components.mdx   | 96 +++++++++----------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/website/docs/src/pages/advanced-usage/components.mdx b/website/docs/src/pages/advanced-usage/components.mdx
index b606bae33..03f4df9c4 100644
--- a/website/docs/src/pages/advanced-usage/components.mdx
+++ b/website/docs/src/pages/advanced-usage/components.mdx
@@ -1,7 +1,6 @@
 import { Callout } from "nextra-theme-docs";
 
 import { CodeBlock } from "../../components/CodeBlock";
-
 import SandpackDecorators from "../../components/Decorators";
 
 # Components
@@ -101,9 +100,9 @@ export default () => (
 </CodeBlock>
 
 <details>
-
+  
   <summary>Options</summary>
-
+  
 | Prop | Type | Default |
 | :- | :- | :- |
 | `showNavigator` | `boolean` | `false`|
@@ -112,7 +111,7 @@ export default () => (
 | `showSandpackErrorOverlay`| `boolean` | `true` |
 | `showOpenNewtab` | `boolean` | `true` |
 | `actionsChildren` | JSX.Element | `null` | 
-
+  
 </details>
 
 ### Additional buttons
@@ -218,21 +217,21 @@ export default () => (
 <details>
   <summary>Options</summary>
 
-| Prop                  | Description                                                                                                                                                                                                                                                | Type                                      | Default     |
-| :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
-| `showTabs`            |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `showLineNumbers`     |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `showInlineErrors`    |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `showRunButton`       |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `wrapContent`         |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `closableTabs`        |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
+| Prop | Description      | Type  | Default     |
+| :- | :- | :- | :- |
+| `showTabs`            | | `boolean` | `false` |
+| `showLineNumbers`     | | `boolean` | `false` |
+| `showInlineErrors`    | | `boolean` | `false` |
+| `showRunButton`       | | `boolean` | `false` |
+| `wrapContent`         | | `boolean` | `false` |
+| `closableTabs`        | | `boolean` | `false` |
 | `initMode`            | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"`    |
-| `extensions`          | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component.                                                                                                                                  | `Extension[]`                             | `undefined` |
-| `extensionsKeymap`    | Property to register CodeMirror extension keymap.                                                                                                                                                                                                          | `KeyBinding[]`                            | `undefined  |
-| `id`                  | By default, Sandpack generates a random value to use as an id. Use this to override this value if you need predictable values.                                                                                                                             | `string`                                  | `undefined` |
-| `readOnly`            | This disables editing of the editor content by the user.                                                                                                                                                                                                   | `boolean`                                 | `false`     |
-| `showReadOnly`        | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true`                                                                                                                                                              | `boolean`                                 | `true`      |
-| `additionalLanguages` | Provides a way to add custom language modes by supplying a language type, applicable file extensions, and a LanguageSupport instance for that syntax mode                                                                                                  | `CustomLanguage[]`                        | `undefined` |
+| `extensions`          | CodeMirror extensions for the editor state, which can provide extra features and functionalities to the editor component.    | `Extension[]`           | `undefined` |
+| `extensionsKeymap`    | Property to register CodeMirror extension keymap.    | `KeyBinding[]`          | `undefined  |
+| `id`| By default, Sandpack generates a random value to use as an id. Use this to override this value if you need predictable values.                 | `string`                | `undefined` |
+| `readOnly`            | This disables editing of the editor content by the user.               | `boolean`               | `false`     |
+| `showReadOnly`        | Controls the visibility of Read-only label, which will only appears when `readOnly` is `true`              | `boolean`               | `true`      |
+| `additionalLanguages` | Provides a way to add custom language modes by supplying a language type, applicable file extensions, and a LanguageSupport instance for that syntax mode        | `CustomLanguage[]`      | `undefined` |
 
 </details>
 
@@ -369,7 +368,7 @@ This is especially useful to get the cursor's current position, add custom decor
 
 ## File Explorer
 
-The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders, and open new files.
+The `SandpackFileExplorer` provides a minimal but very powerful experience to navigate through files. You can open and close folders,  and open new files.
 
 <CodeBlock stack>
 {`import { 
@@ -390,6 +389,7 @@ export default () => (
 `}
 </CodeBlock>
 
+
 <details>
   <summary>Options</summary>
   
@@ -452,8 +452,8 @@ export default () => (
 <details>
   <summary>Options</summary>
 
-| Prop | Description | Type | Default |
-| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`|
+| Prop | Description      | Type  | Default     |
+| `verbose` | Display individual test results with the test suite hierarchy. | `boolean` | `false`| 
 | `watchMode` | Watch files for changes and rerun all tests. Note if changing a test file then the current file will run on it's own | `boolean` | `true` |
 | `onComplete` | A callback that is invoked with the completed specs. | Function | `undefined` |
 
@@ -477,15 +477,15 @@ Add the matchers either as a dependency or as a file and then import the matcher
   SandpackTests 
 } from "@codesandbox/sandpack-react";
 
-const extendedTest = \`import \* as matchers from 'jest-extended';
+const extendedTest = \`import * as matchers from 'jest-extended';
 import { add } from './add';
 
 expect.extend(matchers);
 
 describe('jest-extended matchers are supported', () => {
-test('adding two positive integers yields a positive integer', () => {
-expect(add(1, 2)).toBePositive();
-});
+  test('adding two positive integers yields a positive integer', () => {
+    expect(add(1, 2)).toBePositive();
+  });
 });
 \`;
 
@@ -548,6 +548,8 @@ There are three ways to print the logs:
 - `<SandpackConsole />`: standalone component to render the logs;
 - `useSandpackConsole`: React hook to consume the console logs from a Sandpack client;
 
+
+
 <CodeBlock stack>
 {`import { Sandpack } from "@codesandbox/sandpack-react";
 
@@ -565,15 +567,15 @@ export default () => (
 <details>
   <summary>`SandpackConsole` Options</summary>
 
-| Prop                    | Type                                  | Default              | Description                                                       |
-| :---------------------- | :------------------------------------ | :------------------- | :---------------------------------------------------------------- |
-| `clientId`              | `string`                              | `undefined`          |                                                                   |
-| `showHeader`            | `boolean`                             | `true`               |                                                                   |
-| `showSyntaxError`       | `boolean`                             | `false`              |                                                                   |
-| `maxMessageCount`       | `number`                              | `800`                |                                                                   |
-| `onLogsChange`          | `(logs: SandpackConsoleData) => void` |                      |                                                                   |
-| `resetOnPreviewRestart` | `boolean`                             | `false`              | Reset the console list on every preview restart                   |
-| `ref`                   | `SandpackConsoleRef`                  | `SandpackConsoleRef` | Make possible to imperatively interact with the console component |
+| Prop | Type  | Default | Description | 
+| :- | :- | :- | :- |
+| `clientId` | `string` | `undefined` | |
+| `showHeader` | `boolean` | `true` | |
+| `showSyntaxError` | `boolean` | `false` | |
+| `maxMessageCount` | `number` | `800` | |
+| `onLogsChange` | `(logs: SandpackConsoleData) => void` | | |
+| `resetOnPreviewRestart` | `boolean` | `false` | Reset the console list on every preview restart |
+| `ref` | `SandpackConsoleRef` | `SandpackConsoleRef` | Make possible to imperatively interact with the console component |
 
 </details>
 
@@ -614,14 +616,14 @@ export default () => (
 <details>
   <summary>Options</summary>
 
-| Prop              | Description                                                                                                                                                                                                                                                | Type                                      | Default     |
-| :---------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :---------- |
-| `showTabs`        |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `showLineNumbers` |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `decorators`      | Provides a way to draw or style a piece of the content.                                                                                                                                                                                                    | `Decorators`                              | `undefined` |
-| `code`            |                                                                                                                                                                                                                                                            | `string`                                  | `undefined` |
-| `wrapContent`     |                                                                                                                                                                                                                                                            | `boolean`                                 | `false`     |
-| `initMode`        | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"`    |
+| Prop | Description | Type  | Default |
+| :- | :- | :- | :- |
+| `showTabs`            | | `boolean` | `false` |
+| `showLineNumbers`     | | `boolean` | `false` |
+| `decorators` | Provides a way to draw or style a piece of the content. | `Decorators` | `undefined` |
+| `code` | | `string` | `undefined` |
+| `wrapContent`         | | `boolean` | `false` |
+| `initMode`            | This provides a way to control how some components are going to be initialized on the page. The CodeEditor and the Preview components are quite expensive and might overload the memory usage, so this gives a certain control of when to initialize them. | `"immediate" \| "lazy" \| "user-visible"` | `"lazy"`    |
 
 </details>
 
@@ -662,6 +664,7 @@ export default () => (
 `}
 </CodeBlock>
 
+
 The `UnstyledOpenInCodeSandboxButton` is a basic component that does not carry any styles. If you want a ready-to-use component, use the `OpenInCodeSandboxButton` instead, which has the same functionality but includes the CodeSandbox logo.
 
 ## Other components
@@ -697,9 +700,6 @@ Some of the components have configuration props that toggle subparts on/off or t
 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>
+**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>
\ No newline at end of file

From eb93150d57a41dd314058c170e2cdee803d96d93 Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 20:54:16 +0700
Subject: [PATCH 7/8] sets test button hiding props to default true and supress
 logs to default false

---
 sandpack-react/src/components/Tests/Header.tsx        | 6 +++---
 sandpack-react/src/components/Tests/SandpackTests.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/sandpack-react/src/components/Tests/Header.tsx b/sandpack-react/src/components/Tests/Header.tsx
index 80f5f53a8..33d41c523 100644
--- a/sandpack-react/src/components/Tests/Header.tsx
+++ b/sandpack-react/src/components/Tests/Header.tsx
@@ -34,9 +34,9 @@ interface Props {
   watchMode: boolean;
   setWatchMode: () => void;
   showSuitesOnly: boolean;
-  showVerboseButton?: boolean;
-  showWatchButton?: boolean;
-  hideTestsAndSupressLogs?: boolean;
+  showVerboseButton: boolean;
+  showWatchButton: boolean;
+  hideTestsAndSupressLogs: boolean;
 }
 
 const buttonsClassName = classNames(
diff --git a/sandpack-react/src/components/Tests/SandpackTests.tsx b/sandpack-react/src/components/Tests/SandpackTests.tsx
index 374783ddb..336c82e25 100644
--- a/sandpack-react/src/components/Tests/SandpackTests.tsx
+++ b/sandpack-react/src/components/Tests/SandpackTests.tsx
@@ -74,9 +74,9 @@ export const SandpackTests: React.FC<
   className,
   onComplete,
   actionsChildren,
-  showVerboseButton,
-  showWatchButton,
-  hideTestsAndSupressLogs,
+  showVerboseButton=true,
+  showWatchButton = true,
+  hideTestsAndSupressLogs=false,
   ...props
 }) => {
   const theme = useSandpackTheme();

From 250f798e72e249e94a7398e03d70a6ee530297ea Mon Sep 17 00:00:00 2001
From: Ubeyt Demir <190541075@firat.edu.tr>
Date: Tue, 28 Feb 2023 21:09:33 +0700
Subject: [PATCH 8/8] =?UTF-8?q?prettified=20=F0=9F=92=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sandpack-react/src/components/Tests/SandpackTests.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sandpack-react/src/components/Tests/SandpackTests.tsx b/sandpack-react/src/components/Tests/SandpackTests.tsx
index 336c82e25..3812847d4 100644
--- a/sandpack-react/src/components/Tests/SandpackTests.tsx
+++ b/sandpack-react/src/components/Tests/SandpackTests.tsx
@@ -74,9 +74,9 @@ export const SandpackTests: React.FC<
   className,
   onComplete,
   actionsChildren,
-  showVerboseButton=true,
+  showVerboseButton = true,
   showWatchButton = true,
-  hideTestsAndSupressLogs=false,
+  hideTestsAndSupressLogs = false,
   ...props
 }) => {
   const theme = useSandpackTheme();