yystopf
/
inula
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Match-id-4e7ac81081326560d360fd7bd2cdc4ac742c8989

This commit is contained in:
* 2022-04-12 19:41:25 +08:00 committed by *
parent 4e9ccd438f c3a580fc97
commit 10f63bcc75
21 changed files with 953 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js
View File

@ -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

6
scripts/__tests__/ComponentTest/HookTest/UseContext.test.js
View File

@ -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');

74
scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js
View File

@ -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']);
});
})
});

8
scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js
View File

@ -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);

14
scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js
View File

@ -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',

18
scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js
View File

@ -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]);

6
scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js
View File

@ -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');

9
scripts/__tests__/ComponentTest/HookTest/UseRef.test.js
View File

@ -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');

28
scripts/__tests__/ComponentTest/HookTest/UseState.test.js
View File

@ -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(
'Hooks are less than expected, please check whether the hook is written in the condition.',
);
}).toThrow('Hooks are less than expected, please check whether the hook is written in the condition.');
});
});

64
scripts/__tests__/DomTest/Attribute.test.js Executable file
View File

@ -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');
});
});

428
scripts/__tests__/DomTest/DomInput.test.js Executable file
View File

@ -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);
});
});
});

341
scripts/__tests__/DomTest/DomSelect.test.js Executable file
View File

@ -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);
});
});

23
scripts/__tests__/EventTest/EventMain.test.js
View File

@ -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'
]);
})
})
});
});

4
scripts/__tests__/EventTest/FocusEvent.test.js
View File

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

2
scripts/__tests__/EventTest/KeyboardEvent.test.js
View File

@ -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,

34
scripts/__tests__/EventTest/MouseEvent.test.js
View File

@ -14,19 +14,11 @@ describe('MouseEvent Test', () => {
}
setNum() {
this.setState(
{
num: this.state.num + 1
}
)
this.setState({ num: this.state.num + 1 });
}
setPrice = (e) => {
this.setState(
{
num: this.state.price + 1
}
)
this.setState({ 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}
/>)
/>);
});
})
})
});
});

4
scripts/__tests__/EventTest/WheelEvent.test.js
View File

@ -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('合成滚轮事件', () => {
]);
});
})
});

1
scripts/__tests__/jest/jestEnvironment.js
View File

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

2
scripts/__tests__/jest/jestSetting.js
View File

@ -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(() => {

2
scripts/__tests__/jest/logUtils.js Normal file → Executable file
View File

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

3
scripts/__tests__/jest/testUtils.js
View File

@ -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)) {