error and loading

src/components/RestaurantList.js

@@ -1,30 +1,34 @@
 import { useEffect } from "react";
 import { connect } from "react-redux";
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemText from '@mui/material/ListItemText';
+import { CircularProgress, List, ListItem, ListItemText, Alert } from "@mui/material";
 import { loadRestaurants } from '../store/restaurants/actions';
 
-export function RestaurantList({ loadRestaurants, restaurants })
+export function RestaurantList({ loadRestaurants, restaurants, loading, loadError })
 {
     useEffect(() => 
     {
         loadRestaurants();
     }, [loadRestaurants]);
     return (
-        <List>
-            {restaurants.map(restaurant =>
-            (
-                <ListItem key={restaurant.id}>
-                    <ListItemText>{restaurant.name}</ListItemText>
-                </ListItem>
-            ))}
-        </List>
+        <>
+            {loading && <CircularProgress />}
+            {loadError && (<Alert severity="error">Restaurants could not be loaded.</Alert>)}
+            <List>
+                {restaurants.map(restaurant =>
+                (
+                    <ListItem key={restaurant.id}>
+                        <ListItemText>{restaurant.name}</ListItemText>
+                    </ListItem>
+                ))}
+            </List>
+        </>
     );
 };
 
 const mapStateToProps = state => ({
     restaurants: state.restaurants.records,
+    loading: state.restaurants.loading,
+    loadError: state.restaurants.loadError,
 });
 const mapDispatchToProps = { loadRestaurants };
 

src/components/RestaurantList.spec.js

@@ -1,29 +1,64 @@
 import { render, screen } from '@testing-library/react';
 import { RestaurantList } from './RestaurantList';
 
-describe('RestaurantList', () => {
-    let loadRestaurants;
-    const restaurants = [
-            {id: 1, name: 'Sushi Place'},
-            {id: 2, name: 'Pizza Place'}
-        ];
-    function renderComponent(){
-        loadRestaurants = jest.fn().mockName('loadRestaurnats');
-        render(
-            <RestaurantList
-                loadRestaurants={loadRestaurants}
-                restaurants={restaurants}
-            />
-        )
-    }
+let loadRestaurants;
 
-    it('loads restaurants on first render', () => {
-       renderComponent();
+const restaurants = [
+    { id: 1, name: 'Sushi Place' },
+    { id: 2, name: 'Pizza Place' }
+];
+
+function renderComponent(propsOverride = {})
+{
+    const props = {
+        loadRestaurants: jest.fn().mockName('loadRestaurnats'),
+        restaurants,
+        loading: false,
+        ...propsOverride,
+    };
+    loadRestaurants = props.loadRestaurants;
+
+    render(<RestaurantList {...props} />);
+}
+
+describe('When Loading Succeeds', () =>
+{
+    it('loads restaurants on first render', () =>
+    {
+        renderComponent();
         expect(loadRestaurants).toHaveBeenCalled();
     });
-    it('displays the restaurants', () => {
+
+    it('does not display the error message', () =>
+    {
+        renderComponent();
+        expect(screen.queryByText('Restautants could not be loaded.')).not.toBeInTheDocument();
+    });
+
+    it('displays the restaurants', () =>
+    {
         renderComponent();
         expect(screen.getByText('Sushi Place')).toBeInTheDocument();
         expect(screen.getByText('Pizza Place')).toBeInTheDocument();
-    })
-});
+    });
+
+    it('displays the loading indicator while loading', () =>
+    {
+        renderComponent({ loading: true });
+        expect(screen.getByRole('progressbar')).toBeInTheDocument();
+    });
+
+    it('does not display the loading indicator while not loading', () =>
+    {
+        renderComponent();
+        expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    });
+});
+describe('When Loading Fails', () =>
+{
+    it('displays the error message', () =>
+    {
+        renderComponent({ loadError: true });
+        expect(screen.getByText('Restaurants could not be loaded.'),).toBeInTheDocument();
+    });
+});