explore tests

Signed-off-by: Raul Kele <raulkeleblk@gmail.com>

src/__tests__/Explore/Explore.test.js

@@ -0,0 +1,86 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import { api } from 'api';
+import Explore from 'components/Explore';
+import React, { useState } from 'react';
+
+// useNavigate mock
+const mockedUsedNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+   // @ts-ignore
+   ...jest.requireActual('react-router-dom'),
+  useNavigate: () => mockedUsedNavigate,
+}));
+
+const StateExploreWrapper = (props) => {
+  const [data,useData] = useState([]);
+  return (<Explore data={data} keywords={''} updateData={useData} />)
+}
+const mockImageList = {
+  ImageListWithLatestTag: [
+    {
+      "Name": "alpine",
+      "Latest": "latest",
+      "LastUpdated": "2022-05-23T19:19:30.413290187Z",
+      "Description": "",
+      "Licenses": "",
+      "Vendor": "",
+      "Size": "585",
+      "Labels": ""
+    },
+    {
+      "Name": "buildah",
+      "Latest": "latest",
+      "LastUpdated": "2022-05-06T10:11:58Z",
+      "Description": "",
+      "Licenses": "",
+      "Vendor": "",
+      "Size": "4440",
+      "Labels": ""
+    },
+    {
+      "Name": "redis",
+      "Latest": "latest",
+      "LastUpdated": "2022-06-23T00:20:27.020952309Z",
+      "Description": "",
+      "Licenses": "",
+      "Vendor": "",
+      "Size": "6591",
+      "Labels": ""
+    },
+    {
+      "Name": "ubuntu",
+      "Latest": "latest",
+      "LastUpdated": "2022-06-06T22:21:25.961828386Z",
+      "Description": "",
+      "Licenses": "",
+      "Vendor": "",
+      "Size": "579",
+      "Labels": ""
+    }
+  ]
+};
+afterEach(() => {
+  // restore the spy created with spyOn
+  jest.restoreAllMocks();
+});
+
+
+describe('Explore component', () => {
+  it('fetches image data and renders the list of images based on it\'s filters',async () => {
+    // @ts-ignore
+    jest.spyOn(api, 'get').mockResolvedValue({ status: 200, data: { data: mockImageList } })
+    render(<StateExploreWrapper/>);
+    expect(await screen.findByText(/alpine/i)).toBeInTheDocument();
+    expect(await screen.findByText(/buildah/i)).toBeInTheDocument();
+    expect(await screen.findByText(/redis/i)).toBeInTheDocument();
+    expect(await screen.findByText(/ubuntu/i)).toBeInTheDocument();
+  });
+
+  it('should log an error when data can\'t be fetched', async() => {
+    // @ts-ignore
+    jest.spyOn(api, 'get').mockRejectedValue({ status: 500, data: { } })
+    const error = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<StateExploreWrapper/>);
+    await waitFor(() => expect(error).toBeCalledTimes(1));
+  })
+});

src/__tests__/Explore/ExplorePage.test.js

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react';
+import ExplorePage from 'pages/ExplorePage';
+import React from 'react';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+
+
+it('renders the explore page component', () => {
+  render(
+    <BrowserRouter>
+      <Routes>
+        <Route path="*" element={<ExplorePage data={[]} keywords={''} updateData={() => {}} updateKeywords={() => {}}/>} />
+      </Routes>
+    </BrowserRouter>
+  );
+  expect(screen.getByTestId('explore-container')).toBeInTheDocument();
+});

src/components/Explore.jsx

@@ -6,7 +6,7 @@ import RepoCard from './RepoCard.jsx';
 import Loading from "./Loading";
 import Typography from '@mui/material/Typography';
 import Alert from '@mui/material/Alert';
-import { Container, FormControl, Grid, InputLabel, Select, Stack } from '@mui/material';
+import { Container, FormControl, Grid, InputLabel, MenuItem, Select, Stack } from '@mui/material';
 
 import makeStyles from '@mui/styles/makeStyles';
 
@@ -40,6 +40,8 @@ const useStyles = makeStyles(() => ({
 function Explore ({ keywords, data, updateData }) {
     const [isLoading, setIsLoading] = useState(true);
     const [filteredData, setFilteredData] = useState([]);
+    const [sortFilter, setSortFilter] = useState('');
+    const filterStr = keywords && keywords.toLocaleLowerCase();
     const classes = useStyles();
 
     useEffect(() => {
@@ -83,9 +85,8 @@ function Explore ({ keywords, data, updateData }) {
         });
 
         setFilteredData(filtered);
-    }, [keywords, data]);
+    }, [keywords, filterStr, data]);
 
-    const filterStr = keywords && keywords.toLocaleLowerCase();
 
     const renderRepoCards = () => {
         return filteredData && filteredData.map((item, index) => {
@@ -118,10 +119,13 @@ function Explore ({ keywords, data, updateData }) {
       );
     };
 
+    const handleSortChange = (event) => {
+      setSortFilter(event.target.value);
+    }
+
     return (
         <Container maxWidth="lg">
             { isLoading && <Loading /> }
-            
                 { !(filteredData && filteredData.length) ? (
                       <Grid container className={classes.nodataWrapper}>
                           <div style={{marginTop: 20}}>
@@ -140,7 +144,8 @@ function Explore ({ keywords, data, updateData }) {
                                 <Typography variant="body2" >Results {filteredData.length}</Typography>
                                 <FormControl  sx={{m:'1', minWidth:"4.6875rem"}} size="small">
                                   <InputLabel>Sort</InputLabel>
-                                  <Select label="Sort">                                
+                                  <Select label="Sort" value={sortFilter} onChange={handleSortChange} MenuProps={{disableScrollLock: true}}>
+                                    <MenuItem value='relevance'>Relevance</MenuItem>                            
                                   </Select>
                                 </FormControl>
                             </Stack>

src/pages/ExplorePage.jsx

@@ -30,7 +30,7 @@ function ExplorePage({ data, updateData, keywords, updateKeywords }) {
   const classes = useStyles();
 
   return (
-      <Stack className={classes.pageWrapper} direction="column">
+      <Stack className={classes.pageWrapper} direction="column" data-testid='explore-container'>
         <Header updateKeywords={updateKeywords}></Header>
         <Container className={classes.container} >
             <Grid container className={classes.gridWrapper}>