From a4fc3a30781e5aeb86abdc2303f4ad62044250d0 Mon Sep 17 00:00:00 2001
From: Liqian <31471551+berber1016@users.noreply.github.com>
Date: Fri, 12 Mar 2021 17:02:08 +0800
Subject: [PATCH] test(select): add select test (#869)

Co-authored-by: shiliqian <shiliqian@growingio.com>
---
 .../select/OptionsList/OptionItem.tsx         | 31 ++++----
 src/components/select/Select.stories.tsx      |  1 +
 .../select/__tests__/Select.test.js           | 71 ++++++++++++++++---
 3 files changed, 78 insertions(+), 25 deletions(-)

diff --git a/src/components/select/OptionsList/OptionItem.tsx b/src/components/select/OptionsList/OptionItem.tsx
index c5c6b23357..8130041f06 100644
--- a/src/components/select/OptionsList/OptionItem.tsx
+++ b/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,7 +74,6 @@ 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
@@ -82,20 +81,18 @@ const RenderOption: React.ForwardRefRenderFunction<unknown, OptionProp> = (props
   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
diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
index 8bc4c7aefa..8550a17262 100644
--- a/src/components/select/Select.stories.tsx
+++ b/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}`,
   }]
diff --git a/src/components/select/__tests__/Select.test.js b/src/components/select/__tests__/Select.test.js
index f709f655de..52461ecce5 100644
--- a/src/components/select/__tests__/Select.test.js
+++ b/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', () => {