Match-id-4e7ac81081326560d360fd7bd2cdc4ac742c8989

scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js

@@ -7,15 +7,15 @@ describe('useCallback Hook Test', () => {
     const App = (props) => {
       const [num, setNum] = useState(0);
       const NumUseCallback = useCallback(() => {
-        setNum(num + props.text)
+        setNum(num + props.text);
       }, [props]);
       return (
         <>
           <p>{num}</p>
           <button onClick={NumUseCallback} />
         </>
-      )
+      );
-    }
+    };
     Horizon.render(<App text={1} />, container);
     expect(container.querySelector('p').innerHTML).toBe('0');
     // 点击按钮触发num加1

scripts/__tests__/ComponentTest/HookTest/UseContext.test.js

@@ -21,7 +21,7 @@ describe('useContext Hook Test', () => {
     const TestFunction = () => {
       const context = useContext(SystemLanguageContext);
       return <p id="p">{context.type}</p>;
-    }
+    };
     let setValue;
     const App = () => {
       const [value, _setValue] = useState(LanguageTypes.JAVA);
@@ -32,8 +32,8 @@ describe('useContext Hook Test', () => {
             <TestFunction />
           </SystemLanguageProvider>
         </div>
-      )
+      );
-    }
+    };
     Horizon.render(<TestFunction />, container);
     // 测试当Provider未提供时，获取到的默认值'JavaScript'。
     expect(container.querySelector('p').innerHTML).toBe('JavaScript');

scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js

@@ -23,8 +23,8 @@ describe('useEffect Hook Test', () => {
           <p style={{ display: 'block' }} id="p">{num}</p>
           <button onClick={() => setNum(num + 1)} />
         </>
-      )
+      );
-    }
+    };
     Horizon.render(<App />, container);
     expect(document.getElementById('p').style.display).toBe('block');
     // 点击按钮触发num加1
@@ -37,7 +37,7 @@ describe('useEffect Hook Test', () => {
   it('act方法', () => {
     const App = () => {
       return <Text text={'op'} />;
-    }
+    };
 
     act(() => {
       Horizon.render(<App />, container, () => {
@@ -61,13 +61,13 @@ describe('useEffect Hook Test', () => {
   it('兄弟节点被删除，useEffect依然正常', () => {
     const App = () => {
       return <Text text="App" />;
-    }
+    };
     const NewApp = () => {
       useEffect(() => {
         LogUtils.log(`NewApp effect`);
       }, []);
       return <Text text="NewApp" />;
-    }
+    };
     const na = <NewApp />;
     // <App />必须设置key值，否则在diff的时候na会被视为不同组件
     Horizon.render([<App key="app" />, na], container);
@@ -94,13 +94,13 @@ describe('useEffect Hook Test', () => {
         LogUtils.log('App Layout effect ' + num);
       });
       return <Text text="App" />;
-    }
+    };
     const NewApp = () => {
       useEffect(() => {
         LogUtils.log(`NewApp effect`);
       }, []);
       return <Text text="NewApp" />;
-    }
+    };
     // <App />必须设置key值，否则在diff的时候na会被视为不同组件
     Horizon.render([<App key="app" />, <NewApp />], container);
     expect(LogUtils.getAndClear()).toEqual([
@@ -123,13 +123,13 @@ describe('useEffect Hook Test', () => {
         Horizon.render(<Text text="NewContainer" />, newContainer);
       });
       return <Text text="App" />;
-    }
+    };
     const NewApp = () => {
       useEffect(() => {
         LogUtils.log(`NewApp effect`);
       }, []);
       return <Text text="NewApp" />;
-    }
+    };
     // <App />必须设置key值，否则在diff的时候na会被视为不同组件
     Horizon.render([<App key="app" />, <NewApp />], container);
     expect(LogUtils.getAndClear()).toEqual([
@@ -149,17 +149,17 @@ describe('useEffect Hook Test', () => {
         LogUtils.log(`First effect [${props.num}]`);
       });
       return <Text text={'num: ' + props.num} />;
-    }
+    };
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
       expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
       expect(container.textContent).toEqual('num: 0');
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual(['First effect [0]']);
     act(() => {
       Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
 
-    })
+    });
     // 此时异步执行，act执行完后会执行新render的useEffect
     expect(LogUtils.getAndClear()).toEqual([
       'num: 1',
@@ -178,16 +178,16 @@ describe('useEffect Hook Test', () => {
         LogUtils.log(`Second effect [${props.num}]`);
       });
       return <Text text={'num: ' + props.num} />;
-    }
+    };
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
       expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
       expect(container.textContent).toEqual('num: 0');
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'Second effect [0]']);
     act(() => {
       Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
-    })
+    });
     // 第二次render时异步执行，act保证所有效果都已更新，所以先常规记录日志
     // 然后记录useEffect的日志
     expect(LogUtils.getAndClear()).toEqual([
@@ -226,7 +226,7 @@ describe('useEffect Hook Test', () => {
         };
       }, [props.word]);
       return <Text text={'num: ' + props.num + ',word: ' + props.word} />;
-    }
+    };
 
     act(() => {
       Horizon.render(<App num={0} word={'App'} />, container, () => LogUtils.log('callback effect'));
@@ -236,7 +236,7 @@ describe('useEffect Hook Test', () => {
         'word Layouteffect [App]',
         'callback effect'
       ]);
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual([
       'num effect [0]',
       'word effect [App]',
@@ -279,7 +279,7 @@ describe('useEffect Hook Test', () => {
         };
       });
       return <Text text={'num: ' + props.num} />;
-    }
+    };
 
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
@@ -288,7 +288,7 @@ describe('useEffect Hook Test', () => {
         'callback effect'
       ]);
       expect(container.textContent).toEqual('num: 0');
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual([
       'num effect [0]',
     ]);
@@ -326,7 +326,7 @@ describe('useEffect Hook Test', () => {
         };
       }, []);
       return <Text text={'num: ' + props.num} />;
-    }
+    };
 
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
@@ -335,7 +335,7 @@ describe('useEffect Hook Test', () => {
         'callback effect'
       ]);
       expect(container.textContent).toEqual('num: 0');
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual([
       'num effect [0]',
     ]);
@@ -377,7 +377,7 @@ describe('useEffect Hook Test', () => {
         };
       }, []);
       return <Text text={'num: ' + num} />;
-    }
+    };
 
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
@@ -386,7 +386,7 @@ describe('useEffect Hook Test', () => {
         'num Layouteffect [0]',
         'callback effect'
       ]);
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual([
       'num effect [0]',
     ]);
