chore: all test

Author: zombieJ

src/BaseSelect/index.tsx

@@ -668,20 +668,20 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     forceUpdate({});
   }
 
-  // // Used for raw custom input trigger
-  // let onTriggerVisibleChange: null | ((newOpen: boolean) => void);
-  // if (customizeRawInputElement) {
-  //   onTriggerVisibleChange = (newOpen: boolean) => {
-  //     onToggleOpen(newOpen);
-  //   };
-  // }
+  // Used for raw custom input trigger
+  let onTriggerVisibleChange: null | ((newOpen: boolean) => void);
+  if (!!mergedComponents.root) {
+    onTriggerVisibleChange = (newOpen: boolean) => {
+      triggerOpen(newOpen);
+    };
+  }
 
   // Close when click on non-select element
   useSelectTriggerControl(
     () => [getDOM(containerRef.current), triggerRef.current?.getPopupElement()],
     mergedOpen,
     triggerOpen,
-    !!customizeRawInputElement,
+    !!mergedComponents.root,
   );
 
   // ============================ Context =============================
@@ -953,7 +953,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
       builtinPlacements={builtinPlacements}
       getPopupContainer={getPopupContainer}
       empty={emptyOptions}
-      // onPopupVisibleChange={onTriggerVisibleChange}
+      onPopupVisibleChange={onTriggerVisibleChange}
       onPopupMouseEnter={onPopupMouseEnter}
       onPopupMouseDown={onInternalMouseDown}
     >

src/SelectInput/index.tsx

@@ -211,29 +211,15 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
     onInputKeyDown: onInternalInputKeyDown,
   };
 
-  const sharedProps = {
-    // Open
-    onMouseDown: onInternalMouseDown,
-    onBlur: onInternalBlur,
-  } as const;
-
   if (RootComponent) {
     if (React.isValidElement<any>(RootComponent)) {
-      const oriProps = RootComponent.props || {};
       return React.cloneElement(RootComponent, {
-        ...sharedProps,
-        onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
-          sharedProps.onMouseDown(e);
-          oriProps.onMouseDown?.(e);
-        },
-        onBlur: (e: React.FocusEvent<HTMLDivElement>) => {
-          sharedProps.onBlur(e);
-          oriProps.onBlur?.(e);
-        },
+        ...domProps,
         ref: composeRef((RootComponent as any).ref, rootRef),
       });
     }
