Setup tests. Fix small issues

Author: AlexandrLi

package-lock.json

@@ -1,6 +1,6 @@
 {
-  "name": "store",
-  "version": "0.1.0",
+  "name": "my-store-app",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
     "start": "vite",
@@ -48,6 +48,7 @@
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.30.5",
     "@vitejs/plugin-react": "^1.3.2",
+    "@vitest/ui": "^0.18.0",
     "eslint": "^8.19.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",

package.json

@@ -1,8 +1,53 @@
-import { render } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
 import { test, expect } from "vitest";
 import App from "~/components/App/App";
+import { server } from "~/mocks/server";
+import { rest } from "msw";
+import API_PATHS from "~/constants/apiPaths";
+import { CartItem } from "~/models/CartItem";
+import { AvailableProduct } from "~/models/Product";
+import { renderWithProviders } from "~/testUtils";
+import { screen, waitForElementToBeRemoved } from "@testing-library/react";
+import { formatAsPrice } from "~/utils/utils";
 
-test("renders correctly", () => {
-  const container = render(<App />);
-  expect(container).toMatchSnapshot();
+test("Renders products list", async () => {
+  const products: AvailableProduct[] = [
+    {
+      id: "1",
+      title: "Product 1",
+      description: "Product 1 description",
+      price: 1,
+      count: 1,
+    },
+    {
+      id: "2",
+      title: "Product 2",
+      description: "Product 2 description",
+      price: 2,
+      count: 2,
+    },
+  ];
+  server.use(
+    rest.get(`${API_PATHS.bff}/product/available`, (req, res, ctx) => {
+      return res(
+        ctx.status(200),
+        ctx.delay(),
+        ctx.json<AvailableProduct[]>(products)
+      );
+    }),
+    rest.get(`${API_PATHS.cart}/profile/cart`, (req, res, ctx) => {
+      return res(ctx.status(200), ctx.json<CartItem[]>([]));
+    })
+  );
+  renderWithProviders(
+    <MemoryRouter initialEntries={["/"]}>
+      <App />
+    </MemoryRouter>
+  );
+
+  await waitForElementToBeRemoved(() => screen.queryByText(/Loading/));
+  products.forEach((product) => {
+    expect(screen.getByText(product.title)).toBeInTheDocument();
+    expect(screen.getByText(formatAsPrice(product.price))).toBeInTheDocument();
+  });
 });

src/components/App/App.test.tsx

@@ -1,26 +1,32 @@
-import PageProducts from "~/components/pages/PageProducts/PageProducts";
-import MainLayout from "~/components/MainLayout/MainLayout";
 import { Routes, Route } from "react-router-dom";
+import MainLayout from "~/components/MainLayout/MainLayout";
 import PageProductForm from "~/components/pages/PageProductForm/PageProductForm";
-import PageCart from "~/components/pages/PageCart/PageCart";
 import PageOrders from "~/components/pages/PageOrders/PageOrders";
 import PageOrder from "~/components/pages/PageOrder/PageOrder";
 import PageProductImport from "~/components/pages/admin/PageProductImport/PageProductImport";
+import PageCart from "~/components/pages/PageCart/PageCart";
+import PageProducts from "~/components/pages/PageProducts/PageProducts";
+import { Typography } from "@mui/material";
 
 function App() {
   return (
     <MainLayout>
       <Routes>
         <Route path="/" element={<PageProducts />} />
         <Route path="cart" element={<PageCart />} />
-        <Route path="admin">
-          <Route path="orders" element={<PageOrders />} />
-          <Route path="orders/:id" element={<PageOrder />} />
-          <Route path="products" element={<PageProductImport />} />
-          <Route path="product-form" element={<PageProductForm />}>
-            <Route path=":id" element={<PageProductForm />} />
-          </Route>
+        <Route path="admin/orders">
+          <Route index element={<PageOrders />} />
+          <Route path=":id" element={<PageOrder />} />
+        </Route>
+        <Route path="admin/products" element={<PageProductImport />} />
+        <Route path="product-form">
+          <Route index element={<PageProductForm />} />
+          <Route path=":id" element={<PageProductForm />} />
         </Route>
+        <Route
+          path="*"
+          element={<Typography variant="h1">Not found</Typography>}
+        />
       </Routes>
     </MainLayout>
   );