moved testing related files into testing folder, eslint deleted unnecessary spacing, took out old comments, and added semi-colon for best syntax practice -- also tested testing and extension again before committing

ash-t-luu · ash-t-luu · commit 54d06adc2a61 · 2024-01-24T18:24:55.000-08:00
diff --git a/.vscode-test.js b/.vscode-test.js
diff --git a/jest.config.js b/jest.config.js
@@ -1,29 +1,16 @@
 const path = require('path');
 
-// module.exports = {
-//     preset: 'ts-jest',
-//     testEnvironment: './vscode-environment.js',
-//     modulePaths: ['<rootDir>'],
-//     // Add other Jest configurations as needed
-//     // testMatch: ['**/test/**/*.js', '**/?(*.)+(spec|test).js'], // Match JavaScript files
-//     moduleNameMapper: {
-//         // '^@/(.*)$': 'build/src/$1', // Adjust this based on your project structure
-//         vscode: path.join(__dirname, 'vscode.js')  // <----- most important line
-//     },
-// };
-
 module.exports = {
     preset: "ts-jest",
     testEnvironment: "node",
-    preset: "ts-jest/presets/default-esm", // or other ESM presets
+    preset: "ts-jest/presets/default-esm",
     globals: {
         "ts-jest": {
             useESM: true,
         },
     },
     moduleNameMapper: {
-        // '^@/(.*)$': 'build/src/$1',
-        vscode: path.join(__dirname, 'vscode.js')  // <----- most important line
+        vscode: path.join(__dirname, 'src', 'test', 'vscode.js')
     },
     testMatch: ['**/test/**/*.js', '**/?(*.)+(spec|test).js'],
     modulePathIgnorePatterns: ["node_modules"]
diff --git a/src/extension.ts b/src/extension.ts
@@ -6,7 +6,6 @@ import { Tree } from './types/tree';
 let tree: Parser | undefined = undefined;
 let panel: vscode.WebviewPanel | undefined = undefined
 
-
 // This method is called when your extension is activated
 // Your extension is activated the very first time the command is executed
 function activate(context: vscode.ExtensionContext) {
diff --git a/src/panel.ts b/src/panel.ts
@@ -10,7 +10,6 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
     panel = vscode.window.createWebviewPanel(
         'reactLabyrinth',
         'React Labyrinth',
-
         // create one new tab
         vscode.ViewColumn.One,
         {
@@ -19,23 +18,18 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
         }
     );
     
-
     // Set the icon logo of extension webview
     panel.iconPath = vscode.Uri.joinPath(context.extensionUri, 'media', 'favicon.ico');
     
-
     // Set URI to be the path to bundle
     const bundlePath: vscode.Uri = vscode.Uri.joinPath(context.extensionUri, 'build', 'bundle.js');
 
-
     // set webview URI to pass into html script
     const bundleURI: vscode.Uri = panel.webview.asWebviewUri(bundlePath);
 
-
     // render html of webview here
     panel.webview.html = createWebviewHTML(bundleURI, data);
 
-    
     // Sends data to Flow.tsx to be displayed after parsed data is received
     panel.webview.onDidReceiveMessage(
         async (msg: any) => {
@@ -51,7 +45,6 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
                             settings: vscode.workspace.getConfiguration('reactLabyrinth')
                         });
                     break;
-
             }
         },
         undefined,
@@ -61,12 +54,9 @@ export function createPanel(context: vscode.ExtensionContext, data: Tree, column
     return panel
 };
 
-
-
 // getNonce generates a new random string each time ext is used to prevent external injection of foreign code into the html 
 const nonce: string = getNonce();
 