-    return <RootComponent {...sharedProps} ref={rootRef} />;
+
+    return <RootComponent {...domProps} ref={rootRef} />;
   }
 
   return (
@@ -244,8 +230,9 @@ export default React.forwardRef<SelectInputRef, SelectInputProps>(function Selec
         ref={rootRef}
         className={className}
         style={style}
-        // Shared Props
-        {...sharedProps}
+        // Mouse Events
+        onMouseDown={onInternalMouseDown}
+        onBlur={onInternalBlur}
       >
         {/* Prefix */}
         <Affix className={clsx(`${prefixCls}-prefix`, classNames?.prefix)} style={styles?.prefix}>

src/hooks/useSelectTriggerControl.ts

@@ -1,43 +1,37 @@
 import * as React from 'react';
+import { useEvent } from '@rc-component/util';
 
 export default function useSelectTriggerControl(
   elements: () => (HTMLElement | SVGElement | undefined)[],
   open: boolean,
   triggerOpen: (open: boolean) => void,
   customizedTrigger: boolean,
 ) {
-  const propsRef = React.useRef(null);
-  propsRef.current = {
-    open,
-    triggerOpen,
-    customizedTrigger,
-  };
-
-  React.useEffect(() => {
-    function onGlobalMouseDown(event: MouseEvent) {
-      // If trigger is customized, Trigger will take control of popupVisible
-      if (propsRef.current?.customizedTrigger) {
-        return;
-      }
+  const onGlobalMouseDown = useEvent((event: MouseEvent) => {
+    // If trigger is customized, Trigger will take control of popupVisible
+    if (customizedTrigger) {
+      return;
+    }
 
-      let target = event.target as HTMLElement;
+    let target = event.target as HTMLElement;
 
-      if (target.shadowRoot && event.composed) {
-        target = (event.composedPath()[0] || target) as HTMLElement;
-      }
+    if (target.shadowRoot && event.composed) {
+      target = (event.composedPath()[0] || target) as HTMLElement;
+    }
 
-      if (
-        propsRef.current.open &&
-        elements()
-          .filter((element) => element)
-          .every((element) => !element.contains(target) && element !== target)
-      ) {
-        // Should trigger close
-        propsRef.current.triggerOpen(false);
-      }
+    if (
+      open &&
+      elements()
+        .filter((element) => element)
+        .every((element) => !element.contains(target) && element !== target)
+    ) {
+      // Should trigger close
+      triggerOpen(false);
     }
+  });
 
+  React.useEffect(() => {
     window.addEventListener('mousedown', onGlobalMouseDown);
     return () => window.removeEventListener('mousedown', onGlobalMouseDown);
-  }, []);
+  }, [onGlobalMouseDown]);
 }

tests/BaseSelect.test.tsx

@@ -2,13 +2,22 @@ import type { OptionListProps, RefOptionListProps } from '@/OptionList';
 import { fireEvent, render } from '@testing-library/react';
 import { forwardRef, act } from 'react';
 import BaseSelect from '../src/BaseSelect';
+import { waitFakeTimer } from './utils/common';
 
 const OptionList = forwardRef<RefOptionListProps, OptionListProps>(() => (
   <div className="popup">Popup</div>
 ));
 
 describe('BaseSelect', () => {
-  it('customized inputElement should trigger popup properly', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('customized inputElement should trigger popup properly', async () => {
     const { container } = render(
       <BaseSelect
         prefixCls="rc-select"
@@ -27,11 +36,17 @@ describe('BaseSelect', () => {
       />,
     );
     expect(container.querySelector('div.popup')).toBeFalsy();
+
     fireEvent.click(container.querySelector('a.trigger'));
+    await waitFakeTimer();
     expect(container.querySelector('div.popup')).toBeTruthy();
+
     fireEvent.mouseDown(container.querySelector('a.trigger'));
+    await waitFakeTimer();
     expect(container.querySelector('div.rc-select-dropdown-hidden')).toBeFalsy();
+
     fireEvent.click(container.querySelector('a.trigger'));
+    await waitFakeTimer();
     expect(container.querySelector('div.rc-select-dropdown-hidden')).toBeTruthy();
   });
 

tests/Custom.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Select from '../src';
-import { injectRunAllTimers } from './utils/common';
+import { injectRunAllTimers, waitFakeTimer } from './utils/common';
 import { fireEvent, render } from '@testing-library/react';
 
 describe('Select.Custom', () => {
@@ -14,7 +14,7 @@ describe('Select.Custom', () => {
     jest.useRealTimers();
   });
 
-  it('getRawInputElement', () => {
+  it('getRawInputElement', async () => {
     const onPopupVisibleChange = jest.fn();
     const { container } = render(
       <Select
@@ -23,6 +23,7 @@ describe('Select.Custom', () => {
       />,
     );
     fireEvent.click(container.querySelector('.custom'));
+    await waitFakeTimer();
 
     expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
   });

tests/Select.test.tsx

@@ -1895,13 +1895,11 @@ describe('Select.Basic', () => {
       act(() => {
         jest.runAllTimers();
       });
-      console.log('~~~~1');
       rerender(renderDemo(true));
       act(() => {
         jest.runAllTimers();
       });
 
-      console.log('~~~~2');
       rerender(renderDemo(false));
 
       act(() => {

tests/SelectInput/Content.test.tsx

@@ -2,7 +2,7 @@
 
 exports[`Select.Combobox renders controlled correctly 1`] = `
 <div
-  class="rc-select rc-select-single"
+  class="rc-select rc-select-single rc-select-show-search"
 >
   <div
     class="rc-select-content"
@@ -22,7 +22,6 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
       autocomplete="off"
       class="rc-select-input"
       id="test-id"
-      readonly=""
       role="combobox"
       type="text"
       value=""
@@ -33,7 +32,7 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
 
 exports[`Select.Combobox renders correctly 1`] = `
 <div
-  class="rc-select rc-select-single"
+  class="rc-select rc-select-single rc-select-show-search"
 >
   <div
     class="rc-select-content"
@@ -53,7 +52,6 @@ exports[`Select.Combobox renders correctly 1`] = `
       autocomplete="off"
       class="rc-select-input"
       id="test-id"
-      readonly=""
       role="combobox"
       type="text"
       value=""