From 5bed0317be0e9374a5adb8e626e21cf5753da829 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AD=99=E4=B8=80=E5=86=B0?=
 <14512567+sunyibing@user.noreply.gitee.com>
Date: Fri, 23 Aug 2024 11:55:19 +0800
Subject: [PATCH] test: add API-2.0 tests

---
 packages/inula-next/test/conditional.test.tsx | 117 ++++
 packages/inula-next/test/context.test.tsx     | 126 ++++
 packages/inula-next/test/customHook.test.tsx  | 356 ++++++++++++
 packages/inula-next/test/event.test.tsx       | 543 ++++++++++++++++++
 packages/inula-next/test/for.test.tsx         |  73 ++-
 packages/inula-next/test/jsxSlice.test.tsx    | 274 +++++++++
 packages/inula-next/test/props.test.tsx       | 190 ++++++
 packages/inula-next/test/rendering.test.tsx   |  20 +
 8 files changed, 1698 insertions(+), 1 deletion(-)
 create mode 100644 packages/inula-next/test/event.test.tsx

diff --git a/packages/inula-next/test/conditional.test.tsx b/packages/inula-next/test/conditional.test.tsx
index ab2b4b41..0724ddf6 100644
--- a/packages/inula-next/test/conditional.test.tsx
+++ b/packages/inula-next/test/conditional.test.tsx
@@ -146,3 +146,120 @@ describe('conditional rendering', () => {
     expect(container.innerHTML).toMatchInlineSnapshot(`"<div><h1>hello world 2</h1></div>"`);
   });
 });
