Use jsdom instead of window in jest test (#1812)

* Hacky implementation of jsdom inside jest tests

* Update path to jsdom

* Properly set globals according to jest defaults

* Properly set global to jsdom window

* Make globals dynamic

* Improve scrolling of tests view

* Proper fix for the styling of tests

* Convert jest-lite to typescript

* Fix scrolling for the full test details

* Deduplicate Tests container

* Properly mark errors as jest errors, clear them on new start

* Move clear error to less spammy place

* Fix error loading later on in the editor

Author: CompuIves

packages/app/src/app/components/CodeEditor/VSCode/index.tsx

@@ -504,13 +504,15 @@ class MonacoEditor extends React.Component<Props> implements Editor {
     this.currentTitle = newModule.title;
     this.currentDirectoryShortid = newModule.directoryShortid;
 
-    if (errors) {
-      this.setErrors(errors);
-    }
-
-    if (corrections) {
-      this.setCorrections(corrections);
-    }
+    // Let the model load first
+    setTimeout(() => {
+      if (errors) {
+        this.setErrors(errors);
+      }
+      if (corrections) {
+        this.setCorrections(corrections);
+      }
+    }, 100);
 
     if (this.props.onCodeReceived) {
       // Whenever the user changes a module we set up a state that defines

packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/elements.ts

@@ -46,10 +46,3 @@ export const Blocks = styled.span`
   font-weight: 300;
   color: rgba(255, 255, 255, 0.7);
 `;
-
-export const Tests = styled.div`
-  padding: 1rem;
-  box-sizing: border-box;
-  overflow-y: overlay;
-  height: calc(100% - 4rem);
-`;

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

@@ -6,15 +6,8 @@ import PlayIcon from 'react-icons/lib/go/playback-play';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { File, Status } from '../';
 
-import {
-  Action,
-  TestName,
-  TestTitle,
-  Blocks,
-  Tests,
-  ErrorNotice,
-} from './elements';
-import { StatusElements } from '../elements';
+import { Action, TestName, TestTitle, Blocks, ErrorNotice } from './elements';
+import { StatusElements, Tests } from '../elements';
 
 import TestBlock from './TestBlock';
 import ErrorDetails from './ErrorDetails';

packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/elements.ts

@@ -1,7 +1,7 @@
-
 import styled from 'styled-components';
 
 export const Container = styled.div`
+  position: relative;
   height: 100%;
 `;
 
@@ -32,13 +32,6 @@ export const TestStatuses = styled.div`
   font-size: 0.875rem;
 `;
 
-export const Tests = styled.div`
-  padding: 1rem;
-  box-sizing: border-box;
-  overflow-y: overlay;
-  height: calc(100% - 4rem);
-`;
-
 export const HappyMessage = styled.div`
   color: ${props => props.theme.green};
   font-weight: 500;

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

@@ -3,8 +3,9 @@
 import * as React from 'react';
 
 import { Test } from '../';
+import { Tests } from '../elements';
 
-import { Container, HappyMessage, Item, Tests, ItemTitle } from './elements';
+import { Container, HappyMessage, Item, ItemTitle } from './elements';
 
 import TestSummaryText from '../TestSummaryText';
 import TestProgressBar from '../TestProgressBar';

packages/app/src/app/components/Preview/DevTools/Tests/elements.ts

@@ -1,4 +1,3 @@
-
 import styled, { css } from 'styled-components';
 
 import Check from 'react-icons/lib/go/check';
@@ -66,3 +65,17 @@ export const StatusElements = {
   running: Loading,
   idle: Dot,
 };
+
+export const Tests = styled.div`
+  padding: 1rem;
+  box-sizing: border-box;
+  overflow-y: auto;
+
+  /* Using absolute for correct scrolling, browsers have trouble handling
+   * an inner scroll inside a container unless the child is absolute */
+  position: absolute;
+  top: 3.5rem;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`;

packages/app/src/app/store/modules/editor/actions.js

@@ -276,6 +276,16 @@ export function addCorrectionFromPreview({ state, props }) {
   state.push('editor.corrections', correction);
 }
 
+export function clearErrors({ state, props }) {
+  const currentErrors = state.get('editor.errors');
+
+  const newErrors = clearCorrectionsFromAction(currentErrors, props.action);
+
+  if (newErrors.length !== currentErrors.length) {
+    state.set('editor.errors', newErrors);
+  }
+}
+
 export function clearCorrections({ state, props }) {
   const currentCorrections = state.get('editor.corrections');
 

packages/app/src/app/store/modules/editor/sequences.js

@@ -297,6 +297,7 @@ export const handlePreviewAction = [
     ),
     'show-error': actions.addErrorFromPreview,
     'show-correction': actions.addCorrectionFromPreview,
+    'clear-errors': actions.clearErrors,
     'clear-corrections': actions.clearCorrections,
     'source.module.rename': [
       actions.consumeRenameModuleFromPreview,

packages/app/src/app/utils/corrections.ts

@@ -1,10 +1,13 @@
-import { ModuleCorrection } from '@codesandbox/common/lib/types';
+import { ModuleCorrection, ModuleError } from '@codesandbox/common/lib/types';
 import { CorrectionClearAction } from 'codesandbox-api/dist/types/actions/correction';
+import { ErrorClearAction } from 'codesandbox-api/dist/types/actions/error';
 
-export function clearCorrectionsFromAction(
-  currentCorrections: ModuleCorrection[],
-  action: CorrectionClearAction
-) {
+export function clearCorrectionsFromAction<
+  T extends ModuleCorrection | ModuleError
+>(
+  currentCorrections: T[],
+  action: CorrectionClearAction | ErrorClearAction
+): T[] {
   if (action.path === '*') {
     return currentCorrections.filter(cor => cor.source !== action.source);
   }

packages/app/src/sandbox/compile.ts

@@ -63,7 +63,7 @@ export function getHTMLParts(html: string) {
   return { head: '', body: html };
 }
 
-function sendTestCount(manager: Manager, modules: Array<Module>) {
+function sendTestCount(manager: Manager, modules: { [path: string]: Module }) {
   const testRunner = manager.testRunner;
   const tests = testRunner.findTests(modules);
 
@@ -395,6 +395,20 @@ overrideDocumentClose();
 
 inject();
 
+interface CompileOptions {
+  sandboxId: string;
+  modules: { [path: string]: Module };
+  externalResources: string[];
+  hasActions?: boolean;
+  isModuleView?: boolean;
+  template: TemplateType;
+  entry: string;
+  showOpenInCodeSandbox?: boolean;
+  skipEval?: boolean;
+  hasFileResolver?: boolean;
+  disableDependencyPreprocessing?: boolean;
+}
+
 async function compile({
   sandboxId,
   modules,
@@ -407,7 +421,7 @@ async function compile({
   skipEval = false,
   hasFileResolver = false,
   disableDependencyPreprocessing = false,
-}) {
+}: CompileOptions) {
   dispatch({
     type: 'start',
   });
@@ -496,7 +510,7 @@ async function compile({
 
     const foundMain = isModuleView
       ? entry
-      : possibleEntries.find(p => modules[p]);
+      : possibleEntries.find(p => !!modules[p]);
 
     if (!foundMain) {
       throw new Error(
@@ -550,7 +564,7 @@ async function compile({
       if (!manager.webpackHMR) {
         const htmlModulePath = templateDefinition
           .getHTMLEntries(configurations)
-          .find(p => modules[p]);
+          .find(p => !!modules[p]);
         const htmlModule = modules[htmlModulePath];
 
         const { head, body } = getHTMLParts(
@@ -717,21 +731,7 @@ async function compile({
   }
 }
 
-type Arguments = {
-  sandboxId: string;
-  modules: Array<{
-    code: string;
-    path: string;
-  }>;
-  entry: string | undefined;
-  externalResources: Array<string>;
-  hasActions: boolean;
-  template: string;
-  showOpenInCodeSandbox?: boolean;
-  skipEval?: boolean;
-};
-
-const tasks: Array<Arguments> = [];
+const tasks: CompileOptions[] = [];
 let runningTask = false;
 
 async function executeTaskIfAvailable() {
@@ -752,7 +752,7 @@ async function executeTaskIfAvailable() {
  * and if there are 3 tasks we will remove the second task, this one is unnecessary as it is not the
  * latest version.
  */
-export default function queueTask(data: Arguments) {
+export default function queueTask(data: CompileOptions) {
   tasks[0] = data;
 
   if (!runningTask) {