Match-id-1da48726eef4a520b10fbe5a29d1b869a4b29678
This commit is contained in:
parent
e371508043
commit
d3260a4d94
11
.eslintrc.js
11
.eslintrc.js
|
@ -29,7 +29,6 @@ module.exports = {
|
||||||
node: true,
|
node: true,
|
||||||
es6: true,
|
es6: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
rules: {
|
rules: {
|
||||||
'accessor-pairs': 'off',
|
'accessor-pairs': 'off',
|
||||||
'brace-style': ['error', '1tbs'],
|
'brace-style': ['error', '1tbs'],
|
||||||
|
@ -42,4 +41,14 @@ module.exports = {
|
||||||
'no-for-of-loops/no-for-of-loops': 'error',
|
'no-for-of-loops/no-for-of-loops': 'error',
|
||||||
'no-function-declare-after-return/no-function-declare-after-return': 'error',
|
'no-function-declare-after-return/no-function-declare-after-return': 'error',
|
||||||
},
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: [
|
||||||
|
'scripts/__tests__/**/*.js'
|
||||||
|
],
|
||||||
|
globals: {
|
||||||
|
container: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
presets: [
|
presets: [
|
||||||
'@babel/react',
|
'@babel/react',
|
||||||
'@babel/preset-typescript',
|
'@babel/preset-typescript',
|
||||||
['@babel/preset-env', { targets: { node: 'current' } }]
|
['@babel/preset-env', { targets: { node: 'current' } }]
|
||||||
],
|
],
|
||||||
|
@ -30,7 +30,10 @@ module.exports = {
|
||||||
['@babel/plugin-proposal-private-methods', { 'loose': true }],
|
['@babel/plugin-proposal-private-methods', { 'loose': true }],
|
||||||
['@babel/plugin-proposal-private-property-in-object', { 'loose': true }],
|
['@babel/plugin-proposal-private-property-in-object', { 'loose': true }],
|
||||||
'@babel/plugin-syntax-jsx',
|
'@babel/plugin-syntax-jsx',
|
||||||
'@babel/plugin-transform-react-jsx',
|
['@babel/plugin-transform-react-jsx', {
|
||||||
|
pragma: 'Horizon.createElement',
|
||||||
|
pragmaFrag: 'Horizon.Fragment'
|
||||||
|
}],
|
||||||
'@babel/plugin-transform-flow-strip-types',
|
'@babel/plugin-transform-flow-strip-types',
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
|
|
||||||
describe('useCallback Hook Test', () => {
|
describe('useCallback Hook Test', () => {
|
||||||
const { useState, useCallback } = React;
|
const { useState, useCallback } = Horizon;
|
||||||
|
|
||||||
it('测试useCallback', () => {
|
it('测试useCallback', () => {
|
||||||
const App = (props) => {
|
const App = (props) => {
|
||||||
|
@ -18,7 +16,7 @@ describe('useCallback Hook Test', () => {
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App text={1} />, container);
|
Horizon.render(<App text={1} />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('0');
|
expect(container.querySelector('p').innerHTML).toBe('0');
|
||||||
// 点击按钮触发num加1
|
// 点击按钮触发num加1
|
||||||
container.querySelector('button').click();
|
container.querySelector('button').click();
|
||||||
|
@ -27,7 +25,7 @@ describe('useCallback Hook Test', () => {
|
||||||
container.querySelector('button').click();
|
container.querySelector('button').click();
|
||||||
expect(container.querySelector('p').innerHTML).toBe('1');
|
expect(container.querySelector('p').innerHTML).toBe('1');
|
||||||
|
|
||||||
HorizonDOM.render(<App text={2} />, container);
|
Horizon.render(<App text={2} />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('1');
|
expect(container.querySelector('p').innerHTML).toBe('1');
|
||||||
// 依赖项有变化,点击按钮num增加
|
// 依赖项有变化,点击按钮num增加
|
||||||
container.querySelector('button').click();
|
container.querySelector('button').click();
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
import { act } from '../../jest/customMatcher';
|
import { act } from '../../jest/customMatcher';
|
||||||
|
|
||||||
describe('useContext Hook Test', () => {
|
describe('useContext Hook Test', () => {
|
||||||
const { useState, useContext } = React;
|
const { useState, useContext } = Horizon;
|
||||||
const { unmountComponentAtNode } = HorizonDOM;
|
const { unmountComponentAtNode } = Horizon;
|
||||||
|
|
||||||
it('简单使用useContext', () => {
|
it('简单使用useContext', () => {
|
||||||
const LanguageTypes = {
|
const LanguageTypes = {
|
||||||
|
@ -13,7 +11,7 @@ describe('useContext Hook Test', () => {
|
||||||
JAVASCRIPT: 'JavaScript',
|
JAVASCRIPT: 'JavaScript',
|
||||||
};
|
};
|
||||||
const defaultValue = { type: LanguageTypes.JAVASCRIPT };
|
const defaultValue = { type: LanguageTypes.JAVASCRIPT };
|
||||||
const SystemLanguageContext = React.createContext(defaultValue);
|
const SystemLanguageContext = Horizon.createContext(defaultValue);
|
||||||
|
|
||||||
const SystemLanguageProvider = ({ type, children }) => {
|
const SystemLanguageProvider = ({ type, children }) => {
|
||||||
return (
|
return (
|
||||||
|
@ -38,11 +36,11 @@ describe('useContext Hook Test', () => {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<TestFunction />, container);
|
Horizon.render(<TestFunction />, container);
|
||||||
// 测试当Provider未提供时,获取到的默认值'JavaScript'。
|
// 测试当Provider未提供时,获取到的默认值'JavaScript'。
|
||||||
expect(container.querySelector('p').innerHTML).toBe('JavaScript');
|
expect(container.querySelector('p').innerHTML).toBe('JavaScript');
|
||||||
unmountComponentAtNode(container);
|
unmountComponentAtNode(container);
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
// 测试当Provider提供时,可以获取到Provider的值'Java'。
|
// 测试当Provider提供时,可以获取到Provider的值'Java'。
|
||||||
expect(container.querySelector('p').innerHTML).toBe('Java');
|
expect(container.querySelector('p').innerHTML).toBe('Java');
|
||||||
// 测试当Provider改变时,可以获取到最新Provider的值。
|
// 测试当Provider改变时,可以获取到最新Provider的值。
|
||||||
|
|
|
@ -1,18 +1,16 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
import * as LogUtils from '../../jest/logUtils';
|
import * as LogUtils from '../../jest/logUtils';
|
||||||
import { act } from '../../jest/customMatcher';
|
import { act } from '../../jest/customMatcher';
|
||||||
import Text from '../../jest/Text';
|
import Text from '../../jest/Text';
|
||||||
|
|
||||||
describe('useEffect Hook Test', () => {
|
describe('useEffect Hook Test', () => {
|
||||||
const {
|
const {
|
||||||
useEffect,
|
useEffect,
|
||||||
useLayoutEffect,
|
useLayoutEffect,
|
||||||
useState,
|
useState,
|
||||||
memo,
|
memo,
|
||||||
forwardRef
|
forwardRef
|
||||||
} = React;
|
} = Horizon;
|
||||||
|
|
||||||
it('简单使用useEffect', () => {
|
it('简单使用useEffect', () => {
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
@ -27,7 +25,7 @@ describe('useEffect Hook Test', () => {
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(document.getElementById('p').style.display).toBe('block');
|
expect(document.getElementById('p').style.display).toBe('block');
|
||||||
// 点击按钮触发num加1
|
// 点击按钮触发num加1
|
||||||
container.querySelector('button').click();
|
container.querySelector('button').click();
|
||||||
|
@ -42,7 +40,7 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App />, container, () => {
|
Horizon.render(<App />, container, () => {
|
||||||
LogUtils.log('num effect');
|
LogUtils.log('num effect');
|
||||||
});
|
});
|
||||||
// 第一次渲染为同步,所以同步执行的可以写在act里做判断
|
// 第一次渲染为同步,所以同步执行的可以写在act里做判断
|
||||||
|
@ -50,7 +48,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(container.textContent).toBe('op');
|
expect(container.textContent).toBe('op');
|
||||||
});
|
});
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () => {
|
Horizon.render(null, container, () => {
|
||||||
LogUtils.log('num effect89');
|
LogUtils.log('num effect89');
|
||||||
});
|
});
|
||||||
// 第二次渲染为异步,所以同步执行的不可以写在act里做判断,act里拿到的为空数组
|
// 第二次渲染为异步,所以同步执行的不可以写在act里做判断,act里拿到的为空数组
|
||||||
|
@ -72,7 +70,7 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
const na = <NewApp />;
|
const na = <NewApp />;
|
||||||
// <App />必须设置key值,否则在diff的时候na会被视为不同组件
|
// <App />必须设置key值,否则在diff的时候na会被视为不同组件
|
||||||
HorizonDOM.render([<App key="app" />, na], container);
|
Horizon.render([<App key="app" />, na], container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'App',
|
'App',
|
||||||
'NewApp'
|
'NewApp'
|
||||||
|
@ -80,7 +78,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(container.textContent).toBe('AppNewApp');
|
expect(container.textContent).toBe('AppNewApp');
|
||||||
expect(LogUtils.getAndClear()).toEqual([]);
|
expect(LogUtils.getAndClear()).toEqual([]);
|
||||||
// 在执行新的render前,会执行完上一次render的useEffect,所以LogUtils会加入'NewApp effect'。
|
// 在执行新的render前,会执行完上一次render的useEffect,所以LogUtils会加入'NewApp effect'。
|
||||||
HorizonDOM.render([na], container);
|
Horizon.render([na], container);
|
||||||
expect(LogUtils.getAndClear()).toEqual(['NewApp effect']);
|
expect(LogUtils.getAndClear()).toEqual(['NewApp effect']);
|
||||||
expect(container.textContent).toBe('NewApp');
|
expect(container.textContent).toBe('NewApp');
|
||||||
expect(LogUtils.getAndClear()).toEqual([]);
|
expect(LogUtils.getAndClear()).toEqual([]);
|
||||||
|
@ -104,7 +102,7 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text="NewApp" />;
|
return <Text text="NewApp" />;
|
||||||
}
|
}
|
||||||
// <App />必须设置key值,否则在diff的时候na会被视为不同组件
|
// <App />必须设置key值,否则在diff的时候na会被视为不同组件
|
||||||
HorizonDOM.render([<App key="app" />, <NewApp />], container);
|
Horizon.render([<App key="app" />, <NewApp />], container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'App',
|
'App',
|
||||||
'NewApp',
|
'NewApp',
|
||||||
|
@ -122,7 +120,7 @@ describe('useEffect Hook Test', () => {
|
||||||
const App = () => {
|
const App = () => {
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
LogUtils.log('App Layout effect');
|
LogUtils.log('App Layout effect');
|
||||||
HorizonDOM.render(<Text text="NewContainer" />, newContainer);
|
Horizon.render(<Text text="NewContainer" />, newContainer);
|
||||||
});
|
});
|
||||||
return <Text text="App" />;
|
return <Text text="App" />;
|
||||||
}
|
}
|
||||||
|
@ -133,7 +131,7 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text="NewApp" />;
|
return <Text text="NewApp" />;
|
||||||
}
|
}
|
||||||
// <App />必须设置key值,否则在diff的时候na会被视为不同组件
|
// <App />必须设置key值,否则在diff的时候na会被视为不同组件
|
||||||
HorizonDOM.render([<App key="app" />, <NewApp />], container);
|
Horizon.render([<App key="app" />, <NewApp />], container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'App',
|
'App',
|
||||||
'NewApp',
|
'NewApp',
|
||||||
|
@ -153,13 +151,13 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text={'num: ' + props.num} />;
|
return <Text text={'num: ' + props.num} />;
|
||||||
}
|
}
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
|
expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
|
||||||
expect(container.textContent).toEqual('num: 0');
|
expect(container.textContent).toEqual('num: 0');
|
||||||
})
|
})
|
||||||
expect(LogUtils.getAndClear()).toEqual(['First effect [0]']);
|
expect(LogUtils.getAndClear()).toEqual(['First effect [0]']);
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
||||||
|
|
||||||
})
|
})
|
||||||
// 此时异步执行,act执行完后会执行新render的useEffect
|
// 此时异步执行,act执行完后会执行新render的useEffect
|
||||||
|
@ -182,13 +180,13 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text={'num: ' + props.num} />;
|
return <Text text={'num: ' + props.num} />;
|
||||||
}
|
}
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
|
expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']);
|
||||||
expect(container.textContent).toEqual('num: 0');
|
expect(container.textContent).toEqual('num: 0');
|
||||||
})
|
})
|
||||||
expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'Second effect [0]']);
|
expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'Second effect [0]']);
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
||||||
})
|
})
|
||||||
// 第二次render时异步执行,act保证所有效果都已更新,所以先常规记录日志
|
// 第二次render时异步执行,act保证所有效果都已更新,所以先常规记录日志
|
||||||
// 然后记录useEffect的日志
|
// 然后记录useEffect的日志
|
||||||
|
@ -231,7 +229,7 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} word={'App'} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} word={'App'} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 0,word: App',
|
'num: 0,word: App',
|
||||||
'num Layouteffect [0]',
|
'num Layouteffect [0]',
|
||||||
|
@ -246,21 +244,21 @@ describe('useEffect Hook Test', () => {
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
// 此时word改变,num不变
|
// 此时word改变,num不变
|
||||||
HorizonDOM.render(<App num={0} word={'React'} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} word={'Horizon'} />, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 0,word: React',
|
'num: 0,word: Horizon',
|
||||||
'word Layouteffect destroy',
|
'word Layouteffect destroy',
|
||||||
'word Layouteffect [React]',
|
'word Layouteffect [Horizon]',
|
||||||
'callback effect',
|
'callback effect',
|
||||||
// 最后执行异步的
|
// 最后执行异步的
|
||||||
'word effect destroy',
|
'word effect destroy',
|
||||||
'word effect [React]',
|
'word effect [Horizon]',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
// 此时num和word的所有effect都销毁
|
// 此时num和word的所有effect都销毁
|
||||||
HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
|
Horizon.render(null, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num Layouteffect destroy',
|
'num Layouteffect destroy',
|
||||||
|
@ -284,7 +282,7 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 0',
|
'num: 0',
|
||||||
'callback effect'
|
'callback effect'
|
||||||
|
@ -296,7 +294,7 @@ describe('useEffect Hook Test', () => {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 1',
|
'num: 1',
|
||||||
|
@ -309,7 +307,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(LogUtils.getAndClear()).toEqual([]);
|
expect(LogUtils.getAndClear()).toEqual([]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
|
Horizon.render(null, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'callback effect',
|
'callback effect',
|
||||||
|
@ -331,7 +329,7 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 0',
|
'num: 0',
|
||||||
'callback effect'
|
'callback effect'
|
||||||
|
@ -343,7 +341,7 @@ describe('useEffect Hook Test', () => {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 1',
|
'num: 1',
|
||||||
|
@ -354,7 +352,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(LogUtils.getAndClear()).toEqual([]);
|
expect(LogUtils.getAndClear()).toEqual([]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
|
Horizon.render(null, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'callback effect',
|
'callback effect',
|
||||||
|
@ -367,7 +365,7 @@ describe('useEffect Hook Test', () => {
|
||||||
it('useEffect里使用useState(1', () => {
|
it('useEffect里使用useState(1', () => {
|
||||||
let setNum;
|
let setNum;
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [num, _setNum] = React.useState(0);
|
const [num, _setNum] = Horizon.useState(0);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
LogUtils.log(`num effect [${num}]`);
|
LogUtils.log(`num effect [${num}]`);
|
||||||
setNum = () => _setNum(1);
|
setNum = () => _setNum(1);
|
||||||
|
@ -382,7 +380,7 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 0',
|
'num: 0',
|
||||||
'num Layouteffect [0]',
|
'num Layouteffect [0]',
|
||||||
|
@ -415,7 +413,7 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text={'Num: ' + num} />;
|
return <Text text={'Num: ' + num} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
HorizonDOM.render(<App />, container, () => LogUtils.log('App callback effect'));
|
Horizon.render(<App />, container, () => LogUtils.log('App callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Num: 0', 'App callback effect']);
|
expect(LogUtils.getAndClear()).toEqual(['Num: 0', 'App callback effect']);
|
||||||
expect(container.textContent).toEqual('Num: 0');
|
expect(container.textContent).toEqual('Num: 0');
|
||||||
act(() => {
|
act(() => {
|
||||||
|
@ -445,7 +443,7 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text={num} />;
|
return <Text text={num} />;
|
||||||
})
|
})
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
0,
|
0,
|
||||||
'callback effect'
|
'callback effect'
|
||||||
|
@ -456,7 +454,7 @@ describe('useEffect Hook Test', () => {
|
||||||
|
|
||||||
// 不会重新渲染
|
// 不会重新渲染
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App />, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual(['callback effect']);
|
expect(LogUtils.getAndClear()).toEqual(['callback effect']);
|
||||||
expect(container.textContent).toEqual('0');
|
expect(container.textContent).toEqual('0');
|
||||||
|
@ -475,7 +473,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(LogUtils.getAndClear()).toEqual([]);
|
expect(LogUtils.getAndClear()).toEqual([]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
|
Horizon.render(null, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'callback effect',
|
'callback effect',
|
||||||
|
@ -497,7 +495,7 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text={props.num} />;
|
return <Text text={props.num} />;
|
||||||
}, compare)
|
}, compare)
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
0,
|
0,
|
||||||
'callback effect'
|
'callback effect'
|
||||||
|
@ -508,7 +506,7 @@ describe('useEffect Hook Test', () => {
|
||||||
|
|
||||||
// 不会重新渲染
|
// 不会重新渲染
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual(['callback effect']);
|
expect(LogUtils.getAndClear()).toEqual(['callback effect']);
|
||||||
expect(container.textContent).toEqual('0');
|
expect(container.textContent).toEqual('0');
|
||||||
|
@ -516,7 +514,7 @@ describe('useEffect Hook Test', () => {
|
||||||
|
|
||||||
// 会重新渲染
|
// 会重新渲染
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
1,
|
1,
|
||||||
|
@ -529,7 +527,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(LogUtils.getAndClear()).toEqual([]);
|
expect(LogUtils.getAndClear()).toEqual([]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
|
Horizon.render(null, container, () => LogUtils.log('callback effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy 1']);
|
expect(LogUtils.getAndClear()).toEqual(['callback effect', 'num effect destroy 1']);
|
||||||
expect(container.textContent).toEqual('');
|
expect(container.textContent).toEqual('');
|
||||||
|
@ -550,7 +548,7 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text={'Number: ' + props.num} />;
|
return <Text text={'Number: ' + props.num} />;
|
||||||
}
|
}
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () =>
|
Horizon.render(<App num={0} />, container, () =>
|
||||||
LogUtils.log('App callback effect'),
|
LogUtils.log('App callback effect'),
|
||||||
);
|
);
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'App callback effect']);
|
expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'App callback effect']);
|
||||||
|
@ -560,7 +558,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(LogUtils.getAndClear()).toEqual(['throw Error']);
|
expect(LogUtils.getAndClear()).toEqual(['throw Error']);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () =>
|
Horizon.render(null, container, () =>
|
||||||
LogUtils.log('App callback effect'),
|
LogUtils.log('App callback effect'),
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -592,14 +590,14 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('num effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('num effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
|
expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
|
||||||
expect(container.textContent).toBe('Number: 0');
|
expect(container.textContent).toBe('Number: 0');
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
|
expect(LogUtils.getAndClear()).toEqual(['num effect [0]']);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () => LogUtils.log('num effect'));
|
Horizon.render(null, container, () => LogUtils.log('num effect'));
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num effect', 'num effect destroy 0']);
|
expect(LogUtils.getAndClear()).toEqual(['num effect', 'num effect destroy 0']);
|
||||||
expect(container.textContent).toBe('');
|
expect(container.textContent).toBe('');
|
||||||
|
@ -618,7 +616,7 @@ describe('useEffect Hook Test', () => {
|
||||||
return <Text text={`Number: ${num}`} />;
|
return <Text text={`Number: ${num}`} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
|
Horizon.render(<App />, container, () => LogUtils.log('num effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
|
expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']);
|
||||||
expect(container.textContent).toBe('Number: 0');
|
expect(container.textContent).toBe('Number: 0');
|
||||||
|
|
||||||
|
@ -648,13 +646,13 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
|
Horizon.render(<App />, container, () => LogUtils.log('num effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual(['useEffect', 'num effect']);
|
expect(LogUtils.getAndClear()).toEqual(['useEffect', 'num effect']);
|
||||||
});
|
});
|
||||||
expect(LogUtils.getAndClear()).toEqual(['effect']);
|
expect(LogUtils.getAndClear()).toEqual(['effect']);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container);
|
Horizon.render(null, container);
|
||||||
});
|
});
|
||||||
// 不会处理setNum(1)
|
// 不会处理setNum(1)
|
||||||
expect(LogUtils.getAndClear()).toEqual(['effect destroy']);
|
expect(LogUtils.getAndClear()).toEqual(['effect destroy']);
|
||||||
|
@ -663,7 +661,7 @@ describe('useEffect Hook Test', () => {
|
||||||
it('当组件的更新方法在卸载函数中,组件的子组件更新不会告警', () => {
|
it('当组件的更新方法在卸载函数中,组件的子组件更新不会告警', () => {
|
||||||
const App = () => {
|
const App = () => {
|
||||||
LogUtils.log('App');
|
LogUtils.log('App');
|
||||||
const appRef = React.createRef(null);
|
const appRef = Horizon.createRef(null);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
LogUtils.log('App effect');
|
LogUtils.log('App effect');
|
||||||
return () => {
|
return () => {
|
||||||
|
@ -686,7 +684,7 @@ describe('useEffect Hook Test', () => {
|
||||||
AppChild = forwardRef(AppChild);
|
AppChild = forwardRef(AppChild);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
|
Horizon.render(<App />, container, () => LogUtils.log('num effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'App',
|
'App',
|
||||||
'AppChild',
|
'AppChild',
|
||||||
|
@ -696,7 +694,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Child effect', 'App effect']);
|
expect(LogUtils.getAndClear()).toEqual(['Child effect', 'App effect']);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container);
|
Horizon.render(null, container);
|
||||||
});
|
});
|
||||||
// 销毁时执行appRef.current(1)不会报错
|
// 销毁时执行appRef.current(1)不会报错
|
||||||
expect(LogUtils.getAndClear()).toEqual(['App effect destroy']);
|
expect(LogUtils.getAndClear()).toEqual(['App effect destroy']);
|
||||||
|
@ -722,7 +720,7 @@ describe('useEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App />, container, () => LogUtils.log('num effect'));
|
Horizon.render(<App />, container, () => LogUtils.log('num effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'App',
|
'App',
|
||||||
'AppChild',
|
'AppChild',
|
||||||
|
@ -732,7 +730,7 @@ describe('useEffect Hook Test', () => {
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Child effect']);
|
expect(LogUtils.getAndClear()).toEqual(['Child effect']);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container);
|
Horizon.render(null, container);
|
||||||
});
|
});
|
||||||
// 销毁时执行 props.setNum(1);不会报错
|
// 销毁时执行 props.setNum(1);不会报错
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Child effect destroy']);
|
expect(LogUtils.getAndClear()).toEqual(['Child effect destroy']);
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
import * as LogUtils from '../../jest/logUtils';
|
import * as LogUtils from '../../jest/logUtils';
|
||||||
import { act } from '../../jest/customMatcher';
|
import { act } from '../../jest/customMatcher';
|
||||||
import Text from '../../jest/Text';
|
import Text from '../../jest/Text';
|
||||||
|
@ -10,9 +8,9 @@ describe('useImperativeHandle Hook Test', () => {
|
||||||
useState,
|
useState,
|
||||||
useImperativeHandle,
|
useImperativeHandle,
|
||||||
forwardRef
|
forwardRef
|
||||||
} = React;
|
} = Horizon;
|
||||||
const { unmountComponentAtNode } = HorizonDOM;
|
const { unmountComponentAtNode } = Horizon;
|
||||||
|
|
||||||
it('测试useImperativeHandle', () => {
|
it('测试useImperativeHandle', () => {
|
||||||
|
|
||||||
let App = (props, ref) => {
|
let App = (props, ref) => {
|
||||||
|
@ -28,9 +26,9 @@ describe('useImperativeHandle Hook Test', () => {
|
||||||
|
|
||||||
App = forwardRef(App);
|
App = forwardRef(App);
|
||||||
App1 = forwardRef(App1);
|
App1 = forwardRef(App1);
|
||||||
const counter = React.createRef(null);
|
const counter = Horizon.createRef(null);
|
||||||
const counter1 = React.createRef(null);
|
const counter1 = Horizon.createRef(null);
|
||||||
HorizonDOM.render(<App ref={counter} />, container);
|
Horizon.render(<App ref={counter} />, container);
|
||||||
expect(counter.current.num).toBe(0);
|
expect(counter.current.num).toBe(0);
|
||||||
act(() => {
|
act(() => {
|
||||||
counter.current.setNum(1);
|
counter.current.setNum(1);
|
||||||
|
@ -40,7 +38,7 @@ describe('useImperativeHandle Hook Test', () => {
|
||||||
// 清空container
|
// 清空container
|
||||||
unmountComponentAtNode(container);
|
unmountComponentAtNode(container);
|
||||||
|
|
||||||
HorizonDOM.render(<App1 ref={counter1} />, container);
|
Horizon.render(<App1 ref={counter1} />, container);
|
||||||
expect(counter1.current.num1).toBe(0);
|
expect(counter1.current.num1).toBe(0);
|
||||||
act(() => {
|
act(() => {
|
||||||
counter1.current.setNum1(1);
|
counter1.current.setNum1(1);
|
||||||
|
@ -64,9 +62,9 @@ describe('useImperativeHandle Hook Test', () => {
|
||||||
|
|
||||||
App = forwardRef(App);
|
App = forwardRef(App);
|
||||||
App1 = forwardRef(App1);
|
App1 = forwardRef(App1);
|
||||||
const counter = React.createRef(null);
|
const counter = Horizon.createRef(null);
|
||||||
const counter1 = React.createRef(null);
|
const counter1 = Horizon.createRef(null);
|
||||||
HorizonDOM.render(<App ref={counter} />, container);
|
Horizon.render(<App ref={counter} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([0]);
|
expect(LogUtils.getAndClear()).toEqual([0]);
|
||||||
expect(counter.current.num).toBe(0);
|
expect(counter.current.num).toBe(0);
|
||||||
act(() => {
|
act(() => {
|
||||||
|
@ -78,7 +76,7 @@ describe('useImperativeHandle Hook Test', () => {
|
||||||
// 清空container
|
// 清空container
|
||||||
unmountComponentAtNode(container);
|
unmountComponentAtNode(container);
|
||||||
|
|
||||||
HorizonDOM.render(<App1 ref={counter1} />, container);
|
Horizon.render(<App1 ref={counter1} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([0]);
|
expect(LogUtils.getAndClear()).toEqual([0]);
|
||||||
expect(counter1.current.num1).toBe(0);
|
expect(counter1.current.num1).toBe(0);
|
||||||
act(() => {
|
act(() => {
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
import * as LogUtils from '../../jest/logUtils';
|
import * as LogUtils from '../../jest/logUtils';
|
||||||
import { act } from '../../jest/customMatcher';
|
import { act } from '../../jest/customMatcher';
|
||||||
import Text from '../../jest/Text';
|
import Text from '../../jest/Text';
|
||||||
|
@ -10,7 +8,7 @@ describe('useLayoutEffect Hook Test', () => {
|
||||||
useState,
|
useState,
|
||||||
useEffect,
|
useEffect,
|
||||||
useLayoutEffect
|
useLayoutEffect
|
||||||
} = React;
|
} = Horizon;
|
||||||
|
|
||||||
it('简单使用useLayoutEffect', () => {
|
it('简单使用useLayoutEffect', () => {
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
@ -25,7 +23,7 @@ describe('useLayoutEffect Hook Test', () => {
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
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');
|
||||||
|
@ -38,7 +36,7 @@ describe('useLayoutEffect Hook Test', () => {
|
||||||
});
|
});
|
||||||
return <Text text={props.num} />;
|
return <Text text={props.num} />;
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('Sync effect'));
|
Horizon.render(<App num={1} />, container, () => LogUtils.log('Sync effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
1,
|
1,
|
||||||
// 同步在渲染之后
|
// 同步在渲染之后
|
||||||
|
@ -47,7 +45,7 @@ describe('useLayoutEffect Hook Test', () => {
|
||||||
]);
|
]);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('1');
|
expect(container.querySelector('p').innerHTML).toBe('1');
|
||||||
// 更新
|
// 更新
|
||||||
HorizonDOM.render(<App num={2} />, container, () => LogUtils.log('Sync effect'));
|
Horizon.render(<App num={2} />, container, () => LogUtils.log('Sync effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
2,
|
2,
|
||||||
'LayoutEffect',
|
'LayoutEffect',
|
||||||
|
@ -74,7 +72,7 @@ describe('useLayoutEffect Hook Test', () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={0} />, container, () => LogUtils.log('callback effect'));
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
'num: 0',
|
'num: 0',
|
||||||
'num Layouteffect [0]',
|
'num Layouteffect [0]',
|
||||||
|
@ -85,7 +83,7 @@ describe('useLayoutEffect Hook Test', () => {
|
||||||
|
|
||||||
// 更新
|
// 更新
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
Horizon.render(<App num={1} />, container, () => LogUtils.log('callback effect'));
|
||||||
})
|
})
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
// 异步effect
|
// 异步effect
|
||||||
|
@ -103,7 +101,7 @@ describe('useLayoutEffect Hook Test', () => {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
act(() => {
|
act(() => {
|
||||||
HorizonDOM.render(null, container, () => LogUtils.log('callback effect'));
|
Horizon.render(null, container, () => LogUtils.log('callback effect'));
|
||||||
})
|
})
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
// 同步Layouteffect销毁
|
// 同步Layouteffect销毁
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
import * as LogUtils from '../../jest/logUtils';
|
import * as LogUtils from '../../jest/logUtils';
|
||||||
import Text from '../../jest/Text';
|
import Text from '../../jest/Text';
|
||||||
|
|
||||||
describe('useMemo Hook Test', () => {
|
describe('useMemo Hook Test', () => {
|
||||||
const { useMemo, useState } = React;
|
const { useMemo, useState } = Horizon;
|
||||||
|
|
||||||
it('测试useMemo', () => {
|
it('测试useMemo', () => {
|
||||||
let setMemo;
|
let setMemo;
|
||||||
|
@ -24,7 +22,7 @@ describe('useMemo Hook Test', () => {
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App words="App" />, container);
|
Horizon.render(<App words="App" />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('App');
|
expect(container.querySelector('p').innerHTML).toBe('App');
|
||||||
expect(container.querySelector('#p').innerHTML).toBe('1');
|
expect(container.querySelector('#p').innerHTML).toBe('1');
|
||||||
// 修改useMemo的依赖项,num会加一,text会改变。
|
// 修改useMemo的依赖项,num会加一,text会改变。
|
||||||
|
@ -49,26 +47,26 @@ describe('useMemo Hook Test', () => {
|
||||||
}, [props._num]);
|
}, [props._num]);
|
||||||
return <Text text={num} />;
|
return <Text text={num} />;
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App _num={0} />, container);
|
Horizon.render(<App _num={0} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
0,
|
0,
|
||||||
1
|
1
|
||||||
]);
|
]);
|
||||||
expect(container.textContent).toBe('1');
|
expect(container.textContent).toBe('1');
|
||||||
|
|
||||||
HorizonDOM.render(<App _num={1} />, container);
|
Horizon.render(<App _num={1} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
1,
|
1,
|
||||||
2
|
2
|
||||||
]);
|
]);
|
||||||
expect(container.textContent).toBe('2');
|
expect(container.textContent).toBe('2');
|
||||||
|
|
||||||
HorizonDOM.render(<App _num={1} />, container);
|
Horizon.render(<App _num={1} />, container);
|
||||||
// 不会触发useMemo
|
// 不会触发useMemo
|
||||||
expect(LogUtils.getAndClear()).toEqual([2]);
|
expect(LogUtils.getAndClear()).toEqual([2]);
|
||||||
expect(container.textContent).toBe('2');
|
expect(container.textContent).toBe('2');
|
||||||
|
|
||||||
HorizonDOM.render(<App _num={2} />, container);
|
Horizon.render(<App _num={2} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([
|
expect(LogUtils.getAndClear()).toEqual([
|
||||||
2,
|
2,
|
||||||
3
|
3
|
||||||
|
@ -92,16 +90,16 @@ describe('useMemo Hook Test', () => {
|
||||||
return 2;
|
return 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
HorizonDOM.render(<App _num={num1} />, container);
|
Horizon.render(<App _num={num1} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
|
expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
|
||||||
|
|
||||||
HorizonDOM.render(<App _num={num1} />, container);
|
Horizon.render(<App _num={num1} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
|
expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
|
||||||
|
|
||||||
HorizonDOM.render(<App _num={num1} />, container);
|
Horizon.render(<App _num={num1} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
|
expect(LogUtils.getAndClear()).toEqual(['num 1', 1]);
|
||||||
|
|
||||||
HorizonDOM.render(<App _num={num2} />, container);
|
Horizon.render(<App _num={num2} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual(['num 2', 2]);
|
expect(LogUtils.getAndClear()).toEqual(['num 2', 2]);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
|
|
||||||
describe('useReducer Hook Test', () => {
|
describe('useReducer Hook Test', () => {
|
||||||
const { useReducer } = React;
|
const { useReducer } = Horizon;
|
||||||
|
|
||||||
it('简单使用useReducer', () => {
|
it('简单使用useReducer', () => {
|
||||||
const intlCar = { logo: '', price: 0 };
|
const intlCar = { logo: '', price: 0 };
|
||||||
let dispatch;
|
let dispatch;
|
||||||
|
@ -46,7 +44,7 @@ describe('useReducer Hook Test', () => {
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('');
|
expect(container.querySelector('p').innerHTML).toBe('');
|
||||||
expect(container.querySelector('#senP').innerHTML).toBe('0');
|
expect(container.querySelector('#senP').innerHTML).toBe('0');
|
||||||
// 触发bmw
|
// 触发bmw
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
import * as LogUtils from '../../jest/logUtils';
|
import * as LogUtils from '../../jest/logUtils';
|
||||||
import Text from '../../jest/Text';
|
import Text from '../../jest/Text';
|
||||||
|
|
||||||
describe('useRef Hook Test', () => {
|
describe('useRef Hook Test', () => {
|
||||||
const { useState, useRef } = React;
|
const { useState, useRef } = Horizon;
|
||||||
|
|
||||||
it('测试useRef', () => {
|
it('测试useRef', () => {
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
@ -22,7 +20,7 @@ describe('useRef Hook Test', () => {
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('1');
|
expect(container.querySelector('p').innerHTML).toBe('1');
|
||||||
expect(container.querySelector('#sp').innerHTML).toBe('1');
|
expect(container.querySelector('#sp').innerHTML).toBe('1');
|
||||||
// 点击按钮触发num加1,ref不变
|
// 点击按钮触发num加1,ref不变
|
||||||
|
@ -46,7 +44,7 @@ describe('useRef Hook Test', () => {
|
||||||
)
|
)
|
||||||
|
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([1]);
|
expect(LogUtils.getAndClear()).toEqual([1]);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('1');
|
expect(container.querySelector('p').innerHTML).toBe('1');
|
||||||
// 点击按钮触发ref.current加1
|
// 点击按钮触发ref.current加1
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
/* eslint-disable no-undef */
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as React from '../../../../libs/horizon/src/external/Horizon';
|
|
||||||
import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal';
|
|
||||||
import * as LogUtils from '../../jest/logUtils';
|
import * as LogUtils from '../../jest/logUtils';
|
||||||
import { act } from '../../jest/customMatcher';
|
import { act } from '../../jest/customMatcher';
|
||||||
import Text from '../../jest/Text';
|
import Text from '../../jest/Text';
|
||||||
|
@ -11,7 +9,7 @@ describe('useState Hook Test', () => {
|
||||||
forwardRef,
|
forwardRef,
|
||||||
useImperativeHandle,
|
useImperativeHandle,
|
||||||
memo
|
memo
|
||||||
} = React;
|
} = Horizon;
|
||||||
|
|
||||||
it('简单使用useState', () => {
|
it('简单使用useState', () => {
|
||||||
const App = () => {
|
const App = () => {
|
||||||
|
@ -23,7 +21,7 @@ describe('useState Hook Test', () => {
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('0');
|
expect(container.querySelector('p').innerHTML).toBe('0');
|
||||||
// 点击按钮触发num加1
|
// 点击按钮触发num加1
|
||||||
container.querySelector('button').click();
|
container.querySelector('button').click();
|
||||||
|
@ -45,7 +43,7 @@ describe('useState Hook Test', () => {
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('00');
|
expect(container.querySelector('p').innerHTML).toBe('00');
|
||||||
container.querySelector('p').click();
|
container.querySelector('p').click();
|
||||||
expect(container.querySelector('p').innerHTML).toBe('12');
|
expect(container.querySelector('p').innerHTML).toBe('12');
|
||||||
|
@ -67,7 +65,7 @@ describe('useState Hook Test', () => {
|
||||||
</p>
|
</p>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('0');
|
expect(container.querySelector('p').innerHTML).toBe('0');
|
||||||
container.querySelector('p').click();
|
container.querySelector('p').click();
|
||||||
expect(container.querySelector('p').innerHTML).toBe('2');
|
expect(container.querySelector('p').innerHTML).toBe('2');
|
||||||
|
@ -82,7 +80,7 @@ describe('useState Hook Test', () => {
|
||||||
setNum = _setNum;
|
setNum = _setNum;
|
||||||
return <Text text={num} />;
|
return <Text text={num} />;
|
||||||
}
|
}
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('0');
|
expect(container.querySelector('p').innerHTML).toBe('0');
|
||||||
expect(LogUtils.getAndClear()).toEqual([0]);
|
expect(LogUtils.getAndClear()).toEqual([0]);
|
||||||
// useState修改state 时,设置相同的值,函数组件不会重新渲染
|
// useState修改state 时,设置相同的值,函数组件不会重新渲染
|
||||||
|
@ -101,8 +99,8 @@ describe('useState Hook Test', () => {
|
||||||
return <p>{num}</p>;
|
return <p>{num}</p>;
|
||||||
|
|
||||||
})
|
})
|
||||||
const ref = React.createRef(null);
|
const ref = Horizon.createRef(null);
|
||||||
HorizonDOM.render(<App initNum={1} ref={ref} />, container);
|
Horizon.render(<App initNum={1} ref={ref} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([1]);
|
expect(LogUtils.getAndClear()).toEqual([1]);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('1');
|
expect(container.querySelector('p').innerHTML).toBe('1');
|
||||||
// 设置num为3
|
// 设置num为3
|
||||||
|
@ -119,11 +117,11 @@ describe('useState Hook Test', () => {
|
||||||
setNum = _setNum;
|
setNum = _setNum;
|
||||||
return <Text text={num} />;
|
return <Text text={num} />;
|
||||||
})
|
})
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([0]);
|
expect(LogUtils.getAndClear()).toEqual([0]);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('0');
|
expect(container.querySelector('p').innerHTML).toBe('0');
|
||||||
// 不会重新渲染
|
// 不会重新渲染
|
||||||
HorizonDOM.render(<App />, container);
|
Horizon.render(<App />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual([]);
|
expect(LogUtils.getAndClear()).toEqual([]);
|
||||||
expect(container.querySelector('p').innerHTML).toBe('0');
|
expect(container.querySelector('p').innerHTML).toBe('0');
|
||||||
// 会重新渲染
|
// 会重新渲染
|
||||||
|
@ -153,7 +151,7 @@ describe('useState Hook Test', () => {
|
||||||
return <Text text={`Number: ${num}, Count: ${count}`} />;
|
return <Text text={`Number: ${num}, Count: ${count}`} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
HorizonDOM.render(<App hasCount={true} />, container);
|
Horizon.render(<App hasCount={true} />, container);
|
||||||
expect(LogUtils.getAndClear()).toEqual(['Number: 0, Count: 0']);
|
expect(LogUtils.getAndClear()).toEqual(['Number: 0, Count: 0']);
|
||||||
expect(container.textContent).toBe('Number: 0, Count: 0');
|
expect(container.textContent).toBe('Number: 0, Count: 0');
|
||||||
act(() => {
|
act(() => {
|
||||||
|
@ -164,7 +162,7 @@ describe('useState Hook Test', () => {
|
||||||
expect(container.textContent).toBe('Number: 1, Count: 2');
|
expect(container.textContent).toBe('Number: 1, Count: 2');
|
||||||
|
|
||||||
expect(() => {
|
expect(() => {
|
||||||
HorizonDOM.render(<App hasCount={false} />, container);
|
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.',
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import * as React from '../../../libs/horizon/src/external/Horizon';
|
import * as Horizon from '@cloudsop/horizon/index.ts';
|
||||||
import * as LogUtils from '../jest/logUtils';
|
import * as LogUtils from '../jest/logUtils';
|
||||||
|
|
||||||
const Text = (props) => {
|
const Text = (props) => {
|
||||||
|
|
|
@ -45,11 +45,11 @@ const cjs = {
|
||||||
...plugins,
|
...plugins,
|
||||||
new CopyWebpackPlugin([
|
new CopyWebpackPlugin([
|
||||||
{
|
{
|
||||||
from: path.join(__dirname, '../../libs/index.js'),
|
from: path.join(__dirname, '../../libs/horizon/index.js'),
|
||||||
to: path.join(__dirname, '../../build/horizon/index.js'),
|
to: path.join(__dirname, '../../build/horizon/index.js'),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
from: path.join(__dirname, '../../libs/package.json'),
|
from: path.join(__dirname, '../../libs/horizon/package.json'),
|
||||||
to: path.join(__dirname, '../../build/horizon/package.json'),
|
to: path.join(__dirname, '../../build/horizon/package.json'),
|
||||||
}
|
}
|
||||||
])
|
])
|
||||||
|
|
Loading…
Reference in New Issue