client test performance improvement, reduce screen freezing (codesandbox#2074)

* Add debounce for tests in watch mode

* add-comment

Author: batiskafff

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

@@ -4,6 +4,7 @@ import { actions, dispatch, listen } from 'codesandbox-api';
 import SplitPane from 'react-split-pane';
 
 import immer from 'immer';
+import { debounce } from 'lodash-es';
 
 import { Container, TestDetails, TestContainer } from './elements';
 
@@ -68,6 +69,7 @@ type State = {
 
 type SandboxMessage = { type: 'test' | 'done' } & (
   | InitializedTestsMessage
+  | CompilationDoneMessage
   | TestCountMessage
   | TotalTestStartMessage
   | TotalTestEndMessage
@@ -84,46 +86,50 @@ interface InitializedTestsMessage {
   event: messages.INITIALIZE;
 }
 
+interface CompilationDoneMessage {
+  compilatonError: boolean;
+}
+
 interface TestCountMessage {
   event: 'test_count';
   count: number;
 }
 
 interface TotalTestStartMessage {
-  event: 'total_test_start';
+  event: messages.TOTAL_TEST_START;
 }
 
 interface TotalTestEndMessage {
-  event: 'total_test_end';
+  event: messages.TOTAL_TEST_END;
 }
 
 interface AddFileMessage {
-  event: 'add_file';
+  event: messages.ADD_FILE;
   path: string;
 }
 
 interface RemoveFileMessage {
-  event: 'remove_file';
+  event: messages.REMOVE_FILE;
   path: string;
 }
 
 interface FileErrorMessage {
-  event: 'file_error';
+  event: messages.FILE_ERROR;
   path: string;
   error: TestError;
 }
 
 interface DescribeStartMessage {
-  event: 'describe_start';
+  event: messages.DESCRIBE_START;
   blockName: string;
 }
 
 interface DescribeEndMessage {
-  event: 'describe_end';
+  event: messages.DESCRIBE_END;
 }
 
 interface AddTestMessage {
-  event: 'add_test';
+  event: messages.ADD_TEST;
   testName: string;
   path: string;
 }
@@ -135,12 +141,12 @@ type TestMessage = Test & {
 };
 
 interface TestStartMessage {
-  event: 'test_start';
+  event: messages.TEST_START;
   test: TestMessage;
 }
 
 interface TestEndMessage {
-  event: 'test_end';
+  event: messages.TEST_END;
   test: TestMessage;
 }
 
@@ -201,7 +207,21 @@ class Tests extends React.Component<DevToolProps, State> {
 
   handleMessage = (data: SandboxMessage) => {
     if (data.type === 'done' && this.state.watching && !this.props.hidden) {
-      this.runAllTests();
+      let delay = 1000;
+
+      if (data.compilatonError) {
+        delay = 2 * delay;
+      }
+
+      // avoid to often test run in file watching mode,
+      // very frequent test runs cause screen freezing
+      debounce(
+        () => {
+          this.runAllTests();
+        },
+        delay,
+        { maxWait: 4 * delay }
+      )();
     } else if (data.type === 'test') {
       switch (data.event) {
         case messages.INITIALIZE: {
@@ -220,7 +240,7 @@ class Tests extends React.Component<DevToolProps, State> {
           }
           break;
         }
-        case 'total_test_start': {
+        case messages.TOTAL_TEST_START: {
           this.currentDescribeBlocks = [];
           if (this.props.updateStatus) {
             this.props.updateStatus('clear');
@@ -231,7 +251,7 @@ class Tests extends React.Component<DevToolProps, State> {
           });
           break;
         }
-        case 'total_test_end': {
+        case messages.TOTAL_TEST_END: {
           this.setState({
             ...this.state,
             running: false,
@@ -259,7 +279,7 @@ class Tests extends React.Component<DevToolProps, State> {
           break;
         }
 
-        case 'add_file': {
+        case messages.ADD_FILE: {
           this.setState(
             immer(this.state, state => {
               state.files[data.path] = {
@@ -272,7 +292,7 @@ class Tests extends React.Component<DevToolProps, State> {
           );
           break;
         }
-        case 'remove_file': {
+        case messages.REMOVE_FILE: {
           this.setState(
             immer(this.state, state => {
               if (state.files[data.path]) {
@@ -284,7 +304,7 @@ class Tests extends React.Component<DevToolProps, State> {
           );
           break;
         }
-        case 'file_error': {
+        case messages.FILE_ERROR: {
           this.setState(
             immer(this.state, state => {
               if (state.files[data.path]) {
@@ -294,15 +314,15 @@ class Tests extends React.Component<DevToolProps, State> {
           );
           break;
         }
-        case 'describe_start': {
+        case messages.DESCRIBE_START: {
           this.currentDescribeBlocks.push(data.blockName);
           break;
         }
-        case 'describe_end': {
+        case messages.DESCRIBE_END: {
           this.currentDescribeBlocks.pop();
           break;
         }
-        case 'add_test': {
+        case messages.ADD_TEST: {
           const testName = [...this.currentDescribeBlocks, data.testName];
 
           this.setState(
@@ -326,7 +346,7 @@ class Tests extends React.Component<DevToolProps, State> {
           );
           break;
         }
-        case 'test_start': {
+        case messages.TEST_START: {
           const test = data.test;
           const testName = [...test.blocks, test.name];
 
@@ -356,7 +376,7 @@ class Tests extends React.Component<DevToolProps, State> {
           );
           break;
         }
-        case 'test_end': {
+        case messages.TEST_END: {
           const test = data.test;
           const testName = [...test.blocks, test.name];
 

packages/app/src/sandbox/compile.ts

@@ -724,7 +724,7 @@ async function compile({
   firstLoad = false;
 
   dispatch({ type: 'status', status: 'idle' });
-  dispatch({ type: 'done' });
+  dispatch({ type: 'done', compilatonError: hadError });
 
   if (typeof (window as any).__puppeteer__ === 'function') {
     (window as any).__puppeteer__('done');

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

@@ -465,21 +465,24 @@ export default class TestRunner {
   };
 
   handleCodeSandboxMessage = (message: any) => {
-    if (message) {
-      if (message.type === 'set-test-watching') {
+    switch (message.type) {
+      case 'set-test-watching':
         this.watching = message.watching;
         if (message.watching === true) {
           this.ranTests.clear();
           this.runTests(true);
         }
-      } else if (message.type === 'run-all-tests') {
+        break;
+      case 'run-all-tests':
         this.ranTests.clear();
         this.runTests(true);
-      } else if (message.type === 'run-tests') {
+        break;
+      case 'run-tests': {
         const path = message.path;
 
         this.ranTests.delete(path);
         this.runTests();
+        break;
       }
     }
   };