Add test

App.js

@@ -7,6 +7,8 @@ const App = () => (
   <div className={styles.container}>
     <MDSearchBox
       onChange={(text) => { console.log(`changed to ${text}`); }}
+      width={300}
+      height={42}
     />
   </div>
 );

lib/MDSearchBox.css

@@ -9,11 +9,11 @@
       -ms-flex-align: center;
           align-items: center;
 
-  width: 300px;
+  /*width: 300px;*/
   border: 1px solid #ccc;
   background-color: white;
+  box-sizing: border-box;
 }
-/*box-sizing: border-box;*/
 :local .container .searchbox {
   margin: 10px 10px;
   display: -webkit-box;

src/MDSearchBox.css

@@ -3,7 +3,7 @@
   justify-content: space-between;
   align-items: center;
 
-  width: 300px;
+  /*width: 300px;*/
   border: 1px solid #ccc;
   background-color: white;
   box-sizing: border-box;

test/MDSearchBox.spec.js

@@ -8,7 +8,74 @@ import MDSearchBox from 'src/MDSearchBox';
 expect.extend(expectJSX);
 
 describe('MDSearchBox', () => {
-  it('should work', () => {
+  describe('default case', () => {
+    let wrapper;
 
+    before(() => {
+      wrapper = shallow(<MDSearchBox />);
+    });
+
+    it('should have no input value', () => {
+        const input = wrapper.find('input');
+        expect(input.props().value).toBe(undefined);
+    });
+
+  });
+
+  describe('with text', () => {
+    let wrapper;
+
+    before(() => {
+      wrapper = shallow(
+        <MDSearchBox
+          text="haha"
+        />
+      );
+    });
+
+    it('should have corresponding text', () => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe('haha');
+
+    });
   })
+
+  // describe('with onChange method', () => {
+  //   let wrapper;
+  //
+  //   before(() => {
+  //     wrapper = shallow(
+  //       <MDSearchBox
+  //         onChange={() => {
+  //           return 'xixi';
+  //         }}
+  //       />
+  //     );
+  //   });
+  //
+  //   it('should trigger the onChange', () => {
+  //     const input = wrapper.find('input');
+  //     // const event = { preventDefault: () => 'a' }
+  //     input.simulate('change');
+  //     expect(input.props().onChange()).toBe('xixi');
+  //   })
+  // })
+
+  describe('with size changed', () => {
+    let wrapper;
+
+    before(() => {
+      wrapper = shallow(
+        <MDSearchBox
+          width={500}
+          height={300}
+        /> );
+    });
+
+    it('size should change', () => {
+      expect(wrapper.props().style).toEqual({width:500, height:300});
+
+    });
+  })
+
 });