Make running tests conditional (codesandbox#1080)

* Make running tests conditional

* Still show test count in Tests tab

* Remove redundant import

Author: CompuIves

packages/app/src/app/components/Preview/DevTools/Tests/index.js

@@ -107,6 +107,10 @@ class Tests extends React.Component<Props, State> {
         running: true,
       });
     }
+
+    if (this.props.hidden && !nextProps.hidden) {
+      this.runAllTests();
+    }
   }
 
   selectFile = (file: File) => {
@@ -117,7 +121,9 @@ class Tests extends React.Component<Props, State> {
   };
 
   handleMessage = (data: Object) => {
-    if (data.type === 'test') {
+    if (data.type === 'done' && (!this.props.hidden || this.props.standalone)) {
+      this.runAllTests();
+    } else if (data.type === 'test') {
       switch (data.event) {
         case 'initialize_tests': {
           this.currentDescribeBlocks = [];
@@ -127,6 +133,14 @@ class Tests extends React.Component<Props, State> {
           this.setState(INITIAL_STATE);
           break;
         }
+        case 'test_count': {
+          const { updateStatus } = this.props;
+          if (updateStatus) {
+            updateStatus('clear');
+            updateStatus('info', data.count);
+          }
+          break;
+        }
         case 'total_test_start': {
           this.currentDescribeBlocks = [];
           if (this.props.updateStatus) {

packages/app/src/sandbox/compile.js

@@ -57,6 +57,17 @@ export function getHTMLParts(html: string) {
   return { head: '', body: html };
 }
 
+function sendTestCount(manager: Manager, modules: Array<Module>) {
+  const testRunner = manager.testRunner;
+  const tests = testRunner.findTests(modules);
+
+  dispatch({
+    type: 'test',
+    event: 'test_count',
+    count: tests.length,
+  });
+}
+
 let firstLoad = true;
 let hadError = false;
 let lastHeadHTML = null;
@@ -554,23 +565,6 @@ async function compile({
       createCodeSandboxOverlay(modules);
     }
 
-    dispatch({ type: 'status', status: 'running-tests' });
-
-    try {
-      // Testing
-      const ttt = Date.now();
-      const testRunner = manager.testRunner;
-      testRunner.findTests(modules);
-      await testRunner.runTests();
-      debug(`Test Evaluation time: ${Date.now() - ttt}ms`);
-
-      // End - Testing
-    } catch (error) {
-      if (process.env.NODE_ENV === 'development') {
-        console.error(error);
-      }
-    }
-
     debug(`Total time: ${Date.now() - startTime}ms`);
 
     dispatch({
@@ -584,6 +578,16 @@ async function compile({
       changedModuleCount,
       firstLoad
     );
+
+    setTimeout(() => {
+      try {
+        sendTestCount(manager, modules);
+      } catch (e) {
+        if (process.env.NODE_ENV === 'development') {
+          console.error('Test error', e);
+        }
+      }
+    }, 600);
   } catch (e) {
     console.log('Error in sandbox:');
     console.error(e);

packages/app/src/sandbox/eval/tests/jest-lite.js

@@ -143,6 +143,8 @@ export default class TestRunner {
     this.tests = Object.keys(modules)
       .filter(TestRunner.isTest)
       .map(p => modules[p]);
+
+    return this.tests;
   }
 
   /* istanbul ignore next */