AL/CR/LK - jest testing

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    presets: [
+      ['@babel/preset-env', {targets: {node: 'current'}}],
+      '@babel/preset-typescript',
+    ],
+  };

jest.config.js

@@ -0,0 +1,17 @@
+const path = require('path');
+
+module.exports = {
+    preset: "ts-jest",
+    testEnvironment: "node",
+    preset: "ts-jest/presets/default-esm",
+    globals: {
+        "ts-jest": {
+            useESM: true,
+        },
+    },
+    moduleNameMapper: {
+        vscode: path.join(__dirname, 'src', 'test', 'vscode.js')
+    },
+    testMatch: ['**/test/**/*.js', '**/?(*.)+(spec|test).js'],
+    modulePathIgnorePatterns: ["node_modules"]
+};

package.json

@@ -71,13 +71,13 @@
     "lint": "eslint .",
     "pretest": "npm run lint",
     "test": "node ./build/src/test/runTest.js",
-    "test1": "vscode-test",
     "dev": "webpack --watch",
     "webpack": "webpack"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.23.3",
     "@types/glob": "^8.1.0",
-    "@types/mocha": "^10.0.3",
+    "@types/jest": "^29.5.11",
     "@types/node": "18.x",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
@@ -86,10 +86,12 @@
     "@vscode/test-electron": "^2.3.8",
     "eslint": "^8.54.0",
     "glob": "^10.3.10",
