import React from 'react';
import { mount } from 'enzyme';

import SearchIcon from '@material-ui/icons/Search';
import CloseIcon from '@material-ui/icons/Close';
import TextField from '@material-ui/core/TextField';

import ExpandableInputField from './';

describe('ExpandableInputField', function() {
  const onSearch = jest.fn();
  const onFocus = jest.fn();
  const onBlur = jest.fn();
  const onChange = jest.fn();

  const expandableInputField = mount(
    <ExpandableInputField
      onSearch={onSearch}
      icon={<SearchIcon />}
      onChange={onChange}
    />
  );

  const enterKey = { key: 'Enter', keyCode: 13, which: 13 };
  const searchValue = 'hello world';
  const changeValue = { target: { value: searchValue } };

  it('should exist', function() {
    expect(expandableInputField).toHaveLength(1);
  });

  it('renders an IconButton for expansion', function() {
    expect(expandableInputField.find(SearchIcon)).toHaveLength(1);
  });

  it('renders a textfield when the IconButton is clicked', function() {
    expandableInputField.find(SearchIcon).simulate('click');
    expect(expandableInputField.find(TextField)).toHaveLength(1);
  });

  it('called onFocus after it was clicked', function() {
    expect(onFocus.mock.calls.length).toBe(0);
  });

  it("renders a reset button after it's been clicked", function() {
    expect(expandableInputField.find(CloseIcon)).toHaveLength(1);
  });

  it('calls onChange with the new input value', function() {
    expandableInputField.find('input').simulate('change', changeValue);
    expect(onChange.mock.calls.length).toBe(1);
    expect(onChange.mock.calls[0][0].target.value).toBe(searchValue);
  });

  it("calls onSearch when the enter key is pressed", function() {
    expandableInputField.find('input').simulate('keypress', enterKey);
    expect(onSearch.mock.calls.length).toBe(1);
  });

  it('calls onBlur after focus is lost', function() {
    expandableInputField.find('input').simulate('blur');
    expect(onBlur.mock.calls.length).toBe(0);
  });

  it('resets the search value when the reset button is clicked', function() {
    const reset = jest.fn();
    const field = mount(
      <ExpandableInputField
        onSearch={onSearch}
        icon={<SearchIcon />}
        value={'oldValue'}
        onReset={reset}
      />
    );
    field.find(SearchIcon).simulate('click');
    field.find(CloseIcon).simulate('click');
    expect(reset.mock.calls.length).toBe(1);
  });
});

@@ -307,66 +307,327 @@
 nst 
-onSearch = jest.fn()
+enterKey = %7B key: 'Enter', keyCode: 13, which: 13 %7D;%0A  const searchValue = 'hello world';%0A  const changeValue = %7B target: %7B value: searchValue %7D %7D
 ;%0A
+%0A
   
-const onFocus = jest.fn();%0A  const
+let onSearch;%0A  let onFocus;%0A  let onBlur;%0A  let onChange;%0A  let expandableInputField;%0A%0A  beforeEach(function() %7B%0A    onSearch = jest.fn();%0A    onFocus = jest.fn();%0A   
  onB
@@ -645,21 +645,17 @@
 fn();%0A  
-const
+ 
  onChang
@@ -672,21 +672,17 @@
 n();%0A%0A  
-const
+ 
  expanda
@@ -700,24 +700,26 @@
 ld = mount(%0A
+  
     %3CExpanda
@@ -728,24 +728,76 @@
 eInputField%0A
+        onFocus=%7BonFocus%7D%0A        onBlur=%7BonBlur%7D%0A  
       onSear
@@ -806,24 +806,26 @@
 =%7BonSearch%7D%0A
+  
       icon=%7B
@@ -842,24 +842,26 @@
 n /%3E%7D%0A      
+ 
+ 
 onChange=%7Bon
@@ -876,171 +876,24 @@
     
+  
 /%3E%0A  
-);%0A%0A  const enterKey = %7B key: 'Enter', keyCode: 13, which: 13 %7D;%0A  const searchValue = 'hello world';%0A  const changeValue = %7B target: %7B value: searchValue %7D %7D
+  );%0A  %7D)
 ;%0A%0A 
@@ -1329,18 +1329,17 @@
 it('call
-ed
+s
  onFocus
@@ -1343,26 +1343,31 @@
 cus 
-after it was click
+when the input is focus
 ed',
@@ -1372,32 +1372,151 @@
 ', function() %7B%0A
+    expandableInputField.find(SearchIcon).simulate('click');%0A    expandableInputField.find('input').simulate('focus');%0A
     expect(onFoc
@@ -1534,33 +1534,33 @@
 ls.length).toBe(
-0
+1
 );%0A  %7D);%0A%0A  it(%22
@@ -1613,32 +1613,93 @@
 %22, function() %7B%0A
+    expandableInputField.find(SearchIcon).simulate('click');%0A
     expect(expan
@@ -1808,32 +1808,93 @@
 ', function() %7B%0A
+    expandableInputField.find(SearchIcon).simulate('click');%0A
     expandableIn
@@ -2132,32 +2132,165 @@
 %22, function() %7B%0A
+    expandableInputField.find(SearchIcon).simulate('click');%0A    expandableInputField.find('input').simulate('change', changeValue);%0A
     expandableIn
@@ -2445,32 +2445,165 @@
 ', function() %7B%0A
+    expandableInputField.find(SearchIcon).simulate('click');%0A    expandableInputField.find('input').simulate('change', changeValue);%0A
     expandableIn
@@ -2685,17 +2685,17 @@
 h).toBe(
-0
+1
 );%0A  %7D);

Fix tests