chore(storage-browser): Add control hooks for consistency (#6209)

Author: cshfang

packages/react-storage/src/components/StorageBrowser/controls/PaginationControl.tsx

@@ -2,12 +2,12 @@ import React from 'react';
 
 import { Pagination } from '../composables/Pagination';
 import { useResolvedComposable } from './hooks/useResolvedComposable';
-import { useControlsContext } from './context';
+import { usePagination } from './hooks/usePagination';
 
 export const PaginationControl = (): React.JSX.Element => {
-  const { data } = useControlsContext();
+  const props = usePagination();
 
   const Resolved = useResolvedComposable(Pagination, 'Pagination');
 
-  return <Resolved {...data.paginationData} />;
+  return <Resolved {...props} />;
 };

packages/react-storage/src/components/StorageBrowser/controls/SearchControl.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { SearchField } from '../composables/SearchField';
+
+import { useResolvedComposable } from './hooks/useResolvedComposable';
+import { useSearchField } from './hooks/useSearchField';
+
+export const SearchFieldControl = (): React.JSX.Element => {
+  const props = useSearchField();
+  const Resolved = useResolvedComposable(SearchField, 'SearchField');
+
+  return <Resolved {...props} />;
+};

packages/react-storage/src/components/StorageBrowser/controls/SearchFieldControl.tsx

@@ -1,60 +1,34 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PaginationControl } from '../PaginationControl';
-import { useControlsContext } from '../context';
+import { usePagination } from '../hooks/usePagination';
 import { useResolvedComposable } from '../hooks/useResolvedComposable';
 
-jest.mock('../context');
+jest.mock('../hooks/usePagination');
 jest.mock('../hooks/useResolvedComposable');