-    "mocha": "^10.2.0",
+    "jest": "^29.7.0",
+    "jest-environment-node": "^29.7.0",
     "postcss-loader": "^7.3.3",
     "postcss-preset-env": "^9.3.0",
     "tailwindcss": "^3.3.6",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",
     "webpack-cli": "^5.1.4"
   },

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) {

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 (

src/test/runTest.ts

@@ -1,5 +1,4 @@
 import * as path from 'path';
-
 import { runTests } from '@vscode/test-electron';
 
 async function main() {
@@ -19,7 +18,11 @@ async function main() {
 		console.log('inside try block after second var declare');
 
 		// Download VS Code, unzip it and run the integration test
-		await runTests({ extensionDevelopmentPath, extensionTestsPath });
+		await runTests({ 
+			version: "1.85.1", 
+			extensionDevelopmentPath, 
+			extensionTestsPath
+		});
 	} catch (err) {
 		console.error('Failed to run tests', err);
 		process.exit(1);

src/test/suite/extension.test.ts

@@ -1,16 +1,18 @@
-import * as assert from 'assert'
-
 // You can import and use all API from the 'vscode' module
 // as well as import your extension to test it
 import * as vscode from 'vscode'
 // const myExtension = require('../extension');
 
-suite('Extension Test Suite', () => {
-	vscode.window.showInformationMessage('Start all tests.');
+// we can either use test() or it() -- matter of style for team/project convention
+
+describe('Extension Test Suite', () => {
+	// beforeEach(() => {
+	// 	vscode.window.showInformationMessage('Start all tests.');
+	// });
 
-	test('Sample test', () => {
-		assert.strictEqual(-1, [1, 2, 3].indexOf(5)); // false
-		assert.strictEqual(-1, [1, 2, 3].indexOf(0));
-		assert.strictEqual(0, [1, 2, 3].indexOf(1)); // true
+	it('Sample test', () => {
+		expect([1, 2, 3].indexOf(5)).toBe(-1);
+		expect([1, 2, 3].indexOf(0)).toBe(-1);
+		expect([1, 2, 3].indexOf(1)).toBe(0);
 	});
 });

src/test/suite/index.ts

@@ -1,33 +1,34 @@
 import * as path from 'path';
-import * as Mocha from 'mocha';
 import { glob } from 'glob';
+import * as jest from 'jest';
 
 export async function run(): Promise<void> {
-	// Create the mocha test
-	const mocha = new Mocha.default({
-		ui: 'tdd',
-		color: true
-	});
+	try {
+		console.log('inside try block of index.ts');
 
-	const testsRoot = path.resolve(__dirname, '..');
-	const files = await glob('**/**.test.js', { cwd: testsRoot });
+		const testsRoot = path.resolve(__dirname, '..');
+		const files = await glob('**/**.test.js', { cwd: testsRoot });
+
+		if (files.length === 0) {
+			console.warn('No test files found');
+			return;
+		}
 
-	// Add files to the test suite
-	files.forEach(f => mocha.addFile(path.resolve(testsRoot, f)));
+		console.log('test files: ', files);
 
-	try {
-		return new Promise((c, e) => {
-			// Run the mocha test
-			mocha.run(failures => {
-				if (failures > 0) {
-					e(new Error(`${failures} tests failed.`));
-				} else {
-					c();
-				}
-			});
+		return new Promise(async (c, e) => {
+			try {
+				console.log('inside promise block of index.ts before await ')
+				await jest.run([...files]);
+				console.log('inside promise block of index.ts after await')
+				c();
+				console.log('inside promise block of index.ts after c()')
+			} catch (err) {
+				console.error(err);
+				e(err);
+			}
 		});
 	} catch (err) {
 		console.error(err);
 	}
-}
-
+}

src/test/suite/parser.test.ts

@@ -0,0 +1,72 @@
+// import * as assert from 'assert' -- this one is from node
+import { Parser } from '../../parser';
+import * as path from 'path';
+import { beforeEach, expect, test } from '@jest/globals'; 
+
+// You can import and use all API from the 'vscode' module
+// as well as import your extension to test it
+import * as vscode from 'vscode'
+// const myExtension = require('../extension');
+
+describe('Parser Test Suite', () => {
+	// beforeEach(() => {
+    //     vscode.window.showInformationMessage('Start all tests.');
+    // });
+
+    let parser, tree, file;
+
+	// UNPARSED TREE TEST
+    describe('It initializes correctly', () => {
+        beforeEach(() => {
+            // declare var and assign it to a test file and make new instance of Parser
+            // both of the paths below work
+            // file = path.join(__dirname, '../test_cases/tc_0/index.js');
+            file = path.join(__dirname, '../../../src/test/test_apps/test_0/index.js');
+            parser = new Parser(file);
+        });
+
+        test('It instantiates an object for the parser class', () => {
+            expect((parser)).toBeInstanceOf(Parser);
+            // assert.typeOf(parser, 'object', 'Value of new instance should be an object');
+            // expect(parser).to.be.an('object');
+        });
+
+        test('It begins with a suitable entry file and a tree that is not yet defined', () => {
+            expect(parser.entryFile).toEqual(file);
+            expect(tree).toBeUndefined();
+            // below is my code
+            // assert.strictEqual(parser.entryFile, file, 'These files are strictly equal');
+            // assert.isUndefined(tree, 'Tree is defined');
+        });
+    });
+
+    // TEST ?: UNPARSED TREE TEST FOR REACT 18(createRoot)
+
+	// TEST 0: ONE CHILD
+    // describe('It works for simple apps', () => {
+    //     before(() => {
+    //         file = path.join(__dirname, '');
+    //         parser = new Parser(file);
+    //         tree = parser.parse();
+    //     });
+
+    //     test('It returns an defined object tree when parsed', () => {
+    //         assert.typeOf(tree, 'object', 'Value of parse() on new instance should be an object');
+    //     });
+    // });
+
+    // TEST 0.5: CHECK IF COMPONENT IS CLIENT OR SERVER (USING HOOKS) => RENDERS A CERTAIN COLOR
+	// TEST 1: NESTED CHILDREN
+	// TEST 2: THIRD PARTY, REACT ROUTER, DESTRUCTURED IMPORTS
+	// TEST 3: IDENTIFIES REDUX STORE CONNECTION
+	// TEST 4: ALIASED IMPORTS
+	// TEST 5: MISSING EXTENSIONS AND UNUSED IMPORTS
+	// TEST 6: BAD IMPORT OF APP2 FROM APP1 COMPONENT
+	// TEST 7: SYNTAX ERROR IN APP FILE CAUSES PARSER ERROR
+	// TEST 8: MULTIPLE PROPS ON ONE COMPONENT
+	// TEST 9: FINDING DIFFERENT PROPS ACROSS TWO OR MORE IDENTICAL COMPONENTS
+	// TEST 10: CHECK CHILDREN WORKS AND COMPONENTS WORK
+	// TEST 11: PARSER DOESN'T BREAK UPON RECURSIVE COMPONENTS
+	// TEST 12: NEXT.JS APPS (pages & app router)
+  	// TEST 13: Variable Declaration Imports and React.lazy Imports
+});

src/test/test_cases/tc_0/component/App.jsx

@@ -0,0 +1,6 @@
+// import React from "react";
+export default function App() {
+    return (
+        <div>This is the App.</div>
+    )
+}

src/test/test_cases/tc_0/index.js

@@ -0,0 +1,15 @@
+// what we are building to test for 
+// we will point to index.js and call new instance of parser passing in file
+
+// expecting: 
+// if the value of new instance is an obj
+// tree is undefined with a proper file
+
+// test case 0 - simple react app with one app component
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './components/App.jsx';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

src/test/vscode-environment.js

@@ -0,0 +1,16 @@
+const { TestEnvironment } = require('jest-environment-node');
+const vscode = require('vscode');
+
+class VsCodeEnvironment extends TestEnvironment {
+    async setup() {
+        await super.setup();
+        this.global.vscode = vscode;
+    }
+
+    async teardown() {
+        this.global.vscode = {};
+        await super.teardown();
+    }
+}
+
+module.exports = VsCodeEnvironment;

src/test/vscode.js

@@ -0,0 +1 @@
+module.exports = global.vscode;

src/types/builder.ts

@@ -7,4 +7,4 @@ export type Builder = {
     viewData: any;
     edgeId: number;
     initialEdges: [];
-}
+};

src/types/connection.ts

@@ -4,4 +4,4 @@ export enum ConnectionLineType {
     Step = 'step',
     SmoothStep = 'smoothstep',
     SimpleBezier = 'simplebezier',
-  }
+};

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,
     }
-  }
+};

src/types/tree.ts

@@ -16,4 +16,4 @@ export type Tree = {
     props: { [key: string]: boolean; };
     error: string;
     isClientComponent: boolean;
-}
+};