added more test components for tc_14 to test more component declarations and added test suite in parser.test.ts

Author: ash-t-luu

src/test/suite/parser.test.ts

@@ -104,15 +104,24 @@ describe('Parser Test Suite', () => {
             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);
+        test('App should have three children, Component1 is a client component using hooks (variable declaration, export default declaration, and function declaration), 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(typeof tree.children[0].children[0]).toBe('function');
+            expect(typeof tree.children[0].children[0]).not.toBe('undefined');
+            expect(typeof tree.children[0].children[0]).not.toBe('function');
 
 			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);
+
+            expect(tree.children[0].children[3]).toHaveProperty('name', 'Component4');
+            expect(tree.children[0].children[3]).toHaveProperty('isClientComponent', true);
+
+            expect(tree.children[0].children[4]).toHaveProperty('name', 'Component5');
+            expect(tree.children[0].children[4]).toHaveProperty('isClientComponent', true);
         });
     });
 });

src/test/test_cases/tc_14/components/Component1.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-export default function Component1() {
+const Component1 = () => {
     const [count, setCount] = useState(0);
 
     const handleClick = () => {
@@ -14,4 +14,6 @@ export default function Component1() {
             <button onClick={handleClick}>Click Me</button>;
         </section>
     );
-}
+}
+
+export default Component1;

src/test/test_cases/tc_14/components/Component4.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+export default function Component4() {
+    const [items, setItems] = useState([]);
+
+    const addItem = () => {
+        const newItem = `Item ${items.length + 1}`;
+        setItems([...items, newItem]);
+    };
+
+    return (
+        <section>
+            <h2>List Component</h2>
+            <button onClick={addItem}>Add Item</button>
+            <ul>
+                {items.map((item, index) => (
+                    <li key={index}>{item}</li>
+                ))}
+            </ul>
+        </section>
+    );
+}

src/test/test_cases/tc_14/components/Component5.jsx

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+
+function Component5() {
+    const [isToggled, setIsToggled] = useState(false);
+
+    const handleToggle = () => {
+        setIsToggled(!isToggled);
+    };
+
+    return (
+        <section>
+            <h2>Toggle Component</h2>
+            <p>Status: {isToggled ? 'Enabled' : 'Disabled'}</p>
+            <button onClick={handleToggle}>{isToggled ? 'Disable' : 'Enable'}</button>;
+        </section>
+    );
+}
+
+export default Component5;