@pautena/react-design-system 0.2.1 → 0.4.0

package/src/generators/model-router/model-router.test.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { DummyModelRouter, InternalModelRouter } from "./stories/model-router.stories";
 import {
   expectModelFieldInputExist,
@@ -9,16 +9,34 @@ import {
   TestRouter,
   expectModelFieldValue,
   expectModelFieldInputValue,
+  selectOption,
 } from "~/tests";
 import { data as mockData } from "./stories/templates";
 import userEvent from "@testing-library/user-event";
 import { getRandomItem } from "../../utils";
 import { Model } from "../generators.model";
-import { createModelInstance, MockInstance, mockModel } from "../generators.mock";
+import {
+  BirthDateFormat,
+  createModelInstance,
+  MockInstance,
+  mockModel,
+  ReturnTimeFormat,
+  TradeDateFormat,
+} from "../generators.mock";
 import { NotificationCenterProvider } from "../../providers";
 import { Box } from "@mui/system";
 import { Button } from "@mui/material";
-import { Route, Routes, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import {
+  clearCheckbox,
+  clearMultiSelect,
+  expectAlert,
+  expectToHaveBeenCalledOnceWithMockInstance,
+  pickDatetime,
+  selectOptions,
+} from "../../tests";
+import { AddScreen, ListScreen, UpdateScreen } from "./screens";
+import { IdleRequest, LoadingRequest, SuccessRequest } from "./model-router.types";
 
 const REQUEST_TIMEOUT = 20;
 
@@ -82,30 +100,6 @@ describe("ModelRouter", () => {
     expectNotToHaveMenuOption: ({ id }: { id: string }) => {
       expect(screen.queryByTestId(`options-${id}`)).not.toBeInTheDocument();
     },
-    expectSubmitInstanceCall: (mockFn: jest.Mock, instance: MockInstance) => {
-      expect(mockFn).toHaveBeenCalledTimes(1);
-      expect(mockFn).toHaveBeenCalledWith({
-        id: instance.id,
-        firstName: instance.firstName,
-        middleName: instance.middleName,
-        lastName: instance.lastName,
-        gender: instance.gender,
-        age: instance.age.toString(),
-        birthDate: instance.birthDate,
-        car: {
-          model: instance.car.model,
-          manufacturer: instance.car.manufacturer,
-          color: instance.car.color,
-          type: instance.car.type,
-          vin: instance.car.vin,
-          vrm: instance.car.vrm,
-        },
-        quantity: instance.quantity.toString(),
-        available: instance.available.toString(),
-        currency: instance.currency,
-        tradeDate: instance.tradeDate,
-      });
-    },
   };
 
   const actions = {
@@ -149,17 +143,18 @@ describe("ModelRouter", () => {
       const firstNameElement = screen.getByRole("textbox", { name: /first name/i });
       const middleNameElement = screen.getByRole("textbox", { name: /middle name/i });
       const lastNameElement = screen.getByRole("textbox", { name: /last name/i });
-      const genderElement = screen.getByRole("textbox", { name: /gender/i });
+      const genderElement = screen.getByRole("button", { name: /gender/i });
       const ageElement = screen.getByRole("spinbutton", { name: /age/i });
       const birthDateElement = screen.getByRole("textbox", { name: /birth date/i });
-      const manufacturerElement = screen.getByRole("textbox", { name: /manufacturer/i });
-      const modelElement = screen.getByRole("textbox", { name: /model/i });
+      const manufacturerElement = screen.getByRole("button", { name: /manufacturer/i });
+      const modelElement = screen.getByRole("button", { name: /model/i });
       const colorElement = screen.getByRole("textbox", { name: /color/i });
-      const typeElement = screen.getByRole("textbox", { name: /type/i });
+      const typeElement = screen.getByRole("button", { name: /type/i });
       const vinElement = screen.getByRole("textbox", { name: /vin/i });
       const vrmElement = screen.getByRole("textbox", { name: /vrm/i });
+      const timeReturnElement = screen.getByRole("textbox", { name: /return time/i });
       const quantityElement = screen.getByRole("spinbutton", { name: /q/i });
-      const availableElement = screen.getByRole("textbox", { name: /available/i });
+      const availableElement = screen.getByRole("checkbox", { name: /available/i });
       const currencyElement = screen.getByRole("textbox", { name: /currency/i });
       const tradeDateElement = screen.getByRole("textbox", { name: /trade date/i });
 
@@ -168,37 +163,39 @@ describe("ModelRouter", () => {
         await userEvent.clear(firstNameElement);
         await userEvent.clear(middleNameElement);
         await userEvent.clear(lastNameElement);
-        await userEvent.clear(genderElement);
         await userEvent.clear(ageElement);
         await userEvent.clear(birthDateElement);
-        await userEvent.clear(manufacturerElement);
-        await userEvent.clear(modelElement);
         await userEvent.clear(colorElement);
-        await userEvent.clear(typeElement);
         await userEvent.clear(vinElement);
         await userEvent.clear(vrmElement);
         await userEvent.clear(quantityElement);
         await userEvent.clear(availableElement);
         await userEvent.clear(currencyElement);
         await userEvent.clear(tradeDateElement);
+        await userEvent.clear(timeReturnElement);
+        await clearCheckbox(availableElement);
+        await clearMultiSelect(typeElement);
       }
       await userEvent.type(idElement, instance.id);
       await userEvent.type(firstNameElement, instance.firstName);
       await userEvent.type(middleNameElement, instance.middleName);
       await userEvent.type(lastNameElement, instance.lastName);
-      await userEvent.type(genderElement, instance.gender);
+      await selectOption(genderElement, instance.gender);
       await userEvent.type(ageElement, instance.age.toString());
-      await userEvent.type(birthDateElement, instance.birthDate);
-      await userEvent.type(modelElement, instance.car.model);
-      await userEvent.type(manufacturerElement, instance.car.manufacturer);
+      pickDatetime(birthDateElement, instance.birthDate, BirthDateFormat);
+      await selectOption(modelElement, instance.car.model);
+      await selectOption(manufacturerElement, instance.car.manufacturer);
       await userEvent.type(colorElement, instance.car.color);
-      await userEvent.type(typeElement, instance.car.type);
+      await selectOptions(typeElement, instance.car.type);
       await userEvent.type(vinElement, instance.car.vin);
       await userEvent.type(vrmElement, instance.car.vrm);
+      pickDatetime(timeReturnElement, instance.car.returnTime, ReturnTimeFormat);
       await userEvent.type(quantityElement, instance.quantity.toString());
-      await userEvent.type(availableElement, instance.available.toString());
+      if (instance.available) {
+        await userEvent.click(availableElement);
+      }
       await userEvent.type(currencyElement, instance.currency);
-      await userEvent.type(tradeDateElement, instance.tradeDate);
+      pickDatetime(tradeDateElement, instance.tradeDate, TradeDateFormat);
 
       submit && (await userEvent.click(screen.getByRole("button", { name: /save/i })));
 
@@ -296,6 +293,98 @@ describe("ModelRouter", () => {
     );
   };
 
+  const renderListScreen = () => {
+    const error = "Lorem ipsum error";
+
+    const TestComponent = () => {
+      const [deleteRequest, setDeleteRequest] = useState(IdleRequest);
+
+      return (
+        <NotificationCenterProvider>
+          <ListScreen
+            onRequestList={jest.fn()}
+            listData={[]}
+            onClickDeleteItem={jest.fn()}
+            listRequest={IdleRequest}
+            deleteRequest={deleteRequest}
+            modelName="Items"
+            model={mockModel}
+          />
+          <Box>
+            <Button onClick={() => setDeleteRequest(IdleRequest)}>idle</Button>
+            <Button onClick={() => setDeleteRequest(LoadingRequest)}>loading</Button>
+            <Button onClick={() => setDeleteRequest(SuccessRequest)}>success</Button>
+            <Button onClick={() => setDeleteRequest({ error })}>error</Button>
+          </Box>
+        </NotificationCenterProvider>
+      );
+    };
+
+    const instance = render(<TestComponent />);
+
+    return { ...instance, error, model: mockModel };
+  };
+
+  const renderAddScreen = () => {
+    const error = "Lorem ipsum error";
+
+    const TestComponent = () => {
+      const [newItemRequest, setNewItemRequest] = useState(IdleRequest);
+
+      return (
+        <NotificationCenterProvider>
+          <AddScreen
+            modelName="Items"
+            model={mockModel}
+            onSubmitNewItem={jest.fn()}
+            newItemRequest={newItemRequest}
+          />
+          <Box>
+            <Button onClick={() => setNewItemRequest(IdleRequest)}>idle</Button>
+            <Button onClick={() => setNewItemRequest(LoadingRequest)}>loading</Button>
+            <Button onClick={() => setNewItemRequest(SuccessRequest)}>success</Button>
+            <Button onClick={() => setNewItemRequest({ error })}>error</Button>
+          </Box>
+        </NotificationCenterProvider>
+      );
+    };
+
+    const instance = render(<TestComponent />, { router: "router" });
+
+    return { ...instance, error, model: mockModel };
+  };
+
+  const renderUpdateScreen = () => {
+    const error = "Lorem ipsum error";
+
+    const TestComponent = () => {
+      const [updateRequest, setUpdateRequest] = useState(IdleRequest);
+
+      return (
+        <NotificationCenterProvider>
+          <UpdateScreen
+            modelName="Items"
+            model={mockModel}
+            onSubmitUpdateItem={jest.fn()}
+            submitUpdateItemRequest={updateRequest}
+            updateItemRequest={IdleRequest}
+            onRequestUpdateItem={jest.fn()}
+          />
+          <Box>
+            <Button onClick={() => setUpdateRequest(IdleRequest)}>idle</Button>
+            <Button onClick={() => setUpdateRequest(LoadingRequest)}>loading</Button>
+            <Button onClick={() => setUpdateRequest(SuccessRequest)}>success</Button>
+            <Button onClick={() => setUpdateRequest({ error })}>error</Button>
+          </Box>
+        </NotificationCenterProvider>
+      );
+    };
+
+    const instance = render(<TestComponent />, { router: "router" });
+
+    return { ...instance, error, model: mockModel };
+  };
+
   describe("router screens", () => {
     it("would render the list screen by default", async () => {
       await renderComponent();
@@ -381,6 +470,26 @@ describe("ModelRouter", () => {
       await assertions.expectAddScreen();
     });
 
+    it("would be able to go back to the list sreen from the add screen", async () => {
+      renderComponentInsideRouter();
+
+      await actions.navigateToInternal();
+      await actions.navigateToAddScreen();
+      await userEvent.click(screen.getByRole("link", { name: "Items" }));
+
+      await assertions.expectListScreen();
+    });
+
+    it("would navigate to the add screen if I click the navigaiton path", async () => {
+      renderComponentInsideRouter();
+
+      await actions.navigateToInternal();
+      await actions.navigateToAddScreen();
+      await userEvent.click(screen.getByRole("link", { name: "Add new Items" }));
+
+      await assertions.expectAddScreen();
+    });
+
     it("would navigate to the detail screen", async () => {
       renderComponentInsideRouter();
       const {
@@ -393,6 +502,32 @@ describe("ModelRouter", () => {
       await assertions.expectDetailScreen({ id });
     });
 
+    it("would be able to go back to the list sreen from the details screen", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { firstName },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToDetailScreen({ name: firstName });
+      await userEvent.click(screen.getByRole("link", { name: "Items" }));
+
+      await assertions.expectListScreen();
+    });
+
+    it("would navigate to the add screen if I click the navigation path", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { id, firstName },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToDetailScreen({ name: firstName });
+      await userEvent.click(screen.getByRole("link", { name: id }));
+
+      await assertions.expectDetailScreen({ id });
+    });
+
     it("would navigate to the update screen", async () => {
       renderComponentInsideRouter();
       const {
@@ -404,6 +539,32 @@ describe("ModelRouter", () => {
 
       await assertions.expectUpdateScreen({ id });
     });
+
+    it("would be able to go back to the list sreen from the details screen", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { id },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToUpdateScreen({ id });
+      await userEvent.click(screen.getByRole("link", { name: "Items" }));
+
+      await assertions.expectListScreen();
+    });
+
+    it("would navigate to the add screen if I click the navigation path", async () => {
+      renderComponentInsideRouter();
+      const {
+        item: { id },
+      } = getRandomItem<MockInstance>(mockData);
+
+      await actions.navigateToInternal();
+      await actions.navigateToUpdateScreen({ id });
+      await userEvent.click(screen.getByRole("link", { name: `Edit ${id}` }));
+
+      await assertions.expectUpdateScreen({ id });
+    });
   });
 
   describe("list screen", () => {
@@ -544,7 +705,7 @@ describe("ModelRouter", () => {
 
       const newInstance = await actions.fullfillModelForm({ model, submit: true });
 
-      assertions.expectSubmitInstanceCall(onSubmitNewItem, newInstance);
+      expectToHaveBeenCalledOnceWithMockInstance(onSubmitNewItem, newInstance);
     });
 
     it("would show a loading indicator when the request is in progress", async () => {
@@ -555,24 +716,36 @@ describe("ModelRouter", () => {
       expectProgressIndicator();
     });
 
-    // TODO it("would show a success message if the request finish with a success", async () => {
-    //   await renderComponent({ screen: "add" });
+    it("would show a success message if the request finish with a success", async () => {
+      renderAddScreen();
 
-    //   await actions.fullfillModelForm();
+      await userEvent.click(screen.getByRole("button", { name: /success/i }));
 
-    //   await expectAlert({
-    //     message: /item added successfully/i,
-    //     severity: "success",
-    //   });
-    // });
+      await expectAlert({
+        message: /item added successfully/i,
+        severity: "success",
+      });
+    });
 
-    // TODO it("would navigate to the list screen if the request finish with a success", async () => {
-    //   await renderComponent({ screen: "add" });
+    it("would navigate to the list screen if the request finish with a success", async () => {
+      const { history } = renderAddScreen();
 
-    //   await actions.fullfillModelForm();
+      await userEvent.click(screen.getByRole("button", { name: /success/i }));
 
-    //   await assertions.expectListScreen();
-    // });
+      expect(history.location.pathname).toBe("/");
+    });
+
+    it("would show an error message if the request finish with an error", async () => {
+      const { error } = renderAddScreen();
+
+      await userEvent.click(screen.getByRole("button", { name: /error/i }));
+
+      await expectAlert({
+        title: /we had an error/i,
+        message: error,
+        severity: "error",
+      });
+    });
   });
 
   describe("details screen", () => {
@@ -707,12 +880,12 @@ describe("ModelRouter", () => {
     });
 
     it("would make a request with the new values when the form is submitted", async () => {
-      const { model } = await renderComponent({ screen: "update" });
+      const { model, onSubmitUpdate } = await renderComponent({ screen: "update" });
 
       await waitForProgressIndicatorToBeRemoved();
-      const newInstance = await actions.fullfillModelForm({ model, clear: true });
+      const newInstance = await actions.fullfillModelForm({ model, clear: true, submit: true });
 
-      expectModelFieldInputValue(model.fields, newInstance);
+      expectToHaveBeenCalledOnceWithMockInstance(onSubmitUpdate, newInstance);
     });
 
     it("would show a loading indicator while the submit request is in progress", async () => {
@@ -724,13 +897,36 @@ describe("ModelRouter", () => {
       expectProgressIndicator();
     });
 
-    it("would navigate to the list screen when the submit request finish", async () => {
-      const { model, onSubmitUpdate } = await renderComponent({ screen: "update" });
+    it("would show a success message if the request finish with a success", async () => {
+      renderUpdateScreen();
 
-      await waitForProgressIndicatorToBeRemoved();
-      const newInstance = await actions.fullfillModelForm({ model, submit: true, clear: true });
+      await userEvent.click(screen.getByRole("button", { name: /success/i }));
+
+      await expectAlert({
+        title: /item updated/i,
+        message: /has been updated successfully/i,
+        severity: "success",
+      });
+    });
+
+    it("would navigate to the list screen if the request finish with a success", async () => {
+      const { history } = renderUpdateScreen();
+
+      await userEvent.click(screen.getByRole("button", { name: /success/i }));
 
-      assertions.expectSubmitInstanceCall(onSubmitUpdate, newInstance);
+      expect(history.location.pathname).toBe("/");
+    });
+
+    it("would show an error message if the request finish with an error", async () => {
+      const { error } = renderUpdateScreen();
+
+      await userEvent.click(screen.getByRole("button", { name: /error/i }));
+
+      await expectAlert({
+        title: /we had an error/i,
+        message: error,
+        severity: "error",
+      });
     });
   });
 
@@ -776,6 +972,30 @@ describe("ModelRouter", () => {
 
       expect(screen.queryByRole("cell", { name: firstName })).not.toBeInTheDocument();
     });
+
+    it("would show a success message if the delete request finish with a success", async () => {
+      renderListScreen();
+
+      await userEvent.click(screen.getByRole("button", { name: /success/i }));
+
+      await expectAlert({
+        title: /item deleted/i,
+        message: /the item has been deleted successfully/i,
+        severity: "success",
+      });
+    });
+
+    it("would show a error message if the delete request finish with an error", async () => {
+      const { error } = renderListScreen();
+
+      await userEvent.click(screen.getByRole("button", { name: /error/i }));
+
+      await expectAlert({
+        title: /we had an error/i,
+        message: error,
+        severity: "error",
+      });
+    });
   });
 
   describe("modifying enabled features", () => {

package/src/generators/model-router/model-router.types.ts

@@ -12,3 +12,7 @@ export const IdleRequest: RequestState = {
 export const LoadingRequest: RequestState = {
   loading: true,
 };
+
+export const SuccessRequest: RequestState = {
+  success: true,
+};

package/src/generators/model-router/screens/add-screen.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from "react";
-import { useNavigate } from "react-router-dom";
+import React from "react";
 import { Header, Content } from "~/components";
 import { BasicModelInstance, ModelForm } from "~/generators";
 import { HeaderLayout } from "../../../layouts";
-import { useNotificationCenter } from "../../../providers";
+import { useNotifyWhenValueChanges } from "../../../providers";
 import { RequestState } from "../model-router.types";
 import { BaseScreenProps } from "./screens.types";
+import { useNavigateWhenValueChanges } from "../../../hooks";
 
 export interface AddScreenProps<T extends BasicModelInstance> extends BaseScreenProps {
   /**
@@ -28,21 +28,17 @@ export const AddScreen = <T extends BasicModelInstance>({
   onSubmitNewItem,
   newItemRequest,
 }: AddScreenProps<T>) => {
-  const navigate = useNavigate();
-  const { show } = useNotificationCenter();
-
-  useEffect(() => {
-    if (newItemRequest.success) {
-      show({ message: "Item added successfully", severity: "success" });
-      navigate(`${basePath}/`);
-    }
-  }, [newItemRequest.success]);
-
-  useEffect(() => {
-    if (newItemRequest.error) {
-      show({ title: "We had an error", message: newItemRequest.error, severity: "error" });
-    }
-  }, [newItemRequest.error]);
+  useNotifyWhenValueChanges(
+    { message: "Item added successfully", severity: "success" },
+    !!newItemRequest.success,
+    { from: false, to: true },
+  );
+  useNavigateWhenValueChanges(`${basePath}/`, !!newItemRequest.success, { from: false, to: true });
+  useNotifyWhenValueChanges(
+    { title: "We had an error", message: newItemRequest.error || "", severity: "error" },
+    !!newItemRequest.error,
+    { from: false, to: true },
+  );
 
   return (
     <HeaderLayout loading={newItemRequest.loading}>
@@ -53,12 +49,12 @@ export const AddScreen = <T extends BasicModelInstance>({
           {
             id: "list",
             text: modelName,
-            link: "/",
+            link: `${basePath}/`,
           },
           {
             id: "add",
             text: `Add new ${modelName}`,
-            link: "/add",
+            link: `${basePath}/add`,
           },
         ]}
       />

package/src/generators/model-router/screens/details-screen.tsx

@@ -28,6 +28,7 @@ export interface DetailsScreenProps<T extends BasicModelInstance> extends BaseSc
 export const DetailsScreen = <T extends BasicModelInstance>({
   model,
   modelName,
+  basePath = "",
   onRequestItem,
   itemRequest,
   detailsItem,
@@ -47,12 +48,12 @@ export const DetailsScreen = <T extends BasicModelInstance>({
           {
             id: "list",
             text: modelName,
-            link: "/",
+            link: `${basePath}/`,
           },
           {
             id: "detail",
             text: id,
-            link: `/${id}`,
+            link: `${basePath}/${id}`,
           },
         ]}
       />

package/src/generators/model-router/screens/list-screen.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { Content, Header, HeaderAction, TableList, TableRowOption } from "~/components";
 import { BasicModelInstance } from "~/generators";
+import { useNotifyWhenValueChanges } from "~/providers";
 import { HeaderLayout } from "../../../layouts";
 import { RequestState } from "../model-router.types";
 import { BaseScreenProps } from "./screens.types";
@@ -57,6 +58,22 @@ export const ListScreen = <T extends BasicModelInstance>({
     onRequestList();
   }, []);
 
+  useNotifyWhenValueChanges(
+    {
+      title: "Item deleted",
+      message: "The item has been deleted successfully",
+      severity: "success",
+    },
+    !!deleteRequest.success,
+    { from: false, to: true },
+  );
+
+  useNotifyWhenValueChanges(
+    { title: "We had an error", message: deleteRequest.error || "", severity: "error" },
+    !!deleteRequest.error,
+    { from: false, to: true },
+  );
+
   const handleClickListItem = detailsFeature
     ? (item: T) => {
         navigate(`${basePath}/${item.id}`);

package/src/generators/model-router/screens/update-screen.tsx

@@ -2,8 +2,9 @@ import React, { useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Content, Header } from "~/components";
 import { BasicModelInstance, ModelForm } from "~/generators";
+import { useNavigateWhenValueChanges } from "~/hooks";
 import { HeaderLayout } from "../../../layouts";
-import { useNotificationCenter } from "../../../providers";
+import { useNotificationCenter, useNotifyWhenValueChanges } from "../../../providers";
 import { RequestState } from "../model-router.types";
 import { BaseScreenProps } from "./screens.types";
 
@@ -55,16 +56,24 @@ export const UpdateScreen = <T extends BasicModelInstance>({
     onRequestUpdateItem(id);
   }, [id]);
 
-  useEffect(() => {
-    if (submitUpdateItemRequest.success) {
-      show({
-        title: "Item updated",
-        message: `The item ${id} has been updated successfully`,
-        severity: "success",
-      });
-      navigate(`${basePath}/`);
-    }
-  }, [submitUpdateItemRequest.success]);
+  useNotifyWhenValueChanges(
+    {
+      title: "Item updated",
+      message: `The item ${id} has been updated successfully`,
+      severity: "success",
+    },
+    !!submitUpdateItemRequest.success,
+    { from: false, to: true },
+  );
+  useNavigateWhenValueChanges(`${basePath}/`, !!submitUpdateItemRequest.success, {
+    from: false,
+    to: true,
+  });
+  useNotifyWhenValueChanges(
+    { title: "We had an error", message: submitUpdateItemRequest.error || "", severity: "error" },
+    !!submitUpdateItemRequest.error,
+    { from: false, to: true },
+  );
 
   return (
     <HeaderLayout loading={loading}>
@@ -75,12 +84,12 @@ export const UpdateScreen = <T extends BasicModelInstance>({
           {
             id: "list",
             text: modelName,
-            link: "/",
+            link: `${basePath}/`,
           },
           {
             id: "update",
             text: `Edit ${id}`,
-            link: `/${id}/update`,
+            link: `${basePath}/${id}/update`,
           },
         ]}
       />