mirror of
https://github.com/verdaccio/verdaccio.git
synced 2025-04-01 02:42:23 -05:00
refactor: adds unit test for <Search /> (#1137)
* refactor: adds test for <Search /> component * refactor: <Footer /> component mocks verdaccio's version * refactor: <Search /> component test
This commit is contained in:
Ayush Sharma
GitHub
parent
9869edfb38
commit
66391f4c9c
5 changed files with 211 additions and 11 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>"`;
|
||||
|
|
|
|||
|
|
@ -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>"`;
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
194
test/unit/webui/components/search.spec.js
Normal file
194
test/unit/webui/components/search.spec.js
Normal file
|
|
@ -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');
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Reference in a new issue