feat(commerce): add pagination and sort sub-controllers

packages/headless/src/controllers/commerce/core/sub-controller/headless-sub-controller.test.ts

@@ -0,0 +1,76 @@
+import {buildMockCommerceState} from '../../../../test/mock-commerce-state';
+import {
+  MockedCommerceEngine,
+  buildMockCommerceEngine,
+} from '../../../../test/mock-engine-v2';
+import {buildCorePagination} from '../pagination/headless-core-commerce-pagination';
+import {buildCoreInteractiveResult} from '../result-list/headless-core-interactive-result';
+import {buildCoreSort} from '../sort/headless-core-commerce-sort';
+import {
+  buildSolutionTypeSubControllers,
+  SolutionTypeSubControllers,
+} from './headless-sub-controller';
+
+jest.mock('../result-list/headless-core-interactive-result');
+jest.mock('../pagination/headless-core-commerce-pagination');
+jest.mock('../sort/headless-core-commerce-sort');
+
+describe('sub controllers', () => {
+  let engine: MockedCommerceEngine;
+  let subControllers: SolutionTypeSubControllers;
+  const mockResponseIdSelector = jest.fn();
+  const mockFetchResultsActionCreator = jest.fn();
+
+  function initSubControllers() {
+    engine = buildMockCommerceEngine(buildMockCommerceState());
+
+    subControllers = buildSolutionTypeSubControllers(engine, {
+      responseIdSelector: mockResponseIdSelector,
+      fetchResultsActionCreator: mockFetchResultsActionCreator,
+    });
+  }
+
+  beforeEach(() => {
+    initSubControllers();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('#interactiveResult builds interactive result controller', () => {
+    const props = {
+      options: {
+        product: {
+          productId: '1',
+          name: 'Product name',
+          price: 17.99,
+        },
+        position: 1,
+      },
+    };
+
+    subControllers.interactiveResult({
+      ...props,
+    });
+
+    expect(buildCoreInteractiveResult).toHaveBeenCalledWith(engine, {
+      ...props,
+      responseIdSelector: mockResponseIdSelector,
+    });
+  });
+
+  it('#pagination builds pagination controller', () => {
+    subControllers.pagination();
+    expect(buildCorePagination).toHaveBeenCalledWith(engine, {
+      fetchResultsActionCreator: mockFetchResultsActionCreator,
+    });
+  });
+
+  it('#sort builds sort controller', () => {
+    subControllers.sort();
+    expect(buildCoreSort).toHaveBeenCalledWith(engine, {
+      fetchResultsActionCreator: mockFetchResultsActionCreator,
+    });
+  });
+});

packages/headless/src/controllers/commerce/core/sub-controller/headless-sub-controller.ts

@@ -2,29 +2,56 @@ import {
   CommerceEngine,
   CommerceEngineState,
 } from '../../../../app/commerce-engine/commerce-engine';
+import {FetchResultsActionCreator} from '../common';
+import {
+  buildCorePagination,
+  Pagination,
+  PaginationProps,
+} from '../pagination/headless-core-commerce-pagination';
 import {
   buildCoreInteractiveResult,
   InteractiveResult,
   InteractiveResultProps,
 } from '../result-list/headless-core-interactive-result';
+import {
+  buildCoreSort,
+  Sort,
+  SortProps,
+} from '../sort/headless-core-commerce-sort';
 
 export interface SolutionTypeSubControllers {
   interactiveResult: (props: InteractiveResultProps) => InteractiveResult;
+  pagination: (props?: PaginationProps) => Pagination;
+  sort: (props?: SortProps) => Sort;
 }
 
 interface SubControllerProps {
   responseIdSelector: (state: CommerceEngineState) => string;
+  fetchResultsActionCreator: FetchResultsActionCreator;
 }
 
 export function buildSolutionTypeSubControllers(
   engine: CommerceEngine,
   subControllerProps: SubControllerProps
 ): SolutionTypeSubControllers {
+  const {responseIdSelector, fetchResultsActionCreator} = subControllerProps;
   return {
     interactiveResult(props: InteractiveResultProps) {
       return buildCoreInteractiveResult(engine, {
         ...props,
-        responseIdSelector: subControllerProps.responseIdSelector,
+        responseIdSelector,
+      });
+    },
+    pagination(props?: PaginationProps) {
+      return buildCorePagination(engine, {
+        ...props,
+        fetchResultsActionCreator,
+      });
+    },
+    sort(props?: SortProps) {
+      return buildCoreSort(engine, {
+        ...props,
+        fetchResultsActionCreator,
       });
     },
   };

packages/headless/src/controllers/commerce/product-listing/headless-product-listing.ts

@@ -54,6 +54,7 @@ export function buildProductListing(engine: CommerceEngine): ProductListing {
   const getState = () => engine.state;
   const subControllers = buildSolutionTypeSubControllers(engine, {
     responseIdSelector,
+    fetchResultsActionCreator: fetchProductListing,
   });
 
   return {

packages/headless/src/controllers/commerce/search/headless-search.ts

@@ -47,6 +47,7 @@ export function buildSearch(engine: CommerceEngine): Search {
   const getState = () => engine.state;
   const subControllers = buildSolutionTypeSubControllers(engine, {
     responseIdSelector,
+    fetchResultsActionCreator: executeSearch,
   });
 
   return {