From 256ea2c5a2bc5c83f731967c05385cd5ae5e7f5c Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Fri, 16 Jan 2026 08:16:05 +0530 Subject: [PATCH 1/8] OnKeyDown Signed-off-by: AasthathecoderX --- src/custom/SearchBar.tsx | 7 ++-- .../StyledSearchBar/StyledSearchBar.tsx | 35 +++++++++++-------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 909b64ee3..d7fe5ea41 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -76,6 +76,7 @@ export interface SearchBarProps { expanded: boolean; setExpanded: (expanded: boolean) => void; 'data-testid'?: string; + onKeyDown?: (event: React.KeyboardEvent) => void; } function SearchBar({ @@ -84,7 +85,8 @@ function SearchBar({ onClear, expanded, setExpanded, - 'data-testid': testId = 'search-bar-wrapper' + 'data-testid': testId = 'search-bar-wrapper', + onKeyDown }: SearchBarProps): JSX.Element { const [searchText, setSearchText] = React.useState(''); const searchRef = React.useRef(null); @@ -149,10 +151,11 @@ function SearchBar({ ; endAdornment?: React.ReactNode; debounceTime?: number; + onKeyDown?: (event: React.KeyboardEvent) => void; } /** @@ -38,8 +39,10 @@ function StyledSearchBar({ sx, placeholder, endAdornment, - debounceTime = 300 + debounceTime = 300, + onKeyDown }: SearchBarProps): JSX.Element { + const theme = useTheme(); const [inputValue, setInputValue] = useState(value); @@ -87,20 +90,22 @@ function StyledSearchBar({ return ( - - - } - endAdornment={{endAdornment}} - /> + type="search" + label={label} + fullWidth + value={inputValue} + onChange={handleChange} + sx={sx} + placeholder={placeholder ?? 'Search'} + onKeyDown={onKeyDown} + startAdornment={ + + + + } + endAdornment={{endAdornment}} + /> + ); } From e6bf6d4ccb91b72fa3efb54450a72d109bdc16fa Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Tue, 20 Jan 2026 19:58:44 +0530 Subject: [PATCH 2/8] Added test cases Signed-off-by: AasthathecoderX --- jest.config.js | 21 +++++++++ src/__testing__/SearchBar.test.tsx | 41 +++++++++++++++++ src/__testing__/StyledSearchBar.test.tsx | 57 ++++++++++++++++++++++++ src/custom/SearchBar.tsx | 22 ++++++--- src/setupTests.ts | 1 + 5 files changed, 137 insertions(+), 5 deletions(-) create mode 100644 src/__testing__/SearchBar.test.tsx create mode 100644 src/__testing__/StyledSearchBar.test.tsx create mode 100644 src/setupTests.ts diff --git a/jest.config.js b/jest.config.js index e648e6f24..036e5a8e7 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,6 +1,27 @@ +/** @type {import('jest').Config} */ module.exports = { preset: 'ts-jest', testEnvironment: 'jsdom', + + // Transform ESM modules like react-markdown + transform: { + '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest', + }, + + transformIgnorePatterns: [ + '/node_modules/(?!(react-markdown|remark-gfm|rehype-raw)/)', // allow ESM modules + ], + + testMatch: [ + '**/__testing__/**/*.test.(ts|tsx|js|jsx)', + '**/?(*.)+(spec|test).(ts|tsx|js|jsx)' + ], + + setupFilesAfterEnv: ['/src/setupTests.ts'], + + // Remove deprecated globals config + globals: {}, + coverageThreshold: { global: { branches: 80, diff --git a/src/__testing__/SearchBar.test.tsx b/src/__testing__/SearchBar.test.tsx new file mode 100644 index 000000000..7d798d665 --- /dev/null +++ b/src/__testing__/SearchBar.test.tsx @@ -0,0 +1,41 @@ +import { fireEvent, render, screen } from '@testing-library/react'; +import React from 'react'; +import SearchBar, { SearchBarProps } from '../custom/SearchBar'; +import { SistentThemeProvider } from '../theme'; + +const renderWithTheme = (component: React.ReactElement) => { + return render({component}); +}; + +describe('SearchBar Component', () => { + const defaultProps: SearchBarProps = { + onSearch: jest.fn(), + expanded: true, + setExpanded: jest.fn(), + }; + + describe('Integration (onSearch + onKeyDown)', () => { + it('should call onKeyDown when pressing Enter (onSearch not triggered yet)', () => { + const onKeyDownMock = jest.fn(); + const onSearchMock = jest.fn(); + + renderWithTheme( + + ); + + const input = screen.getByTestId('searchbar-input'); + + fireEvent.change(input, { target: { value: 'test query' } }); + fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', keyCode: 13 }); + + // Assertions + expect(onKeyDownMock).toHaveBeenCalled(); // this is fine + expect(onSearchMock).not.toHaveBeenCalled(); // Enter does not trigger onSearch yet + }); + }); +}); diff --git a/src/__testing__/StyledSearchBar.test.tsx b/src/__testing__/StyledSearchBar.test.tsx new file mode 100644 index 000000000..3f3cd6645 --- /dev/null +++ b/src/__testing__/StyledSearchBar.test.tsx @@ -0,0 +1,57 @@ +import { fireEvent, render, screen } from '@testing-library/react'; +import React from 'react'; +import { StyledSearchBar } from '../custom/StyledSearchBar'; +import { SistentThemeProvider } from '../theme'; + +const renderWithTheme = (component: React.ReactElement) => { + return render({component}); +}; + +describe('StyledSearchBar', () => { + describe('onKeyDown functionality', () => { + it('should call onKeyDown handler when key is pressed', () => { + const onKeyDownMock = jest.fn(); + const onChangeMock = jest.fn(); + + renderWithTheme( + + ); + + const input = screen.getByRole('searchbox'); + fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', keyCode: 13 }); + + expect(onKeyDownMock).toHaveBeenCalledTimes(1); + }); + + it('should handle Escape key to clear search', () => { + const onKeyDownMock = jest.fn((event) => { + if (event.key === 'Escape') { + // Simulate clearing logic + event.preventDefault(); + } + }); + const onChangeMock = jest.fn(); + + renderWithTheme( + + ); + + const input = screen.getByRole('searchbox'); + fireEvent.keyDown(input, { key: 'Escape', code: 'Escape', keyCode: 27 }); + + expect(onKeyDownMock).toHaveBeenCalled(); + const event = onKeyDownMock.mock.calls[0][0]; + expect(event.key).toBe('Escape'); + }); + }); +}); diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index d7fe5ea41..2643f1e81 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -92,7 +92,7 @@ function SearchBar({ const searchRef = React.useRef(null); const theme = useTheme(); - // Debounce the onSearch function + // Debounce the onSearch function for normal typing const debouncedOnSearch = useCallback( debounce((value) => { onSearch(value); @@ -132,15 +132,27 @@ function SearchBar({ } }; + // ✅ New unified keyDown handler + const handleKeyDown = (event: React.KeyboardEvent) => { + // Call external onKeyDown if provided + if (onKeyDown) { + onKeyDown(event); + } + + // Trigger onSearch immediately when Enter is pressed + if (event.key === 'Enter') { + onSearch(searchText); + } + }; + return ( { event.stopPropagation(); const isTable = (event.target as HTMLElement)?.closest('#ref'); - if (searchText !== '') { - return; - } + if (searchText !== '') return; + if (isTable) { handleClearIconClick(event as unknown as React.MouseEvent); } @@ -155,7 +167,7 @@ function SearchBar({ inputRef={searchRef} placeholder={placeholder} data-testid="searchbar-input" - onKeyDown={onKeyDown} + onKeyDown={handleKeyDown} // <-- updated handler style={{ width: expanded ? '150px' : '0', opacity: expanded ? 1 : 0, diff --git a/src/setupTests.ts b/src/setupTests.ts new file mode 100644 index 000000000..7b0828bfa --- /dev/null +++ b/src/setupTests.ts @@ -0,0 +1 @@ +import '@testing-library/jest-dom'; From 63f95ca96da82efb456e169d5bbfd7edcd5a980f Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Thu, 5 Feb 2026 20:39:57 +0530 Subject: [PATCH 3/8] Remove test files Signed-off-by: AasthathecoderX --- src/__testing__/SearchBar.test.tsx | 41 ----------------- src/__testing__/StyledSearchBar.test.tsx | 57 ------------------------ 2 files changed, 98 deletions(-) delete mode 100644 src/__testing__/SearchBar.test.tsx delete mode 100644 src/__testing__/StyledSearchBar.test.tsx diff --git a/src/__testing__/SearchBar.test.tsx b/src/__testing__/SearchBar.test.tsx deleted file mode 100644 index 7d798d665..000000000 --- a/src/__testing__/SearchBar.test.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; -import SearchBar, { SearchBarProps } from '../custom/SearchBar'; -import { SistentThemeProvider } from '../theme'; - -const renderWithTheme = (component: React.ReactElement) => { - return render({component}); -}; - -describe('SearchBar Component', () => { - const defaultProps: SearchBarProps = { - onSearch: jest.fn(), - expanded: true, - setExpanded: jest.fn(), - }; - - describe('Integration (onSearch + onKeyDown)', () => { - it('should call onKeyDown when pressing Enter (onSearch not triggered yet)', () => { - const onKeyDownMock = jest.fn(); - const onSearchMock = jest.fn(); - - renderWithTheme( - - ); - - const input = screen.getByTestId('searchbar-input'); - - fireEvent.change(input, { target: { value: 'test query' } }); - fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', keyCode: 13 }); - - // Assertions - expect(onKeyDownMock).toHaveBeenCalled(); // this is fine - expect(onSearchMock).not.toHaveBeenCalled(); // Enter does not trigger onSearch yet - }); - }); -}); diff --git a/src/__testing__/StyledSearchBar.test.tsx b/src/__testing__/StyledSearchBar.test.tsx deleted file mode 100644 index 3f3cd6645..000000000 --- a/src/__testing__/StyledSearchBar.test.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import { fireEvent, render, screen } from '@testing-library/react'; -import React from 'react'; -import { StyledSearchBar } from '../custom/StyledSearchBar'; -import { SistentThemeProvider } from '../theme'; - -const renderWithTheme = (component: React.ReactElement) => { - return render({component}); -}; - -describe('StyledSearchBar', () => { - describe('onKeyDown functionality', () => { - it('should call onKeyDown handler when key is pressed', () => { - const onKeyDownMock = jest.fn(); - const onChangeMock = jest.fn(); - - renderWithTheme( - - ); - - const input = screen.getByRole('searchbox'); - fireEvent.keyDown(input, { key: 'Enter', code: 'Enter', keyCode: 13 }); - - expect(onKeyDownMock).toHaveBeenCalledTimes(1); - }); - - it('should handle Escape key to clear search', () => { - const onKeyDownMock = jest.fn((event) => { - if (event.key === 'Escape') { - // Simulate clearing logic - event.preventDefault(); - } - }); - const onChangeMock = jest.fn(); - - renderWithTheme( - - ); - - const input = screen.getByRole('searchbox'); - fireEvent.keyDown(input, { key: 'Escape', code: 'Escape', keyCode: 27 }); - - expect(onKeyDownMock).toHaveBeenCalled(); - const event = onKeyDownMock.mock.calls[0][0]; - expect(event.key).toBe('Escape'); - }); - }); -}); From 77d5f43a68da1f4f6d9cd7b0e6da3e7c9fd74309 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Mon, 9 Feb 2026 18:57:44 +0530 Subject: [PATCH 4/8] Removed unwanted file Signed-off-by: AasthathecoderX --- jest.config.js | 23 +---------------------- src/setupTests.ts | 1 - 2 files changed, 1 insertion(+), 23 deletions(-) delete mode 100644 src/setupTests.ts diff --git a/jest.config.js b/jest.config.js index 036e5a8e7..85b47ce7b 100644 --- a/jest.config.js +++ b/jest.config.js @@ -1,27 +1,6 @@ -/** @type {import('jest').Config} */ module.exports = { preset: 'ts-jest', testEnvironment: 'jsdom', - - // Transform ESM modules like react-markdown - transform: { - '^.+\\.(ts|tsx|js|jsx)$': 'ts-jest', - }, - - transformIgnorePatterns: [ - '/node_modules/(?!(react-markdown|remark-gfm|rehype-raw)/)', // allow ESM modules - ], - - testMatch: [ - '**/__testing__/**/*.test.(ts|tsx|js|jsx)', - '**/?(*.)+(spec|test).(ts|tsx|js|jsx)' - ], - - setupFilesAfterEnv: ['/src/setupTests.ts'], - - // Remove deprecated globals config - globals: {}, - coverageThreshold: { global: { branches: 80, @@ -30,4 +9,4 @@ module.exports = { statements: 80 } } -}; +}; \ No newline at end of file diff --git a/src/setupTests.ts b/src/setupTests.ts deleted file mode 100644 index 7b0828bfa..000000000 --- a/src/setupTests.ts +++ /dev/null @@ -1 +0,0 @@ -import '@testing-library/jest-dom'; From 9d892541a479cc4ed192ac6c4c97c1d87deea1b3 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Mon, 9 Feb 2026 19:09:59 +0530 Subject: [PATCH 5/8] Update jest.config.js Signed-off-by: AasthathecoderX --- jest.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/jest.config.js b/jest.config.js index 85b47ce7b..e648e6f24 100644 --- a/jest.config.js +++ b/jest.config.js @@ -9,4 +9,4 @@ module.exports = { statements: 80 } } -}; \ No newline at end of file +}; From 83d66a5fd8f6904c9018b251825bccab6b0a5d33 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Tue, 17 Feb 2026 07:53:06 +0530 Subject: [PATCH 6/8] Removed comments Refactor SearchBar component to unify keyDown handling and improve debounce functionality. Signed-off-by: AasthathecoderX --- src/custom/SearchBar.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index 2643f1e81..b5c38b435 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -92,7 +92,7 @@ function SearchBar({ const searchRef = React.useRef(null); const theme = useTheme(); - // Debounce the onSearch function for normal typing + const debouncedOnSearch = useCallback( debounce((value) => { onSearch(value); @@ -132,14 +132,14 @@ function SearchBar({ } }; - // ✅ New unified keyDown handler + const handleKeyDown = (event: React.KeyboardEvent) => { - // Call external onKeyDown if provided + if (onKeyDown) { onKeyDown(event); } - // Trigger onSearch immediately when Enter is pressed + if (event.key === 'Enter') { onSearch(searchText); } From e7388c6278c90d8b7c083f04c899713ca289caa9 Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Tue, 17 Feb 2026 07:54:24 +0530 Subject: [PATCH 7/8] reverted comments Signed-off-by: AasthathecoderX --- src/custom/SearchBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index b5c38b435..d88cc882e 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -92,7 +92,7 @@ function SearchBar({ const searchRef = React.useRef(null); const theme = useTheme(); - + // Debounce the onSearch function const debouncedOnSearch = useCallback( debounce((value) => { onSearch(value); @@ -167,7 +167,7 @@ function SearchBar({ inputRef={searchRef} placeholder={placeholder} data-testid="searchbar-input" - onKeyDown={handleKeyDown} // <-- updated handler + onKeyDown={handleKeyDown} style={{ width: expanded ? '150px' : '0', opacity: expanded ? 1 : 0, From 85140cdd4c71e083db95cd56948d9e8505d370ec Mon Sep 17 00:00:00 2001 From: AasthathecoderX Date: Tue, 17 Feb 2026 07:57:58 +0530 Subject: [PATCH 8/8] reverted previous comments Signed-off-by: AasthathecoderX --- src/custom/SearchBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index d88cc882e..2f86d09a3 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -163,7 +163,7 @@ function SearchBar({