User: this pr enables user to logout from one's session

atlp-rwanda · Jul 30, 2024 · f299ea1 · f299ea1
1 parent 968b444
commit f299ea1
Show file tree

Hide file tree

Showing 18 changed files with 730 additions and 247 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,26 +1,21 @@
 version: '3.1'
 
 services:
-  web:
-    build:
-      context: .
-      dockerfile: Dockerfile
-    container_name: eagle-ec-fe-container
-    image: mugemanebertin/eagle-ec-fe
-    ports:
-      - "5173:5173"
-    env_file:
-      - .env
-
+  # Backend Service
   backend:
     image: mugemanebertin/eagle_ec_be:latest
-    container_name: eagle-ec-be-container
+    container_name: express-server-container
     ports:
-      - "499:499"
-    command: sh -c "npm run migrate && (npm run seed || true) && npm run dev"
+      - "${PORT}:${PORT}"
+    volumes:
+      - ./backend:/usr/src/app
+      - /usr/src/app/node_modules
+    command: sh -c "npm run migrate && npm run seed || true && npm run dev"
     depends_on:
-      - db
+      - postgres_db
       - redis
+    env_file:
+      - ./.env   
     environment:
       - DB_CONNECTION=${DOCKER_DB_CONNECTION}
       - JWT_SECRET=${JWT_SECRET}
@@ -35,12 +30,14 @@ services:
       - GOOGLE_CLIENT_ID=${GOOGLE_CLIENT_ID}
       - GOOGLE_CLIENT_SECRET=${GOOGLE_CLIENT_SECRET}
       - GOOGLE_CALLBACK_URL=${GOOGLE_CALLBACK_URL}
-      - REDIS_HOST=redis
-      - REDIS_PORT=6379
+      - FE_URL=${FE_URL}
+    networks:
+      - eagle-ec
 
-  db:
+  # PostgreSQL Database Service
+  postgres_db:
     image: postgres:latest
-    container_name: eagle-ec-db-container
+    container_name: postgres-db-container
     ports:
       - "5433:5432"
     environment:
@@ -49,11 +46,41 @@ services:
       - POSTGRES_DB=${POSTGRES_DB}
     volumes:
       - postgres_data:/var/lib/postgresql/data
+    networks:
+      - eagle-ec
 
+  # Redis Service
   redis:
     image: redis:latest
+    container_name: redis-container
     ports:
       - "6379:6379"
+    networks:
+      - eagle-ec
+
+  # Web Frontend Service
+  frontend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: eagle-ec-fe-container
+    image: mugemanebertin/eagle-ec-fe
+    ports:
+      - "5173:5173"
+    env_file:
+      - ./.env
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    networks:
+      - eagle-ec
+    command: npm run dev -- --host
+    depends_on:
+      - backend
 
 volumes:
