feat(SILVA-570): recent openings history for the nr-silva application front-end Only

frontend/src/__test__/components/ActionButtons.test.tsx

@@ -0,0 +1,39 @@
+// ActionButtons.test.tsx
+import React from "react";
+import { vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import ActionButtons from "../../components/ActionButtons";
+
+// Mock console.log
+const consoleLogMock = vi.spyOn(console, "log").mockImplementationOnce(() =>vi.fn()) ;
+
+afterEach(() => {
+  consoleLogMock.mockClear();
+});
+
+afterAll(() => {
+  consoleLogMock.mockRestore();
+});
+
+describe("ActionButtons", () => {
+  const rowId = "test-row-id";
+
+  it("renders the 'View' and 'Document Download' buttons", () => {
+    render(<ActionButtons rowId={rowId} />);
+
+    // Check that both buttons are in the document
+    expect(screen.getByRole("button", { name: /View/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Document Download/i })).toBeInTheDocument();
+  });
+
+  it("calls console.log with rowId when the 'View' button is clicked", () => {
+    render(<ActionButtons rowId={rowId} />);
+
+    // Find the "View" button and click it
+    const viewButton = screen.getByRole("button", { name: /View/i });
+    fireEvent.click(viewButton);
+
+    // Check if console.log was called with the correct rowId
+    expect(consoleLogMock).toHaveBeenCalledWith(rowId);
+  });
+});

frontend/src/__test__/components/BarChartGrouped.test.tsx

@@ -1,26 +1,40 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import BarChartGrouped from '../../components/BarChartGrouped';
-import { fetchOpeningsPerYear } from '../../services/OpeningService';
-
-vi.mock('../../services/OpeningService', () => ({
-  fetchOpeningsPerYear: vi.fn(() => Promise.resolve([
-    { group: '2022', key: 'Openings', value: 10 },
-    { group: '2023', key: 'Openings', value: 15 },
-  ])),
+import { useDistrictListQuery, useFetchOpeningsPerYear } from '../../services/queries/dashboard/dashboardQueries';
+import { describe, expect, it } from 'vitest';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+// Mock the hook
+vi.mock('../../services/queries/dashboard/dashboardQueries', () => ({
+  useFetchOpeningsPerYear: vi.fn(),
+  useDistrictListQuery: vi.fn(),
 }));
 
-describe('BarChartGrouped component tests', () => {
-  it('should render loading state while fetching data and clean it after', async () => {
-    render(<BarChartGrouped />);
+const queryClient = new QueryClient();
 
-    const element = await waitFor(() => screen.getByText('Loading...'));
+describe('BarChartGrouped component', () => {
+  it('should display loading state when data is fetching', () => {
+    // Mock loading state for openings data
+    (useFetchOpeningsPerYear as any).mockReturnValue({
+      data: [],
+      isLoading: true,
+    });
 
-    expect(element).toBeDefined();
-
-    expect(fetchOpeningsPerYear).toHaveBeenCalled();
-    expect(screen.queryByTestId('bar-chart')).toBeDefined();
-  });
+    // If you're using useDistrictListQuery, mock it too
+    (useDistrictListQuery as any).mockReturnValue({
+      data: [],
+      isLoading: false,
+    });
 
-});
+    render(
+      <QueryClientProvider client={queryClient}>
+        <BarChartGrouped />
+      </QueryClientProvider>
+    );
+
+    // Check if loading text is displayed
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+});

frontend/src/__test__/components/Dashboard/Opening/RecentOpeningsDataTable.test.tsx

@@ -0,0 +1,69 @@
+// src/__test__/components/SilvicultureSearch/Openings/OpeningsSearchBar.test.tsx
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import PaginationProvider from "../../../../contexts/PaginationProvider";
+import RecentOpeningsDataTable from "../../../../components/Dashboard/Opening/RecentOpeningsDataTable";
+import { MemoryRouter } from "react-router-dom";
+import exp from "constants";
+
+describe("OpeningsSearchBar", () => {
+  // Create a new QueryClient instance for each test
+  const queryClient = new QueryClient();
+  const handleCheckboxChange = vi.fn()
+  const setLoadId = vi.fn()
+    const toggleSpatial = vi.fn()
+    const showSpatial = false
+    const data = { data: [], perPage: 0, totalPages: 0 }
+    const headers = []
+
+  it("shows appropriate message when no data is in the table", () => {
+    render(
+      <MemoryRouter>
+        <QueryClientProvider client={queryClient}>
+            <PaginationProvider>
+             <RecentOpeningsDataTable
+                rows={data?.data || []}
+                headers={headers}
+                defaultColumns={headers}
+                handleCheckboxChange={handleCheckboxChange}
+                setOpeningId={setLoadId}
+                toggleSpatial={toggleSpatial}
+                showSpatial={showSpatial}
+                totalItems={(data?.perPage ?? 0) * (data?.totalPages ?? 0)}
+                />
+            </PaginationProvider>
+      </QueryClientProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText(/There are no openings to show yet/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Your recent openings will appear here once you generate one/i)).toBeInTheDocument();
+  });
+
+  it("renders a blank table when rows is empty array", () => {
+    render(
+      <MemoryRouter>
+        <QueryClientProvider client={queryClient}>
+            <PaginationProvider>
+             <RecentOpeningsDataTable
+                rows={[]}
+                headers={headers}
+                defaultColumns={headers}
+                handleCheckboxChange={handleCheckboxChange}
+                setOpeningId={setLoadId}
+                toggleSpatial={toggleSpatial}
+                showSpatial={showSpatial}
+                totalItems={(data?.perPage ?? 0) * (data?.totalPages ?? 0)}
+                />
+            </PaginationProvider>
+      </QueryClientProvider>
+      </MemoryRouter>
+    );
+    // Check if the table is present
+    const table = screen.getByRole('table');
+    expect(table).toBeInTheDocument();
+  });
+});

frontend/src/__test__/components/OpeningsTab.test.tsx

@@ -4,8 +4,7 @@ import { render, act, waitFor, screen } from '@testing-library/react';
 import OpeningsTab from '../../components/OpeningsTab';
 import { AuthProvider } from '../../contexts/AuthProvider';
 import { getWmsLayersWhitelistUsers } from '../../services/SecretsService';
-import { fetchRecentOpenings } from '../../services/OpeningService';
-import { RecentOpening } from '../../types/RecentOpening';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import PaginationProvider from '../../contexts/PaginationProvider';
 
 
@@ -20,32 +19,66 @@ vi.mock('../../services/OpeningService', async () => {
     fetchRecentOpenings: vi.fn(),
   };
 });
-
-
-const rows: RecentOpening[] = [{
-  id: '123',
-  openingId: '123',
-  fileId: '1',
-  cuttingPermit: '1',
-  timberMark: '1',
-  cutBlock: '1',
-  grossAreaHa: 1,
-  statusDesc: 'Approved',
-  categoryDesc: 'Another:Another',
-  disturbanceStart: '1',
-  entryTimestamp: '1',
-  updateTimestamp: '1',
-}];
+const queryClient = new QueryClient();
 
 describe('Openings Tab test',() => {
 
   it('should render properly',async () =>{
     (getWmsLayersWhitelistUsers as vi.Mock).mockResolvedValue([{userName: 'TEST'}]);
-    (fetchRecentOpenings as vi.Mock).mockResolvedValue(rows);
+
     await act(async () => {
-    render(<AuthProvider><PaginationProvider><OpeningsTab showSpatial={false} setShowSpatial={vi.fn()}/></PaginationProvider></AuthProvider>);
+    render(
+      <AuthProvider>
+        <QueryClientProvider client={queryClient}>
+          <PaginationProvider>
+            <OpeningsTab showSpatial={false} setShowSpatial={vi.fn()} />
+          </PaginationProvider>
+        </QueryClientProvider>
+      </AuthProvider>
+    );
     });
     expect(screen.getByText('Recent openings')).toBeInTheDocument();
   });
 
+  it('should have Hide map when the showSpatial is true',async () =>{
+    (getWmsLayersWhitelistUsers as vi.Mock).mockResolvedValue([{userName: 'TEST'}]);
+
+    await act(async () => {
+    render(
+      <AuthProvider>
+        <QueryClientProvider client={queryClient}>
+          <PaginationProvider>
+            <OpeningsTab showSpatial={true} setShowSpatial={vi.fn()} />
+          </PaginationProvider>
+        </QueryClientProvider>
+      </AuthProvider>
+    );
+    });
+    expect(screen.getByText('Hide map')).toBeInTheDocument();
+  });
+
+  it('should render the table', async () => {
+    // Mocking state values
+    vi.spyOn(React, 'useState')
+      .mockImplementationOnce(() => [null, vi.fn()])  // for loadId
+      .mockImplementationOnce(() => [true, vi.fn()])  // for openingPolygonNotFound
+      .mockImplementationOnce(() => [{ userName: 'TEST' }, vi.fn()])  // for wmsUsersWhitelist
+      .mockImplementationOnce(() => [[], vi.fn()]);  // for headers
+
+    (getWmsLayersWhitelistUsers as vi.Mock).mockResolvedValue([{ userName: 'TEST' }]);
+
+    await act(async () => {
+      render(
+        <AuthProvider>
+          <QueryClientProvider client={queryClient}>
+            <PaginationProvider>
+              <OpeningsTab showSpatial={true} setShowSpatial={vi.fn()} />
+            </PaginationProvider>
+          </QueryClientProvider>
+        </AuthProvider>
+      );
+    });
+    expect(screen.getByRole('table')).toBeInTheDocument();
+  });
+
 });

frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchTab.test.tsx

@@ -136,6 +136,6 @@ describe('OpeningSearchTab', () => {
     const searchInput = screen.getByPlaceholderText('Search by opening ID, opening number, timber mark or file ID');
     await act(async () => await userEvent.type(searchInput, 'potato'));
     await act(async () => (await screen.findByTestId('search-button')).click());
-    expect(screen.getByText('Results not found')).toBeInTheDocument();
+    expect(screen.getByText('There are no openings to show yet')).toBeInTheDocument();
   });
 });