patch: Icons in search bar, updated icon styles
Signed-off-by: Raul Kele <raulkeleblk@gmail.com>
This commit is contained in:
parent
2dc4a35c87
commit
634ab073fb
76
src/__tests__/Shared/SearchSuggestion.test.js
Normal file
76
src/__tests__/Shared/SearchSuggestion.test.js
Normal file
@ -0,0 +1,76 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { api } from 'api';
|
||||
import SearchSuggestion from 'components/SearchSuggestion';
|
||||
import React from 'react';
|
||||
|
||||
// router mock
|
||||
const mockedUsedNavigate = jest.fn();
|
||||
jest.mock('react-router-dom', () => ({
|
||||
// @ts-ignore
|
||||
...jest.requireActual('react-router-dom'),
|
||||
useNavigate: () => mockedUsedNavigate
|
||||
}));
|
||||
|
||||
const mockImageList = {
|
||||
GlobalSearch: {
|
||||
Repos: [
|
||||
{
|
||||
Name: 'alpine',
|
||||
Size: '2806985',
|
||||
LastUpdated: '2022-08-09T17:19:53.274069586Z',
|
||||
NewestImage: {
|
||||
Tag: 'latest',
|
||||
Description: 'w',
|
||||
IsSigned: true,
|
||||
Licenses: '',
|
||||
Vendor: '',
|
||||
Labels: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
Name: 'mongo',
|
||||
Size: '231383863',
|
||||
LastUpdated: '2022-08-02T01:30:49.193203152Z',
|
||||
NewestImage: {
|
||||
Tag: 'latest',
|
||||
Description: '',
|
||||
IsSigned: false,
|
||||
Licenses: '',
|
||||
Vendor: '',
|
||||
Labels: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
Name: 'nodeUnique',
|
||||
Size: '369311301',
|
||||
LastUpdated: '2022-08-23T00:20:40.144281895Z',
|
||||
NewestImage: {
|
||||
Tag: 'latest',
|
||||
Description: '',
|
||||
IsSigned: false,
|
||||
Licenses: '',
|
||||
Vendor: '',
|
||||
Labels: ''
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
afterEach(() => {
|
||||
// restore the spy created with spyOn
|
||||
jest.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('Search component', () => {
|
||||
it('should display suggestions when user searches', async () => {
|
||||
// @ts-ignore
|
||||
jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageList } });
|
||||
render(<SearchSuggestion />);
|
||||
const searchInput = screen.getByPlaceholderText(/search for content/i);
|
||||
expect(searchInput).toBeInTheDocument();
|
||||
userEvent.type(searchInput, 'test');
|
||||
expect(await screen.findByText(/alpine/i)).toBeInTheDocument();
|
||||
});
|
||||
});
|
@ -45,7 +45,8 @@ const useStyles = makeStyles(() => ({
|
||||
},
|
||||
avatar: {
|
||||
height: '1.4375rem',
|
||||
width: '1.4375rem'
|
||||
width: '1.4375rem',
|
||||
objectFit: 'fill'
|
||||
},
|
||||
cardBtn: {
|
||||
height: '100%',
|
||||
|
@ -48,7 +48,8 @@ const useStyles = makeStyles(() => ({
|
||||
},
|
||||
avatar: {
|
||||
height: '1.4375rem',
|
||||
width: '1.4375rem'
|
||||
width: '1.4375rem',
|
||||
objectFit: 'fill'
|
||||
},
|
||||
cardBtn: {
|
||||
height: '100%',
|
||||
|
@ -41,7 +41,8 @@ const useStyles = makeStyles(() => ({
|
||||
},
|
||||
avatar: {
|
||||
height: '3rem',
|
||||
width: '3rem'
|
||||
width: '3rem',
|
||||
objectFit: 'fill'
|
||||
},
|
||||
cardBtn: {
|
||||
height: '100%',
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { InputBase, List, ListItem, Stack, Typography } from '@mui/material';
|
||||
import { Avatar, InputBase, List, ListItem, Stack, Typography } from '@mui/material';
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import PhotoIcon from '@mui/icons-material/Photo';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
@ -75,8 +75,20 @@ const useStyles = makeStyles(() => ({
|
||||
height: '2.75rem',
|
||||
padding: '0 5%'
|
||||
},
|
||||
searchItemIconBg: {
|
||||
backgroundColor: '#FFFFFF',
|
||||
height: '1.5rem',
|
||||
width: '1.5rem',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
overflow: 'hidden'
|
||||
},
|
||||
searchItemIcon: {
|
||||
color: '#0000008A'
|
||||
color: '#0000008A',
|
||||
minHeight: '100%',
|
||||
minWidth: '100%',
|
||||
objectFit: 'fill'
|
||||
}
|
||||
}));
|
||||
|
||||
@ -147,7 +159,8 @@ function SearchSuggestion() {
|
||||
getItemProps,
|
||||
highlightedIndex,
|
||||
getComboboxProps,
|
||||
isOpen
|
||||
isOpen,
|
||||
openMenu
|
||||
// closeMenu
|
||||
} = useCombobox({
|
||||
items: suggestionData,
|
||||
@ -166,7 +179,16 @@ function SearchSuggestion() {
|
||||
spacing={2}
|
||||
>
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Avatar
|
||||
variant="square"
|
||||
classes={{
|
||||
root: classes.searchItemIconBg,
|
||||
img: classes.searchItemIcon
|
||||
}}
|
||||
src={`data:image/png;base64, ${suggestion.logo}`}
|
||||
>
|
||||
<PhotoIcon className={classes.searchItemIcon} />
|
||||
</Avatar>
|
||||
<Typography>{suggestion.name}</Typography>
|
||||
</Stack>
|
||||
</ListItem>
|
||||
@ -188,6 +210,7 @@ function SearchSuggestion() {
|
||||
placeholder="Search for content..."
|
||||
className={classes.input}
|
||||
onKeyUp={handleSearch}
|
||||
onFocus={() => openMenu()}
|
||||
{...getInputProps()}
|
||||
/>
|
||||
<div onClick={handleSearch} className={classes.searchIcon}>
|
||||
|
@ -58,7 +58,8 @@ const useStyles = makeStyles(() => ({
|
||||
},
|
||||
avatar: {
|
||||
height: '3rem',
|
||||
width: '3rem'
|
||||
width: '3rem',
|
||||
objectFit: 'fill'
|
||||
},
|
||||
cardBtn: {
|
||||
height: '100%',
|
||||
|
Loading…
Reference in New Issue
Block a user