diff --git a/.eslintrc.js b/.eslintrc.js index cbc6dfd8..79557bf5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -29,7 +29,6 @@ module.exports = { node: true, es6: true, }, - rules: { 'accessor-pairs': 'off', 'brace-style': ['error', '1tbs'], @@ -42,4 +41,14 @@ module.exports = { 'no-for-of-loops/no-for-of-loops': 'error', 'no-function-declare-after-return/no-function-declare-after-return': 'error', }, + overrides: [ + { + files: [ + 'scripts/__tests__/**/*.js' + ], + globals: { + container: true + }, + }, + ], }; diff --git a/babel.config.js b/babel.config.js index b7da15b0..37c7ac9e 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,6 @@ module.exports = { presets: [ - '@babel/react', + '@babel/react', '@babel/preset-typescript', ['@babel/preset-env', { targets: { node: 'current' } }] ], @@ -30,7 +30,10 @@ module.exports = { ['@babel/plugin-proposal-private-methods', { 'loose': true }], ['@babel/plugin-proposal-private-property-in-object', { 'loose': true }], '@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', ], }; diff --git a/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js b/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js index 071c4512..e2d51e9d 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseCallback.test.js @@ -1,9 +1,7 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; describe('useCallback Hook Test', () => { - const { useState, useCallback } = React; + const { useState, useCallback } = Horizon; it('测试useCallback', () => { const App = (props) => { @@ -18,7 +16,7 @@ describe('useCallback Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('0'); // 点击按钮触发num加1 container.querySelector('button').click(); @@ -27,7 +25,7 @@ describe('useCallback Hook Test', () => { container.querySelector('button').click(); expect(container.querySelector('p').innerHTML).toBe('1'); - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('1'); // 依赖项有变化，点击按钮num增加 container.querySelector('button').click(); diff --git a/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js b/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js index 89482aff..d94443b7 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseContext.test.js @@ -1,11 +1,9 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; import { act } from '../../jest/customMatcher'; describe('useContext Hook Test', () => { - const { useState, useContext } = React; - const { unmountComponentAtNode } = HorizonDOM; + const { useState, useContext } = Horizon; + const { unmountComponentAtNode } = Horizon; it('简单使用useContext', () => { const LanguageTypes = { @@ -13,7 +11,7 @@ describe('useContext Hook Test', () => { JAVASCRIPT: 'JavaScript', }; const defaultValue = { type: LanguageTypes.JAVASCRIPT }; - const SystemLanguageContext = React.createContext(defaultValue); + const SystemLanguageContext = Horizon.createContext(defaultValue); const SystemLanguageProvider = ({ type, children }) => { return ( @@ -38,11 +36,11 @@ describe('useContext Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); // 测试当Provider未提供时，获取到的默认值'JavaScript'。 expect(container.querySelector('p').innerHTML).toBe('JavaScript'); unmountComponentAtNode(container); - HorizonDOM.render(, container); + Horizon.render(, container); // 测试当Provider提供时，可以获取到Provider的值'Java'。 expect(container.querySelector('p').innerHTML).toBe('Java'); // 测试当Provider改变时，可以获取到最新Provider的值。 diff --git a/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js b/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js index e4a52d65..b1bc34fe 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseEffect.test.js @@ -1,18 +1,16 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; import * as LogUtils from '../../jest/logUtils'; import { act } from '../../jest/customMatcher'; import Text from '../../jest/Text'; describe('useEffect Hook Test', () => { - const { - useEffect, - useLayoutEffect, - useState, - memo, - forwardRef - } = React; + const { + useEffect, + useLayoutEffect, + useState, + memo, + forwardRef + } = Horizon; it('简单使用useEffect', () => { const App = () => { @@ -27,7 +25,7 @@ describe('useEffect Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(document.getElementById('p').style.display).toBe('block'); // 点击按钮触发num加1 container.querySelector('button').click(); @@ -42,7 +40,7 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => { + Horizon.render(, container, () => { LogUtils.log('num effect'); }); // 第一次渲染为同步，所以同步执行的可以写在act里做判断 @@ -50,7 +48,7 @@ describe('useEffect Hook Test', () => { expect(container.textContent).toBe('op'); }); act(() => { - HorizonDOM.render(null, container, () => { + Horizon.render(null, container, () => { LogUtils.log('num effect89'); }); // 第二次渲染为异步，所以同步执行的不可以写在act里做判断，act里拿到的为空数组 @@ -72,7 +70,7 @@ describe('useEffect Hook Test', () => { } const na = ; // 必须设置key值，否则在diff的时候na会被视为不同组件 - HorizonDOM.render([, na], container); + Horizon.render([, na], container); expect(LogUtils.getAndClear()).toEqual([ 'App', 'NewApp' @@ -80,7 +78,7 @@ describe('useEffect Hook Test', () => { expect(container.textContent).toBe('AppNewApp'); expect(LogUtils.getAndClear()).toEqual([]); // 在执行新的render前，会执行完上一次render的useEffect，所以LogUtils会加入'NewApp effect'。 - HorizonDOM.render([na], container); + Horizon.render([na], container); expect(LogUtils.getAndClear()).toEqual(['NewApp effect']); expect(container.textContent).toBe('NewApp'); expect(LogUtils.getAndClear()).toEqual([]); @@ -104,7 +102,7 @@ describe('useEffect Hook Test', () => { return ; } // 必须设置key值，否则在diff的时候na会被视为不同组件 - HorizonDOM.render([, ], container); + Horizon.render([, ], container); expect(LogUtils.getAndClear()).toEqual([ 'App', 'NewApp', @@ -122,7 +120,7 @@ describe('useEffect Hook Test', () => { const App = () => { useLayoutEffect(() => { LogUtils.log('App Layout effect'); - HorizonDOM.render(, newContainer); + Horizon.render(, newContainer); }); return ; } @@ -133,7 +131,7 @@ describe('useEffect Hook Test', () => { return ; } // 必须设置key值，否则在diff的时候na会被视为不同组件 - HorizonDOM.render([, ], container); + Horizon.render([, ], container); expect(LogUtils.getAndClear()).toEqual([ 'App', 'NewApp', @@ -153,13 +151,13 @@ describe('useEffect Hook Test', () => { return ; } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']); expect(container.textContent).toEqual('num: 0'); }) expect(LogUtils.getAndClear()).toEqual(['First effect [0]']); act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }) // 此时异步执行，act执行完后会执行新render的useEffect @@ -182,13 +180,13 @@ describe('useEffect Hook Test', () => { return ; } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual(['num: 0', 'callback effect']); expect(container.textContent).toEqual('num: 0'); }) expect(LogUtils.getAndClear()).toEqual(['First effect [0]', 'Second effect [0]']); act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }) // 第二次render时异步执行，act保证所有效果都已更新，所以先常规记录日志 // 然后记录useEffect的日志 @@ -231,7 +229,7 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0,word: App', 'num Layouteffect [0]', @@ -246,21 +244,21 @@ describe('useEffect Hook Test', () => { act(() => { // 此时word改变，num不变 - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ - 'num: 0,word: React', + 'num: 0,word: Horizon', 'word Layouteffect destroy', - 'word Layouteffect [React]', + 'word Layouteffect [Horizon]', 'callback effect', // 最后执行异步的 'word effect destroy', - 'word effect [React]', + 'word effect [Horizon]', ]); act(() => { // 此时num和word的所有effect都销毁 - HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); + Horizon.render(null, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ 'num Layouteffect destroy', @@ -284,7 +282,7 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0', 'callback effect' @@ -296,7 +294,7 @@ describe('useEffect Hook Test', () => { ]); act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ 'num: 1', @@ -309,7 +307,7 @@ describe('useEffect Hook Test', () => { expect(LogUtils.getAndClear()).toEqual([]); act(() => { - HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); + Horizon.render(null, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ 'callback effect', @@ -331,7 +329,7 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0', 'callback effect' @@ -343,7 +341,7 @@ describe('useEffect Hook Test', () => { ]); act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ 'num: 1', @@ -354,7 +352,7 @@ describe('useEffect Hook Test', () => { expect(LogUtils.getAndClear()).toEqual([]); act(() => { - HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); + Horizon.render(null, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ 'callback effect', @@ -367,7 +365,7 @@ describe('useEffect Hook Test', () => { it('useEffect里使用useState(1', () => { let setNum; const App = () => { - const [num, _setNum] = React.useState(0); + const [num, _setNum] = Horizon.useState(0); useEffect(() => { LogUtils.log(`num effect [${num}]`); setNum = () => _setNum(1); @@ -382,7 +380,7 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0', 'num Layouteffect [0]', @@ -415,7 +413,7 @@ describe('useEffect Hook Test', () => { return ; } - HorizonDOM.render(, container, () => LogUtils.log('App callback effect')); + Horizon.render(, container, () => LogUtils.log('App callback effect')); expect(LogUtils.getAndClear()).toEqual(['Num: 0', 'App callback effect']); expect(container.textContent).toEqual('Num: 0'); act(() => { @@ -445,7 +443,7 @@ describe('useEffect Hook Test', () => { return ; }) act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 0, 'callback effect' @@ -456,7 +454,7 @@ describe('useEffect Hook Test', () => { // 不会重新渲染 act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual(['callback effect']); expect(container.textContent).toEqual('0'); @@ -475,7 +473,7 @@ describe('useEffect Hook Test', () => { expect(LogUtils.getAndClear()).toEqual([]); act(() => { - HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); + Horizon.render(null, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ 'callback effect', @@ -497,7 +495,7 @@ describe('useEffect Hook Test', () => { return ; }, compare) act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 0, 'callback effect' @@ -508,7 +506,7 @@ describe('useEffect Hook Test', () => { // 不会重新渲染 act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual(['callback effect']); expect(container.textContent).toEqual('0'); @@ -516,7 +514,7 @@ describe('useEffect Hook Test', () => { // 会重新渲染 act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }); expect(LogUtils.getAndClear()).toEqual([ 1, @@ -529,7 +527,7 @@ describe('useEffect Hook Test', () => { expect(LogUtils.getAndClear()).toEqual([]); 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(container.textContent).toEqual(''); @@ -550,7 +548,7 @@ describe('useEffect Hook Test', () => { return ; } act(() => { - HorizonDOM.render(, container, () => + Horizon.render(, container, () => LogUtils.log('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']); act(() => { - HorizonDOM.render(null, container, () => + Horizon.render(null, container, () => LogUtils.log('App callback effect'), ); }); @@ -592,14 +590,14 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('num effect')); + Horizon.render(, container, () => LogUtils.log('num effect')); expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']); expect(container.textContent).toBe('Number: 0'); }); expect(LogUtils.getAndClear()).toEqual(['num effect [0]']); 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(container.textContent).toBe(''); @@ -618,7 +616,7 @@ describe('useEffect Hook Test', () => { return ; } - HorizonDOM.render(, container, () => LogUtils.log('num effect')); + Horizon.render(, container, () => LogUtils.log('num effect')); expect(LogUtils.getAndClear()).toEqual(['Number: 0', 'num effect']); expect(container.textContent).toBe('Number: 0'); @@ -648,13 +646,13 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('num effect')); + Horizon.render(, container, () => LogUtils.log('num effect')); expect(LogUtils.getAndClear()).toEqual(['useEffect', 'num effect']); }); expect(LogUtils.getAndClear()).toEqual(['effect']); act(() => { - HorizonDOM.render(null, container); + Horizon.render(null, container); }); // 不会处理setNum(1) expect(LogUtils.getAndClear()).toEqual(['effect destroy']); @@ -663,7 +661,7 @@ describe('useEffect Hook Test', () => { it('当组件的更新方法在卸载函数中，组件的子组件更新不会告警', () => { const App = () => { LogUtils.log('App'); - const appRef = React.createRef(null); + const appRef = Horizon.createRef(null); useEffect(() => { LogUtils.log('App effect'); return () => { @@ -686,7 +684,7 @@ describe('useEffect Hook Test', () => { AppChild = forwardRef(AppChild); act(() => { - HorizonDOM.render(, container, () => LogUtils.log('num effect')); + Horizon.render(, container, () => LogUtils.log('num effect')); expect(LogUtils.getAndClear()).toEqual([ 'App', 'AppChild', @@ -696,7 +694,7 @@ describe('useEffect Hook Test', () => { expect(LogUtils.getAndClear()).toEqual(['Child effect', 'App effect']); act(() => { - HorizonDOM.render(null, container); + Horizon.render(null, container); }); // 销毁时执行appRef.current(1)不会报错 expect(LogUtils.getAndClear()).toEqual(['App effect destroy']); @@ -722,7 +720,7 @@ describe('useEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('num effect')); + Horizon.render(, container, () => LogUtils.log('num effect')); expect(LogUtils.getAndClear()).toEqual([ 'App', 'AppChild', @@ -732,7 +730,7 @@ describe('useEffect Hook Test', () => { expect(LogUtils.getAndClear()).toEqual(['Child effect']); act(() => { - HorizonDOM.render(null, container); + Horizon.render(null, container); }); // 销毁时执行 props.setNum(1);不会报错 expect(LogUtils.getAndClear()).toEqual(['Child effect destroy']); diff --git a/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js b/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js index 10ce8623..b7f5d6e8 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseImperativeHandle.test.js @@ -1,6 +1,4 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; import * as LogUtils from '../../jest/logUtils'; import { act } from '../../jest/customMatcher'; import Text from '../../jest/Text'; @@ -10,9 +8,9 @@ describe('useImperativeHandle Hook Test', () => { useState, useImperativeHandle, forwardRef - } = React; - const { unmountComponentAtNode } = HorizonDOM; - + } = Horizon; + const { unmountComponentAtNode } = Horizon; + it('测试useImperativeHandle', () => { let App = (props, ref) => { @@ -28,9 +26,9 @@ describe('useImperativeHandle Hook Test', () => { App = forwardRef(App); App1 = forwardRef(App1); - const counter = React.createRef(null); - const counter1 = React.createRef(null); - HorizonDOM.render(, container); + const counter = Horizon.createRef(null); + const counter1 = Horizon.createRef(null); + Horizon.render(, container); expect(counter.current.num).toBe(0); act(() => { counter.current.setNum(1); @@ -40,7 +38,7 @@ describe('useImperativeHandle Hook Test', () => { // 清空container unmountComponentAtNode(container); - HorizonDOM.render(, container); + Horizon.render(, container); expect(counter1.current.num1).toBe(0); act(() => { counter1.current.setNum1(1); @@ -64,9 +62,9 @@ describe('useImperativeHandle Hook Test', () => { App = forwardRef(App); App1 = forwardRef(App1); - const counter = React.createRef(null); - const counter1 = React.createRef(null); - HorizonDOM.render(, container); + const counter = Horizon.createRef(null); + const counter1 = Horizon.createRef(null); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([0]); expect(counter.current.num).toBe(0); act(() => { @@ -78,7 +76,7 @@ describe('useImperativeHandle Hook Test', () => { // 清空container unmountComponentAtNode(container); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([0]); expect(counter1.current.num1).toBe(0); act(() => { diff --git a/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js b/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js index ec7eda11..84226eac 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseLayoutEffect.test.js @@ -1,6 +1,4 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; import * as LogUtils from '../../jest/logUtils'; import { act } from '../../jest/customMatcher'; import Text from '../../jest/Text'; @@ -10,7 +8,7 @@ describe('useLayoutEffect Hook Test', () => { useState, useEffect, useLayoutEffect - } = React; + } = Horizon; it('简单使用useLayoutEffect', () => { const App = () => { @@ -25,7 +23,7 @@ describe('useLayoutEffect Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(document.getElementById('p').style.display).toBe('none'); container.querySelector('button').click(); expect(container.querySelector('p').style.display).toBe('inline'); @@ -38,7 +36,7 @@ describe('useLayoutEffect Hook Test', () => { }); return ; } - HorizonDOM.render(, container, () => LogUtils.log('Sync effect')); + Horizon.render(, container, () => LogUtils.log('Sync effect')); expect(LogUtils.getAndClear()).toEqual([ 1, // 同步在渲染之后 @@ -47,7 +45,7 @@ describe('useLayoutEffect Hook Test', () => { ]); expect(container.querySelector('p').innerHTML).toBe('1'); // 更新 - HorizonDOM.render(, container, () => LogUtils.log('Sync effect')); + Horizon.render(, container, () => LogUtils.log('Sync effect')); expect(LogUtils.getAndClear()).toEqual([ 2, 'LayoutEffect', @@ -74,7 +72,7 @@ describe('useLayoutEffect Hook Test', () => { } act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); expect(LogUtils.getAndClear()).toEqual([ 'num: 0', 'num Layouteffect [0]', @@ -85,7 +83,7 @@ describe('useLayoutEffect Hook Test', () => { // 更新 act(() => { - HorizonDOM.render(, container, () => LogUtils.log('callback effect')); + Horizon.render(, container, () => LogUtils.log('callback effect')); }) expect(LogUtils.getAndClear()).toEqual([ // 异步effect @@ -103,7 +101,7 @@ describe('useLayoutEffect Hook Test', () => { ]); act(() => { - HorizonDOM.render(null, container, () => LogUtils.log('callback effect')); + Horizon.render(null, container, () => LogUtils.log('callback effect')); }) expect(LogUtils.getAndClear()).toEqual([ // 同步Layouteffect销毁 diff --git a/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js b/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js index 294ae787..41882449 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseMemo.test.js @@ -1,11 +1,9 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; import * as LogUtils from '../../jest/logUtils'; import Text from '../../jest/Text'; describe('useMemo Hook Test', () => { - const { useMemo, useState } = React; + const { useMemo, useState } = Horizon; it('测试useMemo', () => { let setMemo; @@ -24,7 +22,7 @@ describe('useMemo Hook Test', () => { ); } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('App'); expect(container.querySelector('#p').innerHTML).toBe('1'); // 修改useMemo的依赖项，num会加一，text会改变。 @@ -49,26 +47,26 @@ describe('useMemo Hook Test', () => { }, [props._num]); return ; } - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([ 0, 1 ]); expect(container.textContent).toBe('1'); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([ 1, 2 ]); expect(container.textContent).toBe('2'); - HorizonDOM.render(, container); + Horizon.render(, container); // 不会触发useMemo expect(LogUtils.getAndClear()).toEqual([2]); expect(container.textContent).toBe('2'); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([ 2, 3 @@ -92,16 +90,16 @@ describe('useMemo Hook Test', () => { return 2; } - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 1', 1]); - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['num 2', 2]); }); }); diff --git a/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js b/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js index 29c228c1..a6a427ba 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseReducer.test.js @@ -1,10 +1,8 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; describe('useReducer Hook Test', () => { - const { useReducer } = React; - + const { useReducer } = Horizon; + it('简单使用useReducer', () => { const intlCar = { logo: '', price: 0 }; let dispatch; @@ -46,7 +44,7 @@ describe('useReducer Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe(''); expect(container.querySelector('#senP').innerHTML).toBe('0'); // 触发bmw diff --git a/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js b/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js index 39e663bb..b2bab667 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseRef.test.js @@ -1,11 +1,9 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; import * as LogUtils from '../../jest/logUtils'; import Text from '../../jest/Text'; describe('useRef Hook Test', () => { - const { useState, useRef } = React; + const { useState, useRef } = Horizon; it('测试useRef', () => { const App = () => { @@ -22,7 +20,7 @@ describe('useRef Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('1'); expect(container.querySelector('#sp').innerHTML).toBe('1'); // 点击按钮触发num加1,ref不变 @@ -46,7 +44,7 @@ describe('useRef Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([1]); expect(container.querySelector('p').innerHTML).toBe('1'); // 点击按钮触发ref.current加1 diff --git a/scripts/__tests__/ComponentTest/HookTest/UseState.test.js b/scripts/__tests__/ComponentTest/HookTest/UseState.test.js index adccf421..b9e1d950 100644 --- a/scripts/__tests__/ComponentTest/HookTest/UseState.test.js +++ b/scripts/__tests__/ComponentTest/HookTest/UseState.test.js @@ -1,6 +1,4 @@ -/* eslint-disable no-undef */ -import * as React from '../../../../libs/horizon/src/external/Horizon'; -import * as HorizonDOM from '../../../../libs/horizon/src/dom/DOMExternal'; +import * as Horizon from '@cloudsop/horizon/index.ts'; import * as LogUtils from '../../jest/logUtils'; import { act } from '../../jest/customMatcher'; import Text from '../../jest/Text'; @@ -11,7 +9,7 @@ describe('useState Hook Test', () => { forwardRef, useImperativeHandle, memo - } = React; + } = Horizon; it('简单使用useState', () => { const App = () => { @@ -23,7 +21,7 @@ describe('useState Hook Test', () => { ) } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('0'); // 点击按钮触发num加1 container.querySelector('button').click(); @@ -45,7 +43,7 @@ describe('useState Hook Test', () => {

); } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('00'); container.querySelector('p').click(); expect(container.querySelector('p').innerHTML).toBe('12'); @@ -67,7 +65,7 @@ describe('useState Hook Test', () => {

); } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('0'); container.querySelector('p').click(); expect(container.querySelector('p').innerHTML).toBe('2'); @@ -82,7 +80,7 @@ describe('useState Hook Test', () => { setNum = _setNum; return ; } - HorizonDOM.render(, container); + Horizon.render(, container); expect(container.querySelector('p').innerHTML).toBe('0'); expect(LogUtils.getAndClear()).toEqual([0]); // useState修改state 时，设置相同的值，函数组件不会重新渲染 @@ -101,8 +99,8 @@ describe('useState Hook Test', () => { return

{num}

; }) - const ref = React.createRef(null); - HorizonDOM.render(, container); + const ref = Horizon.createRef(null); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([1]); expect(container.querySelector('p').innerHTML).toBe('1'); // 设置num为3 @@ -119,11 +117,11 @@ describe('useState Hook Test', () => { setNum = _setNum; return ; }) - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([0]); expect(container.querySelector('p').innerHTML).toBe('0'); // 不会重新渲染 - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual([]); expect(container.querySelector('p').innerHTML).toBe('0'); // 会重新渲染 @@ -153,7 +151,7 @@ describe('useState Hook Test', () => { return ; } - HorizonDOM.render(, container); + Horizon.render(, container); expect(LogUtils.getAndClear()).toEqual(['Number: 0, Count: 0']); expect(container.textContent).toBe('Number: 0, Count: 0'); act(() => { @@ -164,7 +162,7 @@ describe('useState Hook Test', () => { expect(container.textContent).toBe('Number: 1, Count: 2'); expect(() => { - HorizonDOM.render(, container); + Horizon.render(, container); }).toThrow( 'Hooks are less than expected, please check whether the hook is written in the condition.', ); diff --git a/scripts/__tests__/jest/Text.js b/scripts/__tests__/jest/Text.js index 24d63cf8..781c6d5a 100644 --- a/scripts/__tests__/jest/Text.js +++ b/scripts/__tests__/jest/Text.js @@ -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'; const Text = (props) => { diff --git a/scripts/webpack/webpack.pro.js b/scripts/webpack/webpack.pro.js index b57b8eba..3494e99e 100644 --- a/scripts/webpack/webpack.pro.js +++ b/scripts/webpack/webpack.pro.js @@ -45,11 +45,11 @@ const cjs = { ...plugins, 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'), }, { - from: path.join(__dirname, '../../libs/package.json'), + from: path.join(__dirname, '../../libs/horizon/package.json'), to: path.join(__dirname, '../../build/horizon/package.json'), } ])