Merge branch 'dev' into AL/client-conditionals

Author: ash-t-luu

media/RL(Final).png

@@ -50,7 +50,7 @@
         {
           "id": "react-labyrinth",
           "title": "React Labyrinth",
-          "icon": "/media/test1.svg"
+          "icon": "/media/RL(Final).png"
         }
       ]
     },
@@ -100,7 +100,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.3",
-    "@babel/parser": "^7.23.4",
+    "@babel/parser": "^7.23.9",
     "@babel/preset-env": "^7.23.3",
     "@babel/preset-react": "^7.23.3",
     "babel": "^6.23.0",

package-lock.json

@@ -18,7 +18,7 @@ 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');
+    panel.iconPath = vscode.Uri.joinPath(context.extensionUri, 'media', 'RL(Final).png');
 
     // Set URI to be the path to bundle
     const bundlePath: vscode.Uri = vscode.Uri.joinPath(context.extensionUri, 'build', 'bundle.js');

package.json

@@ -1,9 +1,36 @@
 import { Parser } from '../../parser';
 import * as path from 'path';
-import { beforeAll, expect, test } from '@jest/globals'; 
+import { beforeAll, beforeEach, expect, test } from '@jest/globals'; 
 
 describe('Parser Test Suite', () => {
     let parser, tree, file;
+    const fs = require('fs');
+
+    // TEST 6: BAD IMPORT OF APP2 FROM APP1 COMPONENT
+    describe('Catches bad imports', () => {
+        beforeEach(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_6/component/App.jsx');
+            parser = new Parser(file);
+            tree = parser.parse();
+        });
+    
+        test("Child component with bad file path does not show up on the node tree", () => {
+            expect(tree.children.length).toBe(0);
+        });
+    });
+    
+    // TEST 7: SYNTAX ERROR IN APP FILE CAUSES PARSER ERROR
+    describe('Parser should not work for components with syntax errors in the code', () => {
+        beforeEach(() => {
+            file = path.join(__dirname, '../../../../src/test/test_cases/tc_7/index.js');
+            parser = new Parser(file);
+            tree = parser.parse();
+        });
+            
+        test("Parser stops parsing when there is a syntax error in a component", () => {
+            expect(tree.children.length).toBe(0);
+        });
+    });
 
 	// TEST 11: PARSER DOESN'T BREAK UPON RECURSIVE COMPONENTS
     describe('It should render the second call of mutually recursive components, but no further', () => {
@@ -127,4 +154,24 @@ describe('Parser Test Suite', () => {
             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/panel.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import anotherApp from "./anotherApp"; // this is purposefully the wrong file path for anotherApp
+
+const App = () => {
+    return (
+        <div>
+            <p>Hello from App.jsx</p>
+            <anotherApp />
+        </div>
+    )
+};
+
+export default App;

src/test/suite/parser.test.ts

@@ -0,0 +1,9 @@
+// !TEST 6: BAD IMPORT OF APP2 FROM APP1 COMPONENT
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './components/App.jsx';
+
+// tests whether the parser still works when a component is given the wrong File path
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);

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

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const anotherApp = () => {
+    return (
+        <div>
+            <p>Greetings from inside anotherApp</p>
+        </div>
+    )
+}

src/test/test_cases/tc_6/index.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import ChildApp from './ChildApp';
+
+export const App = () => {
+  this should not work when given to the parser
+    return (
+      <div>
+        <p>Syntax Error</p>
+        <ChildApp />
+      </div>
+    )
+  
+}

src/test/test_cases/tc_6/otherComponent/anotherApp.jsx

@@ -0,0 +1,11 @@
+// this component will not show up in the children of App due to App's syntax error
+import React, { Component } from 'react';
+
+export const ChildApp = () => {
+    return (
+      <div>
+        <p>Child of App with Syntax Error</p>
+      </div>
+    )
+  
+}