Match-id-7f3b43e0f44981f1ede4e5b082c137a3f488ba7a

scripts/__tests__/ComponentTest/ComponentError.test.js

@@ -0,0 +1,43 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('Component Error Test', () => {
+  const LogUtils = getLogUtils();
+  it('createElement不能为null或undefined', () => {
+    const NullElement = null;
+    const UndefinedElement = undefined;
+
+    jest.spyOn(console, 'error').mockImplementation();
+    expect(() => {
+      Horizon.render(<NullElement />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: null');
+
+    expect(() => {
+      Horizon.render(<UndefinedElement />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: undefined');
+
+    const App = () => {
+      return <AppChild />;
+    };
+
+    let AppChild = () => {
+      return (
+        <NullElement />
+      );
+    };
+
+    expect(() => {
+      Horizon.render(<App />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: null');
+
+    AppChild = () => {
+      return (
+        <UndefinedElement />
+      );
+    };
+    
+    expect(() => {
+      Horizon.render(<App />, document.createElement('div'));
+    }).toThrow('Component type is invalid, got: undefined');
+  });
+});

scripts/__tests__/ComponentTest/FragmentComponent.test.js

@@ -0,0 +1,474 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+import { Text } from '../jest/commonComponents';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('Fragment', () => {
+  const LogUtils = getLogUtils();
+  const {
+    useEffect,
+    useRef,
+    act,
+  } = Horizon;
+  it('可以渲染空元素', () => {
+    const element = (
+      <Horizon.Fragment />
+    );
+
+    Horizon.render(element, container);
+
+    expect(container.textContent).toBe('');
+  });
+  it('可以渲染单个元素', () => {
+    const element = (
+      <Horizon.Fragment>
+        <Text text="Fragment" />
+      </Horizon.Fragment>
+    );
+
+    Horizon.render(element, container);
+
+    expect(LogUtils.getAndClear()).toEqual(['Fragment']);
+    expect(container.textContent).toBe('Fragment');
+  });
+
+  it('可以渲染混合元素', () => {
+    const element = (
+      <Horizon.Fragment>
+        Java and <Text text="JavaScript" />
+      </Horizon.Fragment>
+    );
+
+    Horizon.render(element, container);
+
+    expect(LogUtils.getAndClear()).toEqual(['JavaScript']);
+    expect(container.textContent).toBe('Java and JavaScript');
+  });
+
+  it('可以渲染集合元素', () => {
+    const App = [<Text text="Java" />, <Text text="JavaScript" />];
+    const element = (
+      <>
+        {App}
+      </>
+    );
+
+    Horizon.render(element, container);
+
+    expect(LogUtils.getAndClear()).toEqual(['Java', 'JavaScript']);
+    expect(container.textContent).toBe('JavaJavaScript');
+  });
+
+  it('元素被放进不同层级Fragment里时,状态不会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <>
+          <ChildApp logo={1} />
+        </>
+
+      ) : (
+          <>
+            <>
+              <ChildApp logo={2} />
+            </>
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 切换到不同层级Fragment时，副作用状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被放进单层Fragment里,且在Fragment的顶部时,状态会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <ChildApp logo={1} />
+      ) : (
+          <>
+            <ChildApp logo={2} />
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被放进单层Fragment里,但不在Fragment的顶部时,状态不会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <ChildApp logo={1} />
+      ) : (
+          <>
+            <div>123</div>
+            <ChildApp logo={2} />
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1232');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被放进多层Fragment里时,状态不会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <ChildApp logo={1} />
+      ) : (
+          <>
+            <>
+              <>
+                <ChildApp logo={2} />
+              </>
+            </>
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被切换放进同级Fragment里时,状态会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <>
+          <>
+            <>
+              <ChildApp logo={1} />
+            </>
+          </>
+        </>
+      ) : (
+          <>
+            <>
+              <>
+                <ChildApp logo={2} />
+              </>
+            </>
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('元素被切换放进同级Fragment,且在数组顶层时,状态会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <>
+          <>
+            <>
+              <ChildApp logo={1} />
+            </>
+          </>
+        </>
+      ) : (
+          <>
+            <>
+              <>
+                {[<ChildApp logo={2} />]}
+              </>
+            </>
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('数组里的顶层元素被切换放进单级Fragment时,状态会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        [<ChildApp logo={1} />]
+      ) : (
+          <>
+            <ChildApp logo={2} />
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual(['useEffect']);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual(['useEffect', 'useEffect']);
+    expect(container.textContent).toBe('1');
+  });
+
+  it('Fragment里的顶层数组里的顶层元素被切换放进不同级Fragment时,状态不会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <>
+          [<ChildApp logo={1} />]
+        </>
+      ) : (
+          <>
+            <>
+              <ChildApp logo={2} />
+            </>
+          </>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('[1]');
+  });
+
+  it('Fragment的key值不同时,状态不会保留', () => {
+    const ChildApp = (props) => {
+      const flag = useRef(true);
+      useEffect(() => {
+        if (flag.current) {
+          flag.current = false;
+        } else {
+          LogUtils.log('useEffect');
+        }
+      });
+ 
+      return <p>{props.logo}</p>;
+    };
+
+    const App = (props) => {
+      return props.change ? (
+        <Horizon.Fragment key='hf'>
+          <ChildApp logo={1} />
+        </Horizon.Fragment>
+      ) : (
+          <Horizon.Fragment key='nhf'>
+            <ChildApp logo={2} />
+          </Horizon.Fragment>
+        );
+    };
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    act(() => {
+      Horizon.render(<App change={false} />, container);
+    });
+    // 状态不会保留
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('2');
+
+    act(() => {
+      Horizon.render(<App change={true} />, container);
+    });
+    expect(LogUtils.getNotClear()).toEqual([]);
+    expect(container.textContent).toBe('1');
+  });
+});

scripts/__tests__/ComponentTest/LazyComponent.test.js

@@ -0,0 +1,187 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+import { Text } from '../jest/commonComponents';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('LazyComponent Test', () => {
+  const LogUtils = getLogUtils();
+  const mockImport = jest.fn(async (component) => {
+    return { default: component };
+  });
+
+  it('Horizon.lazy()', async () => {
+    class LazyComponent extends Horizon.Component {
+      static defaultProps = { language: 'Java' };
+
+      render() {
+        const text = `${this.props.greeting}: ${this.props.language}`;
+        return <span>{text}</span>;
+      }
+    }
+
+    const Lazy = Horizon.lazy(() => mockImport(LazyComponent));
+
+    Horizon.render(
+      <Horizon.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy greeting="Hi" />
+      </Horizon.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['Loading...']);
+    expect(container.textContent).toBe('Loading...');
+    expect(container.querySelector('span')).toBe(null);
+
+    await Promise.resolve();
+    Horizon.render(
+      <Horizon.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy greeting="Goodbye" />
+      </Horizon.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual([]);
+    expect(container.querySelector('span').innerHTML).toBe('Goodbye: Java');
+  });
+
+  it('同步解析', async () => {
+    const LazyApp = Horizon.lazy(() => ({
+      then(cb) {
+        cb({ default: Text });
+      },
+    }));
+
+    Horizon.render(
+      <Horizon.Suspense fallback={<div>Loading...</div>}>
+        <LazyApp text="Lazy" />
+      </Horizon.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['Lazy']);
+    expect(container.textContent).toBe('Lazy');
+  });
+
+  it('异常捕获边界', async () => {
+    class ErrorBoundary extends Horizon.Component {
+      state = {};
+      static getDerivedStateFromError(error) {
+        return { message: error.message };
+      }
+      render() {
+        return this.state.message
+          ? <h2>Error: {this.state.message}</h2>
+          : this.props.children;
+      }
+    }
+
+    const LazyComponent = () => {
+      const [num, setNum] = Horizon.useState(0);
+      if (num === 2) {
+        throw new Error('num is 2');
+      } else {
+        return (
+          <>
+            <p id="p">{num}</p>
+            <button onClick={() => setNum(num + 1)} />
+          </>
+        );
+      }
+    };
+
+    const LazyApp = Horizon.lazy(() => mockImport(LazyComponent));
+
+    Horizon.render(
+      <ErrorBoundary>
+        <Horizon.Suspense fallback={<div>Loading...</div>}>
+          <LazyApp />
+        </Horizon.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+    expect(container.textContent).toBe('Loading...');
+
+    await Promise.resolve();
+    Horizon.render(
+      <ErrorBoundary>
+        <Horizon.Suspense fallback={<Text text="Loading..." />}>
+          <LazyApp />
+        </Horizon.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+    expect(container.textContent).toBe('0');
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('1');
+    jest.spyOn(console, 'error').mockImplementation();
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('Error: num is 2');
+  });
+
+  it('componentDidCatch捕获异常', async () => {
+    class ErrorBoundary extends Horizon.Component {
+      state = {
+        catchError: false,
+        error: null,
+        componentStack: null
+      };
+      componentDidCatch(error, info) {
+        if(error){
+          this.setState({
+            catchError: true,
+            error,
+            componentStack: info.componentStack
+          });
+        }
+
+      }
+      render() {
+        return this.state.catchError
+          ? <h2>Error: {this.state.error.message}</h2>
+          : this.props.children;
+      }
+    }
+
+    const LazyComponent = () => {
+      const [num, setNum] = Horizon.useState(0);
+      if (num === 2) {
+        throw new Error('num is 2');
+      } else {
+        return (
+          <>
+            <p id="p">{num}</p>
+            <button onClick={() => setNum(num + 1)} />
+          </>
+        );
+      }
+    };
+
+    const LazyApp = Horizon.lazy(() => mockImport(LazyComponent));
+
+    Horizon.render(
+      <ErrorBoundary>
+        <Horizon.Suspense fallback={<div>Loading...</div>}>
+          <LazyApp />
+        </Horizon.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+    expect(container.textContent).toBe('Loading...');
+
+    await Promise.resolve();
+    Horizon.render(
+      <ErrorBoundary>
+        <Horizon.Suspense fallback={<Text text="Loading..." />}>
+          <LazyApp />
+        </Horizon.Suspense>
+      </ErrorBoundary>,
+      container
+    );
+
+    expect(container.textContent).toBe('0');
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('1');
+    jest.spyOn(console, 'error').mockImplementation();
+    container.querySelector('button').click();
+    expect(container.textContent).toBe('Error: num is 2');
+  });
+});

scripts/__tests__/ComponentTest/PortalComponent.test.js

@@ -0,0 +1,205 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('PortalComponent Test', () => {
+  const LogUtils = getLogUtils();
+  
+  it('将子节点渲染到存在于父组件以外的 DOM 节点', () => {
+    const portalRoot = document.createElement('div');
+
+    class PortalApp extends Horizon.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot;
+      }
+
+      render() {
+        return Horizon.createPortal(
+          this.props.child,
+          this.element,
+        );
+      }
+    }
+    Horizon.render(<PortalApp child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('');
+    // <div>PortalApp</div>被渲染到了portalRoot而非container
+    expect(portalRoot.textContent).toBe('PortalApp');
+
+    Horizon.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('');
+  });
+
+  it('渲染多个Portal', () => {
+    const portalRoot1st = document.createElement('div');
+    const portalRoot2nd = document.createElement('div');
+
+    class PortalApp extends Horizon.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot1st;
+        this.newElement = portalRoot2nd;
+      }
+
+      render() {
+        return [
+          Horizon.createPortal(
+            this.props.child,
+            this.element,
+          ),
+          Horizon.createPortal(
+            this.props.child,
+            this.newElement,
+          )
+        ];
+      }
+    }
+    Horizon.render(<PortalApp child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('');
+    // <div>PortalApp</div>被渲染到了portalRoot而非container
+    expect(portalRoot1st.textContent).toBe('PortalApp');
+    expect(portalRoot2nd.textContent).toBe('PortalApp');
+
+    Horizon.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot1st.textContent).toBe('');
+    expect(portalRoot2nd.textContent).toBe('');
+  });
+
+  it('渲染最近的Portal', () => {
+    const portalRoot1st = document.createElement('div');
+    const portalRoot2nd = document.createElement('div');
+    const portalRoot3rd = document.createElement('div');
+
+    class PortalApp extends Horizon.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot1st;
+        this.newElement = portalRoot2nd;
+        this.element3rd = portalRoot3rd;
+      }
+
+      render() {
+        return [
+          <div>PortalApp1st</div>,
+          Horizon.createPortal([
+            <div>PortalApp4</div>,
+            Horizon.createPortal(
+              this.props.child,
+              this.element3rd,
+            ),
+          ], this.element),
+          <div>PortalApp2nd</div>,
+          Horizon.createPortal(
+            this.props.child,
+            this.newElement,
+          )
+        ];
+      }
+    }
+    Horizon.render(<PortalApp child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('PortalApp1stPortalApp2nd');
+    // <div>PortalApp4</div>会挂载在this.element上
+    expect(portalRoot1st.textContent).toBe('PortalApp4');
+    expect(portalRoot2nd.textContent).toBe('PortalApp');
+    expect(portalRoot3rd.textContent).toBe('PortalApp');
+
+    Horizon.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot1st.textContent).toBe('');
+    expect(portalRoot2nd.textContent).toBe('');
+  });
+
+  it('改变Portal的参数', () => {
+    const portalRoot = document.createElement('div');
+
+    class PortalApp extends Horizon.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot;
+      }
+
+      render() {
+        return Horizon.createPortal(
+          this.props.child,
+          this.element,
+        );
+      }
+    }
+    Horizon.render(<PortalApp key='portal' child={<div>PortalApp</div>} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('PortalApp');
+
+    Horizon.render(<PortalApp key='portal' child={<div>AppPortal</div>} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('AppPortal');
+
+    Horizon.render(<PortalApp key='portal' child={['por', 'tal']} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('portal');
+
+    Horizon.render(<PortalApp key='portal' child={null} />, container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('');
+
+    Horizon.unmountComponentAtNode(container);
+    expect(container.textContent).toBe('');
+    expect(portalRoot.textContent).toBe('');
+  });
+
+  it('通过Portal进行事件冒泡', () => {
+    const portalRoot = document.createElement('div');
+    const buttonRef = Horizon.createRef();
+
+    class PortalApp extends Horizon.Component {
+      constructor(props) {
+        super(props);
+        this.element = portalRoot;
+      }
+
+      render() {
+        return Horizon.createPortal(
+          this.props.child,
+          this.element,
+        );
+      }
+    }
+
+    const Child = () => {
+      return (
+        <div>
+          <button ref={buttonRef}>Click</button>
+        </div>
+      );
+    };
+
+
+    const App = () => {
+      const handleClick = () => {
+        LogUtils.log('bubble click event');
+      };
+
+      const handleCaptureClick = () => {
+        LogUtils.log('capture click event');
+      };
+
+      return (
+        <div onClickCapture={handleCaptureClick()} onClick={handleClick()}>
+          <PortalApp child={<Child />}>
+
+          </PortalApp>
+        </div>
+      );
+    };
+    Horizon.render(<App />, container);
+    const event = document.createEvent('Event');
+    event.initEvent('click', true, true);
+    buttonRef.current.dispatchEvent(event);
+
+    expect(LogUtils.getAndClear()).toEqual([
+      // 从外到内先捕获再冒泡
+      'capture click event',
+      'bubble click event'
+    ]);
+  });
+});

scripts/__tests__/ComponentTest/SuspenseComponent.test.js

@@ -0,0 +1,59 @@
+import * as Horizon from '@cloudsop/horizon/index.ts';
+import { Text } from '../jest/commonComponents';
+import { getLogUtils } from '../jest/testUtils';
+
+describe('SuspenseComponent Test', () => {
+  const LogUtils = getLogUtils();
+  const mockImport = jest.fn(async (component) => {
+    return { default: component };
+  });
+
+  // var EMPTY_OBJECT = {};
+  // const mockCreateResource = jest.fn((component) => {
+  //   let result = EMPTY_OBJECT;
+  //   return () =>{
+  //     component().then(res => {
+  //       LogUtils.log(res);
+  //       result = res;
+  //     }, reason => {
+  //       LogUtils.log(reason);
+  //     });
+  //     if(result === EMPTY_OBJECT){
+  //       throw component();
+  //     }
+  //     return result;
+  //   };
+  // });
+
+  it('挂载lazy组件', async () => {
+    // 用同步的代码来实现异步操作
+    class LazyComponent extends Horizon.Component {
+      render() {
+        return <Text text={this.props.num} />;
+      }
+    }
+
+    const Lazy = Horizon.lazy(() => mockImport(LazyComponent));
+
+    Horizon.render(
+      <Horizon.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy num={5} />
+      </Horizon.Suspense>,
+      container
+    );
+
+    expect(LogUtils.getAndClear()).toEqual(['Loading...']);
+    expect(container.textContent).toBe('Loading...');
+
+    await Promise.resolve();
+    Horizon.render(
+      <Horizon.Suspense fallback={<Text text="Loading..." />}>
+        <Lazy num={5} />
+      </Horizon.Suspense>,
+      container
+    );
+    expect(LogUtils.getAndClear()).toEqual([5]);
+    expect(container.querySelector('p').innerHTML).toBe('5');
+  });
+
+});

scripts/__tests__/jest/testUtils.js

@@ -7,26 +7,60 @@ export const stopBubbleOrCapture = (e, value) => {
   e.stopPropagation();
 };
 
-export const getEventListeners = (dom) => {
+function listAllEventListeners() {
-  let ret = true;
+  const allElements = Array.prototype.slice.call(document.querySelectorAll('*'));
-  let keyArray = [];
+  allElements.push(document);
-  for (let key in dom) {
+  allElements.push(window);
-    keyArray.push(key);
+
+  const types = [];
+
+  for (let ev in window) {
+    if (/^on/.test(ev)) types[types.length] = ev;
   }
-  console.log(keyArray);
+
-  console.log('---------------------------------');
+  let elements = [];
-  console.log(allDelegatedNativeEvents);
+  for (let i = 0; i < allElements.length; i++) {
-  try {
+    const currentElement = allElements[i];
-    allDelegatedNativeEvents.forEach(event => {
+    for (let j = 0; j < types.length; j++) {
-      if (!keyArray.includes(event)) {
+      if (typeof currentElement[types[j]] === 'function') {
-        ret = false;
+        elements.push({
-        throw new Error('没有挂载全量事件');
+          'node': currentElement,
+          'type': types[j],
+          'func': currentElement[types[j]].toString(),
+        });
       }
-    });
+    }
-  } catch (error) {
-    console.log(error);
   }
-  return ret;
+
+  return elements.sort(function(a,b) {
+    return a.type.localeCompare(b.type);
+  });
+}
+
+export const getEventListeners = (dom) => {
+  console.table(listAllEventListeners());
+
+
+
+  // let ret = true;
+  // let keyArray = [];
+  // for (let key in dom) {
+  //   if (/^on/.test(key)) keyArray.push(key);
+  // }
+  // console.log(getEventListeners);
+  // console.log('---------------------------------');
+  // console.log(allDelegatedNativeEvents);
+  // try {
+  //   allDelegatedNativeEvents.forEach(event => {
+  //     if (!keyArray.includes(event)) {
+  //       ret = false;
+  //       throw new Error('没有挂载全量事件');
+  //     }
+  //   });
+  // } catch (error) {
+  //   console.log(error);
+  // }
+  // return ret;
 };
 
 export function triggerClickEvent(container, id) {
@@ -58,6 +92,10 @@ class LogUtils {
     return values;
   };
 
+  getNotClear = () => {
+    return this.dataArray === null ? [] : this.dataArray;
+  };
+
   clear = () => {
     this.dataArray = this.dataArray ? null : this.dataArray;
   };