fix: Dialog should not auto destroy (#206)

* fix: default destoryOnClose false * test: add test case
react-component · Oct 14, 2020 · 44fb747 · 44fb747 · vercel · Oct 14, 2020
1 parent af18417
commit 44fb747
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/src/DialogWrap.tsx b/src/DialogWrap.tsx
@@ -13,7 +13,7 @@ import { IDialogPropTypes } from './IDialogPropTypes';
  * */
 
 const DialogWrap: React.FC<IDialogPropTypes> = (props: IDialogPropTypes) => {
-  const { visible, getContainer, forceRender, destroyOnClose, afterClose } = props;
+  const { visible, getContainer, forceRender, destroyOnClose = false, afterClose } = props;
   const [animatedVisible, setAnimatedVisible] = React.useState<boolean>(visible);
 
   React.useEffect(() => {
@@ -42,6 +42,7 @@ const DialogWrap: React.FC<IDialogPropTypes> = (props: IDialogPropTypes) => {
       {(childProps: IDialogChildProps) => (
         <Dialog
           {...props}
+          destroyOnClose={destroyOnClose}
           afterClose={() => {
             afterClose?.();
             setAnimatedVisible(false);

diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -57,34 +57,55 @@ describe('dialog', () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
-  it('destroy on hide should unmount child components on close', () => {
-    const wrapper = mount(
-      <Dialog destroyOnClose>
-        <input className="test-input" />
-      </Dialog>,
-      { attachTo: document.body },
-    );
+  describe('destroyOnClose', () => {
+    it('default is false', () => {
+      const wrapper = mount(
+        <Dialog visible>
+          <input className="test-destroy" />
+        </Dialog>,
+        { attachTo: document.body },
+      );
 
-    // Show
-    wrapper.setProps({ visible: true });
-    jest.runAllTimers();
-    wrapper.update();
+      act(() => {
+        wrapper.setProps({ visible: false });
+        jest.runAllTimers();
+        wrapper.update();
+      });
 
-    document.getElementsByClassName('.test-input').value = 'test';
-    expect(document.getElementsByClassName('.test-input').value).toBe('test');
+      expect(document.querySelectorAll('.test-destroy')).toHaveLength(1);
 
-    // Hide
-    wrapper.setProps({ visible: false });
-    jest.runAllTimers();
-    wrapper.update();
+      wrapper.unmount();
+    });
 
-    // Show
-    wrapper.setProps({ visible: true });
-    jest.runAllTimers();
-    wrapper.update();
+    it('destroy on hide should unmount child components on close', () => {
+      const wrapper = mount(
+        <Dialog destroyOnClose>
+          <input className="test-input" />
+        </Dialog>,
+        { attachTo: document.body },
+      );
 
-    expect(document.getElementsByClassName('.test-input').value).toBeUndefined();
-    wrapper.unmount();
+      // Show
+      wrapper.setProps({ visible: true });
+      jest.runAllTimers();
+      wrapper.update();
+
+      document.getElementsByClassName('.test-input').value = 'test';
+      expect(document.getElementsByClassName('.test-input').value).toBe('test');
+
+      // Hide
+      wrapper.setProps({ visible: false });
+      jest.runAllTimers();
+      wrapper.update();
+
+      // Show
+      wrapper.setProps({ visible: true });
+      jest.runAllTimers();
+      wrapper.update();
+
+      expect(document.getElementsByClassName('.test-input').value).toBeUndefined();
+      wrapper.unmount();
+    });
   });
 
   it('esc to close', () => {