@@ -411,7 +411,7 @@ describe('useEffect Hook Test', () => {
         setNum(1);
       }, []);
       return <Text text={'Num: ' + num} />;
-    }
+    };
 
     Horizon.render(<App />, container, () => LogUtils.log('App callback effect'));
     expect(LogUtils.getAndClear()).toEqual(['Num: 0', 'App callback effect']);
@@ -441,7 +441,7 @@ describe('useEffect Hook Test', () => {
         };
       });
       return <Text text={num} />;
-    })
+    });
     act(() => {
       Horizon.render(<App />, container, () => LogUtils.log('callback effect'));
       expect(LogUtils.getAndClear()).toEqual([
@@ -493,7 +493,7 @@ describe('useEffect Hook Test', () => {
         };
       });
       return <Text text={props.num} />;
-    }, compare)
+    }, compare);
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
       expect(LogUtils.getAndClear()).toEqual([
@@ -546,7 +546,7 @@ describe('useEffect Hook Test', () => {
         };
       });
       return <Text text={'Number: ' + props.num} />;
-    }
+    };
     act(() => {
       Horizon.render(<App num={0} />, container, () =>
         LogUtils.log('App callback effect'),
@@ -587,7 +587,7 @@ describe('useEffect Hook Test', () => {
         }, []);
       }
       return <Text text={`Number: ${props.num}`} />;
-    }
+    };
 
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('num effect'));
@@ -614,7 +614,7 @@ describe('useEffect Hook Test', () => {
         _setNum(1);
       }, []);
       return <Text text={`Number: ${num}`} />;
-    }
+    };
 
     Horizon.render(<App />, container, () => LogUtils.log('num effect'));
     expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
@@ -643,7 +643,7 @@ describe('useEffect Hook Test', () => {
         };
       }, []);
       return num;
-    }
+    };
 
     act(() => {
       Horizon.render(<App />, container, () => LogUtils.log('num effect'));
@@ -670,17 +670,17 @@ describe('useEffect Hook Test', () => {
         };
       }, []);
       return <AppChild ref={appRef} />;
-    }
+    };
 
     let AppChild = (props, ref) => {
-      LogUtils.log('AppChild')
+      LogUtils.log('AppChild');
       const [num, setNum] = useState(0);
       useEffect(() => {
         LogUtils.log('Child effect');
         ref.current = setNum;
       }, []);
       return num;
-    }
+    };
     AppChild = forwardRef(AppChild);
 
     act(() => {
@@ -705,10 +705,10 @@ describe('useEffect Hook Test', () => {
       LogUtils.log('App');
       const [num, setNum] = useState(0);
       return <AppChild num={num} setNum={setNum} />;
-    }
+    };
 
     let AppChild = (props) => {
-      LogUtils.log('AppChild')
+      LogUtils.log('AppChild');
       useEffect(() => {
         LogUtils.log('Child effect');
         return () => {
@@ -717,7 +717,7 @@ describe('useEffect Hook Test', () => {
         };
       }, []);
       return props.num;
-    }
+    };
 
     act(() => {
       Horizon.render(<App />, container, () => LogUtils.log('num effect'));
@@ -735,4 +735,4 @@ describe('useEffect Hook Test', () => {
     // 销毁时执行 props.setNum(1);不会报错
     expect(LogUtils.getAndClear()).toEqual(['Child effect destroy']);
   });
-})
+});

scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js

@@ -17,12 +17,12 @@ describe('useImperativeHandle Hook Test', () => {
       const [num, setNum] = useState(0);
       useImperativeHandle(ref, () => ({ num, setNum }), []);
       return <p>{num}</p>;
-    }
+    };
     let App1 = (props, ref) => {
       const [num1, setNum1] = useState(0);
       useImperativeHandle(ref, () => ({ num1, setNum1 }), [num1]);
       return <p>{num1}</p>;
-    }
+    };
 
     App = forwardRef(App);
     App1 = forwardRef(App1);
@@ -53,12 +53,12 @@ describe('useImperativeHandle Hook Test', () => {
       const [num, setNum] = useState(0);
       useImperativeHandle(ref, () => ({ num, setNum }));
       return <Text text={num} />;
-    }
+    };
     let App1 = (props, ref) => {
       const [num1, setNum1] = useState(0);
       useImperativeHandle(ref, () => ({ num1, setNum1 }), []);
       return <Text text={num1} />;
-    }
+    };
 
     App = forwardRef(App);
     App1 = forwardRef(App1);

scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js

@@ -21,8 +21,8 @@ describe('useLayoutEffect Hook Test', () => {
           <p style={{ display: 'block' }} id="p">{num}</p>
           <button onClick={() => setNum(num + 1)} />
         </>
-      )
+      );
-    }
+    };
     Horizon.render(<App />, container);
     expect(document.getElementById('p').style.display).toBe('none');
     container.querySelector('button').click();
@@ -35,7 +35,7 @@ describe('useLayoutEffect Hook Test', () => {
         LogUtils.log('LayoutEffect');
       });
       return <Text text={props.num} />;
