Merge branch 'dev' into AL/readme

Author: ash-t-luu

.DS_Store

@@ -60,7 +60,18 @@ function activate(context: vscode.ExtensionContext) {
 
 	// Command to show panel if it is hidden
 	const showPanel: vscode.Disposable = vscode.commands.registerCommand('myExtension.showPanel', () => {
-		panel.reveal(columnToShowIn);
+		if (!panel) {
+
+			showNotification({message: 'Please select root file of app', timeout: 3000});
+			return;
+
+		} else {
+
+			panel.reveal(columnToShowIn);
+			return;
+			
+		}
+		
 	});
 
 	context.subscriptions.push(pickFile, showPanel);

src/extension.ts

@@ -6,6 +6,91 @@ describe('Parser Test Suite', () => {
     let parser, tree, file;
     const fs = require('fs');
 
+	// TEST 0: ONE CHILD
+    describe('It works for simple apps', () => {
+        beforeAll(() => {
+            // console.log('-----test 0----------')
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_0/index.js');
+            parser = new Parser(file);
+            tree = parser.parse();
+        });
+
+        test('Tree should not be undefined', () => {
+            expect(tree).toBeDefined();
+            expect(typeof(tree)).toBe('object');
+        });
+
+        test('Parsed tree has a property called name with value index, and a child with the name App', () => {
+            expect(tree).toHaveProperty('name', 'index');
+            expect(tree.children[0]).toHaveProperty('name', 'App');
+        });
+    });
+
+    // these are the 14 tests we need to test for
+
+	// TEST 1: NESTED CHILDREN
+
+    describe('It checks for nested Children', () => {
+        beforeEach(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_1/index.js');
+            parser = new Parser(file);
+            tree = parser.parse();
+        })
+
+        test('Parsed tree should have a property called name with the value index, and one child with name App, which has its own child, Main', () => {
+            expect(tree).toHaveProperty('name', 'index');
+            expect(tree.children[0]).toHaveProperty('name', 'App');
+            // console.log(tree.children[0].children);
+            expect(tree.children[0].children[0]).toHaveProperty('name', 'Main');
+        })
+
+        test('Parsed tree has correct amount of child components', () => {
+            expect(tree.children).toHaveLength(1);
+            expect(tree.children[0].children).toHaveLength(1);
+        })
+
+        test('Parsed tree depth is accurate', () => {
+            expect(tree).toHaveProperty('depth', 0);
+            expect(tree.children[0]).toHaveProperty('depth', 1);
+            expect(tree.children[0].children[0]).toHaveProperty('depth', 2);
+        })
+    })
+
+    // TEST 2: THIRD PARTY, REACT ROUTER, DESTRUCTURED IMPORTS
+    describe('It works for third party, React Router, and destructured imports', () => {
+        beforeAll(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_2/index.js');
+            parser = new Parser(file);
+            tree = parser.parse();
+        })
+
+        test('Should parse destructured and third party imports', () => {
+            expect(tree).toHaveProperty('thirdParty', false);
+            expect(tree.children[0]).toHaveProperty('thirdParty', true);
+            expect(tree.children[1]).toHaveProperty('thirdParty', true);
+            
+            try {
+                expect(tree.children[0].name).toContain('Switch')
+            } catch {
+                expect(tree.children[0].name).toContain('Route')
+                
+            }
+            try {
+                expect(tree.children[1].name).toContain('Switch')
+            } catch {
+                expect(tree.children[1].name).toContain('Route')
+                
+            }
+        })
+
+        test('third party should be reactRouter', () => {
+            expect(tree.children[0]).toHaveProperty('reactRouter', true);
+            expect(tree.children[1]).toHaveProperty('reactRouter', true);
+        })
+        
+    }) 
+
+
     // TEST 6: BAD IMPORT OF APP2 FROM APP1 COMPONENT
     describe('Catches bad imports', () => {
         beforeEach(() => {
@@ -38,6 +123,7 @@ describe('Parser Test Suite', () => {
             file = path.join(__dirname, '../../../../src/test/test_cases/tc_11/index.js');
             parser = new Parser(file);
             tree = parser.parse();
+            // console.log('tree11', tree);
         });
 
         test('Tree should not be undefined', () => {
@@ -153,25 +239,18 @@ describe('Parser Test Suite', () => {
             expect(tree.children[0].children[6]).toHaveProperty('name', 'Component7');
             expect(tree.children[0].children[6]).toHaveProperty('isClientComponent', false);
         });
-    });
+    });   
+
+
 
-    // 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)
-
+	
     // LOU is doing EXTENSION TEST in extension.test.ts
 
 });

src/test/suite/parser.test.ts

@@ -1,5 +1,7 @@
 export default function App() {
     return (
-        <div>This is the App.</div>
+        <section>
+            <div>This is the App.</div>
+        </section>
     )
 };

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

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './components/App.jsx';
+import App from './component/App.jsx';
 
 const root = createRoot(document.getElementById('root'));
 root.render(<App />);

src/test/test_cases/tc_0/index.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import Main from './Main.jsx';
+
+const App = () => {
+    return (
+        <section>
+            <div>App</div>
+            <Main />
+        </section>
+    )
+}
+
+export default App;

src/test/test_cases/tc_1/components/App.jsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Main = () => {
+    return (
+        <div>Main App</div>
+    )
+}
+
+export default Main;

src/test/test_cases/tc_1/components/Main.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { render } from "react-dom";
+import App from "./components/App.jsx";
+
+//TEST 1 - Simple App with 2 components, App and Main
+//App renders Main
+
+render(
+    <div>
+        <App />
+    </div>, document.getElementById('root')
+);

src/test/test_cases/tc_1/index.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { render } from "react-dom";
+import { Switch, Route} from 'react-router-dom';
+
+
+    // TEST 2: THIRD PARTY, REACT ROUTER, DESTRUCTURED IMPORTS
+
+render(
+    <div>
+        <Switch >
+            <Route component={App}>
+            </Route>
+        </Switch>
+    </div>, document.getElementById('root')
+);