From cd650180d22950a67183c583645a624e3024141e 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: Thu, 18 Jul 2024 09:22:17 +0800
Subject: [PATCH] feat: add examples and tests

---
 demos/v2/src/example/attributeBinding.jsx     | 30 ++++++++
 demos/v2/src/example/condition.jsx            | 44 +++++++++++
 demos/v2/src/example/formBinding.jsx          | 75 +++++++++++++++++++
 demos/v2/src/example/getData.jsx              | 32 ++++++++
 demos/v2/src/example/helloWorld.jsx           | 21 ++++++
 demos/v2/src/example/loop.jsx                 | 26 +++++++
 demos/v2/src/example/simpleComponent.jsx      | 31 ++++++++
 demos/v2/src/example/userInput.jsx            | 31 ++++++++
 .../inula-next/test/exampleFails.test.tsx     | 59 +++++++++++++++
 9 files changed, 349 insertions(+)
 create mode 100644 demos/v2/src/example/attributeBinding.jsx
 create mode 100644 demos/v2/src/example/condition.jsx
 create mode 100644 demos/v2/src/example/formBinding.jsx
 create mode 100644 demos/v2/src/example/getData.jsx
 create mode 100644 demos/v2/src/example/helloWorld.jsx
 create mode 100644 demos/v2/src/example/loop.jsx
 create mode 100644 demos/v2/src/example/simpleComponent.jsx
 create mode 100644 demos/v2/src/example/userInput.jsx
 create mode 100644 packages/inula-next/test/exampleFails.test.tsx

