diff --git a/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx b/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx index 24c99692..90b9981a 100644 --- a/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx +++ b/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx @@ -1,7 +1,7 @@ // src/__test__/components/SilvicultureSearch/Openings/OpeningsSearchBar.test.tsx import React from "react"; -import { render, screen } from "@testing-library/react"; +import { render, screen, act } from "@testing-library/react"; import "@testing-library/jest-dom"; import OpeningsSearchBar from "../../../../components/SilvicultureSearch/Openings/OpeningsSearchBar"; import { vi } from "vitest"; @@ -36,7 +36,7 @@ describe("OpeningsSearchBar", () => { expect(searchInput).toBeInTheDocument(); }); - it("should call the onSearchClick function when the search button is clicked", () => { + it("should call the onSearchClick function when the search button is clicked", async () => { // Create a mock function to pass as a prop const onSearchClick = vi.fn(); @@ -48,7 +48,7 @@ describe("OpeningsSearchBar", () => { // Click the search button const searchButton = screen.getAllByRole("button", { name: "Search" })[1]; - searchButton.click(); + await act(async () => searchButton.click()); // Check if the onSearchClick function was called expect(onSearchClick).toHaveBeenCalled(); @@ -119,4 +119,25 @@ describe("OpeningsSearchBar", () => { const dNoneElement = screen.getByText('+2'); expect(dNoneElement).toBeInTheDocument(); }); + + it("should show inline notification when no filter provided", async () => { + // Create a mock function to pass as a prop + const onSearchClick = vi.fn(); + + const {container, getByText} = render( + + + + ); + + // Click the search button + const searchButton = screen.getAllByRole("button", { name: "Search" })[1]; + await act(async () => searchButton.click()); + + // Check if the onSearchClick function was called + expect(onSearchClick).toHaveBeenCalled(); + + expect(getByText("Missing at least one criteria to search")).toBeInTheDocument(); + + }); }); \ No newline at end of file diff --git a/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchTab.test.tsx b/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchTab.test.tsx new file mode 100644 index 00000000..80866593 --- /dev/null +++ b/frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchTab.test.tsx @@ -0,0 +1,141 @@ +import React from 'react'; +import { render, screen, act, fireEvent } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; +import { describe, it, expect, vi } from 'vitest'; +import OpeningSearchTab from '../../../../components/SilvicultureSearch/Openings/OpeningsSearchTab'; +import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query'; +import { OpeningsSearchProvider, useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; +import { useOpeningsQuery } from "../../../../services/queries/search/openingQueries"; +import { BrowserRouter } from 'react-router-dom'; +import { NotificationProvider } from '../../../../contexts/NotificationProvider'; +import PaginationProvider from '../../../../contexts/PaginationProvider'; + +const data = [{ + id: '114207', + openingId: '114207', + fileId: 'TFL47', + cuttingPermit: '12S', + timberMark: '47/12S', + cutBlock: '12-69', + grossAreaHa: '12.9', + status: 'Free growing', + category: 'FTML', + disturbanceStart: '-', + createdAt: '2022-10-27', + orgUnit: 'DCC - Cariboo chilcotin natural resources', + lastViewed: '2022-10-27' +}]; + +vi.mock("../../../../services/queries/search/openingQueries", async () => { + const actual = await vi.importActual("../../../../services/queries/search/openingQueries"); + return { + ...actual, + useOpeningsQuery: vi.fn(), + }; +}); + +describe('OpeningSearchTab', () => { + const queryClient = new QueryClient(); // here's the problem + + beforeEach(() => { + vi.clearAllMocks(); + }); + + it('should render without crashing', () => { + (useOpeningsQuery as vi.Mock).mockReturnValue({ data: [], isLoading: false }); + const { getByText} = render( + + + + + + + + + + + + ); + expect(getByText('Advanced Search')).toBeInTheDocument(); + }); + + it('should display the empty state', () => { + (useOpeningsQuery as vi.Mock).mockReturnValue({ data: [], isLoading: false }); + const { getByText} = render( + + + + + + + + + + + + ); + expect(screen.getByText('Nothing to show yet')).toBeInTheDocument(); + }); + + it('should have a search input field', () => { + (useOpeningsQuery as vi.Mock).mockReturnValue({ data: [], isLoading: false }); + render( + + + + + + + + + + + + ); + expect(screen.getByPlaceholderText('Search by opening ID, opening number, timber mark or file ID')).toBeInTheDocument(); + }); + + it('should display search results when search is performed', async () => { + (useOpeningsQuery as vi.Mock).mockReturnValue({ data, isFetching: false }); + + const { container } = render( + + + + + + + + + + + + ); + const searchInput = screen.getByPlaceholderText('Search by opening ID, opening number, timber mark or file ID') as HTMLInputElement; + await act(async () => userEvent.type(searchInput, 'test')); + await act(async () => (await screen.findByTestId('search-button')).click()); + await act(async () => await screen.findByText('Actions')); + }); + + it('should display a message when no results are found', async () => { + (useOpeningsQuery as vi.Mock).mockReturnValue({ data: [], isLoading: false }); + + render( + + + + + + + + + + + + ); + 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(); + }); +}); \ No newline at end of file diff --git a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/OpeningsSearchBar.scss b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/OpeningsSearchBar.scss index 024bf0d4..7f3ec668 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/OpeningsSearchBar.scss +++ b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/OpeningsSearchBar.scss @@ -1,7 +1,9 @@ @use '@bcgov-nr/nr-theme/design-tokens/variables.scss' as vars; @use '@bcgov-nr/nr-theme/design-tokens/colors.scss' as colors; @use '@carbon/type'; - +.ddbbgg{ + border: solid 1px pink !important; +} .openings-searchbar-container{ padding: 32px 32px; diff --git a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx index ad4fb002..4a20e36d 100644 --- a/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx +++ b/frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import "./OpeningsSearchBar.scss"; -import { Search, Button, FlexGrid, Row, Column, DismissibleTag } from "@carbon/react"; +import { Search, Button, FlexGrid, Row, Column, DismissibleTag, InlineNotification } from "@carbon/react"; import * as Icons from "@carbon/icons-react"; import AdvancedSearchDropdown from "../AdvancedSearchDropdown"; import SearchFilterBar from "../SearchFilterBar"; @@ -8,11 +8,13 @@ import { useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch"; import { countActiveFilters } from "../../../../utils/searchUtils"; interface IOpeningsSearchBar { - onSearchClick: Function; + onSearchClick: () => void; + showNoFilterNotification?: boolean; } const OpeningsSearchBar: React.FC = ({ - onSearchClick + onSearchClick, + showNoFilterNotification = false }) => { const [isOpen, setIsOpen] = useState(false); const [showFilters, setShowFilters] = useState(false); @@ -52,8 +54,19 @@ const OpeningsSearchBar: React.FC = ({
+ {showNoFilterNotification && ( - + + + + + )} + + = ({