-    }
+    };
     Horizon.render(<App num={1} />, container, () => LogUtils.log('Sync effect'));
     expect(LogUtils.getAndClear()).toEqual([
       1,
@@ -69,7 +69,7 @@ describe('useLayoutEffect Hook Test', () => {
         };
       }, [props.num]);
       return <Text text={'num: ' + props.num} />;
-    }
+    };
 
     act(() => {
       Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
@@ -79,12 +79,12 @@ describe('useLayoutEffect Hook Test', () => {
         'callback effect'
       ]);
       expect(container.textContent).toBe('num: 0');
-    })
+    });
 
     // 更新
     act(() => {
       Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual([
       // 异步effect
       'num effect [0]',
@@ -102,7 +102,7 @@ describe('useLayoutEffect Hook Test', () => {
 
     act(() => {
       Horizon.render(null, container, () => LogUtils.log('callback effect'));
-    })
+    });
     expect(LogUtils.getAndClear()).toEqual([
       // 同步Layouteffect销毁
       'num [1] Layouteffect destroy',

scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js

@@ -14,27 +14,27 @@ describe('useMemo Hook Test', () => {
       const text = useMemo(() => {
         setNum(num + 1);
         return memoDependent;
-      }, [memoDependent])
+      }, [memoDependent]);
       return (
         <>
           <p>{text}</p>
           <p id="p">{num}</p>
         </>
       );
-    }
+    };
     Horizon.render(<App words="App" />, container);
     expect(container.querySelector('p').innerHTML).toBe('App');
     expect(container.querySelector('#p').innerHTML).toBe('1');
     // 修改useMemo的依赖项，num会加一，text会改变。
-    setMemo('Apps')
+    setMemo('Apps');
     expect(container.querySelector('p').innerHTML).toBe('Apps');
     expect(container.querySelector('#p').innerHTML).toBe('2');
     // useMemo的依赖项不变，num不会加一，text不会改变。
-    setMemo('Apps')
+    setMemo('Apps');
     expect(container.querySelector('p').innerHTML).toBe('Apps');
     expect(container.querySelector('#p').innerHTML).toBe('2');
     // 修改useMemo的依赖项，num会加一，text会改变。
-    setMemo('App')
+    setMemo('App');
     expect(container.querySelector('p').innerHTML).toBe('App');
     expect(container.querySelector('#p').innerHTML).toBe('3');
   });
@@ -46,7 +46,7 @@ describe('useMemo Hook Test', () => {
         return props._num + 1;
       }, [props._num]);
       return <Text text={num} />;
-    }
+    };
     Horizon.render(<App _num={0} />, container);
     expect(LogUtils.getAndClear()).toEqual([
       0,
@@ -78,17 +78,17 @@ describe('useMemo Hook Test', () => {
     const App = (props) => {
       const num = useMemo(props._num);
       return <Text text={num} />;
-    }
+    };
 
     const num1 = () => {
       LogUtils.log('num 1');
       return 1;
-    }
+    };
 
     const num2 = () => {
       LogUtils.log('num 2');
       return 2;
-    }
+    };
 
     Horizon.render(<App _num={num1} />, container);
     expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);

scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js

@@ -34,7 +34,7 @@ describe('useReducer Hook Test', () => {
               price: 88
             };
         }
-      }
+      };
       const [car, carDispatch] = useReducer(carReducer, intlCar);
       dispatch = carDispatch;
       return (
@@ -42,8 +42,8 @@ describe('useReducer Hook Test', () => {
           <p>{car.logo}</p>
           <p id={'senP'}>{car.price}</p>
         </div>
-      )
+      );
-    }
+    };
     Horizon.render(<App />, container);
     expect(container.querySelector('p').innerHTML).toBe('');
     expect(container.querySelector('#senP').innerHTML).toBe('0');

scripts/__tests__/ComponentTest/HookTest/UseRef.test.js

@@ -18,8 +18,8 @@ describe('useRef Hook Test', () => {
           <p id="sp">{ref.current}</p>
           <button onClick={() => setNum(num + 1)} />
         </>
-      )
+      );
-    }
+    };
     Horizon.render(<App />, container);
     expect(container.querySelector('p').innerHTML).toBe('1');
     expect(container.querySelector('#sp').innerHTML).toBe('1');
@@ -41,9 +41,8 @@ describe('useRef Hook Test', () => {
           </button>
           <Text text={ref.current} />;
         </>
-      )
+      );
-
+    };
-    }
     Horizon.render(<App />, container);
     expect(LogUtils.getAndClear()).toEqual([1]);
     expect(container.querySelector('p').innerHTML).toBe('1');

scripts/__tests__/ComponentTest/HookTest/UseState.test.js

@@ -19,8 +19,8 @@ describe('useState Hook Test', () => {
           <p>{num}</p>
           <button onClick={() => setNum(num + 1)} />
         </>
-      )
+      );
-    }
+    };
     Horizon.render(<App />, container);
     expect(container.querySelector('p').innerHTML).toBe('0');
     // 点击按钮触发num加1
@@ -42,7 +42,7 @@ describe('useState Hook Test', () => {
           {num}{count}
         </p>
       );
-    }
+    };
     Horizon.render(<App />, container);
     expect(container.querySelector('p').innerHTML).toBe('00');
     container.querySelector('p').click();
@@ -64,7 +64,7 @@ describe('useState Hook Test', () => {
           {num}
         </p>
       );
-    }
+    };
     Horizon.render(<App />, container);
     expect(container.querySelector('p').innerHTML).toBe('0');
     container.querySelector('p').click();
@@ -79,7 +79,7 @@ describe('useState Hook Test', () => {
       const [num, _setNum] = useState(0);
       setNum = _setNum;
       return <Text text={num} />;
-    }
+    };
     Horizon.render(<App />, container);
     expect(container.querySelector('p').innerHTML).toBe('0');
     expect(LogUtils.getAndClear()).toEqual([0]);
@@ -93,12 +93,12 @@ describe('useState Hook Test', () => {
     const App = forwardRef((props, ref) => {
       const [num, setNum] = useState(() => {
         LogUtils.log(props.initNum);
-        return props.initNum
+        return props.initNum;
       });
-      useImperativeHandle(ref, () => ({ setNum }))
+      useImperativeHandle(ref, () => ({ setNum }));
       return <p>{num}</p>;
 
-    })
+    });
     const ref = Horizon.createRef(null);
     Horizon.render(<App initNum={1} ref={ref} />, container);
     expect(LogUtils.getAndClear()).toEqual([1]);
@@ -116,7 +116,7 @@ describe('useState Hook Test', () => {
       const [num, _setNum] = useState(0);
       setNum = _setNum;
       return <Text text={num} />;
-    })
+    });
     Horizon.render(<App />, container);
     expect(LogUtils.getAndClear()).toEqual([0]);
     expect(container.querySelector('p').innerHTML).toBe('0');
@@ -125,13 +125,12 @@ describe('useState Hook Test', () => {
     expect(LogUtils.getAndClear()).toEqual([]);
     expect(container.querySelector('p').innerHTML).toBe('0');
     // 会重新渲染
-    setNum(1)
+    setNum(1);
     expect(LogUtils.getAndClear()).toEqual([1]);
     expect(container.querySelector('p').innerHTML).toBe('1');
   });
 
   it('卸载useState', () => {
-    // let updateA;
     let setNum;
     let setCount;
 
@@ -149,7 +148,7 @@ describe('useState Hook Test', () => {
       }
 
       return <Text text={`Number: ${num}, Count: ${count}`} />;
-    }
+    };
 
     Horizon.render(<App hasCount={true} />, container);
     expect(LogUtils.getAndClear()).toEqual(['Number: 0, Count: 0']);
@@ -161,10 +160,9 @@ describe('useState Hook Test', () => {
     expect(LogUtils.getAndClear()).toEqual(['Number: 1, Count: 2']);
     expect(container.textContent).toBe('Number: 1, Count: 2');
 
+    jest.spyOn(console, 'error').mockImplementation();
     expect(() => {
       Horizon.render(<App hasCount={false} />, container);
-    }).toThrow(
+    }).toThrow('Hooks are less than expected, please check whether the hook is written in the condition.');
-      'Hooks are less than expected, please check whether the hook is written in the condition.',
-    );
   });
 });