diff --git a/demos/v2/src/example/attributeBinding.jsx b/demos/v2/src/example/attributeBinding.jsx
new file mode 100644
index 00000000..d4aec129
--- /dev/null
+++ b/demos/v2/src/example/attributeBinding.jsx
@@ -0,0 +1,30 @@
+/*
+ * 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 { render } from '@openinula/next';
+function AttributeBinding() {
+  let color = 'green';
+  function changeColor() {
+    color = color === 'red' ? 'green' : 'red';
+  }
+
+  return (
+    <h1 style={{ color }} onClick={changeColor}>
+      Click me to change color.
+    </h1>
+  );
+}
+
+render(AttributeBinding, document.getElementById('app'));
diff --git a/demos/v2/src/example/condition.jsx b/demos/v2/src/example/condition.jsx
new file mode 100644
index 00000000..df6a785b
--- /dev/null
+++ b/demos/v2/src/example/condition.jsx
@@ -0,0 +1,44 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+function TrafficLight() {
+  let lightIndex = 0;
+
+  let light = lightIndex ? 'green' : 'red';
+
+  function nextLight() {
+    lightIndex = (lightIndex + 1) % 2;
+  }
+
+  return (
+    <>
+      <button onClick={nextLight}>Next light</button>
+      <p>Light is: {light}</p>
+      <p>
+        You must
+        <if cond={light === 'red'}>
+          <span>STOP</span>
+        </if>
+        <else-if cond={light === 'green'}>
+          <span>GO</span>
+        </else-if>
+      </p>
+    </>
+  );
+}
+
+render(TrafficLight, document.getElementById('app'));
diff --git a/demos/v2/src/example/formBinding.jsx b/demos/v2/src/example/formBinding.jsx
new file mode 100644
index 00000000..e897c16e
--- /dev/null
+++ b/demos/v2/src/example/formBinding.jsx
@@ -0,0 +1,75 @@
+/*
+ * 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 { render } from '@openinula/next';
+function Form() {
+  let text = 'a';
+  let checked = true;
+  let picked = 'One';
+  let selected = 'A';
+  let multiSelected = [];
+  function updateValue(e) {
+    text = e.target.value;
+  }
+  function handleCheckboxChange(e) {
+    checked = e.target.checked;
+  }
+  function handleRadioChange(e) {
+    picked = e.target.value;
+  }
+  function handleSelectChange(e) {
+    selected = e.target.value;
+  }
+  function handleMultiSelectChange(e) {
+    multiSelected = Array.from(e.target.selectedOptions).map(option => option.value);
+  }
+  return (
+    <>
+      <h2>Text Input</h2>
+      <input value={text} onInput={updateValue} />
+      <p>{text}</p>
+
+      <h2>Checkbox</h2>
+      <input id="checkbox" type="checkbox" checked={checked} onChange={handleCheckboxChange} />
+      <label for="checkbox"> Checked: {checked + ''}</label>
+
+      <h2>Radio</h2>
+      <input type="radio" id="one" value="One" name="num" checked={picked === 'One'} onChange={handleRadioChange} />
+      <label for="one">One</label>
+      <br />
+      <input type="radio" id="two" value="Two" name="num" checked={picked === 'Two'} onChange={handleRadioChange} />
+      <label for="two">Two</label>
+      <p>Picked: {picked}</p>
+
+      <h2>Select</h2>
+      <select id="select" value={selected} onChange={handleSelectChange} style={{ width: '100px' }}>
+        <option value="A">A</option>
+        <option value="B">B</option>
+        <option value="C">C</option>
+      </select>
+      <p>Selected: {selected}</p>
+
+      <h2>Multi Select</h2>
+      <select multiple style={{ width: '100px' }} value={multiSelected} onChange={handleMultiSelectChange}>
+        <option value="A">A</option>
+        <option value="B">B</option>
+        <option value="C">C</option>
+      </select>
+      <p>Selected: {multiSelected}</p>
+    </>
+  );
+}
+
+render(Form, document.getElementById('app'));
diff --git a/demos/v2/src/example/getData.jsx b/demos/v2/src/example/getData.jsx
new file mode 100644
index 00000000..08a44c29
--- /dev/null
+++ b/demos/v2/src/example/getData.jsx
@@ -0,0 +1,32 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+const API_URL = 'https://jsonplaceholder.typicode.com/users';
+const users = await (await fetch(API_URL)).json();
+function List({ arr }) {
+  return (
+    <ul>
+      <for each={arr}>{item => <li>{item.name}</li>}</for>
+    </ul>
+  );
+}
+
+function App() {
+  return <List arr={users} />;
+}
+
+render(App, document.getElementById('app'));
diff --git a/demos/v2/src/example/helloWorld.jsx b/demos/v2/src/example/helloWorld.jsx
new file mode 100644
index 00000000..e318d838
--- /dev/null
+++ b/demos/v2/src/example/helloWorld.jsx
@@ -0,0 +1,21 @@
+/*
+ * 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 { render } from '@openinula/next';
+function HelloWorld() {
+  return <h1>Hello World!</h1>;
+}
+
+render(HelloWorld, document.getElementById('app'));
diff --git a/demos/v2/src/example/loop.jsx b/demos/v2/src/example/loop.jsx
new file mode 100644
index 00000000..caefc1d3
--- /dev/null
+++ b/demos/v2/src/example/loop.jsx
@@ -0,0 +1,26 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+function Colors() {
+  const colors = ['red', 'green', 'blue'];
+  return (
+    <ul>
+      <for each={colors}>{color => <li>{color}</li>}</for>
+    </ul>
+  );
+}
+render(Colors, document.getElementById('app'));
diff --git a/demos/v2/src/example/simpleComponent.jsx b/demos/v2/src/example/simpleComponent.jsx
new file mode 100644
index 00000000..2cac4c26
--- /dev/null
+++ b/demos/v2/src/example/simpleComponent.jsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { render } from '@openinula/next';
+
+let fruits = ['apple', 'banana', 'pear'];
+function List({ arr }) {
+  return (
+    <ul>
+      <for each={arr}>{item => <li>{item}</li>}</for>
+    </ul>
+  );
+}
+
+function App() {
+  return <List arr={fruits} />;
+}
+
+render(App, document.getElementById('app'));
diff --git a/demos/v2/src/example/userInput.jsx b/demos/v2/src/example/userInput.jsx
new file mode 100644
index 00000000..b18c6961
--- /dev/null
+++ b/demos/v2/src/example/userInput.jsx
@@ -0,0 +1,31 @@
+/*
+ * 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 { render } from '@openinula/next';
+function UserInput() {
+  let count = 0;
+  function incrementCount() {
+    count = count + 1;
+  }
+
+  return (
+    <>
+      <h1>{count}</h1>
+      <button onClick={incrementCount}>Add 1</button>
+    </>
+  );
+}
+
+render(UserInput, document.getElementById('app'));
diff --git a/packages/inula-next/test/exampleFails.test.tsx b/packages/inula-next/test/exampleFails.test.tsx
new file mode 100644
index 00000000..64a79aba
--- /dev/null
+++ b/packages/inula-next/test/exampleFails.test.tsx
@@ -0,0 +1,59 @@
+/*
+ * 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, View } from '../src';
+
+vi.mock('../src/scheduler', async () => {
+  return {
+    schedule: (task: () => void) => {
+      task();
+    },
+  };
+});
+
+describe('example failures', () => {
+  it.fails('should support "++"', ({ container }) => {
+    function Num() {
+      let num = 0;
+      num++; //num = num + 1;has no error
+      return <p>{num}</p>;
+    }
+  });
+
+  it.fails('state shlould change when attribute is calculated by index', ({ container }) => {
+    let set: (num: number) => void;
+    function TrafficLight() {
+      const TRAFFIC_LIGHTS = ['red', 'green'];
+      let lightIndex = 0;
+
+      let light = TRAFFIC_LIGHTS[lightIndex]; // let light = lightIndex ? 'green' : 'red';can change state
+      set = (val: number) => {
+        lightIndex = val;
+      };
+
+      return (
+        <>
+          <p>Light is: {light}</p>
+        </>
+      );
+    }
+    render(TrafficLight, container);
+    expect(container.innerHTML).toBe('<p>Light is: red</p>');
+    set(1);
+    expect(container.innerHTML).toBe('<p>Light is: green</p>');
+  });
+});
-- 
Gitee