added tests #11-14, changed config to turn off warnings in .eslintrc, updated babel/parser, took out comments in test files, added paths to exclude complie in tsconfig, note: test 14 is not fully working

Author: ash-t-luu

.eslintrc.json

@@ -16,7 +16,7 @@
 	"rules": {
 		"no-const-assign": "warn",
 		"no-this-before-super": "warn",
-		"no-undef": "warn",
+		"no-undef": "off",
 		"no-unreachable": "warn",
 		"no-unused-vars": "off",
 		"constructor-super": "warn",

package-lock.json

@@ -278,7 +278,6 @@ export class Parser {
             }
         };
 
-        console.log('directive: ', directive);
         // Initial check for use of directives (ex: 'use client', 'use server', 'use strict')
         // Accounts for more than one directive 
         for (let i = 0; i < directive.length; i++) {
@@ -314,6 +313,8 @@ export class Parser {
                 useDispatch: 0,
                 useActions: 0,
                 useSelector: 0,
+                useShallowEqualSelector: 0,
+                useStore: 0,
                 bindActionCreators: 0,
             }
             if (item.type === 'VariableDeclaration') {

src/parser.ts

@@ -2,7 +2,6 @@ import * as path from 'path';
 import { runTests } from '@vscode/test-electron';
 
 async function main() {
-	console.log('made it through the line before try block');
 	try {
 		// The folder containing the Extension Manifest package.json
 		// Passed to `--extensionDevelopmentPath`
@@ -12,8 +11,6 @@ async function main() {
 		// Passed to --extensionTestsPath
 		const extensionTestsPath = path.resolve(__dirname, './suite/index');
 
-		console.log('inside try block after var declarations');
-
 		// Download VS Code, unzip it and run the integration test
 		await runTests({ 
 			version: "1.85.1", 

src/test/runTest.ts

@@ -4,8 +4,6 @@ import * as jest from 'jest';
 
 export async function run(): Promise<void> {
 	try {
-		console.log('inside try block of index.ts');
-
 		const testsRoot = path.resolve(__dirname, '..');
 		const files = await glob('**/**.test.js', { cwd: testsRoot });
 
@@ -14,15 +12,10 @@ export async function run(): Promise<void> {
 			return;
 		}
 
-		console.log('test files: ', files);
-
 		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);

src/test/suite/index.ts

@@ -1,68 +1,118 @@
 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');
+import { beforeAll, expect, test } from '@jest/globals'; 
 
 describe('Parser Test Suite', () => {
     let parser, tree, file;
 
-	// UNPARSED TREE TEST
-    describe('It initializes correctly', () => {
-        beforeEach(() => {
-            // Assign the test file and make new instance of Parser
-            file = path.join(__dirname, '../test_cases/tc_0/index.js');
-            // file = path.join(__dirname, '../../../src/test/test_apps/test_0/index.js');
+	// TEST 11: PARSER DOESN'T BREAK UPON RECURSIVE COMPONENTS
+    describe('It should render the second call of mutually recursive components, but no further', () => {
+        beforeAll(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_11/index.js');
             parser = new Parser(file);
+            tree = parser.parse();
         });
 
-        test('It instantiates an object for the parser class', () => {
-            expect((parser)).toBeInstanceOf(Parser);
+        test('Tree should not be undefined', () => {
+            expect(tree).toBeDefined();
         });
 
-        test('It begins with a suitable entry file and a tree that is not yet defined', () => {
-            expect(parser.entryFile).toEqual(file);
-            expect(tree).toBeUndefined();
+        test('Tree should have an index component while child App1, grandchild App2, great-grandchild App1', () => {
+            expect(tree).toHaveProperty('name', 'index');
+            expect(tree.children).toHaveLength(1);
+            expect(tree.children[0]).toHaveProperty('name', 'App1');
+            expect(tree.children[0].children).toHaveLength(1);
+            expect(tree.children[0].children[0]).toHaveProperty('name', 'App2');
+            expect(tree.children[0].children[0].children).toHaveLength(1);
+            expect(tree.children[0].children[0].children[0]).toHaveProperty('name', 'App1');
+            expect(tree.children[0].children[0].children[0].children).toHaveLength(0);
         });
     });
 
-	// TEST 0: ONE CHILD
-    describe('It works for simple apps', () => {
-        beforeEach(() => {
-            file = path.join(__dirname, '');
+	// TEST 12A: NEXT.JS APPS (pages router)
+    describe('It should parse Next.js applications using Pages Router', () => {
+        beforeAll(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_12a/pages/index.js');
             parser = new Parser(file);
             tree = parser.parse();
         });
 
-        test('It returns an defined object tree when parsed', () => {
-            expect(tree).toBeDefined();
-            //expect(tree).toMatchObject()
+        test('Root should be named index, children should be named Head and Navbar, children of Navbar should be named Link and Image', () => {
+            expect(tree).toHaveProperty('name', 'index');
+            expect(tree.children).toHaveLength(2);
+            expect(tree.children[0]).toHaveProperty('name', 'Head');
+            expect(tree.children[1]).toHaveProperty('name', 'Navbar');
+
+            expect(tree.children[1].children).toHaveLength(2);
+            expect(tree.children[1].children[0]).toHaveProperty('name', 'Link');
+            expect(tree.children[1].children[1]).toHaveProperty('name', 'Image');
         });
+    });
 
-        // test('Parsed tree has a property called name with value index and one child with name App', () => {
+    // TEST 12B: NEXT.JS APPS (app router)
+    describe('It should parser Next.js applications using Apps Router', () => {
+        beforeAll(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_12b/app/page.jsx');
+            parser = new Parser(file);
+            tree = parser.parse();
+        });
 
-        // });
+         test('Root should be named page, it should have one child named Homepage', () => {
+			expect(tree).toHaveProperty('name', 'page');
+			expect(tree.children).toHaveLength(1);
+			expect(tree.children[0]).toHaveProperty('name', 'HomePage');
+		});
     });
+    
+  	// TEST 13: VARIABLE DECLARATION IMPORTS AND REACT.LAZY IMPORTS 
+    describe('It should parse VariableDeclaration imports including React.lazy imports', () => {
+        beforeAll(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_13/index.js');
+            parser = new Parser(file);
+            tree = parser.parse();
+        });
 
-    // these are the 14 tests we need to test for
-
-	// 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 version & app router version)
-  	// TEST 13: Variable Declaration Imports and React.lazy Imports    
-    // TEST 14: CHECK IF COMPONENT IS CLIENT OR SERVER (USING HOOKS & DIRECTIVES) => BOOLEAN (priority)
+        test('Root should be named index, it should have one child named App', () => {
+			expect(tree).toHaveProperty('name', 'index');
+			expect(tree.children).toHaveLength(1);
+			expect(tree.children[0]).toHaveProperty('name', 'App');
+		});
 
-    // LOU is doing EXTENSION TEST in extension.test.ts
+        test('App should have three children, Component1, Component2 and Component3, all found successfully', () => {
+			expect(tree.children[0].children[0]).toHaveProperty('name', 'Component1');
+            expect(tree.children[0].children[0]).toHaveProperty('thirdParty', false);
+
+			expect(tree.children[0].children[1]).toHaveProperty('name', 'Component2');
+            expect(tree.children[0].children[1]).toHaveProperty('thirdParty', false);
+
+            expect(tree.children[0].children[2]).toHaveProperty('name', 'Component3');
+            expect(tree.children[0].children[2]).toHaveProperty('thirdParty', false);
+		});
+    }); 
+
+    // TEST 14: CHECK IF COMPONENT IS A CLIENT COMPONENT USING HOOKS AND DIRECTIVES
+    describe('It should parse components and determine if the component type', () => {
+        beforeAll(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_14/index.js');
+            parser = new Parser(file);
+            tree = parser.parse();
+        });
+
+        test('Root should be named index, it should have one children named App', () => {
+            expect(tree).toHaveProperty('name', 'index');
+            expect(tree.children).toHaveLength(1);
+            expect(tree.children[0]).toHaveProperty('name', 'App');
+        });
+
+        test('App should have three children, Component1 is a client component using hooks, Component2 is a client component using directives, and Component3 is not a client component', () => {
+            // expect(tree.children[0].children[0]).toHaveProperty('name', 'Component1');
+            // expect(tree.children[0].children[0]).toHaveProperty('isClientComponent', true);
+
+			expect(tree.children[0].children[1]).toHaveProperty('name', 'Component2');
+            expect(tree.children[0].children[1]).toHaveProperty('isClientComponent', true);
+
+            expect(tree.children[0].children[2]).toHaveProperty('name', 'Component3');
+            expect(tree.children[0].children[2]).toHaveProperty('isClientComponent', false);
+        });
+    });
 });

src/test/suite/parser.test.ts

@@ -0,0 +1,10 @@
+import App2 from './App2.jsx';
+
+export default function App1() {
+    return (
+        <section>
+            <div>I am App 1</div>
+            <App2 />
+        </section>
+    );
+}

src/test/test_cases/tc_11/components/App1.jsx

@@ -0,0 +1,10 @@
+import App1 from './App1.jsx';
+
+export default function App2() {
+    return (
+        <section>
+            <div>This is App 2</div>
+            <App1 />
+        </section>
+    );
+}

src/test/test_cases/tc_11/components/App2.jsx

@@ -0,0 +1,8 @@
+// Test Case 11 - Recursive import of App1 and App2
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App1 from './components/App1.jsx';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App1 />);

src/test/test_cases/tc_11/index.js

@@ -0,0 +1,31 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import logo from '../public/nextjs_logo.png';
+
+export const Navbar = () => {
+    return (
+        <nav className="bg-gray-800 py-4">
+            <div className="container mx-auto flex justify-between items-center">
+                <div>
+                    <Link href="/">
+                        <a className="text-white text-xl font-bold">Next.js App</a>
+                        <Image src={logo} alt="Next.js logo" />
+                    </Link>
+                </div>
+                <ul className="flex space-x-4">
+                    <li>
+                        <Link href="/">
+                            <a className="text-white hover:text-gray-300">Home</a>
+                        </Link>
+                    </li>
+                    <li>
+                        <Link href="/about">
+                            <a className="text-white hover:text-gray-300">About</a>
+                        </Link>
+                    </li>
+                </ul>
+            </div>
+        </nav>
+    );
+};
+