-
 // function to create the HTML page for webview
 function createWebviewHTML(URI: vscode.Uri, initialData: Tree) : string {
     return (
diff --git a/src/test/suite/index.ts b/src/test/suite/index.ts
@@ -1,35 +1,5 @@
 import * as path from 'path';
 import { glob } from 'glob';
-
-// export async function run(): Promise<void> {
-// 	// Create the mocha test
-// 	const mocha = new Mocha.default({
-// 		ui: 'tdd',
-// 		color: true
-// 	});
-
-// 	const testsRoot = path.resolve(__dirname, '..');
-// 	const files = await glob('**/**.test.js', { cwd: testsRoot });
-
-// 	// Add files to the test suite
-// 	files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)));
-
-// 	try {
-// 		return new Promise((c, e) => {
-// 			// Run the mocha test
-// 			mocha.run(failures => {
-// 				if (failures > 0) {
-// 					e(new Error(`${failures} tests failed.`));
-// 				} else {
-// 					c();
-// 				}
-// 			});
-// 		});
-// 	} catch (err) {
-// 		console.error(err);
-// 	}
-// }
-
 import * as jest from 'jest';
 
 export async function run(): Promise<void> {
diff --git a/src/test/vscode-environment.js b/src/test/vscode-environment.js
@@ -11,10 +11,6 @@ class VsCodeEnvironment extends TestEnvironment {
         this.global.vscode = {};
         await super.teardown();
     }
-
-    // runScript(script) {
-    //     return super.runScript(script);
-    // }
 }
 
 module.exports = VsCodeEnvironment;
diff --git a/src/test/vscode.js b/src/test/vscode.js
diff --git a/src/types/builder.ts b/src/types/builder.ts
@@ -7,4 +7,4 @@ export type Builder = {
     viewData: any;
     edgeId: number;
     initialEdges: [];
-}
+};
diff --git a/src/types/connection.ts b/src/types/connection.ts
@@ -4,4 +4,4 @@ export enum ConnectionLineType {
     Step = 'step',
     SmoothStep = 'smoothstep',
     SimpleBezier = 'simplebezier',
-  }
+};
diff --git a/src/types/hierarchyData.ts b/src/types/hierarchyData.ts
@@ -1,6 +1,5 @@
 import { Tree } from "./tree"
 
