CHORE (update packages + tests): update packages and add more tests

__tests__/components/Item.spec.js

@@ -20,43 +20,54 @@ const props = (props = {}) => ({
 });
 
 describe('<Item/> component', () => {
-
   beforeEach(() => {
     spy = jest.fn();
   });
 
   test('renders correctly', () => {
-    const tree = TestRenderer.create(<Item {...props({ item: options[0] })}/>).toJSON();
+    const tree = TestRenderer.create(<Item {...props({ item: options[0] })} />).toJSON();
 
     expect(tree).toMatchSnapshot();
   });
 
   test('onChange with click', () => {
-    TestRenderer.create(<Item {...props({ item: options[0] })} onClick={spy}/>)
-      .root.findByType('span').props.onClick();
+    TestRenderer.create(<Item {...props({ item: options[0] })} onClick={spy} />)
+      .root.findByType('span')
+      .props.onClick();
 
     expect(spy).toHaveBeenCalled;
   });
 
   test('onChange with key press', () => {
-    TestRenderer.create(<Item {...props({ item: options[0] })} ononKeyPress={spy}/>)
-      .root.findByType('span').props.onKeyPress();
+    TestRenderer.create(<Item {...props({ item: options[0] })} ononKeyPress={spy} />)
+      .root.findByType('span')
+      .props.onKeyPress();
 
     expect(spy).toHaveBeenCalled;
   });
 
   test('keepSelectedInList: false', () => {
     const tree = TestRenderer.create(
-      <Item {...props({ item: options[0], parentProps: {
-          itemRenderer: null,
-          keepSelectedInList: false
-        }, parentMethods: {
-          isSelected: () => true
-        } })}/>
+      <Item
+        {...props({
+          item: options[0],
+          parentProps: {
+            itemRenderer: null,
+            keepSelectedInList: false
+          },
+          parentMethods: {
+            isSelected: () => true
+          }
+        })}
+      />
     ).toJSON();
-
-    expect(tree).toMatchSnapshot();
   });
 
+  test('pass item renderer', () => {
+    const tree = TestRenderer.create(
+      <Item {...props({ item: options[0], itemRenderer: () => <div>item</div> })} />
+    ).toJSON();
 
+    expect(tree).toMatchSnapshot();
+  });
 });

__tests__/components/__snapshots__/Clear.spec.js.snap

@@ -1,8 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Clear/> component <Clear/> renders correctly 1`] = `
+.emotion-0 {
+  line-height: 25px;
+  margin: 0 10px;
+  cursor: pointer;
+}
+
+.emotion-0:focus {
+  outline: none;
+}
+
+.emotion-0:hover {
+  color: tomato;
+}
+
 <div
-  className="react-dropdown-select-clear css-x3l5ce-ClearComponent e11qlq5e0"
+  className="react-dropdown-select-clear emotion-0 emotion-1"
   onClick={[Function]}
   onKeyPress={[Function]}
   tabIndex="-1"

__tests__/components/__snapshots__/Content.spec.js.snap

@@ -1,12 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Clear/> component <Content/> renders correctly 1`] = `
+.emotion-4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.emotion-0 {
+  padding: 0 5px;
+  border-radius: 2px;
+  line-height: 21px;
+  margin: 3px 0 3px 5px;
+  color: #fff;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.emotion-0 .react-dropdown-select-option-remove {
+  cursor: pointer;
+  width: 22px;
+  height: 22px;
+  display: inline-block;
+  text-align: center;
+  margin: 0 -5px 0 0px;
+  border-radius: 0 3px 3px 0;
+}
+
+.emotion-0 .react-dropdown-select-option-remove:hover {
+  color: tomato;
+}
+
+.emotion-0:hover,
+.emotion-0:hover > span {
+  opacity: 0.9;
+}
+
+.emotion-2 {
+  line-height: inherit;
+  width: calc(undefinedch + 5px);
+  border: none;
+  margin-left: 5px;
+  background: transparent;
+  font-size: smaller;
+  cursor: pointer;
+}
+
+.emotion-2:focus {
+  outline: none;
+}
+
 <div
-  className="react-dropdown-select-content react-dropdown-select-type-multi css-jznujr-ContentComponent e1gn6jc30"
+  className="react-dropdown-select-content react-dropdown-select-type-multi emotion-4 emotion-5"
   onClick={[Function]}
 >
   <span
-    className="react-dropdown-select-option css-tqmr8g-OptionComponent e1l4eby50"
+    className="react-dropdown-select-option emotion-0 emotion-1"
     role="listitem"
   >
     <span
