2019-06-20 19:37:28 +07:00
|
|
|
import React from 'react';
|
|
|
|
import { mount, shallow } from 'enzyme';
|
|
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
|
|
|
|
|
|
import Search from './Search';
|
|
|
|
|
|
|
|
const SEARCH_FILE_PATH = './Search';
|
2019-08-25 22:39:15 +07:00
|
|
|
const API_FILE_PATH = '../../utils/calls';
|
2019-06-20 19:37:28 +07:00
|
|
|
const URL_FILE_PATH = '../../utils/url';
|
|
|
|
|
|
|
|
// Global mocks
|
|
|
|
const event = {
|
|
|
|
stopPropagation: jest.fn(),
|
|
|
|
};
|
|
|
|
window.location.assign = jest.fn();
|
|
|
|
|
|
|
|
describe('<Search /> component test', () => {
|
|
|
|
let routerWrapper;
|
|
|
|
let wrapper;
|
|
|
|
beforeEach(() => {
|
|
|
|
routerWrapper = mount(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
test('should load the component in default state', () => {
|
|
|
|
expect(routerWrapper.html()).toMatchSnapshot();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('onBlur: should cancel all search requests', async () => {
|
|
|
|
const Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
const { handleOnBlur, requestList, setState } = wrapper.instance();
|
|
|
|
const spyCancelAllSearchRequests = jest.spyOn(wrapper.instance(), 'cancelAllSearchRequests');
|
|
|
|
setState({ search: 'verdaccio' });
|
|
|
|
|
|
|
|
const request = {
|
|
|
|
abort: jest.fn(),
|
|
|
|
};
|
|
|
|
// adds a request for AbortController
|
|
|
|
wrapper.instance().requestList = [request];
|
|
|
|
|
|
|
|
handleOnBlur(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(spyCancelAllSearchRequests).toHaveBeenCalled();
|
|
|
|
expect(requestList).toEqual([]);
|
|
|
|
});
|
|
|
|
|
|
|
|
test('handleSearch: when user type package name in search component and set loading to true', () => {
|
|
|
|
const Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
|
|
|
|
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 Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
|
|
|
|
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 Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
|
|
|
|
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 Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
|
|
|
|
const { handlePackagesClearRequested } = wrapper.instance();
|
|
|
|
|
|
|
|
handlePackagesClearRequested();
|
|
|
|
|
|
|
|
expect(wrapper.state('suggestions')).toEqual([]);
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('<Search /> component: mocks specific tests ', () => {
|
|
|
|
beforeEach(() => {
|
|
|
|
jest.resetModules();
|
|
|
|
jest.doMock('lodash/debounce', () => {
|
2019-06-24 02:50:30 +07:00
|
|
|
return function debounceMock(fn) {
|
2019-06-20 19:37:28 +07:00
|
|
|
return fn;
|
|
|
|
};
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
test('handleFetchPackages: should load the packages from API', async () => {
|
|
|
|
const apiResponse = [{ name: 'verdaccio' }, { name: 'verdaccio-htpasswd' }];
|
|
|
|
const suggestions = [{ name: 'verdaccio' }, { name: 'verdaccio-htpasswd' }];
|
|
|
|
|
|
|
|
jest.doMock(API_FILE_PATH, () => ({
|
2019-08-25 22:39:15 +07:00
|
|
|
callSearch(url: string) {
|
2019-06-20 19:37:28 +07:00
|
|
|
return Promise.resolve(apiResponse);
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
|
|
|
const Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
wrapper.setState({ search: 'verdaccio' });
|
|
|
|
const { handleFetchPackages } = wrapper.instance();
|
|
|
|
|
|
|
|
await handleFetchPackages({ value: 'verdaccio' });
|
|
|
|
|
|
|
|
expect(wrapper.state('suggestions')).toEqual(suggestions);
|
|
|
|
expect(wrapper.state('error')).toBeFalsy();
|
|
|
|
expect(wrapper.state('loaded')).toBeTruthy();
|
|
|
|
expect(wrapper.state('loading')).toBeFalsy();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('handleFetchPackages: when browser cancel a request', async () => {
|
|
|
|
const apiResponse = { name: 'AbortError' };
|
|
|
|
|
2019-08-25 22:39:15 +07:00
|
|
|
jest.doMock(API_FILE_PATH, () => ({ callSearch: jest.fn(() => Promise.reject(apiResponse)) }));
|
2019-06-20 19:37:28 +07:00
|
|
|
|
|
|
|
const Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
|
|
|
|
const { handleFetchPackages, setState } = wrapper.instance();
|
|
|
|
setState({ search: 'verdaccio' });
|
|
|
|
await handleFetchPackages({ value: 'verdaccio' });
|
|
|
|
|
|
|
|
expect(wrapper.state('error')).toBeFalsy();
|
|
|
|
expect(wrapper.state('loaded')).toBeFalsy();
|
|
|
|
expect(wrapper.state('loading')).toBeFalsy();
|
|
|
|
});
|
|
|
|
|
|
|
|
test('handleFetchPackages: when API server failed request', async () => {
|
|
|
|
const apiResponse = { name: 'BAD_REQUEST' };
|
|
|
|
|
|
|
|
jest.doMock(API_FILE_PATH, () => ({
|
2019-08-25 22:39:15 +07:00
|
|
|
callSearch(url) {
|
2019-06-20 19:37:28 +07:00
|
|
|
return Promise.reject(apiResponse);
|
|
|
|
},
|
|
|
|
}));
|
|
|
|
|
|
|
|
const Search = require(SEARCH_FILE_PATH).Search;
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
wrapper.setState({ search: 'verdaccio' });
|
|
|
|
const { handleFetchPackages } = wrapper.instance();
|
|
|
|
|
|
|
|
await handleFetchPackages({ value: 'verdaccio' });
|
|
|
|
|
|
|
|
expect(wrapper.state('error')).toBeTruthy();
|
|
|
|
expect(wrapper.state('loaded')).toBeFalsy();
|
|
|
|
expect(wrapper.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).Search;
|
|
|
|
const pushHandler = jest.fn();
|
|
|
|
const routerWrapper = shallow(
|
|
|
|
<BrowserRouter>
|
|
|
|
<Search history={{ push: pushHandler }} />
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
|
|
|
|
wrapper = routerWrapper.find(Search).dive();
|
|
|
|
const { handleClickSearch } = wrapper.instance();
|
|
|
|
|
|
|
|
// click
|
|
|
|
handleClickSearch(event, { suggestionValue, method: 'click' });
|
|
|
|
expect(event.stopPropagation).toHaveBeenCalled();
|
|
|
|
expect(pushHandler).toHaveBeenCalledTimes(1);
|
|
|
|
|
|
|
|
// return key
|
|
|
|
handleClickSearch(event, { suggestionValue, method: 'enter' });
|
|
|
|
expect(event.stopPropagation).toHaveBeenCalled();
|
|
|
|
expect(pushHandler).toHaveBeenCalledTimes(2);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|