diff --git a/src/webui/components/Search/index.js b/src/webui/components/Search/index.js
index 5874723de..1cc0f151f 100644
--- a/src/webui/components/Search/index.js
+++ b/src/webui/components/Search/index.js
@@ -98,7 +98,7 @@ class Search extends Component<IProps, IState> {
       case 'click':
       case 'enter':
         this.setState({ search: '' });
-        window.location.href = getDetailPageURL(suggestionValue);
+        window.location.assign(getDetailPageURL(suggestionValue));
         break;
     }
   };
@@ -114,23 +114,22 @@ class Search extends Component<IProps, IState> {
       // Keep track of search requests.
       this.requestList.push(controller);
       const response = await API.request(`search/${encodeURIComponent(value)}`, 'GET', { signal });
-      this.setState({ loaded: true });
       const transformedPackages = response.map(({ name, ...others }) => ({
         label: name,
         ...others,
       }));
-      if (this.state.search === value) {
-        this.setState({
-          suggestions: transformedPackages,
-          loaded: true,
-        });
-      }
+      this.setState({
+        suggestions: transformedPackages,
+        loaded: true,
+      });
     } catch (error) {
       /**
        * AbortError is not the API error.
        * It means browser has cancelled the API request.
        */
-      if (error.name !== CONSTANTS.ABORT_ERROR) {
+      if (error.name === CONSTANTS.ABORT_ERROR) {
+        this.setState({ error: false, loaded: false });
+      } else {
         this.setState({ error: true, loaded: false });
       }
     } finally {
diff --git a/test/unit/webui/components/__snapshots__/footer.spec.js.snap b/test/unit/webui/components/__snapshots__/footer.spec.js.snap
index b976842a4..8162e4f4b 100644
--- a/test/unit/webui/components/__snapshots__/footer.spec.js.snap
+++ b/test/unit/webui/components/__snapshots__/footer.spec.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Footer /> component should load the inital state of Footer component 1`] = `"<div class=\\"css-i0nj2g efsnl070\\"><div class=\\"css-1b88909 efsnl071\\"><div class=\\"css-4kqzh2 efsnl072\\">Made with<span class=\\"css-1so4oe0 efsnl077\\">♥</span>on<span class=\\"css-1ie354y efsnl074\\"><svg class=\\"efsnl075 css-1kbpdsb ej4jd2o0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-e8kfuf efsnl076\\"><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Pakistan</title><use xlink:href=\\"[object Object]#pakistan\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-zxlexh efsnl073\\">Powered by<span class=\\"efsnl079 css-yqd0z3 ej4jd2o1\\" title=\\"Verdaccio\\"><img src=\\"[object Object]\\" alt=\\"Verdaccio\\" class=\\"css-1ncdhax ej4jd2o2\\"></span>/ 4.0.0-alpha.3</div></div></div>"`;
+exports[`<Footer /> component should load the initial state of Footer component 1`] = `"<div class=\\"css-i0nj2g efsnl070\\"><div class=\\"css-1b88909 efsnl071\\"><div class=\\"css-4kqzh2 efsnl072\\">Made with<span class=\\"css-1so4oe0 efsnl077\\">♥</span>on<span class=\\"css-1ie354y efsnl074\\"><svg class=\\"efsnl075 css-1kbpdsb ej4jd2o0\\"><title>Earth</title><use xlink:href=\\"[object Object]#earth\\"></use></svg><span class=\\"css-e8kfuf efsnl076\\"><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Spain</title><use xlink:href=\\"[object Object]#spain\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Nicaragua</title><use xlink:href=\\"[object Object]#nicaragua\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>India</title><use xlink:href=\\"[object Object]#india\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Brazil</title><use xlink:href=\\"[object Object]#brazil\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Pakistan</title><use xlink:href=\\"[object Object]#pakistan\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>China</title><use xlink:href=\\"[object Object]#china\\"></use></svg><svg class=\\"efsnl078 css-1v4xhqk ej4jd2o0\\"><title>Austria</title><use xlink:href=\\"[object Object]#austria\\"></use></svg></span></span></div><div class=\\"css-zxlexh efsnl073\\">Powered by<span class=\\"efsnl079 css-yqd0z3 ej4jd2o1\\" title=\\"Verdaccio\\"><img src=\\"[object Object]\\" alt=\\"Verdaccio\\" class=\\"css-1ncdhax ej4jd2o2\\"></span>/ 4.0.0-alpha.3</div></div></div>"`;
diff --git a/test/unit/webui/components/__snapshots__/search.spec.js.snap b/test/unit/webui/components/__snapshots__/search.spec.js.snap
new file mode 100644
index 000000000..6e835ea81
--- /dev/null
+++ b/test/unit/webui/components/__snapshots__/search.spec.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Search /> component test should load the component in default state 1`] = `"<div class=\\"css-1crzyyo ey3zdxb0\\"><div role=\\"combobox\\" aria-haspopup=\\"listbox\\" aria-owns=\\"react-autowhatever-1\\" aria-expanded=\\"false\\" class=\\"react-autosuggest__container\\"><div class=\\"MuiFormControl-root-1 MuiFormControl-fullWidth-4 react-autosuggest__input\\" aria-autocomplete=\\"list\\" aria-controls=\\"react-autowhatever-1\\"><div class=\\"MuiInputBase-root-18 MuiInput-root-5 css-n9ojyg MuiInput-underline-9 MuiInputBase-fullWidth-27 MuiInput-fullWidth-12 MuiInputBase-formControl-19 MuiInput-formControl-6 MuiInputBase-adornedStart-22\\"><div class=\\"MuiInputAdornment-root-35 MuiInputAdornment-positionStart-37\\" style=\\"color: rgb(255, 255, 255);\\"><svg class=\\"MuiSvgIcon-root-39\\" focusable=\\"false\\" viewBox=\\"0 0 24 24\\" aria-hidden=\\"true\\" role=\\"presentation\\"><path d=\\"M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z\\"></path><path fill=\\"none\\" d=\\"M0 0h24v24H0z\\"></path></svg></div><input aria-invalid=\\"false\\" autocomplete=\\"off\\" class=\\"MuiInputBase-input-28 MuiInput-input-13 css-hodoyq MuiInputBase-inputAdornedStart-33\\" placeholder=\\"Search Packages\\" type=\\"text\\" value=\\"\\"></div></div><div class=\\"MuiPaper-root-48 MuiPaper-elevation2-52 react-autosuggest__suggestions-container\\" id=\\"react-autowhatever-1\\" role=\\"listbox\\"></div></div></div>"`;
diff --git a/test/unit/webui/components/footer.spec.js b/test/unit/webui/components/footer.spec.js
index b2b5a21db..af56a845e 100644
--- a/test/unit/webui/components/footer.spec.js
+++ b/test/unit/webui/components/footer.spec.js
@@ -4,13 +4,17 @@ import { mount } from 'enzyme';
 
 import Footer from '../../../../src/webui/components/Footer/index';
 
+jest.mock('../../../../package.json', () => ({
+    version: '4.0.0-alpha.3'
+}))
+
 describe('<Footer /> component', () => {
     let wrapper;
     beforeEach(() => {
         wrapper = mount(<Footer />);
     });
 
-    it('should load the inital state of Footer component', () => {
+    it('should load the initial state of Footer component', () => {
         expect(wrapper.html()).toMatchSnapshot();
     });
 });
diff --git a/test/unit/webui/components/search.spec.js b/test/unit/webui/components/search.spec.js
new file mode 100644
index 000000000..08673b55c
--- /dev/null
+++ b/test/unit/webui/components/search.spec.js
@@ -0,0 +1,194 @@
+/**
+ * @flow
+ * @prettier
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Search from '../../../../src/webui/components/Search/index';
+
+const SEARCH_FILE_PATH = '../../../../src/webui/components/Search/index';
+const API_FILE_PATH = '../../../../src/webui/utils/api';
+const URL_FILE_PATH = '../../../../src/webui/utils/url';
+
+// Global mocks
+const event = {
+  stopPropagation: jest.fn(),
+};
+window.location.assign = jest.fn();
+
+describe('<Search /> component test', () => {
+  let wrapper;
+  beforeEach(() => {
+    wrapper = mount(<Search />);
+  });
+
+  test('should load the component in default state', () => {
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  test('onBlur: should cancel all search requests', async () => {
+    const { onBlur, requestList } = wrapper.instance();
+    const spy = jest.spyOn(wrapper.instance(), 'cancelAllSearchRequests');
+
+    const request = {
+      abort: jest.fn(),
+    };
+    // adds a request for AbortController
+    wrapper.instance().requestList = [request];
+
+    onBlur(event);
+
+    expect(request.abort).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeFalsy();
+    expect(spy).toHaveBeenCalled();
+    expect(requestList).toEqual([]);
+  });
+
+  test('handleSearch: when user type package name in search component and set loading to true', () => {
+    const { handleSearch } = wrapper.instance();
+    const newValue = 'verdaccio';
+
+    handleSearch(event, { newValue, method: 'type' });
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeTruthy();
+    expect(wrapper.state('search')).toEqual(newValue);
+  });
+
+  test('handleSearch: cancel all search requests when there is no value in search component with type method', () => {
+    const { handleSearch, requestList } = wrapper.instance();
+    const spy = jest.spyOn(wrapper.instance(), 'cancelAllSearchRequests');
+    const newValue = '';
+
+    handleSearch(event, { newValue, method: 'type' });
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeTruthy();
+    expect(wrapper.state('search')).toEqual(newValue);
+    expect(spy).toHaveBeenCalled();
+    expect(requestList).toEqual([]);
+  });
+
+  test('handleSearch: when method is not type method', () => {
+    const { handleSearch } = wrapper.instance();
+    const newValue = '';
+
+    handleSearch(event, { newValue, method: 'click' });
+
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(wrapper.state('error')).toBeFalsy();
+    expect(wrapper.state('loaded')).toBeFalsy();
+    expect(wrapper.state('loading')).toBeFalsy();
+    expect(wrapper.state('search')).toEqual(newValue);
+  });
+
+  test('handlePackagesClearRequested: should clear suggestions', () => {
+    const { handlePackagesClearRequested } = wrapper.instance();
+
+    handlePackagesClearRequested();
+
+    expect(wrapper.state('suggestions')).toEqual([]);
+  });
+});
+
+describe('<Search /> component: mocks specific tests ', () => {
+  beforeEach(() => {
+    jest.resetModules();
+    jest.doMock('lodash/debounce', () => {
+      return function debounceMock(fn, delay) {
+        return fn;
+      };
+    });
+  });
+
+  test('handleFetchPackages: should load the packages from API', async () => {
+    const apiResponse = [{ name: 'verdaccio' }, { name: 'verdaccio-htpasswd' }];
+    const suggestions = [{ label: 'verdaccio' }, { label: 'verdaccio-htpasswd' }];
+
+    jest.doMock(API_FILE_PATH, () => ({
+      request(url) {
+        expect(url).toEqual('search/verdaccio');
+        return Promise.resolve(apiResponse);
+      },
+    }));
+
+    const Search = require(SEARCH_FILE_PATH).default;
+    const component = mount(<Search />);
+    component.setState({ search: 'verdaccio' });
+    const { handleFetchPackages } = component.instance();
+    await handleFetchPackages({ value: 'verdaccio' });
+
+    expect(component.state('suggestions')).toEqual(suggestions);
+    expect(component.state('error')).toBeFalsy();
+    expect(component.state('loaded')).toBeTruthy();
+    expect(component.state('loading')).toBeFalsy();
+  });
+
+  test('handleFetchPackages: when browser cancel a request', async () => {
+    const apiResponse = { name: 'AbortError' };
+
+    jest.doMock(API_FILE_PATH, () => ({ request: jest.fn(() => Promise.reject(apiResponse)) }));
+
+    const Search = require(SEARCH_FILE_PATH).default;
+    const component = mount(<Search />);
+    component.setState({ search: 'verdaccio' });
+    const { handleFetchPackages } = component.instance();
+    await handleFetchPackages({ value: 'verdaccio' });
+
+    expect(component.state('error')).toBeFalsy();
+    expect(component.state('loaded')).toBeFalsy();
+    expect(component.state('loading')).toBeFalsy();
+  });
+
+  test('handleFetchPackages: when API server failed request', async () => {
+    const apiResponse = { name: 'BAD_REQUEST' };
+
+    jest.doMock(API_FILE_PATH, () => ({
+      request(url) {
+        expect(url).toEqual('search/verdaccio');
+        return Promise.reject(apiResponse);
+      },
+    }));
+
+    const Search = require(SEARCH_FILE_PATH).default;
+    const component = mount(<Search />);
+    component.setState({ search: 'verdaccio' });
+    const { handleFetchPackages } = component.instance();
+    await handleFetchPackages({ value: 'verdaccio' });
+
+    expect(component.state('error')).toBeTruthy();
+    expect(component.state('loaded')).toBeFalsy();
+    expect(component.state('loading')).toBeFalsy();
+  });
+
+  test('handleClickSearch: should change the window location on click or return key', () => {
+    const getDetailPageURL = jest.fn(() => 'detail/page/url');
+    jest.doMock(URL_FILE_PATH, () => ({ getDetailPageURL }));
+
+    const suggestionValue = [];
+    const Search = require(SEARCH_FILE_PATH).default;
+    const component = mount(<Search />);
+    const { handleClickSearch } = component.instance();
+
+    // click
+    handleClickSearch(event, { suggestionValue, method: 'click' });
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(getDetailPageURL).toHaveBeenCalledWith(suggestionValue);
+    expect(window.location.assign).toHaveBeenCalledWith('detail/page/url');
+
+    // return key
+    handleClickSearch(event, { suggestionValue, method: 'enter' });
+    expect(event.stopPropagation).toHaveBeenCalled();
+    expect(getDetailPageURL).toHaveBeenCalledWith(suggestionValue);
+    expect(window.location.assign).toHaveBeenCalledWith('detail/page/url');
+  });
+});