Match-id-cf2539a89122b0c25a798cf4990d143902cb20dd

scripts/__tests__/ComponentTest/PortalComponent.test.js

@@ -1,5 +1,6 @@
 import * as Horizon from '@cloudsop/horizon/index.ts';
 import { getLogUtils } from '../jest/testUtils';
+import dispatchChangeEvent from '../utils/dispatchChangeEvent';
 
 describe('PortalComponent Test', () => {
   const LogUtils = getLogUtils();
@@ -235,4 +236,45 @@ describe('PortalComponent Test', () => {
     btnRef.current.click();
     expect(onClick).toHaveBeenCalledTimes(1);
   });
+
+  it('Portal onChange should activate', () => {
+    class Dialog extends Horizon.Component {
+      node;
+
+      constructor(props) {
+        super(props);
+        this.node = window.document.createElement('div');
+        window.document.body.appendChild(this.node);
+      }
+``      render() {
+        return Horizon.createPortal(this.props.children, this.node);
+      }
+    }
+
+    let showPortalInput;
+    const fn = jest.fn();
+    const inputRef = Horizon.createRef();
+    function Input() {
+      const [show, setShow] = Horizon.useState(false);
+      showPortalInput = setShow;
+
+      Horizon.useEffect(() => {
+        setTimeout(() => {
+          setShow(true);
+        }, 0);
+      }, []);
+
+      if (!show) {
+        return null;
+      }
+
+      return <input onChange={fn} ref={inputRef}/>;
+    }
+
+    Horizon.render(<div><Dialog><App /></Dialog>, container);
+    showPortalInput(true);
+    jest.advanceTimersToNextTimer();
+    dispatchChangeEvent(inputRef.current, 'test');
+    expect(fn).toHaveBeenCalledTimes(1);
+  });
 });

scripts/__tests__/utils/dispatchChangeEvent.js

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) Huawei Technologies Co., Ltd. 2022-2022. All rights reserved.
+ */
+export default function dispatchChangeEvent(inputEle, value) {
+  const nativeInputSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
+  nativeInputSetter.call(inputEle, value);
+
+  inputEle.dispatchEvent(new Event('input', { bubbles: true}));
+}