+
+describe('additional conditional rendering tests', () => {
+  it('Should correctly render content based on a single if condition', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 0;
+      set = (val: number) => {
+        count = val;
+      };
+      return (
+        <div>
+          <if cond={count > 5}>Count is greater than 5</if>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div></div>');
+    set(6);
+    expect(container.innerHTML).toBe('<div>Count is greater than 5</div>');
+  });
+
+  it('Should correctly render content based on if-else conditions', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 0;
+      set = (val: number) => {
+        count = val;
+      };
+      return (
+        <div>
+          <if cond={count % 2 === 0}>Count is even</if>
+          <else>Count is odd</else>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Count is even</div>');
+    set(1);
+    expect(container.innerHTML).toBe('<div>Count is odd</div>');
+    set(2);
+    expect(container.innerHTML).toBe('<div>Count is even</div>');
+  });
+
+  it('Should correctly render content based on if-else-if-else conditions', ({ container }) => {
+    let set: (num: number) => void;
+
+    function App() {
+      let count = 0;
+      set = (val: number) => {
+        count = val;
+      };
+      return (
+        <div>
+          <if cond={count > 10}>Count is greater than 10</if>
+          <else-if cond={count > 5}>Count is greater than 5 but not greater than 10</else-if>
+          <else-if cond={count > 0}>Count is greater than 0 but not greater than 5</else-if>
+          <else>Count is 0 or negative</else>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Count is 0 or negative</div>');
+    set(3);
+    expect(container.innerHTML).toBe('<div>Count is greater than 0 but not greater than 5</div>');
+    set(7);
+    expect(container.innerHTML).toBe('<div>Count is greater than 5 but not greater than 10</div>');
+    set(11);
+    expect(container.innerHTML).toBe('<div>Count is greater than 10</div>');
+  });
+
+  it('Should correctly handle nested conditional rendering', ({ container }) => {
+    let set: (obj: { x: number; y: number }) => void;
+
+    function App() {
+      let state = { x: 0, y: 0 };
+      set = (val: { x: number; y: number }) => {
+        state = val;
+      };
+      return (
+        <div>
+          <if cond={state.x > 0}>
+            X is positive
+            <if cond={state.y > 0}>
+              <div>Both X and Y are positive</div>
+            </if>
+            <else>
+              <div>X is positive but Y is not</div>
+            </else>
+          </if>
+          <else>
+            X is not positive
+            <if cond={state.y > 0}>
+              <div>X is not positive but Y is</div>
+            </if>
+            <else>
+              <div>Neither X nor Y are positive</div>
+            </else>
+          </else>
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>X is not positive<div>Neither X nor Y are positive</div></div>');
+    set({ x: 1, y: 0 });
+    expect(container.innerHTML).toBe('<div>X is positive<div>X is positive but Y is not</div></div>');
+    set({ x: 1, y: 1 });
+    expect(container.innerHTML).toBe('<div>X is positive<div>Both X and Y are positive</div></div>');
+    set({ x: 0, y: 1 });
+    expect(container.innerHTML).toBe('<div>X is not positive<div>X is not positive but Y is</div></div>');
+  });
+});
diff --git a/packages/inula-next/test/context.test.tsx b/packages/inula-next/test/context.test.tsx
index 5b24c8ad..4541bbb8 100644
--- a/packages/inula-next/test/context.test.tsx
+++ b/packages/inula-next/test/context.test.tsx
@@ -219,4 +219,130 @@ describe('context', () => {
     container.querySelector('button').click();
     expect(container.querySelector('div').textContent).toBe('Count: 1');
   });
+  it('Should correctly create and provide context', ({ container }) => {
+    const ThemeContext = createContext('light');
+
+    function App() {
+      return (
+        <ThemeContext theme="dark">
+          <Child />
+        </ThemeContext>
+      );
+    }
+
+    function Child() {
+      const { theme } = useContext(ThemeContext);
+      return <div>Current theme: {theme}</div>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Current theme: dark</div>');
+  });
+
+  it('Should correctly consume context in child components', ({ container }) => {
+    const UserContext = createContext({ name: '', age: 0 });
+
+    function App() {
+      return (
+        <UserContext name="Alice" age={30}>
+          <Parent />
+        </UserContext>
+      );
+    }
+
+    function Parent() {
+      return (
+        <div>
+          <Child1 />
+          <Child2 />
+        </div>
+      );
+    }
+
+    function Child1() {
+      const { name } = useContext(UserContext);
+      return <div>Name: {name}</div>;
+    }
+
+    function Child2() {
+      const { age } = useContext(UserContext);
+      return <div>Age: {age}</div>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div><div>Name: Alice</div><div>Age: 30</div></div>');
+  });
+
+  it('Should correctly update context and re-render consumers', ({ container }) => {
+    const CountContext = createContext(0);
+
+    function App() {
+      let count = 0;
+      const increment = () => {
+        count += 1;
+      };
+
+      return (
+        <CountContext count={count}>
+          <Counter />
+          <button onClick={increment}>Increment</button>
+        </CountContext>
+      );
+    }
+
+    function Counter() {
+      const { count } = useContext(CountContext);
+      return <div>Count: {count}</div>;
+    }
+
+    render(App, container);
+    expect(container.querySelector('div').textContent).toBe('Count: 0');
+
+    container.querySelector('button').click();
+    expect(container.querySelector('div').textContent).toBe('Count: 1');
+  });
+
+  it('Should handle nested contexts correctly', ({ container }) => {
+    const ThemeContext = createContext('light');
+    const LanguageContext = createContext('en');
+
+    function App() {
+      return (
+        <ThemeContext theme="dark">
+          <LanguageContext language="fr">
+            <Child />
+          </LanguageContext>
+        </ThemeContext>
+      );
+    }
+
+    function Child() {
+      const { theme } = useContext(ThemeContext);
+      const { language } = useContext(LanguageContext);
+      return (
+        <div>
+          Theme: {theme}, Language: {language}
+        </div>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Theme: dark, Language: fr</div>');
+  });
+
+  it('Should use default value when no provider is present', ({ container }) => {
+    const DefaultContext = createContext({ message: 'Default message' });
+
+    function App() {
+      return <Child />;
+    }
+
+    function Child() {
+      const { message } = useContext(DefaultContext);
+      return <div>{message}</div>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toBe('<div>Default message</div>');
+  });
 });
diff --git a/packages/inula-next/test/customHook.test.tsx b/packages/inula-next/test/customHook.test.tsx
index 81cc46cf..b8a2e970 100644
--- a/packages/inula-next/test/customHook.test.tsx
+++ b/packages/inula-next/test/customHook.test.tsx
@@ -366,3 +366,359 @@ describe('Custom Hook Tests', () => {
     });
   });
 });
+
+describe('Hook and Watch Combined Tests', () => {
+  it('should update watched value when hook state changes', ({ container }) => {
+    let setCount;
+    function useCounter(initial = 0) {
+      let count = initial;
+      setCount = n => {
+        count = n;
+      };
+      return { count };
+    }
+
+    function TestComponent() {
+      const { count } = useCounter(0);
+      let watchedCount = 0;
+
+      watch(() => {
+        watchedCount = count * 2;
+      });
+
+      return <div>{watchedCount}</div>;
+    }
+
+    render(TestComponent, container);
+    expect(container.innerHTML).toBe('<div>0</div>');
+    setCount(5);
+    expect(container.innerHTML).toBe('<div>10</div>');
+  });
+
+  it('should handle multiple watches in a custom hook', ({ container }) => {
+    let setX, setY;
+    function usePosition() {
+      let x = 0,
+        y = 0;
+      setX = newX => {
+        x = newX;
+      };
+      setY = newY => {
+        y = newY;
+      };
+
+      let position = '';
+      watch(() => {
+        position = `(${x},${y})`;
+      });
+
+      let quadrant = 0;
+      watch(() => {
+        quadrant = x >= 0 && y >= 0 ? 1 : x < 0 && y >= 0 ? 2 : x < 0 && y < 0 ? 3 : 4;
+      });
+
+      return { position, quadrant };
+    }
+
+    function TestComponent() {
+      const { position, quadrant } = usePosition();
+      return (
+        <div>
+          {position} Q{quadrant}
+        </div>
+      );
+    }
+
+    render(TestComponent, container);
+    expect(container.innerHTML).toBe('<div>(0,0) Q1</div>');
+    setX(-5);
+    setY(10);
+    expect(container.innerHTML).toBe('<div>(-5,10) Q2</div>');
+  });
+
+  it('should correctly handle watch dependencies in hooks', ({ container }) => {
+    let setItems;
+    function useFilteredList(initialItems = []) {
+      let items = initialItems;
+      setItems = newItems => {
+        items = newItems;
+      };
+
+      let evenItems = [];
+      let oddItems = [];
+
+      watch(() => {
+        evenItems = items.filter(item => item % 2 === 0);
+      });
+
+      watch(() => {
+        oddItems = items.filter(item => item % 2 !== 0);
+      });
+
+      return { evenItems, oddItems };
+    }
+
+    function TestComponent() {
+      const { evenItems, oddItems } = useFilteredList([1, 2, 3, 4, 5]);
+      return (
+        <div>
+          Even: {evenItems.join(',')} Odd: {oddItems.join(',')}
+        </div>
+      );
+    }
+
+    render(TestComponent, container);
+    expect(container.innerHTML).toBe('<div>Even: 2,4 Odd: 1,3,5</div>');
+    setItems([2, 4, 6, 8, 10]);
+    expect(container.innerHTML).toBe('<div>Even: 2,4,6,8,10 Odd: </div>');
+  });
+});
+
+describe('Advanced Hook Tests', () => {
+  // Hook return tests
+  describe('Hook Return Tests', () => {
+    it('should handle expression return', ({ container }) => {
+      function useExpression(a: number, b: number) {
+        return a + b * 2;
+      }
+
+      function TestComponent() {
+        const result = useExpression(3, 4);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>11</div>');
+    });
+
+    it('should handle object spread return', ({ container }) => {
+      function useObjectSpread(obj: object) {
+        return { ...obj, newProp: 'added' };
+      }
+
+      function TestComponent() {
+        const result = useObjectSpread({ existingProp: 'original' });
+        return <div>{JSON.stringify(result)}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>{"existingProp":"original","newProp":"added"}</div>');
+    });
+
+    it('should handle function call return', ({ container }) => {
+      function useFunction() {
+        const innerFunction = () => 42;
+        return innerFunction();
+      }
+
+      function TestComponent() {
+        const result = useFunction();
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>42</div>');
+    });
+
+    it('should handle conditional expression return', ({ container }) => {
+      function useConditional(condition: boolean) {
+        return condition ? 'True' : 'False';
+      }
+
+      function TestComponent() {
+        const result = useConditional(true);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>True</div>');
+    });
+
+    it('should handle array computation return', ({ container }) => {
+      function useArrayComputation(arr: number[]) {
+        return arr.reduce((sum, num) => sum + num, 0);
+      }
+
+      function TestComponent() {
+        const result = useArrayComputation([1, 2, 3, 4, 5]);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>15</div>');
+    });
+
+    it('should handle ternary expression return', ({ container }) => {
+      function useTernary(value: number) {
+        return value > 5 ? 'High' : value < 0 ? 'Low' : 'Medium';
+      }
+
+      function TestComponent() {
+        const result = useTernary(7);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>High</div>');
+    });
+
+    it('should handle member expression return', ({ container }) => {
+      function useMemberExpression(obj: { prop: string }) {
+        return obj.prop;
+      }
+
+      function TestComponent() {
+        const result = useMemberExpression({ prop: 'test' });
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>test</div>');
+    });
+  });
+
+  // Hook input tests
+  describe('Hook Input Tests', () => {
+    it('should handle expression input', ({ container }) => {
+      function useExpression(value: number) {
+        return value * 2;
+      }
+
+      function TestComponent() {
+        const result = useExpression(3 + 4);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>14</div>');
+    });
+
+    it('should handle object spread input', ({ container }) => {
+      function useObjectSpread(obj: { a: number; b: number }) {
+        return obj.a + obj.b;
+      }
+
+      function TestComponent() {
+        const baseObj = { a: 1, c: 3 };
+        const result = useObjectSpread({ ...baseObj, b: 2 });
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>3</div>');
+    });
+
+    it('should handle function call input', ({ container }) => {
+      function useFunction(value: number) {
+        return value * 2;
+      }
+
+      function getValue() {
+        return 21;
+      }
+
+      function TestComponent() {
+        const result = useFunction(getValue());
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>42</div>');
+    });
+
+    it('should handle conditional expression input', ({ container }) => {
+      function useConditional(value: string) {
+        return `Received: ${value}`;
+      }
+
+      function TestComponent() {
+        const condition = true;
+        const result = useConditional(condition ? 'Yes' : 'No');
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Received: Yes</div>');
+    });
+
+    it('should handle array computation input', ({ container }) => {
+      function useArraySum(sum: number) {
+        return `Sum: ${sum}`;
+      }
+
+      function TestComponent() {
+        const numbers = [1, 2, 3, 4, 5];
+        const result = useArraySum(numbers.reduce((sum, num) => sum + num, 0));
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Sum: 15</div>');
+    });
+
+    it('should handle ternary expression input', ({ container }) => {
+      function useStatus(status: string) {
+        return `Current status: ${status}`;
+      }
+
+      function TestComponent() {
+        const value = 7;
+        const result = useStatus(value > 5 ? 'High' : value < 0 ? 'Low' : 'Medium');
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Current status: High</div>');
+    });
+
+    it('should handle member expression input', ({ container }) => {
+      function useName(name: string) {
+        return `Hello, ${name}!`;
+      }
+
+      function TestComponent() {
+        const user = { name: 'Alice' };
+        const result = useName(user.name);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>Hello, Alice!</div>');
+    });
+  });
+
+  // Additional tests
+  describe('Additional Hook Tests', () => {
+    it('should handle input based on other variables', ({ container }) => {
+      function useComputed(value: number) {
+        return value * 2;
+      }
+
+      function TestComponent() {
+        let baseValue = 5;
+        let multiplier = 3;
+        const result = useComputed(baseValue * multiplier);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>30</div>');
+    });
+
+    it('should handle function input and output', ({ container }) => {
+      function useFunction(fn: (x: number) => number) {
+        return (y: number) => fn(y) * 2;
+      }
+
+      function TestComponent() {
+        const inputFn = (x: number) => x + 1;
+        const resultFn = useFunction(inputFn);
+        const result = resultFn(5);
+        return <div>{result}</div>;
+      }
+
+      render(TestComponent, container);
+      expect(container.innerHTML).toBe('<div>12</div>');
+    });
+  });
+});
diff --git a/packages/inula-next/test/event.test.tsx b/packages/inula-next/test/event.test.tsx
new file mode 100644
index 00000000..1e7dddf5
--- /dev/null
+++ b/packages/inula-next/test/event.test.tsx
@@ -0,0 +1,543 @@
+/*
+ * Copyright (c) 2024 Huawei Technologies Co.,Ltd.
+ *
+ * openInula is licensed under Mulan PSL v2.
+ * You can use this software according to the terms and conditions of the Mulan PSL v2.
+ * You may obtain a copy of Mulan PSL v2 at:
+ *
+ *          http://license.coscl.org.cn/MulanPSL2
+ *
+ * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
+ * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
+ * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
+ * See the Mulan PSL v2 for more details.
+ */
+import { describe, expect, vi } from 'vitest';
+import { domTest as it } from './utils';
+import { render } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+describe('Event Handling', () => {
+  it('Should correctly handle onClick events', ({ container }) => {
+    let clicked = false;
+    function App() {
+      const handleClick = () => {
+        clicked = true;
+      };
+      return <button onClick={handleClick}>Click me</button>;
+    }
+
+    render(App, container);
+    const button = container.querySelector('button');
+    button.click();
+    expect(clicked).toBe(true);
+  });
+
+  it.fails('Should correctly handle onMouseOver events', ({ container }) => {
+    let hovered = false;
+    function App() {
+      const handleMouseOver = () => {
+        hovered = true;
+      };
+      return <div onMouseOver={handleMouseOver}>Hover me</div>;
+    }
+
+    render(App, container);
+    const div = container.querySelector('div');
+    div.dispatchEvent(new MouseEvent('mouseover'));
+    expect(hovered).toBe(true);
+  });
+
+  it('Should correctly handle onKeyPress events', ({ container }) => {
+    let keypressed = '';
+    function App() {
+      const handleKeyPress = event => {
+        keypressed = event.key;
+      };
+      return <input onKeyPress={handleKeyPress} />;
+    }
+
+    render(App, container);
+    const input = container.querySelector('input');
+    const event = new KeyboardEvent('keypress', { key: 'A' });
+    input.dispatchEvent(event);
+    expect(keypressed).toBe('A');
+  });
+
+  it('Should correctly handle onSubmit events', ({ container }) => {
+    let submitted = false;
+    function App() {
+      const handleSubmit = event => {
+        event.preventDefault();
+        submitted = true;
+      };
+      return (
+        <form onSubmit={handleSubmit}>
+          <button type="submit">Submit</button>
+        </form>
+      );
+    }
+
+    render(App, container);
+    const form = container.querySelector('form');
+    form.dispatchEvent(new Event('submit'));
+    expect(submitted).toBe(true);
+  });
+
+  it.fails('Should correctly handle custom events', ({ container }) => {
+    let customEventData = null;
+    function App() {
+      const handleCustomEvent = event => {
+        customEventData = event.detail;
+      };
+      return <div onCustomEvent={handleCustomEvent}>Custom event target</div>;
+    }
+
+    render(App, container);
+    const div = container.querySelector('div');
+    const customEvent = new CustomEvent('customEvent', { detail: { message: 'Hello, Custom Event!' } });
+    div.dispatchEvent(customEvent);
+    expect(customEventData).toEqual({ message: 'Hello, Custom Event!' });
+  });
+
+  it('Should correctly handle events when the handler is a variable', ({ container }) => {
+    let count = 0;
+    function App() {
+      const incrementCount = () => {
+        count++;
+      };
+      return <button onClick={incrementCount}>Increment</button>;
+    }
+
+    render(App, container);
+    const button = container.querySelector('button');
+    button.click();
+    expect(count).toBe(1);
+  });
+
+  it('Should correctly handle events when the handler is an expression returning a function', ({ container }) => {
+    let lastClicked = '';
+    function App() {
+      const createHandler = buttonName => () => {
+        lastClicked = buttonName;
+      };
+      return (
+        <div>
+          <button onClick={() => createHandler('Button A')()}>A</button>
+          <button onClick={() => createHandler('Button B')()}>B</button>
+        </div>
+      );
+    }
+
+    render(App, container);
+    const buttons = container.querySelectorAll('button');
+    buttons[0].click();
+    expect(lastClicked).toBe('Button A');
+    buttons[1].click();
+    expect(lastClicked).toBe('Button B');
+  });
+});
+
+describe('event emission', () => {
+  it('should handle emit to parent', ({ container }) => {
+    function AnswerButton({ onYes, onNo }) {
+      return (
+        <>
+          <button onClick={onYes}>YES</button>
+
+          {/*<button onClick={onNo}>NO</button>*/}
+        </>
+      );
+    }
+    function App() {
+      let isHappy = false;
+
+      function onAnswerNo() {
+        isHappy = false;
+      }
+
+      function onAnswerYes() {
+        isHappy = true;
+      }
+
+      return (
+        <>
+          <p>Are you happy?</p>
+          <AnswerButton onYes={onAnswerYes} onNo={onAnswerNo} />
+          <p style={{ fontSize: 50 }}>{isHappy ? 'yes' : 'no'}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <p>
+            Are you happy?
+          </p>
+          <button>
+            YES
+          </button>
+          <p>
+            no
+          </p>
+        </div>
+      `);
+    container.querySelector('button')?.click();
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <p>
+            Are you happy?
+          </p>
+          <button>
+            YES
+          </button>
+          <p>
+            yes
+          </p>
+        </div>
+      `);
+  });
+  it('should correctly emit events to parent component', ({ container }) => {
+    function Child({ onEvent }) {
+      return <button onClick={() => onEvent('clicked')}>Click me</button>;
+    }
+
+    function App() {
+      let eventReceived = '1';
+
+      function handleEvent(event) {
+        eventReceived = event;
+      }
+
+      return (
+        <>
+          <Child onEvent={handleEvent} />
+          <p>{eventReceived}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click me
+        </button>
+        <p>
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelector('button')?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click me
+        </button>
+        <p>
+          clicked
+        </p>
+      </div>
+    `);
+  });
+
+  it('should correctly update parent state based on emitted events', ({ container }) => {
+    function Counter({ onIncrement, onDecrement }) {
+      return (
+        <div>
+          <button onClick={onIncrement}>+</button>
+          <button onClick={onDecrement}>-</button>
+        </div>
+      );
+    }
+
+    function App() {
+      let count = 0;
+
+      function increment() {
+        count += 1;
+      }
+
+      function decrement() {
+        count -= 1;
+      }
+
+      return (
+        <>
+          <Counter onIncrement={increment} onDecrement={decrement} />
+          <p>Count:{count}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            +
+          </button>
+          <button>
+            -
+          </button>
+        </div>
+        <p>
+          Count:
+          0
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[0]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            +
+          </button>
+          <button>
+            -
+          </button>
+        </div>
+        <p>
+          Count:
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[1]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            +
+          </button>
+          <button>
+            -
+          </button>
+        </div>
+        <p>
+          Count:
+          0
+        </p>
+      </div>
+    `);
+  });
+
+  it('should correctly handle multiple event emissions', ({ container }) => {
+    function MultiButton({ onClickA, onClickB, onClickC }) {
+      return (
+        <div>
+          <button onClick={onClickA}>A</button>
+          <button onClick={onClickB}>B</button>
+          <button onClick={onClickC}>C</button>
+        </div>
+      );
+    }
+
+    function App() {
+      let lastClicked = 'A';
+
+      function handleClick(button) {
+        lastClicked = button;
+      }
+
+      return (
+        <>
+          <MultiButton
+            onClickA={() => handleClick('A')}
+            onClickB={() => handleClick('B')}
+            onClickC={() => handleClick('C')}
+          />
+          <p>Last clicked:{lastClicked}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            A
+          </button>
+          <button>
+            B
+          </button>
+          <button>
+            C
+          </button>
+        </div>
+        <p>
+          Last clicked:
+          A
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[1]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            A
+          </button>
+          <button>
+            B
+          </button>
+          <button>
+            C
+          </button>
+        </div>
+        <p>
+          Last clicked:
+          B
+        </p>
+      </div>
+    `);
+  });
+
+  it('should handle both arrow functions and function variables', ({ container }) => {
+    function Child({ onEventA, onEventB }) {
+      return (
+        <div>
+          <button onClick={onEventA}>Event A</button>
+          <button onClick={onEventB}>Event B</button>
+        </div>
+      );
+    }
+
+    function App() {
+      let eventResult = '1';
+
+      const handleEventA = () => {
+        eventResult = 'Arrow function called';
+      };
+
+      function handleEventB() {
+        eventResult = 'Function variable called';
+      }
+
+      return (
+        <>
+          <Child onEventA={handleEventA} onEventB={handleEventB} />
+          <p>{eventResult}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            Event A
+          </button>
+          <button>
+            Event B
+          </button>
+        </div>
+        <p>
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[0]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            Event A
+          </button>
+          <button>
+            Event B
+          </button>
+        </div>
+        <p>
+          Arrow function called
+        </p>
+      </div>
+    `);
+
+    container.querySelectorAll('button')[1]?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <div>
+          <button>
+            Event A
+          </button>
+          <button>
+            Event B
+          </button>
+        </div>
+        <p>
+          Function variable called
+        </p>
+      </div>
+    `);
+  });
+
+  it('should handle multi-layer event functions', ({ container }) => {
+    function GrandChild({ onEvent }) {
+      return <button onClick={() => onEvent('GrandChild clicked')}>Click GrandChild</button>;
+    }
+
+    function Child({ onParentEvent }) {
+      function handleChildEvent(message) {
+        onParentEvent(`Child received: ${message}`);
+      }
+
+      return <GrandChild onEvent={handleChildEvent} />;
+    }
+
+    function App() {
+      let message = '1';
+
+      function handleAppEvent(receivedMessage) {
+        message = `App received: ${receivedMessage}`;
+      }
+
+      return (
+        <>
+          <Child onParentEvent={handleAppEvent} />
+          <p>{message}</p>
+        </>
+      );
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click GrandChild
+        </button>
+        <p>
+          1
+        </p>
+      </div>
+    `);
+
+    container.querySelector('button')?.click();
+    expect(container).toMatchInlineSnapshot(`
+      <div>
+        <button>
+          Click GrandChild
+        </button>
+        <p>
+          App received: Child received: GrandChild clicked
+        </p>
+      </div>
+    `);
+  });
+});
diff --git a/packages/inula-next/test/for.test.tsx b/packages/inula-next/test/for.test.tsx
index 577c4ad6..be988581 100644
--- a/packages/inula-next/test/for.test.tsx
+++ b/packages/inula-next/test/for.test.tsx
@@ -132,7 +132,7 @@ describe('for', () => {
     render(MyComp, container);
     expect(container.innerHTML).toBe('<div><div>1</div><div>2</div><div>3</div><div>4</div></div>');
   });
-  // this test has error, need to be comment
+
   // it.fails('should transform last map to for" ', ({ container }) => {
   //   function MyComp() {
   //     let arr = [1, 2, 3];
@@ -150,4 +150,75 @@ describe('for', () => {
   //   render(MyComp, container);
   //   expect(container.innerHTML).toBe('<div><div>1</div><div>2</div><div>3</div><div>4</div></div>');
   // });
+  it('Should correctly render a single-level loop of elements', ({ container }) => {
+    function App() {
+      const fruits = ['Apple', 'Banana', 'Cherry'];
+      return <for each={fruits}>{fruit => <li>{fruit}</li>}</for>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(`"<li>Apple</li><li>Banana</li><li>Cherry</li>"`);
+  });
+
+  it('Should correctly render nested loops of elements', ({ container }) => {
+    function App() {
+      const matrix = [
+        [1, 2],
+        [3, 4],
+        [5, 6],
+      ];
+      return (
+        <for each={matrix}>
+          {row => (
+            <div>
+              <for each={row}>{cell => <span>{cell}</span>}</for>
+            </div>
+          )}
+        </for>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<div><span>1</span><span>2</span></div><div><span>3</span><span>4</span></div><div><span>5</span><span>6</span></div>"`
+    );
+  });
+
+  it('Should correctly render loops with complex data structures', ({ container }) => {
+    function App() {
+      const users = [
+        { id: 1, name: 'Alice', hobbies: ['reading', 'gaming'] },
+        { id: 2, name: 'Bob', hobbies: ['cycling', 'photography'] },
+      ];
+      return (
+        <for each={users}>
+          {user => (
+            <div>
+              <h2>{user.name}</h2>
+              <ul>
+                <for each={user.hobbies}>{hobby => <li>{hobby}</li>}</for>
+              </ul>
+            </div>
+          )}
+        </for>
+      );
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<div><h2>Alice</h2><ul><li>reading</li><li>gaming</li></ul></div><div><h2>Bob</h2><ul><li>cycling</li><li>photography</li></ul></div>"`
+    );
+  });
+
+  it('Should correctly render when for tag input is an array map', ({ container }) => {
+    function App() {
+      const numbers = [1, 2, 3, 4, 5];
+      return <for each={numbers.map(n => n * 2)}>{doubledNumber => <span>{doubledNumber}</span>}</for>;
+    }
+
+    render(App, container);
+    expect(container.innerHTML).toMatchInlineSnapshot(
+      `"<span>2</span><span>4</span><span>6</span><span>8</span><span>10</span>"`
+    );
+  });
 });
diff --git a/packages/inula-next/test/jsxSlice.test.tsx b/packages/inula-next/test/jsxSlice.test.tsx
index c5a6caee..bd0479ae 100644
--- a/packages/inula-next/test/jsxSlice.test.tsx
+++ b/packages/inula-next/test/jsxSlice.test.tsx
@@ -407,3 +407,277 @@ describe('JSX Element Usage in Various Contexts', () => {
     });
   });
 });
+
+describe('JSX Element Attributes', () => {
+  it('should correctly initialize attributes', ({ container }) => {
+    function App() {
+      return (
+        <div id="test" className="example">
+          Content
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div id="test" class="example">Content</div>');
+  });
+
+  it('should correctly update attributes', ({ container }) => {
+    function App() {
+      let className = 'initial';
+
+      function updateClass() {
+        className = 'updated';
+      }
+
+      return (
+        <>
+          <div className={className}>Content</div>
+          <button onClick={updateClass}>Update</button>
+        </>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div class="initial">Content</div><button>Update</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<div class="updated">Content</div><button>Update</button>');
+  });
+
+  it('should correctly render attributes dependent on variables', ({ container }) => {
+    function App() {
+      let className = 'initial';
+      let b = className;
+      function updateClass() {
+        className = 'updated';
+      }
+
+      return (
+        <>
+          <div className={b}>Content</div>
+          <button onClick={updateClass}>Update</button>
+        </>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div class="initial">Content</div><button>Update</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe('<div class="updated">Content</div><button>Update</button>');
+  });
+
+  it('should correctly render attributes with expressions', ({ container }) => {
+    function App() {
+      const count = 5;
+      return <div data-count={`Count is ${count}`}>Content</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div data-count="Count is 5">Content</div>');
+  });
+
+  it('should correctly render boolean attributes', ({ container }) => {
+    function App() {
+      const disabled = true;
+      return <button disabled={disabled}>Click me</button>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<button disabled="">Click me</button>');
+  });
+
+  it.fails('should correctly render attributes without values', ({ container }) => {
+    function App() {
+      const checked = true;
+      return <input type="checkbox" checked />;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<input type="checkbox" checked="">');
+  });
+
+  it.fails('should correctly spread multiple attributes', ({ container }) => {
+    function App() {
+      const props = {
+        id: 'test-id',
+        className: 'test-class',
+        'data-test': 'test-data',
+      };
+      return <div {...props}>Content</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div id="test-id" class="test-class" data-test="test-data">Content</div>');
+  });
+
+  it.fails('should correctly handle attribute spreading and individual props', ({ container }) => {
+    function App() {
+      const props = {
+        id: 'base-id',
+        className: 'base-class',
+      };
+      return (
+        <div {...props} id="override-id" data-extra="extra">
+          Content
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div id="override-id" class="base-class" data-extra="extra">Content</div>');
+  });
+});
+
+describe('JSX Element Inline Styles', () => {
+  it('should correctly apply inline styles to an element', ({ container }) => {
+    function App() {
+      return <div style={{ color: 'red', fontSize: '16px' }}>Styled content</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: red; font-size: 16px;">Styled content</div>');
+  });
+
+  it('should correctly apply multiple inline styles to an element', ({ container }) => {
+    function App() {
+      return <div style={{ color: 'blue', fontSize: '20px', fontWeight: 'bold', margin: '10px' }}>Multiple styles</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe(
+      '<div style="color: blue; font-size: 20px; font-weight: bold; margin: 10px;">Multiple styles</div>'
+    );
+  });
+
+  it('should correctly apply styles from a variable', ({ container }) => {
+    function App() {
+      const styleObj = { color: 'green', padding: '5px' };
+      return <div style={styleObj}>Variable style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: green; padding: 5px;">Variable style</div>');
+  });
+
+  it('should correctly update styles', ({ container }) => {
+    function App() {
+      let style = { color: 'purple' };
+
+      function updateStyle() {
+        style = { color: 'orange', fontSize: '24px' };
+      }
+
+      return (
+        <>
+          <div style={style}>Updatable style</div>
+          <button onClick={updateStyle}>Update</button>
+        </>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: purple;">Updatable style</div><button>Update</button>');
+
+    container.querySelector('button')?.click();
+    expect(container.innerHTML).toBe(
+      '<div style="color: orange; font-size: 24px;">Updatable style</div><button>Update</button>'
+    );
+  });
+
+  it('should correctly apply styles from an expression', ({ container }) => {
+    function App() {
+      const size = 18;
+      return <div style={{ fontSize: `${size}px`, lineHeight: `${size * 1.5}px` }}>Expression style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="font-size: 18px; line-height: 27px;">Expression style</div>');
+  });
+
+  it('should correctly merge style objects', ({ container }) => {
+    function App() {
+      const baseStyle = { color: 'red', fontSize: '16px' };
+      const additionalStyle = { fontSize: '20px', fontWeight: 'bold' };
+      return <div style={{ ...baseStyle, ...additionalStyle }}>Merged styles</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe(
+      '<div style="color: red; font-size: 20px; font-weight: bold;">Merged styles</div>'
+    );
+  });
+
+  it('should correctly apply styles from a function call', ({ container }) => {
+    function getStyles(color: string) {
+      return { color, border: `1px solid ${color}` };
+    }
+    function App() {
+      return <div style={getStyles('blue')}>Function style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: blue; border: 1px solid blue;">Function style</div>');
+  });
+
+  it('should correctly apply styles based on a condition', ({ container }) => {
+    function App() {
+      const isActive = true;
+      const style = isActive
+        ? { backgroundColor: 'green', color: 'white' }
+        : { backgroundColor: 'gray', color: 'black' };
+      return <div style={style}>Conditional style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="background-color: green; color: white;">Conditional style</div>');
+  });
+
+  it('should correctly apply styles based on an array of conditions', ({ container }) => {
+    function App() {
+      const conditions = [true, false, true];
+      const style = {
+        color: conditions[0] ? 'red' : 'blue',
+        fontWeight: conditions[1] ? 'bold' : 'normal',
+        fontSize: conditions[2] ? '20px' : '16px',
+      };
+      return <div style={style}>Array condition style</div>;
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe(
+      '<div style="color: red; font-weight: normal; font-size: 20px;">Array condition style</div>'
+    );
+  });
+
+  it('should correctly apply styles using ternary and binary expressions', ({ container }) => {
+    function App() {
+      const isPrimary = true;
+      const isLarge = true;
+      return (
+        <div
+          style={{
+            color: isPrimary ? 'blue' : 'gray',
+            fontSize: isLarge && '24px',
+          }}
+        >
+          Ternary and binary style
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: blue; font-size: 24px;">Ternary and binary style</div>');
+  });
+
+  it('should correctly apply styles using member expressions', ({ container }) => {
+    const theme = {
+      colors: {
+        primary: 'blue',
+        secondary: 'green',
+      },
+      sizes: {
+        small: '12px',
+        medium: '16px',
+        large: '20px',
+      },
+    };
+    function App() {
+      return (
+        <div
+          style={{
+            color: theme.colors.primary,
+            fontSize: theme.sizes.medium,
+          }}
+        >
+          Member expression style
+        </div>
+      );
+    }
+    render(App, container);
+    expect(container.innerHTML).toBe('<div style="color: blue; font-size: 16px;">Member expression style</div>');
+  });
+});
diff --git a/packages/inula-next/test/props.test.tsx b/packages/inula-next/test/props.test.tsx
index dc59bb60..87923919 100644
--- a/packages/inula-next/test/props.test.tsx
+++ b/packages/inula-next/test/props.test.tsx
@@ -136,3 +136,193 @@ describe('props', () => {
     });
   });
 });
+
+describe('extended prop tests', () => {
+  it('should correctly pass and render string props', ({ container }) => {
+    function Child({ text }) {
+      return <p>{text}</p>;
+    }
+
+    function App() {
+      return <Child text="Hello, world!" />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <p>
+            Hello, world!
+          </p>
+        </div>
+      `);
+  });
+
+  it('should correctly pass and render number props', ({ container }) => {
+    function Child({ number }) {
+      return <span>{number}</span>;
+    }
+
+    function App() {
+      return <Child number={42} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <span>
+            42
+          </span>
+        </div>
+      `);
+  });
+
+  it('should correctly pass and render boolean props', ({ container }) => {
+    function Child({ isActive }) {
+      return <div>{isActive ? 'Active' : 'Inactive'}</div>;
+    }
+
+    function App() {
+      return <Child isActive={true} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Active
+          </div>
+        </div>
+      `);
+  });
+
+  it.fails('should correctly pass and render array props', ({ container }) => {
+    function Child({ items }) {
+      return (
+        <ul>
+          {items.map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      );
+    }
+
+    function App() {
+      return <Child items={['Apple', 'Banana', 'Cherry']} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <ul>
+            <li>Apple</li>
+            <li>Banana</li>
+            <li>Cherry</li>
+          </ul>
+        </div>
+      `);
+  });
+
+  it.fails('should correctly pass and render object props', ({ container }) => {
+    function Child({ person }) {
+      return (
+        <div>
+          {person.name}, {person.age}
+        </div>
+      );
+    }
+
+    function App() {
+      return <Child person={{ name: 'Alice', age: 30 }} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Alice, 30
+          </div>
+        </div>
+      `);
+  });
+
+  it('should correctly handle default prop values', ({ container }) => {
+    function Child({ message = 'Default message' }) {
+      return <h2>{message}</h2>;
+    }
+
+    function App() {
+      return <Child />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <h2>
+            Default message
+          </h2>
+        </div>
+      `);
+  });
+
+  it.fails('should correctly spread props', ({ container }) => {
+    function Child(props) {
+      return (
+        <div>
+          {props.a} {props.b} {props.c}
+        </div>
+      );
+    }
+
+    function App() {
+      const extraProps = { b: 'World', c: '!' };
+      return <Child a="Hello" {...extraProps} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            Hello World !
+          </div>
+        </div>
+      `);
+  });
+
+  it.fails('should handle props without values', ({ container }) => {
+    function Child({ isDisabled }) {
+      return <button disabled={isDisabled}>Click me</button>;
+    }
+
+    function App() {
+      return <Child isDisabled />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <button disabled>
+            Click me
+          </button>
+        </div>
+      `);
+  });
+
+  it('should handle props with expressions', ({ container }) => {
+    function Child({ result }) {
+      return <div>{result}</div>;
+    }
+
+    function App() {
+      return <Child result={1 + 2 * 3} />;
+    }
+
+    render(App, container);
+    expect(container).toMatchInlineSnapshot(`
+        <div>
+          <div>
+            7
+          </div>
+        </div>
+      `);
+  });
+});
diff --git a/packages/inula-next/test/rendering.test.tsx b/packages/inula-next/test/rendering.test.tsx
index 68149c34..2dc50d42 100644
--- a/packages/inula-next/test/rendering.test.tsx
+++ b/packages/inula-next/test/rendering.test.tsx
@@ -116,6 +116,26 @@ describe('rendering', () => {
       expect(h1.style.color).toBe('red');
     });
 
+    it.fails('should apply styles number correctly', ({ container }) => {
+      function App() {
+        return <h1 style={{ fontSize: 12 }}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.fontSize).toBe('12px');
+    });
+
+    it('should apply styles empty correctly', ({ container }) => {
+      function App() {
+        return <h1 style={{ fontSize: '' }}>hello world!!!</h1>;
+      }
+
+      render(App, container);
+      const h1 = container.querySelector('h1');
+      expect(h1.style.fontSize).toBe('');
+    });
+
     it('should apply multiple styles correctly', ({ container }) => {
       function App() {
         return <h1 style={{ color: 'red', fontSize: '20px' }}>hello world!!!</h1>;
-- 
Gitee