Add/feature 2.0.4 (#167)

* add dbclick feature in list of search window. when double click list of search widget, widget will be opened. * Select whole address when double click address bar * add reset button about address value
AhKi · Feb 13, 2019 · 20ab46a · 20ab46a
1 parent ab737a1
commit 20ab46a
Show file tree

Hide file tree

Showing 8 changed files with 324 additions and 40 deletions.
diff --git a/app/renderer/pages/search/components/SearchItem/SearchItem.spec.jsx b/app/renderer/pages/search/components/SearchItem/SearchItem.spec.jsx
@@ -67,6 +67,67 @@ describe('Test SearchItem Component', () => {
     });
   });
 
+  describe('test handleFocusWidget', () => {
+    it('when props.item.isOpen === true', () => {
+      const onShowWidget = jest.fn();
+      const mockEvent = {
+        preventDefault: jest.fn(),
+      };
+      const wrapper = shallow(
+        <SearchItem
+          item={{
+            ...mockItem,
+            isOpen: true,
+          }}
+          onShowWidget={onShowWidget}
+        />,
+      );
+
+      wrapper.instance().handleFocusWidget(mockEvent);
+
+      expect(mockEvent.preventDefault).toHaveBeenCalledTimes(1);
+      expect(onShowWidget).toHaveBeenCalledTimes(1);
+      expect(onShowWidget).toHaveBeenCalledWith('mock-id');
+    });
+
+    it('when props.item.isOpen === false', () => {
+      const onShowWidget = jest.fn();
+      const mockEvent = {
+        preventDefault: jest.fn(),
+      };
+      const wrapper = shallow(
+        <SearchItem
+          item={{
+            ...mockItem,
+            isOpen: false,
+          }}
+          onShowWidget={onShowWidget}
+        />,
+      );
+
+      wrapper.instance().handleFocusWidget(mockEvent);
+      expect(mockEvent.preventDefault).toHaveBeenCalledTimes(0);
+      expect(onShowWidget).toHaveBeenCalledTimes(0);
+    });
+  });
+
+  it('should call handleOpenWidget', () => {
+    const onShowWidget = jest.fn();
+    const wrapper = shallow(
+      <SearchItem
+        item={{
+          ...mockItem,
+          isOpen: false,
+        }}
+        onShowWidget={onShowWidget}
+      />,
+    );
+
+    wrapper.instance().handleOpenWidget();
+
+    expect(onShowWidget).toHaveBeenCalledTimes(1);
+  });
+
   it('should call handleToggleFavorites', () => {
     const onUpdateInfo = jest.fn();
     const wrapper = shallow(

diff --git a/app/renderer/pages/search/components/SearchItem/__snapshots__/SearchItem.spec.jsx.snap b/app/renderer/pages/search/components/SearchItem/__snapshots__/SearchItem.spec.jsx.snap
@@ -29,6 +29,7 @@ exports[`Test SearchItem Component should match to snapshot 1`] = `
     <button
       className="SearchItem__Btn"
       onClick={[Function]}
+      onDoubleClick={[Function]}
       type="button"
     >
       <strong
@@ -94,6 +95,7 @@ exports[`Test SearchItem Component should match to snapshot when item.searched =
     <button
       className="SearchItem__Btn"
       onClick={[Function]}
+      onDoubleClick={[Function]}
       type="button"
     >
       <strong

diff --git a/app/renderer/pages/search/components/SearchItem/index.jsx b/app/renderer/pages/search/components/SearchItem/index.jsx
@@ -34,6 +34,7 @@ class SearchItem extends React.Component {
     this.handleFocusWidget = this.handleFocusWidget.bind(this);
     this.handleToggleWidget = this.handleToggleWidget.bind(this);
     this.handleToggleFavorites = this.handleToggleFavorites.bind(this);
+    this.handleOpenWidget = this.handleOpenWidget.bind(this);
   }
 
   handleFocusWidget(e) {
@@ -55,6 +56,12 @@ class SearchItem extends React.Component {
     }
   }
 
+  handleOpenWidget() {
+    const { item, onShowWidget } = this.props;
+
+    onShowWidget(item.id);
+  }
+
   handleToggleFavorites() {
     const { item, onUpdateInfo } = this.props;
 
@@ -83,6 +90,7 @@ class SearchItem extends React.Component {
             className="SearchItem__Btn"
             type="button"
             onClick={this.handleFocusWidget}
+            onDoubleClick={this.handleOpenWidget}
           >
             <strong className="SearchItem__title-text">
               {(item.searched === 'both' || item.searched === 'name') ? (

diff --git a/app/renderer/pages/widget/components/AddressBar/AddressBar.scss b/app/renderer/pages/widget/components/AddressBar/AddressBar.scss
@@ -22,16 +22,30 @@
   padding: 5px;
 }
 
-.AddressBar__address-input {
-  background-color: rgb(240, 240, 240);
+.AddressBar__address-value {
   display: flex;
   width: 80%;
+}
+
+.AddressBar__address-input {
+  background-color: rgb(240, 240, 240);
+  width: 100%;
+  height: 100%;
   font-size: 13px;
   font-weight: 500;
   margin-right: 5px;
   padding: 0 5px;
 }
 
+.AddressBar__cancel-icon {
+  background-color: #4e5c65;
+  border-radius: 50%;
+  width: 15px;
+  margin: 5px;
+
+  align-self: center;
+}
+
 .AddressBar__address-button {
   width: 20%;
   display: flex;

diff --git a/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx b/app/renderer/pages/widget/components/AddressBar/AddressBar.spec.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import os from 'os';
 
 import AddressBar from '.';
@@ -42,6 +42,13 @@ describe('<AddressBar />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
+  it('should match to snapshot when state.isMouseOverInput true', () => {
+    const wrapper = shallow(<AddressBar />);
+    wrapper.setState({ isMouseOverInput: true });
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('test react lifecycle', () => {
     const componentDidMount = jest.spyOn(AddressBar.prototype, 'componentDidMount');
     const componentWillUnmount = jest.spyOn(AddressBar.prototype, 'componentWillUnmount');
@@ -179,6 +186,19 @@ describe('<AddressBar />', () => {
     expect(wrapper.instance().state.addressValue).toBe('mock-value');
   });
 
+  it('should call handleAddressCancel', () => {
+    const focus = jest.fn();
+    const wrapper = mount(<AddressBar />);
+    wrapper.setState({ addressValue: 'mock-value' });
+    wrapper.instance().addressInputRef.current.focus = focus;
+
+    expect(wrapper.instance().state.addressValue).toBe('mock-value');
+    wrapper.instance().handleAddressCancel();
+    expect(wrapper.instance().state.addressValue).toBe('');
+
+    expect(focus).toHaveBeenCalledTimes(1);
+  });
+
   describe('test call handleAddressEnter', () => {
     const wrapper = shallow(<AddressBar webView={webView} />);
 
@@ -323,4 +343,28 @@ describe('<AddressBar />', () => {
       expect(webView.stop).toHaveBeenCalledTimes(1);
     });
   });
+
+  it('should handle dobule click on address input tag', () => {
+    const select = jest.fn();
+    const wrapper = mount(<AddressBar />);
+    const input = wrapper.find('.AddressBar__address-input');
+    const { current: inputRef } = wrapper.instance().addressInputRef;
+
+    inputRef.select = select;
+
+    expect(select).toHaveBeenCalledTimes(0);
+    input.simulate('doubleclick');
+    expect(select).toHaveBeenCalledTimes(1);
+  });
+
+  it('test mouse event on .AddressBar__address-value', () => {
+    const wrapper = mount(<AddressBar />);
+    const div = wrapper.find('.AddressBar__address-value');
+
+    expect(wrapper.instance().state.isMouseOverInput).toBe(false);
+    div.simulate('mouseEnter');
+    expect(wrapper.instance().state.isMouseOverInput).toBe(true);
+    div.simulate('mouseLeave');
+    expect(wrapper.instance().state.isMouseOverInput).toBe(false);
+  });
 });