Match-id-efc4c1e8f6dd5638e77058d13d15814e4d831207
This commit is contained in:
parent
4d24ebd544
commit
e3895bda8b
|
@ -70,9 +70,10 @@ export function lazyDelegateOnRoot(currentRoot: VNode, eventName: string) {
|
||||||
const nativeEvents = allDelegatedHorizonEvents.get(eventName);
|
const nativeEvents = allDelegatedHorizonEvents.get(eventName);
|
||||||
|
|
||||||
nativeEvents.forEach(nativeEvent => {
|
nativeEvents.forEach(nativeEvent => {
|
||||||
if (!currentRoot.delegatedNativeEvents.has(nativeEvent)) {
|
const nativeFullName = isCapture ? nativeEvent + 'capture' : nativeEvent;
|
||||||
|
if (!currentRoot.delegatedNativeEvents.has(nativeFullName)) {
|
||||||
listenToNativeEvent(nativeEvent, currentRoot.realNode, isCapture);
|
listenToNativeEvent(nativeEvent, currentRoot.realNode, isCapture);
|
||||||
currentRoot.delegatedNativeEvents.add(nativeEvent);
|
currentRoot.delegatedNativeEvents.add(nativeFullName);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -206,7 +206,6 @@ export function handleEventMain(
|
||||||
} finally {
|
} finally {
|
||||||
isInEventsExecution = false;
|
isInEventsExecution = false;
|
||||||
if (shouldDispatchUpdate) {
|
if (shouldDispatchUpdate) {
|
||||||
runDiscreteUpdates();
|
|
||||||
// 若是Radio,同步同组其他Radio的Handler Value
|
// 若是Radio,同步同组其他Radio的Handler Value
|
||||||
syncRadiosHandler(nativeEvent.target as Element);
|
syncRadiosHandler(nativeEvent.target as Element);
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,9 @@ describe('useEffect Hook Test', () => {
|
||||||
it('简单使用useEffect', () => {
|
it('简单使用useEffect', () => {
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [num, setNum] = useState(0);
|
const [num, setNum] = useState(0);
|
||||||
|
console.log('Render App');
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
console.log('Effect');
|
||||||
document.getElementById('p').style.display = num === 0 ? 'none' : 'inline';
|
document.getElementById('p').style.display = num === 0 ? 'none' : 'inline';
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
|
@ -27,9 +29,11 @@ describe('useEffect Hook Test', () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
Horizon.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(document.getElementById('p').style.display).toBe('block');
|
expect(document.getElementById('p').style.display).toBe('block'); // <- none 异步
|
||||||
// 点击按钮触发num加1
|
// 点击按钮触发num加1
|
||||||
container.querySelector('button').click();
|
console.log('Click');
|
||||||
|
container.querySelector('button').click(); // <- none 异步
|
||||||
|
|
||||||
expect(document.getElementById('p').style.display).toBe('none');
|
expect(document.getElementById('p').style.display).toBe('none');
|
||||||
container.querySelector('button').click();
|
container.querySelector('button').click();
|
||||||
expect(container.querySelector('p').style.display).toBe('inline');
|
expect(container.querySelector('p').style.display).toBe('inline');
|
||||||
|
|
|
@ -22,16 +22,6 @@ describe('Dom Input', () => {
|
||||||
).not.toThrow();
|
).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属性值可以改变', () => {
|
it('复选框的value属性值可以改变', () => {
|
||||||
Horizon.render(
|
Horizon.render(
|
||||||
<input type='checkbox' value='' onChange={() => {
|
<input type='checkbox' value='' onChange={() => {
|
||||||
|
@ -96,30 +86,6 @@ describe('Dom Input', () => {
|
||||||
).not.toThrow();
|
).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值会转为字符串', () => {
|
it('value值会转为字符串', () => {
|
||||||
const realNode = Horizon.render(<input type='text' value={1} />, container);
|
const realNode = Horizon.render(<input type='text' value={1} />, container);
|
||||||
expect(realNode.value).toBe('1');
|
expect(realNode.value).toBe('1');
|
||||||
|
@ -249,30 +215,6 @@ describe('Dom Input', () => {
|
||||||
expect(document.getElementById('d').checked).toBe(true);
|
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', () => {
|
it('name改变不影响相同name的radio', () => {
|
||||||
const inputRef = Horizon.createRef();
|
const inputRef = Horizon.createRef();
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
|
|
@ -53,37 +53,6 @@ describe('Dom Select', () => {
|
||||||
expect(realNode.value).toBe('React');
|
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', () => {
|
it('受控select转为不受控会保存原来select', () => {
|
||||||
const selectNode = (
|
const selectNode = (
|
||||||
<select value='Vue'>
|
<select value='Vue'>
|
||||||
|
|
|
@ -38,26 +38,6 @@ describe('Dom Textarea', () => {
|
||||||
expect(realNode.value).toBe('React');
|
expect(realNode.value).toBe('React');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('受控组件value不变', () => {
|
|
||||||
let realNode = Horizon.render(<textarea value='text' />, container);
|
|
||||||
expect(realNode.getAttribute('value')).toBe(null);
|
|
||||||
expect(realNode.value).toBe('text');
|
|
||||||
// 先修改
|
|
||||||
Object.getOwnPropertyDescriptor(
|
|
||||||
HTMLTextAreaElement.prototype,
|
|
||||||
'value',
|
|
||||||
).set.call(realNode, 'textabc');
|
|
||||||
// 再触发事件
|
|
||||||
container.querySelector('textarea').dispatchEvent(
|
|
||||||
new Event('change', {
|
|
||||||
bubbles: true,
|
|
||||||
cancelable: true,
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
// 组件受控,想要改变value,需要通过onChange改变state
|
|
||||||
expect(realNode.value).toBe('text');
|
|
||||||
});
|
|
||||||
|
|
||||||
it('设置defaultValue', () => {
|
it('设置defaultValue', () => {
|
||||||
let defaultVal = 'Vue';
|
let defaultVal = 'Vue';
|
||||||
const textareaNode = <textarea defaultValue={defaultVal} />;
|
const textareaNode = <textarea defaultValue={defaultVal} />;
|
||||||
|
|
Loading…
Reference in New Issue