fix(logging): resolve redundant log entry for test cases (#59)

src/components/shared/LogView/LogView.tsx

@@ -83,6 +83,15 @@ const LogView: FC<Props> = ({ filter }) => {
   useEffectOnce(() => {
     let _terminal: TerminalType | null = null;
 
+    const onGenericLog = (data: LogEntry) => {
+      printLog(data);
+    };
+
+    const onTestCaseLog = (data: string) => {
+      if (!terminal.current) return;
+      terminal.current.write(data);
+    };
+
     const initTerminal = async () => {
       if (!logViewerRef.current) return;
       const appTerminal = document.getElementById('app-terminal');
@@ -127,9 +136,8 @@ const LogView: FC<Props> = ({ filter }) => {
         _terminal?.clear();
       });
 
-      EventEmitter.on('LOG', (data: LogEntry) => {
-        printLog(data);
-      });
+      EventEmitter.on('LOG', onGenericLog);
+      EventEmitter.on('TEST_CASE_LOG', onTestCaseLog);
     };
     if (typeof window === 'undefined') {
       return;
@@ -171,7 +179,8 @@ const LogView: FC<Props> = ({ filter }) => {
 
     return () => {
       isTerminalLoaded.current = false;
-      EventEmitter.off('LOG');
+      EventEmitter.off('LOG', onGenericLog);
+      EventEmitter.off('TEST_CASE_LOG', onTestCaseLog);
       EventEmitter.off('LOG_CLEAR');
       EventEmitter.off('ON_SPLIT_DRAG_END');
       terminal.current?.dispose();

src/components/workspace/TestCases/TestCases.tsx

@@ -3,6 +3,7 @@ import { useLogActivity } from '@/hooks/logActivity.hooks';
 import { useProjectActions } from '@/hooks/project.hooks';
 import { useWorkspaceActions } from '@/hooks/workspace.hooks';
 import { Analytics } from '@/utility/analytics';
+import EventEmitter from '@/utility/eventEmitter';
 import { getFileNameFromPath } from '@/utility/utils';
 import { FC } from 'react';
 import ExecuteFile from '../ExecuteFile';
@@ -124,20 +125,21 @@ const TestCases: FC<Props> = ({ projectId }) => {
     const _webcontainerInstance = window.webcontainerInstance;
     filePath = getFileNameFromPath(filePath).replace('.spec.ts', '.spec.js');
 
-    if (!_webcontainerInstance) {
+    if (!_webcontainerInstance?.path) {
       return;
     }
+    createLog('Running test cases...', 'info', true);
     await _webcontainerInstance.fs.writeFile(filePath, codeBase);
 
     const response = await _webcontainerInstance.spawn('npx', [
       'jest',
       filePath,
     ]);
-    response.output.pipeTo(
+
+    await response.output.pipeTo(
       new WritableStream({
         write(data) {
-          if (!data) return;
-          createLog(data, 'info', true, true);
+          EventEmitter.emit('TEST_CASE_LOG', data);
         },
       }),
     );

src/pages/_app.tsx

@@ -50,7 +50,7 @@ export default function App({
         const installProcess = await window.webcontainerInstance.spawn('npm', [
           'install',
         ]);
-        installProcess.output.pipeTo(
+        await installProcess.output.pipeTo(
           new WritableStream({
             write(data) {
               console.log('data', data);

src/utility/eventEmitter.ts

@@ -11,6 +11,7 @@ export interface EventEmitterPayloads {
   SAVE_FILE: undefined | { fileId: string; content: string };
   FORCE_UPDATE_FILE: string;
   FILE_SAVED: { fileId: string };
+  TEST_CASE_LOG: string;
 }
 
 const EventEmitter = {

types/global.d.ts

@@ -1,5 +1,6 @@
 import type { TonCore } from '@ton/core';
 import { Contract } from '@ton/core';
+import { WebContainer } from '@webcontainer/api';
 
 export {};
 
@@ -9,7 +10,7 @@ declare global {
     MonacoEnvironment: {
       getWorkerUrl: (moduleId: string, label: string) => string;
     };
-    webcontainerInstance: WebContainer;
+    webcontainerInstance: WebContainer | null | undefined;
     TonCore: TonCore;
   }
 }