diff --git a/packages/react-storage/src/components/StorageBrowser/composables/Search.tsx b/packages/react-storage/src/components/StorageBrowser/composables/Search.tsx index 0b8a9e3c383..0b717f730f4 100644 --- a/packages/react-storage/src/components/StorageBrowser/composables/Search.tsx +++ b/packages/react-storage/src/components/StorageBrowser/composables/Search.tsx @@ -74,13 +74,13 @@ export const Search = ({ {showIncludeSubfolders ? ( - setSubfoldersIncluded(!subfoldersIncluded)} - type="checkbox" - /> + setSubfoldersIncluded(!subfoldersIncluded)} + type="checkbox" + /> Include subfolders diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/__tests__/CopyFilesControls.spec.tsx b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/__tests__/CopyFilesControls.spec.tsx index 93620386fda..8dfa93dc24f 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/__tests__/CopyFilesControls.spec.tsx +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationActionView/__tests__/CopyFilesControls.spec.tsx @@ -1,10 +1,12 @@ import React from 'react'; import { render } from '@testing-library/react'; -import * as UseCopyViewModule from '../CopyView/useCopyView'; -import * as Config from '../../../providers/configuration'; - import userEvent from '@testing-library/user-event'; + +import * as AmplifyReactCore from '@aws-amplify/ui-react-core'; + import * as TempActions from '../../../do-not-import-from-here/createTempActionsProvider'; +import * as UseCopyViewModule from '../CopyView/useCopyView'; +import * as Config from '../../../providers/configuration'; import { CopyFilesControls } from '../CopyFilesControls'; const TEST_ACTIONS = { @@ -15,6 +17,7 @@ const TEST_ACTIONS = { jest.spyOn(TempActions, 'useTempActions').mockReturnValue(TEST_ACTIONS); const useCopyViewSpy = jest.spyOn(UseCopyViewModule, 'useCopyView'); +const useDataSpy = jest.spyOn(AmplifyReactCore, 'useDataState'); describe('CopyFilesControls', () => { const onExitMock = jest.fn(); @@ -22,6 +25,21 @@ describe('CopyFilesControls', () => { const onActionStartMock = jest.fn(); const onSetDestinationList = jest.fn(); + beforeAll(() => { + useDataSpy.mockReturnValue([ + { + data: { + items: [{ id: '1', key: 'Location A', type: 'FOLDER' }], + nextToken: undefined, + }, + message: '', + hasError: false, + isLoading: false, + }, + jest.fn(), + ]); + }); + beforeEach(() => { jest.clearAllMocks(); useCopyViewSpy.mockReturnValue({ @@ -98,8 +116,9 @@ describe('CopyFilesControls', () => { }); it('renders all controls', () => { - const { getByRole } = render(); + const { getByRole, getByPlaceholderText } = render(); + expect(getByPlaceholderText('Search for folders')).toBeInTheDocument(); expect(getByRole('button', { name: 'Exit' })).toBeInTheDocument(); expect(getByRole('button', { name: 'Start' })).toBeInTheDocument(); expect(getByRole('button', { name: 'Cancel' })).toBeInTheDocument(); diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx index 7985c2859a6..d514daba53e 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx @@ -78,6 +78,8 @@ export function LocationDetailView({ hasError, message, shouldShowEmptyMessage, + searchPlaceholder, + showIncludeSubfolders, onDropFiles, onRefresh, onPaginateNext, @@ -87,6 +89,7 @@ export function LocationDetailView({ onNavigateHome, onSelect, onSelectAll, + onSearch, } = useLocationDetailView({ onNavigate: onNavigateProp, onExit }); return ( @@ -99,6 +102,8 @@ export function LocationDetailView({ isDataRefreshDisabled: isLoading, currentLocation, currentPath, + searchPlaceholder, + showIncludeSubfolders, tableData: getLocationDetailViewTableData({ areAllFilesSelected, currentLocation, @@ -116,6 +121,7 @@ export function LocationDetailView({ onNavigate={onNavigate} onNavigateHome={onNavigateHome} onRefresh={onRefresh} + onSearch={onSearch} > { expect(messageText).toBeInTheDocument(); }); + it('allows searching for items', async () => { + useStoreSpy.mockReturnValueOnce([ + { + location: { current: location, path: '', key: location.prefix }, + locationItems: { fileDataItems: undefined }, + } as StoreModule.UseStoreState, + dispatchStoreAction, + ]); + mockListItemsAction({ result: testResult }); + + const { getByPlaceholderText, getByText } = render(); + + const input = getByPlaceholderText('Search current folder'); + const subfolderOption = getByText('Include subfolders'); + + expect(input).toBeInTheDocument(); + expect(subfolderOption).toBeInTheDocument(); + + input.focus(); + await act(async () => { + await user.keyboard('boo'); + await user.click(getByText('Submit')); + }); + + expect(handleList).toHaveBeenCalledWith( + expect.objectContaining({ + options: expect.objectContaining({ + search: { + filterKey: 'key', + query: 'boo', + }, + }), + }) + ); + }); + it('loads initial location items for a BUCKET location as expected', () => { useStoreSpy.mockReturnValueOnce([ { diff --git a/packages/react-storage/src/components/StorageBrowser/views/LocationsView/__tests__/LocationsView.spec.tsx b/packages/react-storage/src/components/StorageBrowser/views/LocationsView/__tests__/LocationsView.spec.tsx index 01e8a76f84c..a129389f0d5 100644 --- a/packages/react-storage/src/components/StorageBrowser/views/LocationsView/__tests__/LocationsView.spec.tsx +++ b/packages/react-storage/src/components/StorageBrowser/views/LocationsView/__tests__/LocationsView.spec.tsx @@ -301,4 +301,26 @@ describe('LocationsListView', () => { }, }); }); + + it('allows searching for items', async () => { + const user = userEvent.setup(); + const { getByPlaceholderText, getByText, queryByText } = render( + + ); + + const input = getByPlaceholderText('Filter folders and files'); + + expect(input).toBeInTheDocument(); + expect(queryByText('item-0/')).toBeInTheDocument(); + expect(queryByText('item-1/')).toBeInTheDocument(); + + input.focus(); + await act(async () => { + await user.keyboard('item-0'); + await user.click(getByText('Submit')); + }); + + expect(queryByText('item-0/')).toBeInTheDocument(); + expect(queryByText('item-1/')).not.toBeInTheDocument(); + }); });