scripts/__tests__/DomTest/Attribute.test.js

@@ -0,0 +1,64 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+
+describe('Dom Attribute', () => {
+    it('属性值为null或undefined时，不会设置此属性', () => {
+        Horizon.render(<div id="div" />, container);
+        expect(container.querySelector('div').getAttribute('id')).toBe('div');
+        Horizon.render(<div id={null} />, container);
+        expect(container.querySelector('div').hasAttribute('id')).toBe(false);
+        Horizon.render(<div id={undefined} />, container);
+        expect(container.querySelector('div').hasAttribute('id')).toBe(false);
+    });
+
+    it('可以设置未知的属性', () => {
+        Horizon.render(<div abcd="abcd" />, container);
+        expect(container.querySelector('div').hasAttribute('abcd')).toBe(true);
+        expect(container.querySelector('div').getAttribute('abcd')).toBe('abcd');
+    });
+
+    it('未知属性的值为null或undefined时，不会设置此属性', () => {
+        Horizon.render(<div abcd={null} />, container);
+        expect(container.querySelector('div').hasAttribute('abcd')).toBe(false);
+        Horizon.render(<div abcd={undefined} />, container);
+        expect(container.querySelector('div').hasAttribute('abcd')).toBe(false);
+    });
+
+    it('未知属性的值为数字时，属性值会转为字符串', () => {
+        Horizon.render(<div abcd={0} />, container);
+        expect(container.querySelector('div').getAttribute('abcd')).toBe('0');
+        Horizon.render(<div abcd={-3} />, container);
+        expect(container.querySelector('div').getAttribute('abcd')).toBe('-3');
+        Horizon.render(<div abcd={123.45} />, container);
+        expect(container.querySelector('div').getAttribute('abcd')).toBe('123.45');
+    });
+
+    it('访问节点的标准属性时可以拿到属性值，访问节点的非标准属性时会得到undefined', () => {
+        Horizon.render(<div id={'div'} abcd={0} />, container);
+        expect(container.querySelector('div').id).toBe('div');
+        expect(container.querySelector('div').abcd).toBe(undefined);
+    });
+
+    it('特性方法', () => {
+        Horizon.render(<div id={'div'} abcd={0} />, container);
+        expect(container.querySelector('div').hasAttribute('abcd')).toBe(true);
+        expect(container.querySelector('div').getAttribute('abcd')).toBe('0');
+        container.querySelector('div').setAttribute('abcd', 4);
+        expect(container.querySelector('div').getAttribute('abcd')).toBe('4');
+        container.querySelector('div').removeAttribute('abcd');
+        expect(container.querySelector('div').hasAttribute('abcd')).toBe(false);
+    });
+
+    it('特性大小写不敏感', () => {
+        Horizon.render(<div id={'div'} abcd={0} />, container);
+        expect(container.querySelector('div').hasAttribute('abcd')).toBe(true);
+        expect(container.querySelector('div').hasAttribute('ABCD')).toBe(true);
+        expect(container.querySelector('div').getAttribute('abcd')).toBe('0');
+        expect(container.querySelector('div').getAttribute('ABCD')).toBe('0');
+    });
+
+    it('使用 data- 开头的特性时，会映射到DOM的dataset属性且中划线格式会变成驼峰格式', () => {
+        Horizon.render(<div />, container);
+        container.querySelector('div').setAttribute('data-first-name', 'Tom');
+        expect(container.querySelector('div').dataset.firstName).toBe('Tom');
+    });
+});

scripts/__tests__/DomTest/DomInput.test.js

