Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(SILVA-577): perform search on hitting enter key #504

Merged
merged 2 commits into from
Nov 25, 2024
Merged

fix(SILVA-577): perform search on hitting enter key #504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d81d180
addedthe search on enter key functionality and test
jazzgrewal Nov 25, 2024
4ddda81
Merge branch 'main' into fix/searchOnEnter
paulushcgcj Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions frontend/src/__test__/components/SilvicultureSearch/Openings/OpeningSearchBar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import OpeningsSearchBar from "../../../../components/SilvicultureSearch/Opening
import { vi } from "vitest";
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { OpeningsSearchProvider, useOpeningsSearch } from "../../../../contexts/search/OpeningsSearch";
import userEvent from "@testing-library/user-event";

// Mock the useOpeningsSearch context to avoid rendering errors
vi.mock("../../../../contexts/search/OpeningsSearch", () => ({
Expand Down Expand Up @@ -140,4 +141,26 @@ describe("OpeningsSearchBar", () => {
expect(getByText("Missing at least one criteria to search")).toBeInTheDocument();

});

//test if the handleSearch is called when the user hits enter on the serchInput
it("should call the onSearchClick function when the user hits enter on the search input", async () => {
// Create a mock function to pass as a prop
const onSearchClick = vi.fn();

render(
<QueryClientProvider client={queryClient}>
<OpeningsSearchBar onSearchClick={onSearchClick} />
</QueryClientProvider>
);

// Check if the search input field is present with the correct placeholder text
const searchInput = screen.getByPlaceholderText(
"Search by opening ID, opening number, timber mark or file ID"
);
await act(async () => await userEvent.type(searchInput, 'tfl47'));
await act(async () => await userEvent.keyboard('{enter}'));

// Check if the onSearchClick function was called
expect(onSearchClick).toHaveBeenCalled();
});
});
10 changes: 8 additions & 2 deletions frontend/src/components/SilvicultureSearch/Openings/OpeningsSearchBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ const OpeningsSearchBar: React.FC<IOpeningsSearchBar> = ({
setIsOpen(false);
};

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") {
handleSearchClick();
}
};

const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value;
setSearchTerm(value);
Expand Down Expand Up @@ -74,8 +80,8 @@ const OpeningsSearchBar: React.FC<IOpeningsSearchBar> = ({
labelText="Search"
closeButtonLabelText="Clear search input"
id={`search-1`}
onChange={handleInputChange} // Handle input change
onKeyDown={() => {}}
onChange={handleInputChange}
onKeyDown={handleKeyDown}
value={searchTerm}
/>
</Column>
Expand Down
Loading