1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.test.js
VSaric 8184b150cb
Redesign screen/page "List of networks" (#13560)
Co-authored-by: George Marshall <george.marshall@consensys.net>
Co-authored-by: Elliot Winkler <elliot.winkler@gmail.com>
2022-03-31 09:41:39 -05:00

111 lines
3.6 KiB
JavaScript

import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import Fuse from 'fuse.js';
import configureStore from '../../../../store/store';
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
import testData from '../../../../../.storybook/test-data';
import CustomContentSearch from './custom-content-search';
function renderComponent({ componentProps = {} } = {}) {
const store = configureStore({});
return renderWithProvider(<CustomContentSearch {...componentProps} />, store);
}
describe('CustomContentSearch', () => {
it('should render custom content search correctly', () => {
const onSearch = jest.fn();
const wrapper = renderComponent({
componentProps: { onSearch, networksList: testData.networkList },
});
expect(wrapper.getByTestId('search-networks')).toBeDefined();
});
it('should check placeholder text in TextField input', () => {
const onSearch = jest.fn();
const wrapper = renderComponent({
componentProps: { onSearch, networksList: testData.networkList },
});
const { getByPlaceholderText } = wrapper;
expect(
getByPlaceholderText('Search for a previously added network'),
).toBeInTheDocument();
});
it('re-render the same component with different props', () => {
const onSearch = jest.fn();
const { rerender } = render(
<CustomContentSearch
onSearch={onSearch}
networksList={[]}
searchQueryInput=""
/>,
);
const input = screen.getByTestId('search-networks');
expect(input.value).toBe('');
rerender(
<CustomContentSearch
onSearch={onSearch}
networksList={[]}
searchQueryInput="Polygon"
/>,
);
expect(input.value).toBe('Polygon');
});
it('should call onSearch prop with input value', () => {
const onSearch = jest.fn();
const wrapper = renderComponent({
componentProps: {
onSearch,
networksList: [],
searchQueryInput: 'Avalanche',
},
});
const input = wrapper.getByTestId('search-networks');
fireEvent.change(input, { target: { value: 'Polygon' } });
expect(input.value).toBe('Avalanche');
});
it('should check if error is shown if search does not return any network from the list', () => {
const onSearch = jest.fn();
const networksSearchFuse = new Fuse(testData.networkList, {
keys: ['label', 'labelKey'],
});
const fuseSearchResult = networksSearchFuse.search('Optimism');
const wrapper = renderComponent({
componentProps: {
onSearch,
networksList: testData.networkList,
searchQueryInput: 'Optimism',
error: 'No matching results found.',
},
});
const input = wrapper.getByTestId('search-networks');
expect(fuseSearchResult).toHaveLength(0);
fireEvent.change(input, {
target: { error: 'No matching results found.' },
});
expect(input.error).toBe('No matching results found.');
});
it('should check if error is not shown if search return some network from the list', () => {
const onSearch = jest.fn();
const networksSearchFuse = new Fuse(testData.networkList, {
keys: ['label', 'labelKey'],
});
const fuseSearchResult = networksSearchFuse.search('ropsten');
const wrapper = renderComponent({
componentProps: {
onSearch,
networksList: testData.networkList,
searchQueryInput: 'Avalanche',
error: '',
},
});
const input = wrapper.getByTestId('search-networks');
expect(fuseSearchResult).toHaveLength(1);
fireEvent.change(input, { target: { error: '' } });
expect(input.error).toBe('');
});
});