testeranto 0.177.0 → 0.197.0

package/src/components/stateful/TestPage.tsx

@@ -1,8 +1,11 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { DesignEditor } from '../../../design-editor/DesignEditor';
+import { fetchTestData } from '../../utils/api';
 
 import { TestPageView } from '../pure/TestPageView';
-import { fetchTestData } from '../../utils/api';
+
 
 export const TestPage = () => {
   const navigate = useNavigate();
@@ -20,10 +23,10 @@ export const TestPage = () => {
   }, [location.hash]);
 
   const [testName, setTestName] = useState('');
-  const [testData, setTestData] = useState(null);
-  const [logs, setLogs] = useState('');
-  const [typeErrors, setTypeErrors] = useState('');
-  const [lintErrors, setLintErrors] = useState('');
+  // const [testData, setTestData] = useState(null);
+  const [logs, setLogs] = useState<Record<string, string>>({});
+  // const [typeErrors, setTypeErrors] = useState('');
+  // const [lintErrors, setLintErrors] = useState('');
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [testsExist, setTestsExist] = useState(true);
@@ -46,15 +49,130 @@ export const TestPage = () => {
 
     const fetchData = async () => {
       try {
-        const testResponse = await fetchTestData(projectName, testPath, runtime);
-        setTestData(testResponse.testData);
-        setTestsExist(!!testResponse.testData);
-        setLogs(testResponse.logs === null ? undefined : testResponse.logs);
-        setTypeErrors(testResponse.typeErrors);
-        setLintErrors(testResponse.lintErrors);
+        const [testResponse, metafileRes] = await Promise.all([
+          fetchTestData(projectName, testPath, runtime),
+          fetch(`/metafiles/${runtime}/${projectName}.json`)
+        ]);
+        
+        console.log('Fetching test data for:', { projectName, testPath, runtime });
+        const receivedLogs = await testResponse.logs;
+        console.log('Received logs:', Object.keys(receivedLogs));
+        let sourceFiles = {};
+        
+        if (metafileRes.ok) {
+          const metafile = await metafileRes.json();
+          if (metafile?.metafile?.outputs) {
+            // Find input files only for this test's entry point
+            const tsSources = new Set<string>();
+            const testEntryPoint = `src/${testPath}`;
+            
+            // First find all outputs that match this test
+            const matchingOutputs = Object.entries(metafile.metafile.outputs)
+              .filter(([outputPath, output]) => {
+                const normalizedTestPath = testPath.replace(/\./g, '_');
+                const testFileName = testPath.split('/').pop();
+                const testBaseName = testFileName?.split('.').slice(0, -1).join('.');
+                
+                return output.entryPoint === testEntryPoint || 
+                  outputPath.includes(normalizedTestPath) ||
+                  (testBaseName && outputPath.includes(testBaseName));
+              });
+
+            // Then collect all inputs from matching outputs
+            matchingOutputs.forEach(([_, output]) => {
+              Object.keys(output.inputs).forEach(inputPath => {
+                // Check if this input is a TypeScript file and not in node_modules
+                if ((inputPath.endsWith('.ts') || inputPath.endsWith('.tsx')) &&
+                    !inputPath.includes('node_modules')) {
+                  // Get the full input details from metafile.inputs
+                  const inputDetails = metafile.metafile.inputs[inputPath];
+                  if (inputDetails) {
+                    tsSources.add(inputPath);
+                    // Also include any imported TypeScript files
+                    inputDetails.imports.forEach(imp => {
+                      if ((imp.path.endsWith('.ts') || imp.path.endsWith('.tsx')) &&
+                          !imp.path.includes('node_modules') &&
+                          !imp.external) {
+                        tsSources.add(imp.path);
+                      }
+                    });
+                  }
+                }
+              });
+            });
+            
+            // Organize source files into directory tree structure
+            const fileTree = {};
+            const filesList = await Promise.all(
+              Array.from(tsSources).map(async (filePath) => {
+                try {
+                  const fetchPath = filePath.startsWith('/') 
+                    ? filePath 
+                    : `/${filePath.replace(/^\.\//, '')}`;
+                  const res = await fetch(fetchPath);
+                  if (res.ok) {
+                    return {
+                      path: filePath,
+                      content: await res.text()
+                    };
+                  }
+                  return null;
+                } catch (err) {
+                  console.warn(`Failed to fetch source file ${filePath}:`, err);
+                  return null;
+                }
+              })
+            );
+
+            filesList.forEach(file => {
+              if (!file) return;
+              
+              const parts = file.path.split('/');
+              let currentLevel = fileTree;
+              
+              parts.forEach((part, index) => {
+                if (!currentLevel[part]) {
+                  if (index === parts.length - 1) {
+                    currentLevel[part] = {
+                      __isFile: true,
+                      content: file.content
+                    };
+                  } else {
+                    currentLevel[part] = {};
+                  }
+                }
+                currentLevel = currentLevel[part];
+              });
+            });
+
+            sourceFiles = fileTree;
+          }
+        }
+
+        // Add source files to logs
+        receivedLogs['source_files'] = sourceFiles;
+        console.log('Source files structure:', sourceFiles);
+        
+        // Ensure tests.json is properly formatted
+        if (receivedLogs['tests.json']) {
+          console.log('tests.json content type:', typeof receivedLogs['tests.json']);
+          try {
+            // Handle both string and already-parsed JSON
+            if (typeof receivedLogs['tests.json'] === 'string') {
+              receivedLogs['tests.json'] = JSON.parse(receivedLogs['tests.json']);
+            }
+            // If it's already an object, leave it as is
+          } catch (e) {
+            console.error('Failed to parse tests.json:', e);
+            // Keep the original content but don't replace it with an error object
+          }
+        }
+        setLogs(receivedLogs);
+        // setTypeErrors(testResponse.typeErrors);
+        // setLintErrors(testResponse.lintErrors);
 
         try {
-          const summaryResponse = await fetch(`reports/${projectName}/summary.json`);
+          const summaryResponse = await fetch(`/reports/${projectName}/summary.json`);
           if (!summaryResponse.ok) throw new Error('Failed to fetch summary');
           const allSummaries = await summaryResponse.json();
           const testSummary = allSummaries[testPath];
@@ -84,24 +202,23 @@ export const TestPage = () => {
     fetchData();
   }, []);
 
+  if (!logs) return <div>loading...</div>
+
   return (
-    <TestPageView
-      route={route}
-      setRoute={setRoute}
-      navigate={navigate}
-      projectName={projectName}
-      testName={testName}
-      decodedTestPath={decodedTestPath}
-      runtime={runtime}
-      testData={testData}
-      logs={logs}
-      typeErrors={typeErrors}
-      lintErrors={lintErrors}
-      loading={loading}
-      error={error}
-      testsExist={testsExist}
-      errorCounts={errorCounts}
-      summary={summary}
-    />
+    <>
+      {/* <DesignEditor projectId="demo-project" /> */}
+      <TestPageView
+        route={route as 'results' | 'logs' | 'types' | 'lint' | 'coverage'}
+        setRoute={setRoute}
+        navigate={navigate}
+        projectName={projectName as string}
+        testName={testName}
+        decodedTestPath={decodedTestPath}
+        runtime={runtime}
+        logs={logs}
+        testsExist={testsExist}
+        errorCounts={errorCounts}
+      />
+    </>
   );
 };

package/src/components/stateful/TextEditorPage.tsx

@@ -0,0 +1,170 @@
+import React, { useState, useEffect } from 'react';
+import { Editor } from '@monaco-editor/react';
+import { FileTree } from './FileTree';
+// import { FilePreview } from './FilePreview';
+// Removed external CSS import - styles are now inline
+
+type FileType = {
+  path: string;
+  content: string;
+  language: string;
+};
+
+export const TextEditorPage = () => {
+  const [files, setFiles] = useState<FileType[]>([]);
+  const [activeFile, setActiveFile] = useState<FileType | null>(null);
+  const [editorTheme, setEditorTheme] = useState<'light' | 'vs-dark'>('vs-dark');
+
+  // Initialize with sample files
+  useEffect(() => {
+    const sampleFiles: FileType[] = [
+      {
+        path: 'src/index.ts',
+        content: '// TypeScript code here\nconst message = "Hello World";\nconsole.log(message);',
+        language: 'typescript'
+      },
+      {
+        path: 'package.json',
+        content: '{\n  "name": "my-project",\n  "version": "1.0.0"\n}',
+        language: 'json'
+      }
+    ];
+    setFiles(sampleFiles);
+    setActiveFile(sampleFiles[0]);
+  }, []);
+
+  const handleFileSelect = (filePath: string) => {
+    const selectedFile = files.find(f => f.path === filePath);
+    if (selectedFile) {
+      setActiveFile(selectedFile);
+    }
+  };
+
+  const handleEditorChange = (value: string | undefined) => {
+    if (activeFile && value !== undefined) {
+      setFiles(files.map(f =>
+        f.path === activeFile.path ? { ...f, content: value } : f
+      ));
+    }
+  };
+
+  const [widths, setWidths] = useState({
+    fileTree: 250,
+    editor: window.innerWidth - 550, // Initial editor width (total width minus side panels)
+    preview: 300
+  });
+
+  const containerStyle = {
+    display: 'flex',
+    height: '100vh',
+    width: '100%'
+  };
+
+  const panelStyle = {
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative' as const
+  };
+
+  const [isResizing, setIsResizing] = useState(false);
+  const [startX, setStartX] = useState(0);
+  const [startWidth, setStartWidth] = useState(0);
+
+  const startResizing = (e: React.MouseEvent, panel: 'fileTree' | 'editor') => {
+    setIsResizing(true);
+    setStartX(e.clientX);
+    setStartWidth(widths[panel]);
+  };
+
+  const resize = (e: MouseEvent) => {
+    if (isResizing) {
+      const dx = e.clientX - startX;
+      const newFileTreeWidth = Math.max(200, Math.min(400, startWidth + dx));
+      setWidths({
+        fileTree: newFileTreeWidth,
+        editor: window.innerWidth - newFileTreeWidth - widths.preview,
+        preview: widths.preview
+      });
+    }
+  };
+
+  const stopResizing = () => {
+    setIsResizing(false);
+  };
+
+  useEffect(() => {
+    window.addEventListener('mousemove', resize);
+    window.addEventListener('mouseup', stopResizing);
+    return () => {
+      window.removeEventListener('mousemove', resize);
+      window.removeEventListener('mouseup', stopResizing);
+    };
+  }, [isResizing, startX, startWidth]);
+
+  return (
+    <div style={containerStyle}>
+      <div style={{ ...panelStyle, width: widths.fileTree }}>
+        <FileTree
+          files={files}
+          onSelect={handleFileSelect}
+          activeFile={activeFile?.path}
+        />
+        <div 
+          style={{
+            width: '4px',
+            height: '100%',
+            cursor: 'col-resize',
+            backgroundColor: isResizing ? '#aaa' : '#ddd',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            zIndex: 1
+          }}
+          onMouseDown={(e) => startResizing(e, 'fileTree')}
+        />
+      </div>
+
+      <div style={{ ...panelStyle, width: widths.editor }}>
+        {activeFile && (
+          <Editor
+            height="100%"
+            path={activeFile.path}
+            defaultLanguage={activeFile.language}
+            defaultValue={activeFile.content}
+            onChange={handleEditorChange}
+            theme={editorTheme}
+            options={{
+              minimap: { enabled: false },
+              fontSize: 14,
+              wordWrap: 'on',
+              automaticLayout: true
+            }}
+          />
+        )}
+      </div>
+
+      <div style={{ ...panelStyle, width: widths.preview }}>
+        <div 
+          style={{
+            width: '4px',
+            height: '100%',
+            cursor: 'col-resize',
+            backgroundColor: isResizing ? '#aaa' : '#ddd',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            zIndex: 1
+          }}
+          onMouseDown={(e) => startResizing(e, 'editor')}
+        />
+        {activeFile && (
+          <div></div>
+          // <FilePreview 
+          //   content={activeFile.content}
+          //   language={activeFile.language}
+          // />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/defaultConfig.ts

@@ -12,6 +12,7 @@ const config: ITestconfig = {
   nodePlugins: [],
   webPlugins: [],
   importPlugins: [],
+  webLoaders: {},
 
   featureIngestor: function (s: string): Promise<string> {
     throw new Error("Function not implemented.");

package/src/esbuildConfigs/inputFilesPlugin.ts

@@ -18,10 +18,9 @@ export default (
   register: (entrypoint: string, sources: string[]) => void;
   inputFilesPluginFactory: Plugin;
 } => {
-  const d = `testeranto/bundles/${platform}/${testName}/`;
-  const f = `testeranto/bundles/${platform}/${testName}/metafile.json`;
-  if (!fs.existsSync(d)) {
-    fs.mkdirSync(d);
+  const f = `testeranto/metafiles/${platform}/${testName}.json`;
+  if (!fs.existsSync(`testeranto/metafiles/${platform}`)) {
+    fs.mkdirSync(`testeranto/metafiles/${platform}`, { recursive: true });
   }
   return {
     register,

package/src/esbuildConfigs/web.ts

@@ -9,7 +9,6 @@ import baseEsBuildConfig from "./index.js";
 import inputFilesPlugin from "./inputFilesPlugin.js";
 import featuresPlugin from "./featuresPlugin.js";
 import rebuildPlugin from "./rebuildPlugin.js";
-
 export default (
   config: ITestconfig,
   entryPoints: string[],
@@ -56,6 +55,8 @@ export default (
 
     entryPoints: [...entryPoints],
 
+    loader: config.webLoaders as any,
+
     plugins: [
       featuresPlugin,
       inputFilesPluginFactory,

package/src/lib/BaseSuite.test/mock.ts

@@ -18,13 +18,13 @@ export class MockGiven extends BaseGiven<I> {
       features,
       whens,
       thens,
-      async () => ({ testStore: true, testSelection: false }), // givenCB
+      async () => ({ testStore: true }), // givenCB
       {} // initialValues
     );
   }
 
   async givenThat(): Promise<TestStore> {
-    return { testStore: true, testSelection: false };
+    return { testStore: true };
   }
 
   uberCatcher(e: Error): void {
@@ -35,80 +35,34 @@ export class MockGiven extends BaseGiven<I> {
 export class MockWhen extends BaseWhen<I> {
   async andWhen(
     store: TestStore,
-    whenCB: (store: TestStore) => Promise<TestStore>,
+    whenCB: (x: TestSelection) => (store: TestStore) => Promise<TestSelection>,
     testResource: any,
     pm: IPM
   ): Promise<TestStore> {
-    console.log(
-      "[DEBUG] MockWhen - andWhen - input store:",
-      JSON.stringify(store)
-    );
-
-    const newStore = {
-      ...store,
-      testSelection: true, // Ensure testSelection is set for assertions
-    };
-
-    console.log("[DEBUG] MockWhen - andWhen - calling whenCB");
-    const result = await whenCB(newStore);
-    console.log("[DEBUG] MockWhen - andWhen - result:", JSON.stringify(result));
-
-    return result;
+    // Create a TestSelection from the store
+    const selection: TestSelection = { testSelection: true };
+    const result = await whenCB(selection)(store);
+    // Convert back to TestStore
+    return { ...store, ...result };
   }
 
-  addArtifact(name: string, content: string): this {
-    // Mock implementation that just returns this for chaining
-    return this;
+  addArtifact(path: string): void {
+    // Mock implementation
   }
 }
 
 export class MockThen extends BaseThen<I> {
   async butThen(
     store: TestStore,
-    thenCB: (selection: TestSelection) => Promise<TestSelection>,
+    thenCB: (s: TestSelection) => Promise<BaseSuite<any, any>>,
     testResourceConfiguration: any,
-    pm: any
+    pm: IPM,
+    ...args: any[]
   ): Promise<TestSelection> {
-    console.log(
-      "[DEBUG] MockThen - butThen - input store:",
-      JSON.stringify(store)
-    );
-
-    if (!store) {
-      throw new Error("Store is undefined in butThen");
-    }
-
-    // Create test selection with explicit type
-    const testSelection: TestSelection = {
-      name: store.name,
-      index: store.index,
-      testSelection: store.testSelection || false,
-      error: store.error ? true : undefined,
-    };
-
-    console.log(
-      "[DEBUG] MockThen - passing testSelection:",
-      JSON.stringify(testSelection)
-    );
-
-    try {
-      const result = await thenCB(testSelection);
-      console.log(
-        "[DEBUG] MockThen - received result:",
-        JSON.stringify(result)
-      );
-
-      if (!result || typeof result.testSelection === "undefined") {
-        throw new Error(
-          `Invalid test selection result: ${JSON.stringify(result)}`
-        );
-      }
-
-      return result;
-    } catch (e) {
-      console.error("[ERROR] MockThen - butThen failed:", e);
-      throw e;
-    }
+    // Create a TestSelection from the store
+    const selection: TestSelection = { testSelection: true };
+    await thenCB(selection);
+    return selection;
   }
 }
 
@@ -117,20 +71,19 @@ export class MockSuite extends BaseSuite<I, O> {
     if (!name) {
       throw new Error("MockSuite requires a non-empty name");
     }
-    console.log("[DEBUG] Creating MockSuite with name:", name, "index:", index);
-    const suiteName = name || "testSuite"; // Ensure name is never undefined
+
+    const suiteName = name || "testSuite";
     super(suiteName, index, {
       testGiven: new MockGiven(
         "testGiven",
         ["testFeature"],
-        [new MockWhen("testWhen", () => Promise.resolve({ testStore: true }))],
+        [new MockWhen("testWhen", async () => Promise.resolve({ testSelection: true }))],
         [
           new MockThen("testThen", async () =>
-            Promise.resolve({ testSelection: true })
+            Promise.resolve(new BaseSuite("temp", 0, {} as any))
           ),
         ]
       ),
     });
-    console.log("[DEBUG] MockSuite created:", this.name, this.index);
   }
 }