-
 export interface hierarchyData {
     id: string,
     position: { x: number, y: number },
@@ -15,4 +14,4 @@ export interface hierarchyData {
       placeItems: string,
       backgroundColor: string,
     }
-  }
+};
diff --git a/src/types/tree.ts b/src/types/tree.ts
@@ -16,4 +16,4 @@ export type Tree = {
     props: { [key: string]: boolean; };
     error: string;
     isClientComponent: boolean;
-}
+};
diff --git a/src/webview/Flow.tsx b/src/webview/Flow.tsx
@@ -1,4 +1,4 @@
-import React, {  useEffect, useRef } from "react";
+import React, { useEffect } from "react";
 import ReactFlow, {
   MiniMap,
   Panel,
@@ -14,28 +14,24 @@ import { Tree } from "../types/tree";
 import "reactflow/dist/style.css";
 import "./style.css";
 
-
-
-
 const OverviewFlow = () => {
 
-  const initialNodes : Node[] = [];
-  const initialEdges : Edge[] = [];
- 
+  const initialNodes: Node[] = [];
+  const initialEdges: Edge[] = [];
+
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
   const [edges, setEdges, onEdgesChange] = useEdgesState([]);
 
-
   useEffect(() => {
     window.addEventListener('message', (e: MessageEvent) => {
 
       // Object containing type prop and value prop
-      const msg : MessageEvent = e;
+      const msg: MessageEvent = e;
       const flowBuilder = new FlowBuilder
 
       switch (msg.data.type) {
         case 'parsed-data': {
-          let data : Tree | undefined = msg.data.value;
+          let data: Tree | undefined = msg.data.value;
 
           // Creates our Tree structure
           flowBuilder.mappedData(data, initialNodes, initialEdges)
@@ -48,46 +44,43 @@ const OverviewFlow = () => {
     });
   }, []);
 
-
-
   return (
-  <div style={{ height: '600px', width: '100%' }}>
-    <ReactFlow
-      nodes={nodes}
-      edges={edges}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      fitView
-      attributionPosition="top-right"
-      style={{ width: '100%', height: '100%' }}
-    >
-      <MiniMap
-        nodeStrokeColor={(n): string => {
-          if (n.style?.backgroundColor) return n.style.backgroundColor;
-          if (n.type === "default") return "#1a192b";
-
-          return "#eee";
-        }}
-        nodeColor={(n): string => {
-          if (n.style?.backgroundColor) return n.style.backgroundColor;
-          return "#fff";
-        }}
-        nodeBorderRadius={2}
-      />
-      <Panel position="top-left">
-        <div className="text-black">
-          <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
-            <p className="pl-2 pr-2 py-2">Client: <span className="bg-orange text-transparent rounded-full">00</span></p>
-          </div>
-          <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
-            <p className="pl-2 pr-2 pb-2">Server: <span className="bg-blue text-transparent  rounded-full">00</span></p>
+    <div style={{ height: '600px', width: '100%' }}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        fitView
+        attributionPosition="top-right"
+        style={{ width: '100%', height: '100%' }}
+      >
+        <MiniMap
+          nodeStrokeColor={(n): string => {
+            if (n.style?.backgroundColor) return n.style.backgroundColor;
+            if (n.type === "default") return "#1a192b";
+            return "#eee";
+          }}
+          nodeColor={(n): string => {
+            if (n.style?.backgroundColor) return n.style.backgroundColor;
+            return "#fff";
+          }}
+          nodeBorderRadius={2}
+        />
+        <Panel position="top-left">
+          <div className="text-black">
+            <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
+              <p className="pl-2 pr-2 py-2">Client: <span className="bg-orange text-transparent rounded-full">00</span></p>
+            </div>
+            <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
+              <p className="pl-2 pr-2 pb-2">Server: <span className="bg-blue text-transparent  rounded-full">00</span></p>
+            </div>
           </div>
-        </div>
-      </Panel >
-      <Controls />
-      <Background color="#aaa" gap={16} />
-    </ReactFlow >
-  </div>
+        </Panel >
+        <Controls />
+        <Background color="#aaa" gap={16} />
+      </ReactFlow >
+    </div>
   );
 };
 
diff --git a/src/webview/flowBuilder.tsx b/src/webview/flowBuilder.tsx
@@ -7,27 +7,27 @@ import * as d3 from 'd3'
 
 class FlowBuilder {
 
-  public mappedData (data: Tree, nodes: Node[], edges: Edge[]) : void {
+  public mappedData(data: Tree, nodes: Node[], edges: Edge[]): void {
 
     // Create a holder for the heirarchical data (msg.value), data comes in an object of all the Trees
-    const root : d3.HierarchyNode<Tree> = d3.hierarchy(data)
+    const root: d3.HierarchyNode<Tree> = d3.hierarchy(data)
 
     // Dynamically adjust height and width of display depending on the amount of nodes
-    const totalNodes : number = root.descendants().length;
-    const width : number = Math.max(totalNodes * 100, 800);
+    const totalNodes: number = root.descendants().length;
+    const width: number = Math.max(totalNodes * 100, 800);
     const height = Math.max(totalNodes * 20, 500)
- 
+
 
     //create tree layout and give nodes their positions and 
-    const treeLayout : d3.TreeLayout<unknown> = d3.tree()
-      .size([ width, height ])
+    const treeLayout: d3.TreeLayout<unknown> = d3.tree()
+      .size([width, height])
       .separation((a: d3.HierarchyPointNode<Node>, b: d3.HierarchyPointNode<Node>) => (a.parent == b.parent ? 2 : 2.5))
 
 
     treeLayout(root);
     // Iterate through each Tree and create a node
-    root.each((node: any) : void => {
-  
+    root.each((node: any): void => {
+
       // Create a Node from the current Root and add it to our nodes array
       nodes.push({
         id: node.data.id,
@@ -44,31 +44,30 @@ class FlowBuilder {
           backgroundColor: `${(node.data.isClientComponent) ? '#fdba74' : '#93C5FD'}`,
         }
       });
-      
+
       // If the current node has a parent, create an edge to show relationship
       if (node.data.parent) {
-        const newEdge : Edge = {
+        const newEdge: Edge = {
           id: `${getNonce()}`,
           source: node.data.parent,
           target: node.data.id,
           type: ConnectionLineType.Bezier,
           animated: true,
         };
 
-        
+
         // Check if the edge already exists before adding
-        const edgeExists : boolean = edges.some(
+        const edgeExists: boolean = edges.some(
           edge => edge.source === newEdge.source && edge.target === newEdge.target
         );
-        
+
         // If edge does not exist, add to our edges array
         if (!edgeExists) {
           edges.push(newEdge)
         }
       }
     }
     )
-  
   }
 }
 
diff --git a/webpack.config.ts b/webpack.config.ts
@@ -1,4 +1,3 @@
-
 import * as path from 'path';
 import * as webpack from 'webpack';
 

Original file line number	Diff line number	Diff line change
`@@ -11,10 +11,6 @@ class VsCodeEnvironment extends TestEnvironment {`
`11`	`11`	`this.global.vscode = {};`
`12`	`12`	`await super.teardown();`
`13`	`13`	`}`
`14`		`-`
`15`		`- // runScript(script) {`
`16`		`- // return super.runScript(script);`
`17`		`- // }`
`18`	`14`	`}`
`19`	`15`
`20`	`16`	`module.exports = VsCodeEnvironment;`