mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-05 15:35:46 +01:00
8184b150cb
Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Elliot Winkler <elliot.winkler@gmail.com>
111 lines
3.6 KiB
JavaScript
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('');
|
|
});
|
|
});
|