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

Match-id-5608cee07a41134ad23611516e51dd2f801e2781

This commit is contained in:
* 2022-03-21 15:36:23 +08:00 committed by *
parent 886237cfb7 5dded5b4af
commit 35139caead
15 changed files with 148 additions and 401 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
.eslintrc.js
View File

@ -1,12 +1,8 @@
const restrictedGlobals = require('confusing-browser-globals');
const OFF = 0;
const ERROR = 2;
module.exports = { module.exports = {
extends: ['fbjs', 'prettier'], extends: [
'eslint:recommended',
// Stop ESLint from looking for a configuration file in parent folders 'prettier',
],
root: true, root: true,
plugins: [ plugins: [
@ -14,173 +10,45 @@ module.exports = {
'no-for-of-loops', 'no-for-of-loops',
'no-function-declare-after-return', 'no-function-declare-after-return',
'react', 'react',
'@typescript-eslint',
], ],
parser: 'babel-eslint', parser: '@typescript-eslint/parser',
parserOptions: { parserOptions: {
ecmaVersion: 8, ecmaVersion: 8,
sourceType: 'module', sourceType: 'module',
ecmaFeatures: { ecmaFeatures: {
jsx: true,
modules: true,
experimentalObjectRestSpread: true, experimentalObjectRestSpread: true,
}, },
}, },
env: { env: {
'mocha': true, browser: true,
'node': true, jest: true,
node: true,
es6: true,
}, },
// We're stricter than the default config, mostly. We'll override a few rules
// and then enable some React specific ones.
rules: { rules: {
'accessor-pairs': OFF, 'accessor-pairs': 'off',
'brace-style': [ERROR, '1tbs'], 'brace-style': ['error', '1tbs'],
'consistent-return': OFF, 'func-style': ['warn', 'declaration', { allowArrowFunctions: true }],
'dot-location': [ERROR, 'property'], 'max-lines-per-function': 'off',
// We use console['error']() as a signal to not transform it: 'object-curly-newline': 'off',
'dot-notation': [ERROR, {allowPattern: '^(error|warn)$'}], // 尾随逗号
'eol-last': ERROR, 'comma-dangle': ['error', 'only-multiline'],
eqeqeq: [ERROR, 'allow-null'],
indent: OFF,
'jsx-quotes': [ERROR, 'prefer-double'],
'keyword-spacing': [ERROR, {after: true, before: true}],
'no-bitwise': OFF,
'no-inner-declarations': [ERROR, 'functions'],
'no-multi-spaces': ERROR,
'no-restricted-globals': [ERROR].concat(restrictedGlobals),
'no-restricted-syntax': [ERROR, 'WithStatement'],
'no-shadow': ERROR,
'no-unused-expressions': ERROR,
'no-unused-vars': [ERROR, {args: 'none'}],
'no-use-before-define': OFF,
'no-useless-concat': OFF,
quotes: [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true}],
'space-before-blocks': ERROR,
'space-before-function-paren': OFF,
'valid-typeof': [ERROR, {requireStringLiterals: true}],
// We apply these settings to files that should run on Node. 'no-for-of-loops/no-for-of-loops': 'error',
// They can't use JSX or ES6 modules, and must be in strict mode. 'no-function-declare-after-return/no-function-declare-after-return': 'error',
// They can, however, use other ES6 features.
// (Note these rules are overridden later for source files.)
'no-var': ERROR,
strict: ERROR,
// Enforced by Prettier
// TODO: Prettier doesn't handle long strings or long comments. Not a big
// deal. But I turned it off because loading the plugin causes some obscure
// syntax error and it didn't seem worth investigating.
'max-len': OFF,
// React & JSX
// Our transforms set this automatically
'react/jsx-boolean-value': [ERROR, 'always'],
'react/jsx-no-undef': ERROR,
// We don't care to do this
'react/jsx-sort-prop-types': OFF,
'react/jsx-space-before-closing': ERROR,
'react/jsx-uses-react': ERROR,
'react/no-is-mounted': OFF,
// This isn't useful in our test code
'react/react-in-jsx-scope': ERROR,
'react/self-closing-comp': ERROR,
// We don't care to do this
'react/jsx-wrap-multilines': [
ERROR,
{declaration: false, assignment: false},
],
// Prevent for...of loops because they require a Symbol polyfill.
// You can disable this rule for code that isn't shipped (e.g. build scripts and tests).
'no-for-of-loops/no-for-of-loops': ERROR,
// Prevent function declarations after return statements
'no-function-declare-after-return/no-function-declare-after-return': ERROR,
}, },
overrides: [ overrides: [
{ {
// We apply these settings to the source files that get compiled.
// They can use all features including JSX (but shouldn't use `var`).
files: [ files: [
// Internal forwarding modules 'scripts/__tests__/**/*.js'
'libs/*/*.js',
// Source files
'libs/*/src/**/*.js',
], ],
parser: 'babel-eslint',
parserOptions: {
ecmaVersion: 8,
sourceType: 'module',
},
rules: {
'no-var': ERROR,
'prefer-const': ERROR,
strict: OFF,
},
},
{
files: ['**/__tests__/*.js'],
rules: {
// https://github.com/jest-community/eslint-plugin-jest
'jest/no-focused-tests': ERROR,
'jest/valid-expect': ERROR,
'jest/valid-expect-in-promise': ERROR,
},
},
{
files: [
'**/__tests__/**/*.js',
'scripts/**/*.js',
'libs/*/npm/**/*.js',
'libs/dom-event-testing-library/**/*.js',
'libs/react-devtools*/**/*.js',
],
rules: {
'react-internal/no-production-logging': OFF,
'react-internal/warning-args': OFF,
},
},
{
files: ['libs/react-native-renderer/**/*.js'],
globals: { globals: {
nativeFabricUIManager: true, container: true
}, },
}, },
{
files: ['libs/react-transport-dom-webpack/**/*.js'],
globals: {
__webpack_chunk_load__: true,
__webpack_require__: true,
},
},
{
files: ['libs/scheduler/**/*.js'],
globals: {
TaskController: true,
},
},
{
files: [
'scripts/e2e-test/**/*.js',
'scripts/e2e-test/**/*.jsx',
],
parserOptions: {
sourceType: 'module',
},
}
], ],
globals: {
SharedArrayBuffer: true,
spyOnDev: true,
spyOnDevAndProd: true,
spyOnProd: true,
__PROFILE__: true,
__UMD__: true,
__EXPERIMENTAL__: true,
__VARIANT__: true,
gate: true,
trustedTypes: true,
},
}; };

