test(atomic): atomic-commerce-pager (#4083)

https://coveord.atlassian.net/browse/KIT-3250

---------

Co-authored-by: GitHub Actions Bot <>

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/atomic-angular.module.ts

@@ -14,6 +14,7 @@ AtomicColorFacet,
 AtomicCommerceFacet,
 AtomicCommerceFacets,
 AtomicCommerceLoadMoreProducts,
+AtomicCommercePager,
 AtomicCommerceQuerySummary,
 AtomicCommerceSearchBox,
 AtomicComponentError,
@@ -116,6 +117,7 @@ AtomicColorFacet,
 AtomicCommerceFacet,
 AtomicCommerceFacets,
 AtomicCommerceLoadMoreProducts,
+AtomicCommercePager,
 AtomicCommerceQuerySummary,
 AtomicCommerceSearchBox,
 AtomicComponentError,

packages/atomic-angular/projects/atomic-angular/src/lib/stencil-generated/components.ts

@@ -202,6 +202,32 @@ export class AtomicCommerceLoadMoreProducts {
 export declare interface AtomicCommerceLoadMoreProducts extends Components.AtomicCommerceLoadMoreProducts {}
 
 
+@ProxyCmp({
+  inputs: ['nextButtonIcon', 'numberOfPages', 'previousButtonIcon']
+})
+@Component({
+  selector: 'atomic-commerce-pager',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['nextButtonIcon', 'numberOfPages', 'previousButtonIcon'],
+})
+export class AtomicCommercePager {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+    proxyOutputs(this, this.el, ['atomic/scrollToTop']);
+  }
+}
+
+
+export declare interface AtomicCommercePager extends Components.AtomicCommercePager {
+
+  'atomic/scrollToTop': EventEmitter<CustomEvent<any>>;
+}
+
+
 @ProxyCmp({
 })
 @Component({

packages/atomic/src/components.d.ts

@@ -429,6 +429,7 @@ export namespace Components {
     }
     /**
      * The `atomic-pager` provides buttons that allow the end user to navigate through the different product pages.
+     * @alpha 
      */
     interface AtomicCommercePager {
         /**
@@ -3578,6 +3579,7 @@ declare global {
     }
     /**
      * The `atomic-pager` provides buttons that allow the end user to navigate through the different product pages.
+     * @alpha 
      */
     interface HTMLAtomicCommercePagerElement extends Components.AtomicCommercePager, HTMLStencilElement {
         addEventListener<K extends keyof HTMLAtomicCommercePagerElementEventMap>(type: K, listener: (this: HTMLAtomicCommercePagerElement, ev: AtomicCommercePagerCustomEvent<HTMLAtomicCommercePagerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -5856,6 +5858,7 @@ declare namespace LocalJSX {
     }
     /**
      * The `atomic-pager` provides buttons that allow the end user to navigate through the different product pages.
+     * @alpha 
      */
     interface AtomicCommercePager {
         /**
@@ -8862,6 +8865,7 @@ declare module "@stencil/core" {
             "atomic-commerce-numeric-facet": LocalJSX.AtomicCommerceNumericFacet & JSXBase.HTMLAttributes<HTMLAtomicCommerceNumericFacetElement>;
             /**
              * The `atomic-pager` provides buttons that allow the end user to navigate through the different product pages.
+             * @alpha 
              */
             "atomic-commerce-pager": LocalJSX.AtomicCommercePager & JSXBase.HTMLAttributes<HTMLAtomicCommercePagerElement>;
             "atomic-commerce-product-list": LocalJSX.AtomicCommerceProductList & JSXBase.HTMLAttributes<HTMLAtomicCommerceProductListElement>;

packages/atomic/src/components/commerce/atomic-commerce-load-more-products/e2e/fixture.ts

@@ -4,7 +4,7 @@ import {
   makeAxeBuilder,
 } from '../../../../../playwright-utils/base-fixture';
 import {SearchBoxPageObject as SearchBox} from '../../atomic-commerce-search-box/e2e/page-object';
-import {AtomicCommerceProductsPageObject as Products} from '../../atomic-product/e2e/page-object';
+import {ProductsPageObject as Products} from '../../atomic-product/e2e/page-object';
 import {LoadMoreProductsPageObject as LoadMore} from './page-object';
 
 type MyFixtures = {

packages/atomic/src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.new.stories.tsx

@@ -0,0 +1,44 @@
+import {
+  playExecuteFirstSearch,
+  wrapInCommerceInterface,
+} from '@coveo/atomic/storybookUtils/commerce-interface-wrapper';
+import {parameters} from '@coveo/atomic/storybookUtils/common-meta-parameters';
+import {renderComponent} from '@coveo/atomic/storybookUtils/render-component';
+import type {Meta, StoryObj as Story} from '@storybook/web-components';
+
+const {decorator, play} = wrapInCommerceInterface({skipFirstSearch: true});
+
+const meta: Meta = {
+  component: 'atomic-commerce-pager',
+  title: 'Atomic-Commerce/Interface Components/atomic-commerce-pager',
+  id: 'atomic-commerce-pager',
+  render: renderComponent,
+  decorators: [decorator],
+  parameters,
+  play,
+};
+
+export default meta;
+
+export const Default: Story = {
+  name: 'atomic-commerce-pager',
+  play: async (context) => {
+    await play(context);
+    await playExecuteFirstSearch(context);
+  },
+};
+
+export const CustomIcon: Story = {
+  name: 'With custom icon',
+  tags: ['commerce'],
+  args: {
+    'attributes-previous-button-icon':
+      'https://raw.githubusercontent.com/coveo/ui-kit/master/packages/atomic/src/images/arrow-top-rounded.svg',
+    'attributes-next-button-icon':
+      'https://raw.githubusercontent.com/coveo/ui-kit/master/packages/atomic/src/images/arrow-top-rounded.svg',
+  },
+  play: async (context) => {
+    await play(context);
+    await playExecuteFirstSearch(context);
+  },
+};

packages/atomic/src/components/commerce/atomic-commerce-pager/atomic-commerce-pager.tsx

@@ -1,3 +1,4 @@
+import {NumberValue, Schema} from '@coveo/bueno';
 import {
   Pagination,
   PaginationState,
@@ -39,7 +40,7 @@ import {getCurrentPagesRange} from './commerce-pager-utils';
  * @part previous-button-icon - Icon of the previous button.
  * @part next-button-icon - Icon of the next button.
  *
- * @internal
+ * @alpha
  */
 @Component({
   tag: 'atomic-commerce-pager',
@@ -76,7 +77,7 @@ export class AtomicCommercePager
    * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
    * - Use a stringified SVG to display it directly.
    */
-  @Prop({reflect: true}) previousButtonIcon = ArrowLeftIcon;
+  @Prop({reflect: true}) previousButtonIcon: string = ArrowLeftIcon;
 
   /**
    * The SVG icon to use to display the Next button.
@@ -85,12 +86,13 @@ export class AtomicCommercePager
    * - Use a value that starts with `assets://`, to display an icon from the Atomic package.
    * - Use a stringified SVG to display it directly.
    */
-  @Prop({reflect: true}) nextButtonIcon = ArrowRightIcon;
+  @Prop({reflect: true}) nextButtonIcon: string = ArrowRightIcon;
 
   private activePage?: FocusTargetController;
   private radioGroupName = randomID('atomic-commerce-pager-');
 
   public initialize() {
+    this.validateProps();
     if (this.bindings.interfaceElement.type === 'product-listing') {
       this.listingOrSearch = buildProductListing(this.bindings.engine);
     } else {
@@ -99,6 +101,14 @@ export class AtomicCommercePager
     this.pager = this.listingOrSearch.pagination();
   }
 
+  private validateProps() {
+    new Schema({
+      numberOfPages: new NumberValue({min: 0}),
+    }).validate({
+      numberOfPages: this.numberOfPages,
+    });
+  }
+
   public render() {
     const pagesRange = getCurrentPagesRange(
       this.pagerState.page,