-
Notifications
You must be signed in to change notification settings - Fork 4.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
179 additions
and
30 deletions.
There are no files selected for viewing
3 changes: 3 additions & 0 deletions
3
ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`NetworkListMenu renders properly 1`] = `<div />`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
...ain/network-list-menu/network-list-search/__snapshots__/network-list-search.test.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`NetworkListSearch renders search list component 1`] = ` | ||
| <div> | ||
| <div | ||
| class="mm-box mm-box--padding-top-0 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4" | ||
| > | ||
| <div | ||
| class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--focused mm-text-field--truncate mm-text-field-search mm-box--padding-right-0 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default mm-box--rounded-sm mm-box--border-width-1 box--border-style-solid" | ||
| data-testid="search-list" | ||
| > | ||
| <span | ||
| class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit" | ||
| style="mask-image: url('./images/icons/search.svg');" | ||
| /> | ||
| <input | ||
| autocomplete="off" | ||
| class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--margin-right-6 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none" | ||
| data-testid="network-redesign-modal-search-input" | ||
| focused="true" | ||
| placeholder="search" | ||
| type="search" | ||
| value="" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `; |
51 changes: 51 additions & 0 deletions
51
ui/components/multichain/network-list-menu/network-list-search/network-list-search.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from 'react'; | ||
| import { render, fireEvent } from '@testing-library/react'; | ||
| import { useI18nContext } from '../../../../hooks/useI18nContext'; | ||
| import NetworkListSearch from './network-list-search'; | ||
|
|
||
| jest.mock('../../../../hooks/useI18nContext', () => ({ | ||
| useI18nContext: jest.fn(), | ||
| })); | ||
|
|
||
| describe('NetworkListSearch', () => { | ||
| const mockSetSearchQuery = jest.fn(); | ||
| const useI18nContextMock = useI18nContext as jest.Mock; | ||
|
|
||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| useI18nContextMock.mockReturnValue((key: string) => key); | ||
| }); | ||
|
|
||
| it('renders search list component', () => { | ||
| const { container } = render( | ||
| <NetworkListSearch searchQuery="" setSearchQuery={mockSetSearchQuery} />, | ||
| ); | ||
|
|
||
| expect(container).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('should update search query on user input', () => { | ||
| const { getByPlaceholderText } = render( | ||
| <NetworkListSearch searchQuery="" setSearchQuery={mockSetSearchQuery} />, | ||
| ); | ||
|
|
||
| const searchInput = getByPlaceholderText('search'); | ||
| fireEvent.change(searchInput, { target: { value: 'Ethereum' } }); | ||
|
|
||
| expect(mockSetSearchQuery).toHaveBeenCalledWith('Ethereum'); | ||
| }); | ||
|
|
||
| it('should clear search query when clear button is clicked', () => { | ||
| const { getByRole } = render( | ||
| <NetworkListSearch | ||
| searchQuery="Ethereum" | ||
| setSearchQuery={mockSetSearchQuery} | ||
| />, | ||
| ); | ||
|
|
||
| const clearButton = getByRole('button', { name: /clear/u }); | ||
| fireEvent.click(clearButton); | ||
|
|
||
| expect(mockSetSearchQuery).toHaveBeenCalledWith(''); | ||
| }); | ||
| }); |
40 changes: 40 additions & 0 deletions
40
ui/components/multichain/network-list-menu/network-list-search/network-list-search.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from 'react'; | ||
| import { useI18nContext } from '../../../../hooks/useI18nContext'; | ||
| import { | ||
| Box, | ||
| ButtonIconSize, | ||
| TextFieldSearch, | ||
| TextFieldSearchSize, | ||
| } from '../../../component-library'; | ||
| import { BlockSize } from '../../../../helpers/constants/design-system'; | ||
|
|
||
| const NetworkListSearch = ({ | ||
| searchQuery, | ||
| setSearchQuery, | ||
| }: { | ||
| searchQuery: string; | ||
| setSearchQuery: (query: string) => void; | ||
| }) => { | ||
| const t = useI18nContext(); | ||
|
|
||
| return ( | ||
| <Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}> | ||
| <TextFieldSearch | ||
| size={TextFieldSearchSize.Lg} | ||
| width={BlockSize.Full} | ||
| placeholder={t('search')} | ||
| autoFocus | ||
| value={searchQuery} | ||
| onChange={(e) => setSearchQuery(e.target.value)} | ||
| clearButtonOnClick={() => setSearchQuery('')} | ||
| clearButtonProps={{ | ||
| size: ButtonIconSize.Sm, | ||
| }} | ||
| inputProps={{ 'data-testid': 'network-redesign-modal-search-input' }} | ||
| data-testid="search-list" | ||
| /> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| export default NetworkListSearch; |