@@ -0,0 +1,428 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import * as Horizon from '@cloudsop/horizon/index.ts';
+import * as LogUtils from '../jest/logUtils';
+
+describe('Dom Input', () => {
+  const { act } = Horizon;
+
+  describe('type checkbox', () => {
+    it('没有设置checked属性时，控制台不会报错', () => {
+      expect(() =>
+        Horizon.render(<input type='checkbox' value={false} />, container),
+      ).not.toThrow();
+    });
+
+    it('checked属性为undefined或null时且没有onChange属性或没有readOnly={true}，控制台不会报错', () => {
+      expect(() =>
+        Horizon.render(<input type='checkbox' checked={undefined} />, container),
+      ).not.toThrow();
+      expect(() =>
+        Horizon.render(<input type='checkbox' checked={null} />, container),
+      ).not.toThrow();
+    });
+
+    it('checked属性受控时无法更改', () => {
+      Horizon.render(<input type='checkbox' checked={true} onChange={() => {
+        LogUtils.log('checkbox click');
+      }} />, container);
+      container.querySelector('input').click();
+      // 点击复选框不会改变checked的值
+      expect(LogUtils.getAndClear()).toEqual(['checkbox click']);
+      expect(container.querySelector('input').checked).toBe(true);
+    });
+
+    it('复选框的value属性值可以改变', () => {
+      Horizon.render(
+        <input type='checkbox' value='' onChange={() => {
+          LogUtils.log('checkbox click');
+        }} />,
+        container,
+      );
+      Horizon.render(
+        <input type='checkbox' value={0} onChange={() => {
+          LogUtils.log('checkbox click');
+        }} />,
+        container,
+      );
+      expect(LogUtils.getAndClear()).toEqual([]);
+      expect(container.querySelector('input').value).toBe('0');
+      expect(container.querySelector('input').getAttribute('value')).toBe('0');
+    });
+
+    it('复选框不设置value属性值时会设置value为"on"', () => {
+      Horizon.render(
+        <input type='checkbox' defaultChecked={true} />,
+        container,
+      );
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+    });
+
+    it('测试defaultChecked与更改defaultChecked', () => {
+      Horizon.render(
+        <input type='checkbox' defaultChecked={0} />,
+        container,
+      );
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').checked).toBe(false);
+
+      Horizon.render(
+        <input type='checkbox' defaultChecked={1} />,
+        container,
+      );
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').checked).toBe(true);
+
+      Horizon.render(
+        <input type='checkbox' defaultChecked={'1'} />,
+        container,
+      );
+      expect(container.querySelector('input').value).toBe('on');
+      expect(container.querySelector('input').checked).toBe(true);
+    });
+  });
+
+  describe('type text', () => {
+    it('value属性为undefined或null时且没有onChange属性或没有readOnly={true}，控制台不会报错', () => {
+      expect(() =>
+        Horizon.render(<input type='text' value={undefined} />, container),
+      ).not.toThrow();
+      expect(() =>
+        Horizon.render(<input type='text' value={null} />, container),
+      ).not.toThrow();
+      expect(() =>
+        Horizon.render(<input type='text' />, container),
+      ).not.toThrow();
+    });
+
+    it('value属性受控时无法更改', () => {
+      const realNode = Horizon.render(<input type='text' value={'text'} onChange={() => {
+        LogUtils.log('text change');
+      }} />, container);
+
+      // 模拟改变text输入框的值
+      // 先修改
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      ).set.call(realNode, 'abcd');
+      // 再触发事件
+      realNode.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      // 确实发生了input事件
+      expect(LogUtils.getAndClear()).toEqual(['text change']);
+      // value受控，不会改变
+      expect(container.querySelector('input').value).toBe('text');
+    });
+
+    it('value值会转为字符串', () => {
+      const realNode = Horizon.render(<input type='text' value={1} />, container);
+      expect(realNode.value).toBe('1');
+    });
+
+    it('value值可以被设置为true/false', () => {
+      let realNode = Horizon.render(<input type='text' value={1} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('1');
+      realNode = Horizon.render(<input type='text' value={true} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('true');
+      realNode = Horizon.render(<input type='text' value={false} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('false');
+    });
+
+    it('value值可以被设置为object', () => {
+      let realNode = Horizon.render(<input type='text' value={1} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('1');
+      const value = {
+        toString: () => {
+          return 'value';
+        }
+      };
+      realNode = Horizon.render(<input type='text' value={value} onChange={jest.fn()} />, container);
+      expect(realNode.value).toBe('value');
+    });
+
+    it('设置defaultValue', () => {
+      let realNode = Horizon.render(<input type='text' defaultValue={1} />, container);
+      expect(realNode.value).toBe('1');
+      expect(realNode.getAttribute('value')).toBe('1');
+      Horizon.unmountComponentAtNode(container);
+      // 测试defaultValue为boolean类型
+      realNode = Horizon.render(<input type='text' defaultValue={true} />, container);
+      expect(realNode.value).toBe('true');
+      expect(realNode.getAttribute('value')).toBe('true');
+
+      Horizon.unmountComponentAtNode(container);
+      realNode = Horizon.render(<input type='text' defaultValue={false} />, container);
+      expect(realNode.value).toBe('false');
+      expect(realNode.getAttribute('value')).toBe('false');
+
+      Horizon.unmountComponentAtNode(container);
+      const value = {
+        toString: () => {
+          return 'default';
+        }
+      };
+      realNode = Horizon.render(<input type='text' defaultValue={value} />, container);
+      expect(realNode.value).toBe('default');
+      expect(realNode.getAttribute('value')).toBe('default');
+    });
+
+    it('name属性', () => {
+      let realNode = Horizon.render(<input type='text' name={'name'} />, container);
+      expect(realNode.name).toBe('name');
+      expect(realNode.getAttribute('name')).toBe('name');
+      Horizon.unmountComponentAtNode(container);
+      // 没有设置name属性
+      realNode = Horizon.render(<input type='text' defaultValue={true} />, container);
+      expect(realNode.name).toBe('');
+      expect(realNode.getAttribute('name')).toBe(null);
+    });
+
+    it('受控input可以触发onChange', () => {
+      let realNode = Horizon.render(<input type='text' value={'name'} onChange={LogUtils.log('text change')} />, container);
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      ).set.call(realNode, 'abcd');
+      // 再触发事件
+      realNode.dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      // 触发onChange
+      expect(LogUtils.getAndClear()).toEqual(['text change']);
+    });
+  });
+
+  describe('type radio', () => {
+    it('radio的value可以更新', () => {
+      let realNode = Horizon.render(<input type='radio' value={''} />, container);
+      expect(realNode.value).toBe('');
+      expect(realNode.getAttribute('value')).toBe('');
+      realNode = Horizon.render(<input type='radio' value={false} />, container);
+      expect(realNode.value).toBe('false');
+      expect(realNode.getAttribute('value')).toBe('false');
+      realNode = Horizon.render(<input type='radio' value={true} />, container);
+      expect(realNode.value).toBe('true');
+      expect(realNode.getAttribute('value')).toBe('true');
+    });
+
+    it('相同name且在同一表单的radio互斥', () => {
+      Horizon.render(
+        <>
+          <input id='a' type='radio' name='num' onChange={LogUtils.log('a change')} defaultChecked={true} />
+          <input id='b' type='radio' name='num' onChange={LogUtils.log('b change')} />
+          <input id='c' type='radio' name='num' onChange={LogUtils.log('c change')} />
+          <form>
+            <input id='d' type='radio' name='num' onChange={() => { }} defaultChecked={true} />
+          </form>
+        </>, container);
+      expect(container.querySelector('input').checked).toBe(true);
+      expect(document.getElementById('b').checked).toBe(false);
+      expect(document.getElementById('c').checked).toBe(false);
+      expect(document.getElementById('d').checked).toBe(true);
+      // 模拟点击id为b的单选框，b为选中状态，ac为非选中状态
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'checked',
+      ).set.call(document.getElementById('b'), true);
+      expect(LogUtils.getAndClear()).toEqual([
+        'a change',
+        'b change',
+        'c change'
+      ]);
+      expect(container.querySelector('input').checked).toBe(false);
+      expect(document.getElementById('b').checked).toBe(true);
+      expect(document.getElementById('c').checked).toBe(false);
+      expect(document.getElementById('d').checked).toBe(true);
+    });
+
+    it('受控radio的状态', () => {
+      Horizon.render(
+        <>
+          <input type='radio' name='a' checked={true} />
+          <input id='b' type='radio' name='a' checked={false} />
+        </>, container);
+      expect(container.querySelector('input').checked).toBe(true);
+      expect(document.getElementById('b').checked).toBe(false);
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'checked',
+      ).set.call(document.getElementById('b'), true);
+      // 再触发事件
+      document.getElementById('b').dispatchEvent(
+        new Event('click', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      // 模拟点击单选框B，两个受控radio的状态不会改变
+      expect(container.querySelector('input').checked).toBe(true);
+      expect(document.getElementById('b').checked).toBe(false);
+    });
+
+    it('name改变不影响相同name的radio', () => {
+      const inputRef = Horizon.createRef();
+      const App = () => {
+        const [isNum, setNum] = Horizon.useState(false);
+        const inputName = isNum ? 'secondName' : 'firstName';
+
+        const buttonClick = () => {
+          setNum(true);
+        };
+
+        return (
+          <div>
+            <button type="button" onClick={() => buttonClick()} />
+            <input
+              type="radio"
+              name={inputName}
+              onChange={() => { }}
+              checked={isNum === true}
+            />
+            <input
+              ref={inputRef}
+              type="radio"
+              name={inputName}
+              onChange={() => { }}
+              checked={isNum === false}
+            />
+          </div>
+        );
+      };
+      Horizon.render(<App />, container);
+      expect(container.querySelector('input').checked).toBe(false);
+      expect(inputRef.current.checked).toBe(true);
+      // 点击button，触发setNum
+      container.querySelector('button').click();
+      expect(container.querySelector('input').checked).toBe(true);
+      expect(inputRef.current.checked).toBe(false);
+    });
+  });
+
+  describe('type submit', () => {
+    it('type submit value', () => {
+      Horizon.render(<input type="submit" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+      Horizon.unmountComponentAtNode(container);
+
+      Horizon.render(<input type="submit" value='' />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+
+      Horizon.render(<input type="submit" value='submit' />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('submit');
+    });
+  });
+
+  describe('type reset', () => {
+    it('type reset value', () => {
+      Horizon.render(<input type="reset" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+      Horizon.unmountComponentAtNode(container);
+
+      Horizon.render(<input type="reset" value='' />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+
+      Horizon.render(<input type="reset" value='reset' />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('reset');
+    });
+  });
+
+  describe('type number', () => {
+    it('value值会把number类型转为字符串，且.xx转为0.xx', () => {
+      Horizon.render(<input type="number" value={.12} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0.12');
+    });
+
+    it('value值会把number类型转为字符串，且.xx转为0.xx', () => {
+      Horizon.render(<input type="number" value={.12} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0.12');
+    });
+
+    it('改变node.value值', () => {
+      let setNum;
+      const App = () => {
+        const [num, _setNum] = Horizon.useState('');
+        setNum = _setNum;
+        return <input type="number" value={num} readOnly={true} />;
+      };
+      Horizon.render(<App />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+      act(() => {
+        setNum(0);
+      });
+      expect(container.querySelector('input').value).toBe('0');
+    });
+
+    it('node.value精度', () => {
+      let setNum;
+      const App = () => {
+        const [num, _setNum] = Horizon.useState(0.0000);
+        setNum = _setNum;
+        return <input type="number" value={num} readOnly={true} />;
+      };
+      Horizon.render(<App />, container);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0');
+      act(() => {
+        setNum(1.0000);
+      });
+      expect(container.querySelector('input').getAttribute('value')).toBe('0');
+      expect(container.querySelector('input').value).toBe('1');
+    });
+
+    it('node.value与Attrubute value', () => {
+      const App = () => {
+        return <input type="number" defaultValue={1} />;
+      };
+      Horizon.render(<App />, container);
+      expect(container.querySelector('input').getAttribute('value')).toBe('1');
+      expect(container.querySelector('input').value).toBe('1');
+
+      // 先修改
+      Object.getOwnPropertyDescriptor(
+        HTMLInputElement.prototype,
+        'value',
+      ).set.call(container.querySelector('input'), '8');
+      // 再触发事件
+      container.querySelector('input').dispatchEvent(
+        new Event('input', {
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+      // Attrubute value不会改变，node.value会改变
+      expect(container.querySelector('input').getAttribute('value')).toBe('1');
+      expect(container.querySelector('input').value).toBe('8');
+    });
+  });
+
+  describe('type reset', () => {
+    it('type reset的value值', () => {
+      Horizon.render(<input type="reset" value={.12} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('0.12');
+
+      Horizon.unmountComponentAtNode(container);
+      Horizon.render(<input type="reset" value={''} />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(true);
+      expect(container.querySelector('input').getAttribute('value')).toBe('');
+
+      Horizon.unmountComponentAtNode(container);
+      Horizon.render(<input type="reset" />, container);
+      expect(container.querySelector('input').hasAttribute('value')).toBe(false);
+    });
+  });
+});

scripts/__tests__/DomTest/DomSelect.test.js

@@ -0,0 +1,341 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+
+describe('Dom Select', () => {
+  it('设置value', () => {
+    const selectNode = (
+      <select value='Vue'>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    const realNode = Horizon.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+    realNode.value = 'React';
+    // 改变value会影响select的状态
+    Horizon.render(selectNode, container);
+    expect(realNode.options[0].selected).toBe(true);
+    expect(realNode.value).toBe('React');
+  });
+
+  it('设置value为对象', () => {
+    let selectValue = {
+      toString: () => {
+        return 'Vue';
+      }
+    };
+    const selectNode = (
+      <select value={selectValue}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    const realNode = Horizon.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+    selectValue = {
+      toString: () => {
+        return 'React';
+      }
+    };
+    const newSelectNode = (
+      <select value={selectValue}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    // 改变value会影响select的状态
+    Horizon.render(newSelectNode, container);
+    expect(realNode.options[0].selected).toBe(true);
+    expect(realNode.value).toBe('React');
+  });
+
+  it('受控select', () => {
+    const selectNode = (
+      <select value='Vue'>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    const realNode = Horizon.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+    // 先修改
+    Object.getOwnPropertyDescriptor(
+      HTMLSelectElement.prototype,
+      'value',
+    ).set.call(realNode, 'React');
+    // 再触发事件
+    container.querySelector('select').dispatchEvent(
+      new Event('change', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    // 鼠标改变受控select不生效
+    Horizon.render(selectNode, container);
+    // 'React'项没有被选中
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+    expect(realNode.value).toBe('Vue');
+  });
+
+  it('受控select转为不受控会保存原来select', () => {
+    const selectNode = (
+      <select value='Vue'>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    const realNode = Horizon.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+    const newSelectNode = (
+      <select>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(newSelectNode, container);
+    // selected不变
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+    expect(realNode.value).toBe('Vue');
+  });
+
+  it('设置defaultValue', () => {
+    let defaultVal = 'Vue';
+    const selectNode = (
+      <select defaultValue={defaultVal}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    let realNode = Horizon.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+
+    defaultVal = 'React';
+    // 改变defaultValue没有影响
+    realNode = Horizon.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+  });
+
+  it('设置defaultValue后，select不受控', () => {
+    const selectNode = (
+      <select defaultValue={'Vue'}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    let realNode = Horizon.render(selectNode, container);
+    expect(realNode.value).toBe('Vue');
+    expect(realNode.options[1].selected).toBe(true);
+
+    // 先修改
+    Object.getOwnPropertyDescriptor(
+      HTMLSelectElement.prototype,
+      'value',
+    ).set.call(realNode, 'React');
+    // 再触发事件
+    container.querySelector('select').dispatchEvent(
+      new Event('change', {
+        bubbles: true,
+        cancelable: true,
+      }),
+    );
+    // 鼠标改变受控select生效,select不受控
+    Horizon.render(selectNode, container);
+    // 'React'项没被选中
+    expect(realNode.options[0].selected).toBe(true);
+    expect(realNode.options[1].selected).toBe(false);
+    expect(realNode.value).toBe('React');
+  });
+
+  xit('设置multiple(一)', () => {
+    jest.spyOn(console, 'error').mockImplementation();
+    const selectNode = (
+      <select multiple='multiple' defaultValue={'Vue'}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    expect(
+      () => Horizon.render(selectNode, container)
+    ).toThrowError('newValues.forEach is not a function');
+  });
+
+  it('设置multiple(二)', () => {
+    let selectNode = (
+      <select id='se' multiple='multiple' defaultValue={['Vue', 'Angular']}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    expect(
+      () => Horizon.render(selectNode, container)
+    ).not.toThrow();
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+
+    // 改变defaultValue没有影响
+    selectNode = (
+      <select id='se' multiple='multiple' defaultValue={['React']}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+  });
+
+  it('设置multiple(三)', () => {
+    let selectNode = (
+      <select id='se' multiple='multiple' value={['Vue', 'Angular']}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    expect(
+      () => Horizon.render(selectNode, container)
+    ).not.toThrow();
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+
+    // 改变value有影响
+    selectNode = (
+      <select id='se' multiple='multiple' value={['React']}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(true);
+    expect(document.getElementById('se').options[1].selected).toBe(false);
+    expect(document.getElementById('se').options[2].selected).toBe(false);
+  });
+
+  it('defaultValue设置multiple与非multiple切换(一)', () => {
+    let selectNode = (
+      <select id='se' multiple='multiple' defaultValue={['Vue', 'Angular']}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+
+    // 改变value有影响
+    selectNode = (
+      <select id='se' defaultValue='React'>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(true);
+    expect(document.getElementById('se').options[1].selected).toBe(false);
+    expect(document.getElementById('se').options[2].selected).toBe(false);
+  });
+
+  it('defaultValue设置multiple与非multiple切换(二)', () => {
+    let selectNode = (
+      <select id='se' defaultValue='React'>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(true);
+    expect(document.getElementById('se').options[1].selected).toBe(false);
+    expect(document.getElementById('se').options[2].selected).toBe(false);
+
+    // 改变value有影响
+    selectNode = (
+      <select id='se' multiple='multiple' defaultValue={['Vue', 'Angular']}>
+        <option value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(selectNode, container);
+    expect(document.getElementById('se').options[0].selected).toBe(false);
+    expect(document.getElementById('se').options[1].selected).toBe(true);
+    expect(document.getElementById('se').options[2].selected).toBe(true);
+  });
+
+  it('未指定value或者defaultValue时，默认选择第一个可选的', () => {
+    const selectNode = (
+      <select id='se'>
+        <option disabled={true} value='React'>React.js</option>
+        <option value='Vue'>Vue.js</option>
+        <option disabled={true} value='Angular'>Angular.js</option>
+      </select>
+    );
+    const realNode = Horizon.render(selectNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+    expect(realNode.options[2].selected).toBe(false);
+  });
+
+  it('删除添加option', () => {
+    const selectNode = (
+      <select multiple={true} defaultValue={['Vue']}>
+        <option key='React' value='React'>React.js</option>
+        <option key='Vue' value='Vue'>Vue.js</option>
+        <option key='Angular' value='Angular'>Angular.js</option>
+      </select>
+    );
+    const realNode = Horizon.render(selectNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(true);
+    expect(realNode.options[2].selected).toBe(false);
+
+    const newNode = (
+      <select multiple={true} defaultValue={['Vue']}>
+        <option key='React' value='React'>React.js</option>
+        <option key='Angular' value='Angular'>Angular.js</option>
+      </select>
+    );
+    Horizon.render(newNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(false);
+
+    const newSelectNode = (
+      <select multiple={true} defaultValue={['Vue']}>
+        <option key='React' value='React'>React.js</option>
+        <option key='Vue' value='Vue'>Vue.js</option>
+        <option key='Angular' value='Angular'>Angular.js</option>
+      </select>
+    );
+    // 重新添加不会影响
+    Horizon.render(newSelectNode, container);
+    expect(realNode.options[0].selected).toBe(false);
+    expect(realNode.options[1].selected).toBe(false);
+    expect(realNode.options[2].selected).toBe(false);
+  });
+});

scripts/__tests__/EventTest/EventMain.test.js

@@ -6,10 +6,11 @@ describe('事件', () => {
   it('根节点挂载全量事件', () => {
     const App = () => {
       return <div />;
-    }
+    };
     Horizon.render(<App />, container);
     console.log(TestUtils.getEventListeners(container));
-  })
+    //expect(TestUtils.getEventListeners(container)).toBe(true);
+  });
 
   it('事件捕获与冒泡', () => {
     const App = () => {
@@ -22,7 +23,7 @@ describe('事件', () => {
           </div>
         </>
       );
-    }
+    };
     Horizon.render(<App />, container);
     const a = container.querySelector('button');
     a.click();
@@ -35,7 +36,7 @@ describe('事件', () => {
       'p bubble',
       'div bubble'
     ]);
-  })
+  });
 
   it('returns 0', () => {
     let keyCode = null;
@@ -68,7 +69,7 @@ describe('事件', () => {
           </div>
         </>
       );
-    }
+    };
     Horizon.render(<App />, container);
     container.querySelector('button').click();
 
@@ -79,7 +80,7 @@ describe('事件', () => {
       'btn capture',
       'btn bubble'
     ]);
-  })
+  });
 
   it('阻止事件捕获', () => {
     const App = () => {
@@ -92,7 +93,7 @@ describe('事件', () => {
           </div>
         </>
       );
-    }
+    };
     Horizon.render(<App />, container);
     container.querySelector('button').click();
 
@@ -100,7 +101,7 @@ describe('事件', () => {
       // 阻止捕获，不再继续向下执行
       'div capture'
     ]);
-  })
+  });
 
   it('阻止原生事件冒泡', () => {
     const App = () => {
@@ -111,7 +112,7 @@ describe('事件', () => {
           </p>
         </div>
       );
-    }
+    };
     Horizon.render(<App />, container);
     container.querySelector('div').addEventListener('click', () => {
       LogUtils.log('div bubble');
@@ -127,5 +128,5 @@ describe('事件', () => {
     expect(LogUtils.getAndClear()).toEqual([
       'btn bubble'
     ]);
-  })
+  });
-})
+});

scripts/__tests__/EventTest/FocusEvent.test.js

@@ -41,5 +41,5 @@ describe('合成焦点事件', () => {
       'onBlurCapture: blur',
       'onBlur: blur',
     ]);
-  })
+  });
-})
+});

scripts/__tests__/EventTest/KeyboardEvent.test.js

@@ -10,7 +10,7 @@ describe('Keyboard Event', () => {
           LogUtils.log('onKeyUp: keycode: ' + e.keyCode + ',charcode: ' + e.charCode);
         }}
         onKeyDown={(e) => {
-          LogUtils.log('onKeyDown: keycode: ' + e.keyCode + ',charcode: ' + e.charCode)
+          LogUtils.log('onKeyDown: keycode: ' + e.keyCode + ',charcode: ' + e.charCode);
         }}
       />,
       container,

scripts/__tests__/EventTest/MouseEvent.test.js

@@ -14,19 +14,11 @@ describe('MouseEvent Test', () => {
         }
 
         setNum() {
-          this.setState(
+          this.setState({ num: this.state.num + 1 });
-            {
-              num: this.state.num + 1
-            }
-          )
         }
 
         setPrice = (e) => {
-          this.setState(
+          this.setState({ num: this.state.price + 1 });
-            {
-              num: this.state.price + 1
-            }
-          )
         }
 
         render() {
@@ -53,15 +45,15 @@ describe('MouseEvent Test', () => {
 
     it('点击触发', () => {
       const handleClick = jest.fn();
-      Horizon.render(<button onClick={handleClick}>Click Me</button>, container)
+      Horizon.render(<button onClick={handleClick}>Click Me</button>, container);
       container.querySelector('button').click();
       expect(handleClick).toHaveBeenCalledTimes(1);
       for (let i = 0; i < 5; i++) {
         container.querySelector('button').click();
       }
       expect(handleClick).toHaveBeenCalledTimes(6);
-    })
+    });
-  })
+  });
 
   const test = (name, config) => {
     const node = Horizon.render(config, container);
@@ -89,7 +81,7 @@ describe('MouseEvent Test', () => {
       `${name} capture`,
       `${name} bubble`
     ]);
-  }
+  };
 
   describe('合成鼠标事件', () => {
     it('onMouseMove', () => {
@@ -102,7 +94,7 @@ describe('MouseEvent Test', () => {
       test('mousemove', <div
         onMouseMove={onMouseMove}
         onMouseMoveCapture={onMouseMoveCapture}
-      />)
+      />);
     });
 
     it('onMouseDown', () => {
@@ -115,7 +107,7 @@ describe('MouseEvent Test', () => {
       test('mousedown', <div
         onMousedown={onMousedown}
         onMousedownCapture={onMousedownCapture}
-      />)
+      />);
     });
 
     it('onMouseUp', () => {
@@ -128,7 +120,7 @@ describe('MouseEvent Test', () => {
       test('mouseup', <div
         onMouseUp={onMouseUp}
         onMouseUpCapture={onMouseUpCapture}
-      />)
+      />);
     });
 
     it('onMouseOut', () => {
@@ -141,7 +133,7 @@ describe('MouseEvent Test', () => {
       test('mouseout', <div
         onMouseOut={onMouseOut}
         onMouseOutCapture={onMouseOutCapture}
-      />)
+      />);
     });
 
     it('onMouseOver', () => {
@@ -154,7 +146,7 @@ describe('MouseEvent Test', () => {
       test('mouseover', <div
         onMouseOver={onMouseOver}
         onMouseOverCapture={onMouseOverCapture}
-      />)
+      />);
     });
-  })
+  });
-})
+});

scripts/__tests__/EventTest/WheelEvent.test.js

@@ -22,7 +22,7 @@ describe('合成滚轮事件', () => {
     ]);
   });
 
-  it('可以执行preventDefault和 stopPropagation', () => {
+  it('可以执行preventDefault和stopPropagation', () => {
     const eventHandler = e => {
       expect(e.isDefaultPrevented()).toBe(false);
       e.preventDefault();
@@ -49,4 +49,4 @@ describe('合成滚轮事件', () => {
     ]);
   });
 
-})
+});

scripts/__tests__/jest/jestEnvironment.js

@@ -1,6 +1,7 @@
 global.MessageChannel = function MessageChannel() {
   this.port1 = {};
   this.port2 = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     postMessage() { }
   };
 };

scripts/__tests__/jest/jestSetting.js

@@ -1,6 +1,8 @@
 import { unmountComponentAtNode } from '../../../libs/horizon/src/dom/DOMExternal';
 import * as LogUtils from '../jest/logUtils';
+import failOnConsole from 'jest-fail-on-console';
 
+failOnConsole();
 global.isDev = process.env.NODE_ENV === 'development';
 global.container = null;
 global.beforeEach(() => {

scripts/__tests__/jest/logUtils.js

@@ -19,7 +19,7 @@ const getAndClear = () => {
 
 const clear = () => {
   dataArray = dataArray ? null : dataArray;
-}
+};
 
 exports.clear = clear;
 exports.log = log;

scripts/__tests__/jest/testUtils.js

@@ -12,6 +12,9 @@ export const getEventListeners = (dom) => {
   for (let key in dom) {
     keyArray.push(key);
   }
+  console.log(keyArray);
+  console.log('---------------------------------');
+  console.log(allDelegatedNativeEvents);
   try {
     allDelegatedNativeEvents.forEach(event => {
       if (!keyArray.includes(event)) {