fix(SILVA-581): Change the action columns from the home screen and op…

…ening search (#523)

frontend/package.json

@@ -5,10 +5,10 @@
   "type": "module",
   "dependencies": {
     "@bcgov-nr/nr-theme": "^1.7.0",
-    "@carbon/charts-react": "^1.13.32",
-    "@carbon/icons-react": "^11.50.1",
-    "@carbon/pictograms-react": "^11.49.0",
-    "@carbon/react": "^1.27.0",
+    "@carbon/charts-react": "^1.22.5",
+    "@carbon/icons-react": "^11.53.0",
+    "@carbon/pictograms-react": "^11.69.0",
+    "@carbon/react": "^1.71.1",
     "@tanstack/react-query": "^5.50.1",
     "@types/node": "^22.0.0",
     "@vitejs/plugin-react": "^4.0.4",

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

@@ -1,39 +1,41 @@
 // ActionButtons.test.tsx
 import React from "react";
-import { vi } from "vitest";
+import { MemoryRouter } from 'react-router-dom';
 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();
-});
+import { NotificationProvider } from "../../contexts/NotificationProvider"
 
 describe("ActionButtons", () => {
-  const rowId = "test-row-id";
-
-  it("renders the 'View' and 'Document Download' buttons", () => {
-    render(<ActionButtons rowId={rowId} />);
+  const rowId = "123456";
+  const favorited = false;
+
+  it("renders the 'Favorite Opening' and 'Document Download' buttons", () => {
+    render(
+      <MemoryRouter>
+        <NotificationProvider>
+          <ActionButtons favorited={favorited} rowId={rowId} />
+        </NotificationProvider>
+      </MemoryRouter>
+    );
 
     // Check that both buttons are in the document
-    expect(screen.getByRole("button", { name: /View/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /Favorite Opening/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} />);
+  it("set the 'Favorite Opening' as favorited when button is clicked", () => {
+    render(
+      <MemoryRouter>
+        <NotificationProvider>
+          <ActionButtons favorited={favorited} rowId={rowId} />
+        </NotificationProvider>
+      </MemoryRouter>
+    );
 
     // Find the "View" button and click it
-    const viewButton = screen.getByRole("button", { name: /View/i });
+    const viewButton = screen.getByRole("button", { name: /Favorite Opening/i });
+    expect(viewButton.classList).toContain('favorite-button');
     fireEvent.click(viewButton);
-
-    // Check if console.log was called with the correct rowId
-    expect(consoleLogMock).toHaveBeenCalledWith(rowId);
+    expect(screen.getByRole("button", { name: /Favorite Opening/i }).classList).toContain('favorite');
   });
 });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent, act } from '@testing-library/react';
+import { render, screen, fireEvent, act, waitFor } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import SearchScreenDataTable from '../../../../components/SilvicultureSearch/Openings/SearchScreenDataTable';
 import { searchScreenColumns as columns } from '../../../../constants/tableConstants';
@@ -358,7 +358,7 @@ describe('Search Screen Data table test', () => {
 
     expect(screen.getByTestId('toggle-spatial')).toContainHTML('Hide map');
 
-    const checkbox = document.querySelector('.cds--checkbox-group');
+    const checkbox = await screen.findByTestId('checkbox-114207');
     expect(checkbox).toBeInTheDocument();
 
   });
@@ -386,13 +386,13 @@ describe('Search Screen Data table test', () => {
         </QueryClientProvider>
       </BrowserRouter>
     );
-    const checkboxGroup = document.querySelector('.cds--checkbox-group');
-    expect(checkboxGroup).toBeInTheDocument();
+    const checkbox = screen.getByTestId(`checkbox-${rows[0].openingId}`);
+    expect(checkbox).toBeInTheDocument();
 
     expect(screen.getByTestId(`checkbox-${rows[0].openingId}`)).toBeInTheDocument();
-    const checkbox = screen.getByTestId(`checkbox-${rows[0].openingId}`);
-    fireEvent.click(checkbox);
-    expect(checkbox).toBeChecked();
+    const checkbox2 = screen.getByTestId(`checkbox-${rows[0].openingId}`);
+    fireEvent.click(checkbox2);
+    expect(checkbox2).toBeChecked();
     expect(setOpeningIds).toHaveBeenCalledWith([parseFloat(rows[0].openingId)]);
 
   });
@@ -435,21 +435,13 @@ describe('Search Screen Data table test', () => {
 
     await act(async () => expect(screen.getByTestId('row-114207')).toBeInTheDocument() );
     await act(async () => expect(screen.getByTestId('cell-actions-114206')).toBeInTheDocument() );
-
-    const overflowMenu = screen.getByTestId('action-ofl-114207');
-    await act(async () => expect(overflowMenu).toBeInTheDocument() );
-    await act(async () => fireEvent.click(overflowMenu));
 
     const actionOverflow = screen.getByTestId(`action-fav-114207`);
     await act(async () => expect(actionOverflow).toBeInTheDocument() );
-    expect(actionOverflow).toContainHTML('Favourite opening');
+    expect(actionOverflow).toHaveAttribute('aria-pressed', 'false');
     await act(async () => fireEvent.click(actionOverflow));
 
-    const overflowMenuAgain = screen.getByTestId('action-ofl-114207');
-    await act(async () => expect(overflowMenuAgain).toBeInTheDocument() );
-    await act(async () => fireEvent.click(overflowMenuAgain));
-
-    expect(screen.getByTestId(`action-fav-114207`)).toContainHTML('Unfavourite opening');
+    expect(screen.getByTestId(`action-fav-114207`)).toHaveAttribute('aria-pressed', 'true');
 
   });
 

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

@@ -1,9 +1,11 @@
 // TableCellContent.test.tsx
 import React from "react";
+import { MemoryRouter } from 'react-router-dom';
 import { vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import TableCellContent from "../../components/TableCellContent";
 import { OpeningsSearch } from "../../types/OpeningsSearch";
+import { NotificationProvider } from "../../contexts/NotificationProvider"
 
 // Mock components
 vi.mock("../StatusTag", () => ({
@@ -28,68 +30,86 @@ describe("TableCellContent", () => {
 
   it("renders StatusTag when headerKey is 'statusDescription'", () => {
     render(
+      <NotificationProvider>
       <TableCellContent
         headerKey="statusDescription"
         row={row}
         showSpatial={false}
         selectedRows={selectedRows}
         handleRowSelectionChanged={handleRowSelectionChanged}
       />
+      </NotificationProvider>
     );
 
     expect(screen.getByText(/Active/i)).toBeInTheDocument();
   });
 
   it("renders ActionButtons and optionally SpatialCheckbox when headerKey is 'actions'", () => {
     const { rerender } = render(
-      <TableCellContent
-        headerKey="actions"
-        row={row}
-        showSpatial={false}
-        selectedRows={selectedRows}
-        handleRowSelectionChanged={handleRowSelectionChanged}
-      />
+      <MemoryRouter>
+        <NotificationProvider>
+          <TableCellContent
+            headerKey="actions"
+            row={row}
+            showSpatial={false}
+            selectedRows={selectedRows}
+            handleRowSelectionChanged={handleRowSelectionChanged}
+          />
+        </NotificationProvider>
+      </MemoryRouter>
     );
     console.log(screen.debug());
-    expect(screen.queryByText(/View/i)).toBeInTheDocument();
+    expect(screen.queryByText(/Favorite Opening/i)).toBeInTheDocument();
   });
 
   it("renders category code and description when headerKey is 'Category'", () => {
     render(
-      <TableCellContent
-        headerKey="Category"
-        row={row}
-        showSpatial={false}
-        selectedRows={selectedRows}
-        handleRowSelectionChanged={handleRowSelectionChanged}
-      />
+      <MemoryRouter>
+        <NotificationProvider>
+          <TableCellContent
+            headerKey="Category"
+            row={row}
+            showSpatial={false}
+            selectedRows={selectedRows}
+            handleRowSelectionChanged={handleRowSelectionChanged}
+          />
+        </NotificationProvider>
+      </MemoryRouter>
     );
     expect(screen.getAllByText("A - Category A")[0]).toBeInTheDocument();
   });
 
   it("renders default content for other headerKey values", () => {
     render(
-      <TableCellContent
-        headerKey="unknownKey"
-        row={{ ...row, unknownKey: "Unknown Value" } as OpeningsSearch}
-        showSpatial={false}
-        selectedRows={selectedRows}
-        handleRowSelectionChanged={handleRowSelectionChanged}
-      />
+      <MemoryRouter>
+        <NotificationProvider>
+          <TableCellContent
+            headerKey="unknownKey"
+            row={{ ...row, unknownKey: "Unknown Value" } as OpeningsSearch}
+            showSpatial={false}
+            selectedRows={selectedRows}
+            handleRowSelectionChanged={handleRowSelectionChanged}
+          />
+        </NotificationProvider>
+      </MemoryRouter>
     );
 
     expect(screen.getByText(/Unknown Value/i)).toBeInTheDocument();
   });
 
   it("renders SpatialCheckbox when headerKey is 'actions' and showSpatial is true", () => {
     render(
-      <TableCellContent
-        headerKey="actions"
-        row={row}
-        showSpatial={true}  // Set showSpatial to true
-        selectedRows={selectedRows}
-        handleRowSelectionChanged={handleRowSelectionChanged}
-      />
+      <MemoryRouter>
+        <NotificationProvider>
+          <TableCellContent
+            headerKey="actions"
+            row={row}
+            showSpatial={true}  // Set showSpatial to true
+            selectedRows={selectedRows}
+            handleRowSelectionChanged={handleRowSelectionChanged}
+          />
+        </NotificationProvider>
+      </MemoryRouter>
     );
     //check if the Checkbox text is present
     expect(screen.getByText(/Click to view this opening's map activity./i)).toBeInTheDocument();

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

@@ -61,8 +61,8 @@ describe("TableRowComponent", () => {
     );
 
     // Simulate click on the row
-    const tableRow = screen.getByRole("row");
-    fireEvent.click(tableRow);
+    const tableRow = screen.getAllByRole("cell");
+    fireEvent.click(tableRow[1]);
 
     // Verify that setOpeningDetails was called with true
     expect(setOpeningDetails).toHaveBeenCalledWith("1");