mirror of
https://github.com/SomboChea/ui
synced 2024-05-21 02:41:36 +07:00
6b5d0b7e2e
This PR convert the code base to Typescript, the changes are the following: - migrate code base to Typescript (3.4.x) - enable `eslint` and `@typescript-eslint/eslint-plugin` (warnings still need to be addressed in future pull request - update relevant dependencies for this PR (linting, etc) - enable `bundlezise` (it was disabled for some reason) * refactor: refactoring to typescript * refactor: migrating to typescript * refactor: applied feedbacks * fix: fixed conflicts * refactored: changed registry * refactor: updated registry & removed unnecessary lib * fix: fixed registry ur * fix: fixed page load * refactor: refactored footer wip * refactor: converting to ts..wip * refactor: converting to ts. wip * refactor: converting to ts. wip * refactor: converting to ts * refactor: converting to ts * fix: fixed load errors * refactor: converted files to ts * refactor: removed flow from tests * fix: removed transpiled files * refactor: added ts-ignore * fix: fixed errors * fix: fixed types * fix: fixing jest import -.- * fix: fixing lint errors * fix: fixing lint errors * fix: fixed lint errors * refactor: removed unnecessary tsconfig's config * fix: fixing errors * fix: fixed warning * fix: fixed test * refactor: wip * refactor: wip * refactor: wip * fix: fixing tests: wip * wip * wip * fix: fixed search test * wip * fix: fixing lint errors * fix: re-added stylelint * refactor: updated stylelint script * fix: fixed: 'styles.js' were found. * fix: fixed Search tests * chore: enable eslint eslint needs expecitely to know which file has to lint, by default is JS, in this case we need also ts,tsx files eslint . --ext .js,.ts * chore: vcode eslint settings * chore: restore eslint previous conf * chore: clean jest config * chore: fix eslint warnings * chore: eslint errors cleared chore: clean warnings chore: remove github actions test phases chore: remove dupe rule * chore: update handler name * chore: restore logo from img to url css prop - loading images with css is more performant than using img html tags, switching this might be a breaking change - restore no-empty-source seems the linting do not accept false - update snapshots - remove @material-ui/styles * chore: update stylelint linting * chore: update stylelint linting * chore: fix a mistake on move tabs to a function * chore: eanble bundlezie * chore: use default_executor in circleci * chore: update readme
274 lines
8.2 KiB
TypeScript
274 lines
8.2 KiB
TypeScript
import React from 'react';
|
|
import { mount, shallow } from 'enzyme';
|
|
import { BrowserRouter } from 'react-router-dom';
|
|
|
|
import Search from './Search';
|
|
|
|
const SEARCH_FILE_PATH = './Search';
|
|
const API_FILE_PATH = '../../utils/api';
|
|
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', () => {
|
|
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 = [{ name: 'verdaccio' }, { name: 'verdaccio-htpasswd' }];
|
|
|
|
jest.doMock(API_FILE_PATH, () => ({
|
|
request(url: string) {
|
|
expect(url).toEqual('search/verdaccio');
|
|
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' };
|
|
|
|
jest.doMock(API_FILE_PATH, () => ({ request: jest.fn(() => Promise.reject(apiResponse)) }));
|
|
|
|
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, () => ({
|
|
request(url) {
|
|
expect(url).toEqual('search/verdaccio');
|
|
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);
|
|
});
|
|
});
|
|
});
|