Testing Lab - Added test for Spinner Component.

Author: jsanzdev

5 - Testing/Ejercicios/Testing-Lab/src/common/components/spinner/spinner.component.spec.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { usePromiseTracker } from "react-promise-tracker";
+import { SpinnerComponent } from "./spinner.component";
+import { vi } from "vitest";
+
+// Mock react-promise-tracker
+vi.mock("react-promise-tracker", () => ({
+  usePromiseTracker: vi.fn(),
+}));
+
+describe("SpinnerComponent", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should show Modal when promise is in progress", () => {
+    // Arrange
+    const mockUsePromiseTracker = usePromiseTracker as jest.Mock;
+    mockUsePromiseTracker.mockReturnValue({ promiseInProgress: true });
+
+    // Act
+    render(<SpinnerComponent />);
+
+    // Assert
+    const modal = screen.getByRole("presentation");
+    expect(modal).toBeInTheDocument();
+  });
+
+  it("should not show Modal when promise is not in progress", () => {
+    // Arrange
+    const mockUsePromiseTracker = usePromiseTracker as jest.Mock;
+    mockUsePromiseTracker.mockReturnValue({ promiseInProgress: false });
+
+    // Act
+    render(<SpinnerComponent />);
+
+    // Assert
+    const modal = screen.queryByRole("presentation");
+    expect(modal).not.toBeInTheDocument();
+  });
+
+  it("should render Loader component inside Modal when promise is in progress", () => {
+    // Arrange
+    const mockUsePromiseTracker = usePromiseTracker as jest.Mock;
+    mockUsePromiseTracker.mockReturnValue({ promiseInProgress: true });
+
+    // Act
+    render(<SpinnerComponent />);
+
+    // Assert
+    const loaderContainer = screen.getByTestId("loader-container");
+    expect(loaderContainer).toBeInTheDocument();
+  });
+});

5 - Testing/Ejercicios/Testing-Lab/src/common/components/spinner/spinner.component.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { usePromiseTracker } from 'react-promise-tracker';
-import { Modal } from '@mui/material';
-import Loader from 'react-spinners/ScaleLoader';
-import * as classes from './spinner.styles';
+import React from "react";
+import { usePromiseTracker } from "react-promise-tracker";
+import { Modal } from "@mui/material";
+import Loader from "react-spinners/ScaleLoader";
+import * as classes from "./spinner.styles";
 
 export const SpinnerComponent: React.FunctionComponent = () => {
   const { promiseInProgress } = usePromiseTracker();
   return (
     <Modal open={promiseInProgress} className={classes.modal}>
-      <div className={classes.loaderContainer}>
+      <div className={classes.loaderContainer} data-testid="loader-container">
         <Loader />
       </div>
     </Modal>

5 - Testing/Ejercicios/Testing-Lab/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],