Adding a circular progress bar to the edit offer form and making a te…

…st to verify if it is being shown.
NIAEFEUP · Sep 16, 2023 · 3d0e58a · 3d0e58a
1 parent a5f7e3a
commit 3d0e58a
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/src/components/Offers/Edit/EditOfferForm.js b/src/components/Offers/Edit/EditOfferForm.js
@@ -8,6 +8,7 @@ import useOfferForm from "../../../hooks/useOfferForm";
 import { INITIAL_JOB_DURATION } from "../../../reducers/searchOffersReducer";
 import useSession from "../../../hooks/useSession";
 import EditOfferSchema from "./EditOfferSchema";
+import { CardContent, CircularProgress, Grid } from "@material-ui/core";
 
 export const EditOfferControllerContext = React.createContext();
 
@@ -155,7 +156,20 @@ const EditOfferForm = () => {
         canEdit,
     } = useContext(EditOfferControllerContext);
 
-    if (canEdit === undefined) return null;
+    if (canEdit === undefined)
+        return (
+            <Grid
+                container
+                direction="column"
+                alignItems="center"
+            >
+                <Grid item xs={3}>
+                    <CardContent>
+                        <CircularProgress  />
+                    </CardContent>
+                </Grid>
+            </Grid>
+        );
 
     if (errorOffer || canEdit === false) {
         return <Redirect {...redirectProps} />;

diff --git a/src/components/Offers/Edit/EditOfferForm.spec.js b/src/components/Offers/Edit/EditOfferForm.spec.js
@@ -186,6 +186,23 @@ describe("Edit Offer Form", () => {
 
             expect(screen.findByText("Test Redirect"));
         });
+        it("should show circular progress bar while data is being fetch", () => {
+            useSession.mockImplementation(() => ({ isValidating: true, isLoggedIn: true, data: { company: { _id: "company_id" } } }));
+            useOffer.mockImplementation(() => ({ offer, loading: false, error: null, mutate: () => {} }));
+
+            renderWithStoreAndTheme(
+                <BrowserRouter>
+                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
+                        <EditOfferWrapper>
+                            <EditOfferPage />
+                        </EditOfferWrapper>
+                    </MuiPickersUtilsProvider>
+                </BrowserRouter>,
+                { initialState, theme }
+            );
+            expect(screen.queryByRole("progressbar")).toBeInTheDocument();
+
+        });
 
         it("should render enabled form", () => {
             useSession.mockImplementation(() => ({ isLoggedIn: true, data: { company: { _id: "company_id" } } }));