test(select): add select test (#869)

Co-authored-by: shiliqian <shiliqian@growingio.com>

src/components/select/OptionsList/OptionItem.tsx

@@ -25,7 +25,7 @@ interface OptionProp {
   option: Option;
   selected: MaybeArray<string | number> | null | undefined;
   prefixCls?: string;
-  labelRenderer?: (option: Option, isGruop: false) => React.ReactNode;
+  labelRenderer: (option: Option, isGruop: false) => React.ReactNode;
   onOptionClick?: (selectedValue: string | number) => void;
   index: number;
 
@@ -63,7 +63,7 @@ const RenderGroup: React.ForwardRefRenderFunction<unknown, GroupProps> = (props,
 // ================= RenderOption =====================
 const RenderOption: React.ForwardRefRenderFunction<unknown, OptionProp> = (props, ref) => {
   const {
-    option: { value, disabled, tooltip, groupValue, groupLabel, label, title, ...restOption },
+    option: { value, disabled, tooltip, groupValue, groupLabel, label, ...restOption },
     selected,
     onOptionClick,
     labelRenderer,
@@ -74,28 +74,25 @@ const RenderOption: React.ForwardRefRenderFunction<unknown, OptionProp> = (props
     activeIndex,
     setActiveIndex,
   } = props;
-
   const isSelected =
     typeof selected === 'string' || typeof selected === 'number' || isNull(selected) || typeof selected === 'undefined'
       ? selected === value
       : selected.includes(value);
   const onClick = () => {
       onOptionClick?.(value);
   };
-  const labelNode = labelRenderer
-    ? labelRenderer(
-        {
-          value,
-          disabled,
-          tooltip,
-          groupValue,
-          groupLabel,
-          label,
-          ...restOption,
-        },
-        false
-      )
-    : title || label;
+  const labelNode = labelRenderer(
+    {
+      value,
+      disabled,
+      tooltip,
+      groupValue,
+      groupLabel,
+      label,
+      ...restOption,
+    },
+    false
+  );
   return (
     <div ref={ref as any} className={`${prefixCls}-list-option-container`} style={optionStyle}>
       <div

src/components/select/Select.stories.tsx

@@ -19,6 +19,7 @@ const fruitOptions = new Array(100).fill(0).reduce((prev,value,index) => {
   return [...prev,{
     value:`${fruitValue[index % 7]}${index}`,
     label: `${fruitLabel[index % 7]}${index}`,
+    title:`${fruitLabel[index % 7]}${index}--title`,
     groupValue: `'platform'${index % 7}`,
     groupLabel: `'水果'${index % 7}`,
   }]

src/components/select/__tests__/Select.test.js

@@ -20,6 +20,14 @@ const options = values.map((value, index) => ({
   groupLabel: '应用平台',
 }));
 
+const TitleOptions = values.map((value, index) => ({
+  title: `${labels[index]}--title`,
+  value,
+  label: labels[index],
+  groupValue: 'platform',
+  groupLabel: '应用平台',
+}));
+
 const tooltipOptions = values.map((value, index) => ({
   value,
   label: labels[index],
@@ -31,6 +39,13 @@ const optionsWithOutGroup = values.map((value, index) => ({
   label: labels[index],
 }));
 
+const expecialGroupOptions = values.map((value, index) => ({
+  value,
+  label: labels[index],
+  groupValue: undefined,
+  groupLabel: undefined,
+}));
+
 describe('<Select /> Single Multiple options or groupOptions ', () => {
   it('renders <Select /> components', () => {
     const tree = renderer.create(<Select defaultValue="all" options={options} />).toJSON();
@@ -47,7 +62,6 @@ describe('<Select /> Single Multiple options or groupOptions ', () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
-
   it('renders <Select.Option /> components', () => {
     const tree = renderer
       .create(
@@ -132,6 +146,25 @@ describe('<Select /> Single Multiple options or groupOptions ', () => {
     expect(document.querySelector('.gio-select-dropdown').querySelectorAll('.gio-select-list-option')).toHaveLength(1);
     tree.unmount();
   });
+  it('renders <Select /> expecialGroup components', () => {
+    const tree = mount(<Select options={expecialGroupOptions} />);
+    tree.simulate('click');
+    expect(document.querySelector('.gio-select-dropdown')).not.toBeNull();
+    expect(document.querySelector('.gio-select-list-group')).not.toBeNull();
+    tree.unmount();
+  });
+  it('renders <Select> renderlabel with title', () => {
+    const tree = mount(<Select options={TitleOptions} searchable="default" multiple />);
+    act(() => {
+      tree.simulate('click');
+    });
+    act(() => {
+      tree.find('input').simulate('change', { target: { value: '全部' } });
+    });
+    document.querySelector('.gio-select-dropdown .gio-select-list-option').click();
+    expect(tree.render().find('.gio-select-values-wrapper').find('.gio-tag-label').text()).toBe('全部--title');
+    tree.unmount();
+  });
 });
 
 describe('<Select /> allowClear onClear onAllowClear', () => {
@@ -310,6 +343,21 @@ describe('<Select allowCustomOptions multiple/> keyDown', () => {
       tree.unmount();
     });
   });
+  it('keyDown mouseEnter', () => {
+    const tree = mount(<Select multiple searchable="default" mode="tags" options={optionsWithOutGroup} />);
+    act(() => {
+      tree.simulate('click');
+    });
+    act(() => {
+      tree.find('input').simulate('change', { target: { value: '全部' } });
+    });
+    tree.mount().find('.gio-select-list-option').simulate('mouseenter');
+    tree.mount().find('.gio-select-list').simulate('keyDown', { keyCode: 13, key: 'Enter' });
+    expect(tree.render().find('.gio-select-values-wrapper').children('.gio-tag')).toHaveLength(1);
+    act(() => {
+      tree.unmount();
+    });
+  });
   it('keyDown', async () => {
     const tree = mount(<Select multiple mode="tags" options={optionsWithOutGroup} />);
     act(() => {
@@ -420,8 +468,6 @@ describe('<Select allowCustomOptions multiple/> keyDown', () => {
     tree.mount().find('.gio-select-list').simulate('keyDown', { keyCode: 38, key: 'ArrowUp' });
     tree.mount().find('.gio-select-list').simulate('keyDown', { keyCode: 38, key: 'ArrowUp' });
     tree.mount().find('.gio-select-list').simulate('keyDown', { keyCode: 13, key: 'Enter' });
-    // tree.mount().find('.gio-select-list').simulate('mouseLeave');
-    // tree.mount().find('.gio-select-list-option-container').simulate('mouseEnter');
     expect(tree.render().find('.gio-select-values-wrapper').children('.gio-tag')).toHaveLength(1);
     tree.unmount();
   });
@@ -490,14 +536,23 @@ describe('<Select /> when press delete key will unselect current option', () =>
         onDeselect={onDeSelect}
       />
     );
-
-    act(() => {
-      tree.find('.gio-tag .gio-tag-closable-icon').at(0).simulate('click');
-    });
-
+    tree.find('.gio-tag .gio-tag-closable-icon').at(0).simulate('click');
     expect(tree.render().find('.gio-select-values-wrapper').children()).toHaveLength(2);
     tree.unmount();
   });
+  it('tempValue close by tag-icon', () => {
+    const tree = mount(<Select multiple searchable="default" mode="tags" useFooter options={optionsWithOutGroup} />);
+    tree.find('.gio-select').simulate('focus');
+    tree.find('.gio-select').simulate('keyDown', { keyCode: 40, key: 'ArrowDown' });
+    tree.mount().find('.gio-select-list').simulate('keyDown', { keyCode: 40, key: 'ArrowDown' });
+    tree.mount().find('.gio-select-list').simulate('keyDown', { keyCode: 40, key: 'ArrowDown' });
+    tree.mount().find('.gio-select-list').simulate('keyDown', { keyCode: 13, key: 'Enter' });
+    expect(tree.render().find('.gio-select-values-wrapper').children('.gio-tag')).toHaveLength(1);
+
+    tree.find('.gio-tag .gio-tag-closable-icon').at(0).simulate('click');
+    expect(tree.render().find('.gio-select-values-wrapper').children('.gio-tag')).toHaveLength(0);
+    tree.unmount();
+  });
 });
 
 describe('<Select /> deselect list', () => {