save progress, mode=multiple not passing tests in jest

react-component · Aug 6, 2022 · 271306e · 271306e
1 parent 08757c1
commit 271306e
Show file tree

Hide file tree

Showing 35 changed files with 371 additions and 98 deletions.
diff --git a/docs/examples/auto-adjust-dropdown.tsx b/docs/examples/auto-adjust-dropdown.tsx
@@ -8,7 +8,8 @@ class Test extends React.Component {
     value: '3',
   };
 
-  onChange = e => {
+  onChange = (e) => {
+    console.log(`e`, e);
     let value;
     if (e && e.target) {
       ({ value } = e.target);
@@ -35,48 +36,29 @@ class Test extends React.Component {
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
           <div>
             <Select
+              name="my-select"
               onChange={this.onChange}
               dropdownMatchSelectWidth={500}
               value={value}
             >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>{' '}
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>{' '}
               <Option value="3">Jill</Option>
             </Select>
           </div>
         </div>
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>
@@ -88,32 +70,16 @@ class Test extends React.Component {
           }}
         >
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>
           <div>
-            <Select
-              onChange={this.onChange}
-              dropdownMatchSelectWidth={500}
-              value={value}
-            >
-              <Option value="1">
-                Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack
-              </Option>
-              <Option value="2">
-                Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy
-              </Option>
+            <Select onChange={this.onChange} dropdownMatchSelectWidth={500} value={value}>
+              <Option value="1">Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack Jack</Option>
+              <Option value="2">Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy Lucy</Option>
               <Option value="3">Jill</Option>
             </Select>
           </div>

diff --git a/docs/examples/combobox.tsx b/docs/examples/combobox.tsx
@@ -25,7 +25,7 @@ class Combobox extends React.Component {
     });
   };
 
-  onKeyDown = e => {
+  onKeyDown = (e) => {
     const { value } = this.state;
     if (e.keyCode === 13) {
       console.log('onEnter', value);
@@ -40,7 +40,7 @@ class Combobox extends React.Component {
     console.log('onSearch:', text);
   };
 
-  onAsyncChange = value => {
+  onAsyncChange = (value) => {
     window.clearTimeout(this.timeoutId);
 
     this.setState({
@@ -81,6 +81,7 @@ class Combobox extends React.Component {
         </p>
         <div>
           <Select
+            name="my_combobox"
             disabled={disabled}
             style={{ width: 500 }}
             onChange={this.onChange}

diff --git a/docs/examples/controlled.tsx b/docs/examples/controlled.tsx
@@ -16,7 +16,7 @@ class Controlled extends React.Component<{}, ControlledState> {
     open: true,
   };
 
-  onChange = e => {
+  onChange = (e) => {
     let value;
     if (e && e.target) {
       ({ value } = e.target);
@@ -35,15 +35,15 @@ class Controlled extends React.Component<{}, ControlledState> {
     });
   };
 
-  onBlur = v => {
+  onBlur = (v) => {
     console.log('onBlur', v);
   };
 
   onFocus = () => {
     console.log('onFocus');
   };
 
-  onDropdownVisibleChange = open => {
+  onDropdownVisibleChange = (open) => {
     this.setState({ open });
   };
 
@@ -58,6 +58,7 @@ class Controlled extends React.Component<{}, ControlledState> {
         <div style={{ width: 300 }}>
           <Select
             id="my-select"
+            name="my-select"
             value={value}
             placeholder="placeholder"
             listHeight={200}
@@ -88,7 +89,7 @@ class Controlled extends React.Component<{}, ControlledState> {
             <Option value="31" text="yiminghe">
               yiminghe
             </Option>
-            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(i => (
+            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
               <Option key={i} value={i} text={String(i)}>
                 {i}-text
               </Option>

diff --git a/docs/examples/custom-icon.tsx b/docs/examples/custom-icon.tsx
@@ -90,6 +90,7 @@ class CustomIconComponent extends React.Component {
         </p>
         <div style={{ width: 300 }}>
           <Select
+            name="my-select"
             className="custom-select"
             disabled={disabled}
             style={{ width: 500 }}
@@ -178,6 +179,7 @@ class Test extends React.Component {
         </p>
         <div style={{ width: 300 }}>
           <Select
+            name="my-select2"
             className="custom-select"
             value={value}
             animation={useAnim ? 'slide-up' : null}

diff --git a/docs/examples/custom-tags.tsx b/docs/examples/custom-tags.tsx
@@ -50,6 +50,8 @@ const Test: React.FC = () => {
 
       <div>
         <Select
+          id="my-select"
+          name="my-select"
           placeholder="placeholder"
           mode="tags"
           style={{ width: 500 }}
@@ -58,14 +60,14 @@ const Test: React.FC = () => {
           maxTagTextLength={10}
           value={value}
           onChange={(val: string[], option) => {
-            console.log('change:', val, option);
+            console.log('change---:', { val, option });
             setValue(val);
           }}
           onSelect={(val, option) => {
-            console.log('selected', val, option);
+            console.log('selected', { val, option });
           }}
           onDeselect={(val, option) => {
-            console.log('deselected', val, option);
+            console.log('deselected', { val, option });
           }}
           tokenSeparators={[',']}
           tagRender={tagRender}

diff --git a/docs/examples/dropdownRender.tsx b/docs/examples/dropdownRender.tsx
@@ -40,6 +40,7 @@ class Test extends React.Component {
 
         <div>
           <Select
+            name="my-select"
             placeholder="placeholder"
             mode="tags"
             style={{ width: 500 }}
@@ -50,7 +51,7 @@ class Test extends React.Component {
             tokenSeparators={[' ', ',']}
             onFocus={() => console.log('focus')}
             onBlur={() => console.log('blur')}
-            dropdownRender={menu => (
+            dropdownRender={(menu) => (
               <React.Fragment>
                 <div
                   onClick={() => {

diff --git a/docs/examples/email.tsx b/docs/examples/email.tsx
@@ -8,18 +8,18 @@ class Test extends React.Component {
     options: [],
   };
 
-  onSelect = value => {
+  onSelect = (value) => {
     console.log('onSelect', value);
   };
 
-  onChange = value => {
+  onChange = (value) => {
     console.log('onChange', value);
     let options: React.ReactNode = [];
     if (value) {
       if (value.indexOf('@') >= 0) {
         options = <Option key={value}>{value}</Option>;
       } else {
-        options = ['gmail.com', 'yahoo.com', 'outlook.com'].map(domain => {
+        options = ['gmail.com', 'yahoo.com', 'outlook.com'].map((domain) => {
           const email = `${value}@${domain}`;
           return <Option key={email}>{email}</Option>;
         });
@@ -34,6 +34,7 @@ class Test extends React.Component {
     const { options } = this.state;
     return (
       <Select
+        name="my-select"
         mode="combobox"
         notFoundContent={false}
         style={{ width: 200 }}

diff --git a/docs/examples/filterSort.tsx b/docs/examples/filterSort.tsx
@@ -17,6 +17,7 @@ const Test = () => (
   <div>
     <h3> with filter sort </h3>
     <Select
+      name="my-select1"
       showSearch
       style={{ width: 500 }}
       filterSort={sorterByLabel}
@@ -25,6 +26,7 @@ const Test = () => (
     ></Select>
     <h3> without filter sort </h3>
     <Select
+      name="my-select2"
       showSearch
       style={{ width: 500 }}
       optionFilterProp="label"

diff --git a/docs/examples/force-suggest.tsx b/docs/examples/force-suggest.tsx
@@ -12,16 +12,16 @@ class Test extends React.Component {
     value: undefined,
   };
 
-  onChange = value => {
+  onChange = (value) => {
     console.log('select ', value);
     this.setState({
       value,
     });
   };
 
-  fetchData = value => {
+  fetchData = (value) => {
     if (value) {
-      fetch(value, data => {
+      fetch(value, (data) => {
         this.setState({
           data,
         });
@@ -42,7 +42,7 @@ class Test extends React.Component {
 
   render() {
     const { data, value, disabled } = this.state;
-    const options = data.map(d => (
+    const options = data.map((d) => (
       <Option key={d.value}>
         <i>{d.text}</i>
       </Option>
@@ -57,6 +57,7 @@ class Test extends React.Component {
         </p>
         <div>
           <Select
+            name="my-select"
             labelInValue
             showSearch
             onSearch={this.fetchData}

diff --git a/docs/examples/getPopupContainer.tsx b/docs/examples/getPopupContainer.tsx
@@ -11,9 +11,9 @@ class Test extends React.Component {
     destroy: false,
   };
 
-  getPopupContainer = node => node.parentNode;
+  getPopupContainer = (node) => node.parentNode;
 
-  setVisible = open => {
+  setVisible = (open) => {
     this.setState({
       open,
     });
@@ -50,6 +50,7 @@ class Test extends React.Component {
         <Dialog visible={open} onClose={this.close}>
           <div style={{ marginTop: 20, position: 'relative' }}>
             <Select
+              name="my-select"
               placeholder="placeholder"
               style={{ width: 200 }}
               getPopupContainer={this.getPopupContainer}

diff --git a/docs/examples/loading.tsx b/docs/examples/loading.tsx
@@ -50,6 +50,7 @@ class Test extends React.Component {
 
         <div style={{ width: 300 }}>
           <Select
+            name="my-select"
             value={value}
             style={{ width: 500 }}
             mode="multiple"
@@ -60,7 +61,7 @@ class Test extends React.Component {
             placeholder="please select"
             onChange={this.onChange}
             onFocus={() => console.log('focus')}
-            onBlur={v => console.log('blur', v)}
+            onBlur={(v) => console.log('blur', v)}
             tokenSeparators={[' ', ',']}
           >
             {children}

diff --git a/docs/examples/mul-suggest.tsx b/docs/examples/mul-suggest.tsx
@@ -11,15 +11,15 @@ class Test extends React.Component {
     value: [],
   };
 
-  onChange = value => {
+  onChange = (value) => {
     console.log('onChange ', value);
     this.setState({
       value,
     });
   };
 
-  fetchData = value => {
-    fetch(value, data => {
+  fetchData = (value) => {
+    fetch(value, (data) => {
       this.setState({
         data,
       });
@@ -28,7 +28,7 @@ class Test extends React.Component {
 
   render() {
     const { data, value } = this.state;
-    const options = data.map(d => (
+    const options = data.map((d) => (
       <Option key={d.value}>
         <i>{d.text}</i>
       </Option>
@@ -39,6 +39,7 @@ class Test extends React.Component {
 
         <div>
           <Select
+            name="my-select"
             value={value}
             labelInValue
             style={{ width: 500 }}