-  postgres_data:
+  postgres_data:
+
+networks:
+  eagle-ec:
+    driver: bridge
diff --git a/src/__test__/LogoutContext.test.tsx b/src/__test__/LogoutContext.test.tsx
@@ -0,0 +1,62 @@
+import "@testing-library/jest-dom";
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+
+import {
+  LogoutProvider,
+  useLogout,
+} from "../components/dashboard/admin/LogoutContext";
+
+// Mock LogoutModal component
+jest.mock("../components/dashboard/admin/LogoutModal", () => ({
+  __esModule: true,
+  default: ({ isOpen, onClose, onConfirm }: any) =>
+    (isOpen ? (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+        <div className="p-6 bg-white rounded shadow-lg">
+          <h2 className="mb-4 text-xl">Confirm Logout</h2>
+          <p className="mb-4">Are you sure you want to logout?</p>
+          <div className="flex justify-end gap-4">
+            <button
+              className="px-4 py-2 text-white bg-gray-500 rounded"
+              onClick={onClose}
+            >
+              Cancel
+            </button>
+            <button
+              className="px-4 py-2 text-white bg-red-500 rounded"
+              onClick={onConfirm}
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+      </div>
+    ) : null),
+}));
+
+const TestComponent: React.FC = () => {
+  const { openLogoutModal } = useLogout();
+  return <button onClick={openLogoutModal}>Open Logout Modal</button>;
+};
+
+describe("LogoutProvider Component", () => {
+  it("should render LogoutProvider and trigger logout modal", () => {
+    render(
+      <LogoutProvider>
+        <TestComponent />
+      </LogoutProvider>,
+    );
+
+    const openModalButton = screen.getByText("Open Logout Modal");
+    fireEvent.click(openModalButton);
+
+    // Verify that the modal is rendered
+    expect(screen.getByText("Confirm Logout")).toBeInTheDocument();
+    expect(
+      screen.getByText("Are you sure you want to logout?"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Cancel")).toBeInTheDocument();
+    expect(screen.getByText("Logout")).toBeInTheDocument();
+  });
+});
diff --git a/src/__test__/addProducts.test.tsx b/src/__test__/addProducts.test.tsx
@@ -16,6 +16,7 @@ import TextInput from "../components/common/TextInput";
 import AddProduct from "../dashboard/sellers/AddProduct";
 import FileUpload from "../components/dashboard/FileUpload";
 import { fetchCategories } from "../redux/reducers/categoriesSlice";
+import { LogoutProvider } from "../components/dashboard/admin/LogoutContext";
 
 beforeAll(() => {
   const mockPayload = {
@@ -64,7 +65,13 @@ describe("FileUpload component", () => {
   });
 
   it("should render the component with no files", () => {
-    render(<FileUpload onDrop={onDropMock} remove={removeMock} files={[]} />);
+    render(
+      <LogoutProvider>
+        {" "}
+        {/* Wrap with LogoutProvider */}
+        <FileUpload onDrop={onDropMock} remove={removeMock} files={[]} />
+      </LogoutProvider>,
+    );
 
     expect(screen.getByText("Browse Images...")).toBeInTheDocument();
     expect(screen.getByText(/Browse Images.../i)).toBeInTheDocument();
@@ -73,14 +80,22 @@ describe("FileUpload component", () => {
 
   it("should render the component with files", () => {
     render(
-      <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />,
+      <LogoutProvider>
+        {" "}
+        {/* Wrap with LogoutProvider */}
+        <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />
+      </LogoutProvider>,
     );
     expect(screen.getByRole("button", { name: /remove/i })).toBeInTheDocument();
   });
 
   it("should call remove when the remove button is clicked", () => {
     render(
-      <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />,
+      <LogoutProvider>
+        {" "}
+        {/* Wrap with LogoutProvider */}
+        <FileUpload onDrop={onDropMock} remove={removeMock} files={filesMock} />
+      </LogoutProvider>,
     );
 
     const removeButton = screen.getByRole("button", { name: /remove/i });
@@ -95,9 +110,13 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <Layout>
-            <h1>Seller's dashboard</h1>
-          </Layout>
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <Layout>
+              <h1>Seller's dashboard</h1>
+            </Layout>
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -110,7 +129,11 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <AddCategory setCategoryModal={mockSetCategoryModal} />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <AddCategory setCategoryModal={mockSetCategoryModal} />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -142,11 +165,15 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <CustomSelect
-            options={options}
-            defaultValue="Select a category"
-            onSelect={mockOnSelect}
-          />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <CustomSelect
+              options={options}
+              defaultValue="Select a category"
+              onSelect={mockOnSelect}
+            />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -169,12 +196,16 @@ describe("test seller dashboard components", () => {
     const Component = () => {
       const { register } = useForm();
       return (
-        <TextInput
-          label={label}
-          placeholder={placeholder}
-          register={register}
-          name="productName"
-        />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <TextInput
+            label={label}
+            placeholder={placeholder}
+            register={register}
+            name="productName"
+          />
+        </LogoutProvider>
       );
     };
 
@@ -198,13 +229,17 @@ describe("test seller dashboard components", () => {
     const Component = () => {
       const { register } = useForm();
       return (
-        <TextInput
-          label={label}
-          placeholder={placeholder}
-          register={register}
-          name="productName"
-          error={errorMessage}
-        />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <TextInput
+            label={label}
+            placeholder={placeholder}
+            register={register}
+            name="productName"
+            error={errorMessage}
+          />
+        </LogoutProvider>
       );
     };
 
@@ -225,7 +260,11 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <AddProduct />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <AddProduct />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -261,7 +300,11 @@ describe("test seller dashboard components", () => {
     render(
       <Provider store={store}>
         <Router>
-          <AddProduct />
+          <LogoutProvider>
+            {" "}
+            {/* Wrap with LogoutProvider */}
+            <AddProduct />
+          </LogoutProvider>
         </Router>
       </Provider>,
     );
@@ -278,7 +321,11 @@ it("should display error messages for invalid inputs", async () => {
   render(
     <Provider store={store}>
       <Router>
-        <AddProduct />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <AddProduct />
+        </LogoutProvider>
       </Router>
     </Provider>,
   );
@@ -294,7 +341,11 @@ it("should open and close AddCategory modal", () => {
   render(
     <Provider store={store}>
       <Router>
-        <AddProduct />
+        <LogoutProvider>
+          {" "}
+          {/* Wrap with LogoutProvider */}
+          <AddProduct />
+        </LogoutProvider>
       </Router>
     </Provider>,
   );