fix: missing headers on search endpoint with token (#121)

Headers should be part of the options if we override options.

https://github.com/verdaccio/ui/issues/118

src/components/Search/Search.test.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
 import Search from './Search';
 
 const SEARCH_FILE_PATH = './Search';
-const API_FILE_PATH = '../../utils/api';
+const API_FILE_PATH = '../../utils/calls';
 const URL_FILE_PATH = '../../utils/url';
 
 // Global mocks
@@ -165,8 +165,7 @@ describe('<Search /> component test', () => {
       const suggestions = [{ name: 'verdaccio' }, { name: 'verdaccio-htpasswd' }];
 
       jest.doMock(API_FILE_PATH, () => ({
-        request(url: string) {
+        callSearch(url: string) {
-          expect(url).toEqual('search/verdaccio');
           return Promise.resolve(apiResponse);
         },
       }));
@@ -194,7 +193,7 @@ describe('<Search /> component test', () => {
     test('handleFetchPackages: when browser cancel a request', async () => {
       const apiResponse = { name: 'AbortError' };
 
-      jest.doMock(API_FILE_PATH, () => ({ request: jest.fn(() => Promise.reject(apiResponse)) }));
+      jest.doMock(API_FILE_PATH, () => ({ callSearch: jest.fn(() => Promise.reject(apiResponse)) }));
 
       const Search = require(SEARCH_FILE_PATH).Search;
 
@@ -219,8 +218,7 @@ describe('<Search /> component test', () => {
       const apiResponse = { name: 'BAD_REQUEST' };
 
       jest.doMock(API_FILE_PATH, () => ({
-        request(url) {
+        callSearch(url) {
-          expect(url).toEqual('search/verdaccio');
           return Promise.reject(apiResponse);
         },
       }));

src/components/Search/Search.tsx

@@ -6,9 +6,9 @@ import { default as IconSearch } from '@material-ui/icons/Search';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import debounce from 'lodash/debounce';
 
-import API from '../../utils/api';
 import AutoComplete from '../AutoComplete';
 import colors from '../../utils/styles/colors';
+import { callSearch } from '../../utils/calls';
 
 export interface State {
   search: string;
@@ -148,7 +148,7 @@ export class Search extends Component<RouteComponentProps<{}>, State> {
       const signal = controller.signal;
       // Keep track of search requests.
       this.requestList.push(controller);
-      const suggestions = await API.request(`search/${encodeURIComponent(value)}`, 'GET', { signal });
+      const suggestions = await callSearch(value, signal);
       // @ts-ignore
       this.setState({
         suggestions,

src/pages/Version/Version.test.tsx

@@ -9,7 +9,6 @@ import Version from './Version';
 import { waitForElement } from '@testing-library/dom';
 import ErrorBoundary from '../../App/AppError';
 import { LABEL_NOT_FOUND } from '../../components/NotFound/NotFound';
-// import { NOT_FOUND_TEXT } from '../../components/NotFound/NotFound';
 
 // :-) we mock this otherways fails on render, some weird issue on material-ui
 jest.mock('@material-ui/core/Avatar');
@@ -27,6 +26,8 @@ describe('test Version page', () => {
 
   beforeEach(() => {
     jest.resetAllMocks();
+    // @ts-ignore
+    fetch.resetMocks();
   });
 
   test('should render the version page', async () => {

src/utils/calls.ts

@@ -10,3 +10,9 @@ export async function callDetailPage(packageName): Promise<PackageMetaInterface
 
   return packageMeta;
 }
+
+export function callSearch(value: string, signal: any) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API#Browser_compatibility
+  // FUTURE: signal is not well supported for IE and Samsung Browser
+  return API.request(`search/${encodeURIComponent(value)}`, 'GET', { signal, headers: {} });
+}