@@ -22,7 +83,7 @@ exports[`<Clear/> component <Content/> renders correctly 1`] = `
     </span>
   </span>
   <input
-    className="react-dropdown-select-input css-n2ezd1-InputComponent e11wid6y0"
+    className="react-dropdown-select-input emotion-2 emotion-3"
     onBlur={[Function]}
     onClick={[Function]}
     onKeyPress={[Function]}

__tests__/components/__snapshots__/Dropdown.spec.js.snap

@@ -1,14 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Dropdown/> renders correctly 1`] = `
+.emotion-2 {
+  position: absolute;
+  top: NaNpx;
+  left: -1px;
+  border: 1px solid #ccc;
+  width: px;
+  padding: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  background: #fff;
+  border-radius: 2px;
+  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+  max-height: 300px;
+  overflow: auto;
+  z-index: 9;
+}
+
+.emotion-2:focus {
+  outline: none;
+}
+
+.emotion-0 {
+  padding: 10px;
+  text-align: center;
+}
+
 <div
   aria-expanded="true"
-  className="react-dropdown-select-dropdown react-dropdown-select-dropdown-position-undefined css-16z139g-DropDown e1qjn9k90"
+  className="react-dropdown-select-dropdown react-dropdown-select-dropdown-position-undefined emotion-2 emotion-3"
   role="list"
   tabIndex="-1"
 >
   <div
-    className="react-dropdown-select-no-data css-1lli8k7-NoDataComponent e1l5ho1t0"
+    className="react-dropdown-select-no-data emotion-0 emotion-1"
   />
 </div>
 `;

__tests__/components/__snapshots__/DropdownHandle.spec.js.snap

@@ -1,8 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Clear/> component <DropdownHandle/> renders correctly 1`] = `
+.emotion-0 {
+  text-align: center;
+  margin: 0 0 0 5px;
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+  cursor: pointer;
+}
+
+.emotion-0 svg {
+  width: 16px;
+  height: 16px;
+}
+
+.emotion-0:focus {
+  outline: none;
+}
+
 <div
-  className="react-dropdown-select-dropdown-handle css-2zkru-DropdownHandleComponent e1vudypg0"
+  className="react-dropdown-select-dropdown-handle emotion-0 emotion-1"
   onClick={[Function]}
   onKeyDown={[Function]}
   onKeyPress={[Function]}

__tests__/components/__snapshots__/Input.spec.js.snap

@@ -1,8 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Input/> renders correctly 1`] = `
+.emotion-0 {
+  line-height: inherit;
+  width: calc(undefinedch + 5px);
+  border: none;
+  margin-left: 5px;
+  background: transparent;
+  font-size: smaller;
+}
+
+.emotion-0:focus {
+  outline: none;
+}
+
 <input
-  className="react-dropdown-select-input css-1mq5oll-InputComponent e11wid6y0"
+  className="react-dropdown-select-input emotion-0 emotion-1"
   onBlur={[Function]}
   onClick={[Function]}
   onKeyPress={[Function]}

__tests__/components/__snapshots__/Item.spec.js.snap

@@ -1,8 +1,29 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Item/> component keepSelectedInList: false 1`] = `
+exports[`<Item/> component pass item renderer 1`] = `
+.emotion-0 {
+  padding: 5px 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #fff;
+}
+
+.emotion-0.react-dropdown-select-item-active {
+  border-bottom: 1px solid #fff;
+}
+
+.emotion-0:hover,
+.emotion-0:focus {
+  outline: none;
+}
+
+.emotion-0.react-dropdown-select-item-selected {
+  background: undefined;
+  color: #fff;
+  border-bottom: 1px solid #fff;
+}
+
 <span
-  className="react-dropdown-select-item    css-1yjgmdl-ItemComponent evc32pp0"
+  className="react-dropdown-select-item    emotion-0 emotion-1"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="option"
@@ -13,8 +34,29 @@ exports[`<Item/> component keepSelectedInList: false 1`] = `
 `;
 
 exports[`<Item/> component renders correctly 1`] = `
+.emotion-0 {
+  padding: 5px 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #fff;
+}
+
+.emotion-0.react-dropdown-select-item-active {
+  border-bottom: 1px solid #fff;
+}
+
+.emotion-0:hover,
+.emotion-0:focus {
+  outline: none;
+}
+
+.emotion-0.react-dropdown-select-item-selected {
+  background: undefined;
+  color: #fff;
+  border-bottom: 1px solid #fff;
+}
+
 <span
-  className="react-dropdown-select-item    css-1yjgmdl-ItemComponent evc32pp0"
+  className="react-dropdown-select-item    emotion-0 emotion-1"
   onClick={[Function]}
   onKeyPress={[Function]}
   role="option"

__tests__/components/__snapshots__/Loading.spec.js.snap

@@ -1,7 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Loading/> renders correctly 1`] = `
+.emotion-0 {
+  padding: 0 5px;
+  display: block;
+  width: auto;
+  height: auto;
+}
+
+.emotion-0:after {
+  content: ' ';
+  display: block;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  -webkit-animation: dual-ring-spin 0.7s ease-in-out infinite;
+  animation: dual-ring-spin 0.7s ease-in-out infinite;
+  margin: 0 0 0 -10px;
+}
+
 <div
-  className="react-dropdown-select-loading css-k8dcp9-LoadingComponent e1l5cpc30"
+  className="react-dropdown-select-loading emotion-0 emotion-1"
 />
 `;

__tests__/components/__snapshots__/NoData.spec.js.snap

@@ -1,7 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NoData/> renders correctly 1`] = `
+.emotion-0 {
+  padding: 10px;
+  text-align: center;
+}
+
 <div
-  className="react-dropdown-select-no-data css-1lli8k7-NoDataComponent e1l5ho1t0"
+  className="react-dropdown-select-no-data emotion-0 emotion-1"
 />
 `;