7
babel.config.js
View File

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

4
package.json
View File

@ -51,6 +51,8 @@
"@mattiasbuelens/web-streams-polyfill": "^0.3.2", "@mattiasbuelens/web-streams-polyfill": "^0.3.2",
"@types/jest": "^26.0.24", "@types/jest": "^26.0.24",
"@types/node": "^17.0.18", "@types/node": "^17.0.18",
"@typescript-eslint/eslint-plugin": "^5.15.0",
"@typescript-eslint/parser": "^5.15.0",
"babel-core": "^6.26.3", "babel-core": "^6.26.3",
"babel-eslint": "^10.0.3", "babel-eslint": "^10.0.3",
"babel-jest": "^27.5.1", "babel-jest": "^27.5.1",
@ -66,7 +68,6 @@
"ejs": "^3.1.6", "ejs": "^3.1.6",
"error-stack-parser": "^2.0.6", "error-stack-parser": "^2.0.6",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-config-fbjs": "^1.1.1",
"eslint-config-prettier": "^6.9.0", "eslint-config-prettier": "^6.9.0",
"eslint-plugin-babel": "^5.3.0", "eslint-plugin-babel": "^5.3.0",
"eslint-plugin-flowtype": "^2.25.0", "eslint-plugin-flowtype": "^2.25.0",
@ -87,7 +88,6 @@
"react-lifecycles-compat": "^3.0.4", "react-lifecycles-compat": "^3.0.4",
"regenerator-runtime": "^0.13.9", "regenerator-runtime": "^0.13.9",
"rimraf": "^3.0.0", "rimraf": "^3.0.0",
"tslint": "^6.0.0",
"typescript": "^3.9.7", "typescript": "^3.9.7",
"webpack": "^4.46.0", "webpack": "^4.46.0",
"webpack-cli": "^4.7.2" "webpack-cli": "^4.7.2"

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

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

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

@ -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的值。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4
scripts/webpack/webpack.pro.js
View File

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

106
tslint.json
View File

@ -1,106 +0,0 @@
{
"rules": {
"deprecation": true,
"use-isnan": true,
"max-line-length": [
true,
{
"limit": 120,
"ignore-pattern": "^import |^export {(.*?)}",
"check-strings": false,
"check-regex": true
}
],
"member-ordering": [true, { "order": "fields-first" }],
"no-unnecessary-type-assertion": true,
"no-parameter-reassignment": true,
"no-string-throw": true,
"no-unused-expression": true,
"no-duplicate-variable": true,
"no-for-in-array": true,
"no-arg": true,
"no-any": [true, { "ignore-rest-args": true }],
"no-shadowed-variable": [
true,
{
"class": true,
"enum": true,
"function": true,
"interface": false,
"namespace": true,
"typeAlias": false,
"typeParameter": false,
"underscore": false
}
],
"no-sparse-arrays": true,
"no-string-literal": true,
"no-for-in": true,
"no-invalid-this": true,
"no-switch-case-fall-through": true,
"no-inferrable-types": [true, "ignore-params", "ignore-properties"],
"no-non-null-assertion": true,
"no-this-assignment": [
true,
{ "allowed-names": ["^self$"], "allow-destructuring": true }
],
"no-var-keyword": true,
"no-require-imports": true,
"prefer-for-of": true,
"prefer-conditional-expression": [true, "check-else-if"],
"prefer-object-spread": true,
"typeof-compare": true,
"cyclomatic-complexity": [true, 20],
"prefer-readonly": true,
"prefer-const": true,
"radix": true,
"space-before-function-paren": [
true,
{
"anonymous": "never",
"named": "never",
"asyncArrow": "always",
"method": "never",
"constructor": "never"
}
],
"space-within-parens": 1,
"type-literal-delimiter": true,
"variable-name": {
"options": [
"ban-keywords",
"check-format",
"require-const-for-all-caps",
"allow-pascal-case"
]
},
"curly": true,
"class-name": true,
"one-line": [true, "check-catch", "check-finally", "check-else"],
"arrow-parens": [true, "ban-single-arg-parens"],
"indent": [true, "spaces", 4],
"one-variable-per-declaration": true,
"ban-comma-operator": true,
"function-constructor": true,
"semicolon": [true, "always", "ignore-bound-class-methods"],
"jsdoc-format": [true, "check-multiline-start"],
"no-irregular-whitespace": true,
"no-trailing-whitespace": [
true,
"ignore-comments",
"ignore-jsdoc",
"ignore-template-strings",
"ignore-blank-lines"
],
"triple-equals": true,
"prefer-template": [true, "allow-single-concat"],
"quotemark": [
true,
"single",
"jsx-double",
"avoid-template",
"avoid-escape"
]
},
"defaultSeverity": "warning"
}