+jest.mock('../../composables/Pagination', () => ({
+  Pagination: () => <div data-testid="pagination" />,
+}));
 
 describe('PaginationControl', () => {
-  // assert mocks
-  const mockUseControlsContext = useControlsContext as jest.Mock;
-  const mockUseResolvedComposable = useResolvedComposable as jest.Mock;
+  const mockUsePagination = jest.mocked(usePagination);
+  const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
 
   beforeAll(() => {
     mockUseResolvedComposable.mockImplementation(
-      (component: React.JSX.Element) => component
+      (component) => component as () => React.JSX.Element
     );
   });
 
   afterEach(() => {
-    mockUseControlsContext.mockReset();
-    mockUseResolvedComposable.mockReset();
+    mockUsePagination.mockClear();
   });
 
-  it('renders the PaginationControl', async () => {
-    mockUseControlsContext.mockReturnValue({
-      data: {
-        paginationData: {
-          hasNextPage: true,
-          highestPageVisited: 1,
-          onPaginate: jest.fn(),
-          page: 1,
-        },
-      },
-    });
-
+  it('renders', () => {
     render(<PaginationControl />);
 
-    const nav = screen.getByRole('navigation');
-    const list = screen.getByRole('list');
-    const listItems = await screen.findAllByRole('listitem');
-    const nextButton = screen.getByRole('button', { name: 'Go to next page' });
-    const prevButton = screen.getByRole('button', {
-      name: 'Go to previous page',
-    });
-    const nextIcon = nextButton.querySelector('svg');
-    const prevIcon = nextButton.querySelector('svg');
+    const pagination = screen.getByTestId('pagination');
 
-    expect(nextButton).toBeInTheDocument();
-    expect(prevButton).toBeInTheDocument();
-    expect(nextIcon).toBeInTheDocument();
-    expect(prevIcon).toBeInTheDocument();
-    expect(nextIcon).toHaveAttribute('aria-hidden', 'true');
-    expect(prevIcon).toHaveAttribute('aria-hidden', 'true');
-    expect(nav).toBeInTheDocument();
-    expect(list).toBeInTheDocument();
-    expect(listItems).toHaveLength(3);
+    expect(pagination).toBeInTheDocument();
   });
 });

packages/react-storage/src/components/StorageBrowser/controls/__tests__/PaginationControl.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { SearchFieldControl } from '../SearchFieldControl';
+import { useSearchField } from '../hooks/useSearchField';
+import { useResolvedComposable } from '../hooks/useResolvedComposable';
+
+jest.mock('../hooks/useSearchField');
+jest.mock('../hooks/useResolvedComposable');
+jest.mock('../../composables/SearchField', () => ({
+  SearchField: () => <div data-testid="search-field" />,
+}));
+
+describe('SearchFieldControl', () => {
+  const mockUseSearchField = jest.mocked(useSearchField);
+  const mockUseResolvedComposable = jest.mocked(useResolvedComposable);
+
+  beforeAll(() => {
+    mockUseResolvedComposable.mockImplementation(
+      (component) => component as () => React.JSX.Element
+    );
+  });
+
+  afterEach(() => {
+    mockUseSearchField.mockClear();
+  });
+
+  it('renders', () => {
+    render(<SearchFieldControl />);
+
+    const searchField = screen.getByTestId('search-field');
+
+    expect(searchField).toBeInTheDocument();
+  });
+});

packages/react-storage/src/components/StorageBrowser/controls/__tests__/SearchControl.spec.tsx

@@ -0,0 +1,35 @@
+import { renderHook } from '@testing-library/react';
+import { PaginationProps } from '../../../composables/Pagination';
+import { useControlsContext } from '../../../controls/context';
+import { usePagination } from '../usePagination';
+
+jest.mock('../../../controls/context');
+
+describe('usePagination', () => {
+  const data = {
+    paginationData: { hasNextPage: true, highestPageVisited: 1, page: 1 },
+  };
+
+  const mockUseControlsContext = jest.mocked(useControlsContext);
+
+  beforeEach(() => {
+    mockUseControlsContext.mockReturnValue({ data, onPaginate: jest.fn() });
+  });
+
+  afterEach(() => {
+    mockUseControlsContext.mockReset();
+  });
+
+  it('returns Pagination props', () => {
+    const { result } = renderHook(() => usePagination());
+
+    const expected: PaginationProps = {
+      hasNextPage: data.paginationData.hasNextPage,
+      highestPageVisited: data.paginationData.highestPageVisited,
+      page: data.paginationData.page,
+      onPaginate: expect.any(Function),
+    };
+
+    expect(result.current).toStrictEqual(expected);
+  });
+});

packages/react-storage/src/components/StorageBrowser/controls/__tests__/SearchFieldControl.spec.tsx

@@ -0,0 +1,46 @@
+import { renderHook } from '@testing-library/react';
+import { SearchFieldProps } from '../../../composables/SearchField';
+import { useControlsContext } from '../../../controls/context';
+import { useSearchField } from '../useSearchField';
+
+jest.mock('../../../controls/context');
+
+describe('useSearchField', () => {
+  const data = {
+    searchClearLabel: 'search-clear-label',
+    searchPlaceholder: 'search-placeholder',
+    searchSubmitLabel: 'search-submit-label',
+    searchQuery: 'search-query',
+  };
+
+  const mockUseControlsContext = jest.mocked(useControlsContext);
+
+  beforeEach(() => {
+    mockUseControlsContext.mockReturnValue({
+      data,
+      onSearch: jest.fn(),
+      onSearchClear: jest.fn(),
+      onSearchQueryChange: jest.fn(),
+    });
+  });
+
+  afterEach(() => {
+    mockUseControlsContext.mockReset();
+  });
+
+  it('returns useSearchField data', () => {
+    const { result } = renderHook(() => useSearchField());
+
+    const expected: SearchFieldProps = {
+      clearLabel: data.searchClearLabel,
+      placeholder: data.searchPlaceholder,
+      query: data.searchQuery,
+      submitLabel: data.searchSubmitLabel,
+      onClear: expect.any(Function),
+      onQueryChange: expect.any(Function),
+      onSearch: expect.any(Function),
+    };
+
+    expect(result.current).toStrictEqual(expected);
+  });
+});

packages/react-storage/src/components/StorageBrowser/controls/hooks/__tests__/usePagination.spec.ts

@@ -0,0 +1,9 @@
+import { PaginationProps } from '../../composables/Pagination';
+import { useControlsContext } from '../../controls/context';
+
+export const usePagination = (): PaginationProps => {
+  const { data, onPaginate } = useControlsContext();
+  const { paginationData } = data;
+
+  return { ...paginationData, onPaginate };
+};

packages/react-storage/src/components/StorageBrowser/controls/hooks/__tests__/useSearchField.spec.ts

@@ -0,0 +1,23 @@
+import { SearchFieldProps } from '../../composables/SearchField';
+import { useControlsContext } from '../../controls/context';
+
+export const useSearchField = (): SearchFieldProps => {
+  const { data, onSearch, onSearchClear, onSearchQueryChange } =
+    useControlsContext();
+  const {
+    searchPlaceholder,
+    searchClearLabel,
+    searchQuery,
+    searchSubmitLabel,
+  } = data;
+
+  return {
+    clearLabel: searchClearLabel,
+    placeholder: searchPlaceholder,
+    query: searchQuery,
+    submitLabel: searchSubmitLabel,
+    onClear: onSearchClear,
+    onQueryChange: onSearchQueryChange,
+    onSearch,
+  };
+};

packages/react-storage/src/components/StorageBrowser/controls/hooks/usePagination.tsx

@@ -31,7 +31,6 @@ interface TableData {
 interface PaginationData {
   hasNextPage: boolean;
   highestPageVisited: number;
-  onPaginate: (page: number) => void;
   page: number;
 }
 
@@ -90,6 +89,7 @@ export interface ControlsContext {
   onFolderNameChange?: (value: string) => void;
   onNavigate?: (location: LocationData, path?: string) => void;
   onNavigateHome?: () => void;
+  onPaginate?: (page: number) => void;
   onRefresh?: () => void;
   onSearch?: () => void;
   onSearchClear?: () => void;

packages/react-storage/src/components/StorageBrowser/controls/hooks/useSearchField.tsx

@@ -10,7 +10,7 @@ import { ActionStartControl } from '../../../controls/ActionStartControl';
 import { DataTableControl } from '../../../controls/DataTableControl';
 import { LoadingIndicatorControl } from '../../../controls/LoadingIndicatorControl';
 import { MessageControl } from '../../../controls/MessageControl';
-import { SearchControl } from '../../../controls/SearchControl';
+import { SearchFieldControl } from '../../../controls/SearchFieldControl';
 import { StatusDisplayControl } from '../../../controls/StatusDisplayControl';
 import { TitleControl } from '../../../controls/TitleControl';
 
@@ -40,7 +40,7 @@ export const CopyView: CopyViewType = ({ className, ...props }) => {
           <>
             <ViewElement className={`${STORAGE_BROWSER_BLOCK}__controls`}>
               <ViewElement className={`${STORAGE_BROWSER_BLOCK}__search`}>
-                <SearchControl />
+                <SearchFieldControl />
               </ViewElement>
               <FoldersPaginationControl />
             </ViewElement>
@@ -77,7 +77,7 @@ CopyView.Exit = ActionExitControl;
 CopyView.FoldersLoadingIndicator = LoadingIndicatorControl;
 CopyView.FoldersMessage = FoldersMessageControl;
 CopyView.FoldersPagination = FoldersPaginationControl;
-CopyView.FoldersSearch = SearchControl;
+CopyView.FoldersSearch = SearchFieldControl;
 CopyView.FoldersTable = FoldersTableControl;
 CopyView.Message = MessageControl;
 CopyView.Start = ActionStartControl;