chore(atomic): add tests for display-options (#6148)

fpbrault · web-flow · commit b15b00cca7fa · 2025-10-23T18:24:54.000Z
diff --git a/packages/atomic/cypress/e2e/result-list/result-list-utils.ts b/packages/atomic/cypress/e2e/result-list/result-list-utils.ts
@@ -1,7 +1,7 @@
 import {
   ItemDisplayDensity,
   ItemDisplayLayout,
-} from '../../../src/components/common/layout/display-options';
+} from '../../../src/components/common/layout/item-layout-utils';
 import {ResultDisplayImageSize} from './result-template-assertions';
 
 interface WithAnySectionnableResultListOptions {
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.spec.ts b/packages/atomic/src/components/commerce/atomic-commerce-product-list/atomic-commerce-product-list.spec.ts
@@ -12,7 +12,7 @@ import type {
   ItemDisplayDensity,
   ItemDisplayImageSize,
   ItemDisplayLayout,
-} from '@/src/components/common/layout/display-options';
+} from '@/src/components/common/layout/item-layout-utils';
 import {renderInAtomicCommerceInterface} from '@/vitest-utils/testing-helpers/fixtures/atomic/commerce/atomic-commerce-interface-fixture';
 import {buildFakeProduct} from '@/vitest-utils/testing-helpers/fixtures/headless/commerce/product';
 import {buildFakeProductListing} from '@/vitest-utils/testing-helpers/fixtures/headless/commerce/product-listing-controller';
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.spec.ts b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.spec.ts
@@ -11,7 +11,7 @@ import type {
   ItemDisplayBasicLayout,
   ItemDisplayDensity,
   ItemDisplayImageSize,
-} from '@/src/components/common/layout/display-options.js';
+} from '@/src/components/common/layout/item-layout-utils.js';
 import {renderInAtomicCommerceRecommendationInterface} from '@/vitest-utils/testing-helpers/fixtures/atomic/commerce/atomic-commerce-recommendation-interface-fixture.js';
 import {buildFakeProduct} from '@/vitest-utils/testing-helpers/fixtures/headless/commerce/product.js';
 import {buildFakeRecommendations} from '@/vitest-utils/testing-helpers/fixtures/headless/commerce/recommendations-controller.js';
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.ts b/packages/atomic/src/components/commerce/atomic-commerce-recommendation-list/atomic-commerce-recommendation-list.ts
@@ -28,7 +28,7 @@ import {
   type ItemDisplayBasicLayout,
   type ItemDisplayDensity,
   type ItemDisplayImageSize,
-} from '@/src/components/common/layout/display-options';
+} from '@/src/components/common/layout/item-layout-utils';
 import {bindStateToController} from '@/src/decorators/bind-state.js';
 import {bindingGuard} from '@/src/decorators/binding-guard';
 import {bindings} from '@/src/decorators/bindings';
diff --git a/packages/atomic/src/components/commerce/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.ts b/packages/atomic/src/components/commerce/atomic-commerce-search-box-instant-products/atomic-commerce-search-box-instant-products.ts
@@ -12,7 +12,7 @@ import type {
   ItemDisplayDensity,
   ItemDisplayImageSize,
   ItemDisplayLayout,
-} from '@/src/components/common/layout/display-options';
+} from '@/src/components/common/layout/item-layout-utils';
 import {
   getPartialInstantItemElement,
   getPartialInstantItemShowAllElement,
diff --git a/packages/atomic/src/components/commerce/atomic-product-section-visual/atomic-product-section-visual.ts b/packages/atomic/src/components/commerce/atomic-product-section-visual/atomic-product-section-visual.ts
@@ -1,6 +1,6 @@
 import {css, LitElement} from 'lit';
 import {customElement, property} from 'lit/decorators.js';
-import type {ItemDisplayImageSize} from '@/src/components/common/layout/display-options';
+import type {ItemDisplayImageSize} from '@/src/components/common/layout/item-layout-utils';
 import {ItemSectionMixin} from '@/src/mixins/item-section-mixin';
 
 /**
diff --git a/packages/atomic/src/components/commerce/atomic-product/atomic-product.ts b/packages/atomic/src/components/commerce/atomic-product/atomic-product.ts
@@ -14,12 +14,12 @@ import {
   resultComponentClass,
 } from '@/src/components/common/item-list/item-list-common';
 import {CustomRenderController} from '@/src/components/common/layout/custom-render-controller';
+import {ItemLayoutController} from '@/src/components/common/layout/item-layout-controller';
 import type {
   ItemDisplayDensity,
   ItemDisplayImageSize,
   ItemDisplayLayout,
-} from '@/src/components/common/layout/display-options';
-import {ItemLayoutController} from '@/src/components/common/layout/item-layout-controller';
+} from '@/src/components/common/layout/item-layout-utils';
 import {booleanConverter} from '@/src/converters/boolean-converter';
 import {withTailwindStyles} from '@/src/decorators/with-tailwind-styles';
 import {ChildrenUpdateCompleteMixin} from '@/src/mixins/children-update-complete-mixin';
diff --git a/packages/atomic/src/components/commerce/product-list/product-template-provider.spec.ts b/packages/atomic/src/components/commerce/product-list/product-template-provider.spec.ts
@@ -3,7 +3,7 @@ import {
   type Product,
 } from '@coveo/headless/commerce';
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
-import type {ItemTarget} from '@/src/components/common/layout/display-options';
+import type {ItemTarget} from '@/src/components/common/layout/item-layout-utils';
 import type {TemplateProviderProps} from '@/src/components/common/template-provider/template-provider';
 import {ProductTemplateProvider} from './product-template-provider';
 
diff --git a/packages/atomic/src/components/commerce/product-list/product-template-provider.ts b/packages/atomic/src/components/commerce/product-list/product-template-provider.ts
@@ -3,7 +3,7 @@ import {
   type Product,
   type Template,
 } from '@coveo/headless/commerce';
-import type {ItemTarget} from '../../common/layout/display-options';
+import type {ItemTarget} from '@/src/components/common/layout/item-layout-utils';
 import {
   TemplateProvider,
   type TemplateProviderProps,
diff --git a/packages/atomic/src/components/common/item-link/item-link.ts b/packages/atomic/src/components/common/item-link/item-link.ts
@@ -1,7 +1,7 @@
 import {html} from 'lit';
 import {ifDefined} from 'lit/directives/if-defined.js';
 import {ref} from 'lit/directives/ref.js';
-import type {ItemTarget} from '@/src/components/common/layout/display-options';
+import type {ItemTarget} from '@/src/components/common/layout/item-layout-utils';
 import type {FunctionalComponentWithChildren} from '@/src/utils/functional-component-utils';
 import {filterProtocol} from '@/src/utils/xss-utils.js';
 import {bindAnalyticsToLink} from './bind-analytics-to-link';
diff --git a/packages/atomic/src/components/common/item-list/context/item-display-config-context-controller.ts b/packages/atomic/src/components/common/item-list/context/item-display-config-context-controller.ts
@@ -2,7 +2,7 @@ import type {LitElement, ReactiveController, ReactiveControllerHost} from 'lit';
 import type {
   ItemDisplayDensity,
   ItemDisplayImageSize,
-} from '@/src/components/common/layout/display-options';
+} from '@/src/components/common/layout/item-layout-utils';
 import {buildCustomEvent} from '@/src/utils/event-utils';
 
 const itemDisplayConfigContextEventName = 'atomic/resolveResultDisplayConfig';
diff --git a/packages/atomic/src/components/common/item-list/item-list-common.ts b/packages/atomic/src/components/common/item-list/item-list-common.ts
@@ -1,3 +1,7 @@
+import type {
+  ItemDisplayDensity,
+  ItemDisplayImageSize,
+} from '@/src/components/common/layout/item-layout-utils';
 import {
   type FocusTargetController,
   getFirstFocusableDescendant,
@@ -9,10 +13,6 @@ import type {CommerceRecommendationStore} from '../../commerce/atomic-commerce-r
 import type {InsightStore} from '../../insight/atomic-insight-interface/store';
 import type {RecsStore} from '../../recommendations/atomic-recs-interface/store';
 import type {SearchStore} from '../../search/atomic-search-interface/store';
-import type {
-  ItemDisplayDensity,
-  ItemDisplayImageSize,
-} from '../layout/display-options';
 import type {AnyItem} from './unfolded-item';
 
 export const resultComponentClass = 'result-component';
diff --git a/packages/atomic/src/components/common/item-list/result-template-provider.ts b/packages/atomic/src/components/common/item-list/result-template-provider.ts
@@ -3,8 +3,8 @@ import {
   type Result,
   type Template,
 } from '@coveo/headless';
+import type {ItemTarget} from '@/src/components/common/layout/item-layout-utils';
 import type {AnyBindings} from '../interface/bindings';
-import type {ItemTarget} from '../layout/display-options';
 import {
   TemplateProvider,
   type TemplateProviderProps,
diff --git a/packages/atomic/src/components/common/layout/display-options.ts b/packages/atomic/src/components/common/layout/display-options.ts
@@ -1,81 +1,54 @@
 import {
-  containsSections,
-  type ItemSectionTagName,
-} from './item-layout-sections';
+  getItemDisplayClasses as getItemDisplayClassesImport,
+  getItemLayoutClasses,
+  getItemListDisplayClasses as getItemListDisplayClassesImport,
+  type ItemDisplayBasicLayout as ItemDisplayBasicLayoutImport,
+  type ItemDisplayDensity as ItemDisplayDensityImport,
+  type ItemDisplayImageSize as ItemDisplayImageSizeImport,
+  type ItemDisplayLayout as ItemDisplayLayoutImport,
+  type ItemTarget as ItemTargetImport,
+} from './item-layout-utils';
 
-export type ItemDisplayBasicLayout = 'list' | 'grid';
-export type ItemDisplayLayout = ItemDisplayBasicLayout | 'table';
-export type ItemDisplayDensity = 'comfortable' | 'normal' | 'compact';
-export type ItemDisplayImageSize = 'large' | 'small' | 'icon' | 'none';
-export type ItemTarget = '_self' | '_blank' | '_parent' | '_top';
+/**
+ * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
+ */
+export type ItemDisplayBasicLayout = ItemDisplayBasicLayoutImport;
 
-function getDisplayClass(display: ItemDisplayLayout) {
-  switch (display) {
-    case 'grid':
-      return 'display-grid';
-    case 'table':
-      return 'display-table';
-    default:
-      return 'display-list';
-  }
-}
+/**
+ * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
+ */
+export type ItemDisplayDensity = ItemDisplayDensityImport;
 
-function getDensityClass(density: ItemDisplayDensity) {
-  switch (density) {
-    case 'comfortable':
-      return 'density-comfortable';
-    case 'compact':
-      return 'density-compact';
-    default:
-      return 'density-normal';
-  }
-}
+/**
+ * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
+ */
+export type ItemDisplayImageSize = ItemDisplayImageSizeImport;
 
-function getImageClass(image: ItemDisplayImageSize) {
-  switch (image) {
-    case 'large':
-      return 'image-large';
-    case 'small':
-      return 'image-small';
-    case 'none':
-      return 'image-none';
-    default:
-      return 'image-icon';
-  }
-}
-
-export function getItemListDisplayClasses(
-  display: ItemDisplayLayout,
-  density: ItemDisplayDensity,
-  image: ItemDisplayImageSize,
-  isLoading: boolean,
-  isAppLoading: boolean
-) {
-  const classes = getItemDisplayClasses(display, density, image);
+/**
+ * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
+ */
+export type ItemDisplayLayout = ItemDisplayLayoutImport;
 
-  if (isLoading) {
-    classes.push('loading');
-  }
+/**
+ * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
+ */
+export type ItemTarget = ItemTargetImport;
 
-  if (isAppLoading) {
-    classes.push('placeholder');
-  }
-  return classes.join(' ');
-}
+/**
+ * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
+ */
+export const getItemDisplayClasses: typeof getItemDisplayClassesImport =
+  getItemDisplayClassesImport;
 
-export function getItemDisplayClasses(
-  display: ItemDisplayLayout,
-  density: ItemDisplayDensity,
-  image: ItemDisplayImageSize
-) {
-  const classes = [
-    getDisplayClass(display),
-    getDensityClass(density),
-    getImageClass(image),
-  ];
-  return classes;
-}
+/**
+ * @deprecated Use only for Stencil components. For Lit components, import from `item-layout-utils.ts` instead.
+ */
+export const getItemListDisplayClasses: typeof getItemListDisplayClassesImport =
+  getItemListDisplayClassesImport;
 
+/**
+ * @deprecated Use only for Stencil components. For Lit components, use `getItemLayoutClasses` with `ItemLayoutConfig` from `packages/atomic/src/components/common/layout/item-layout-utils.ts` instead.
+ */
 export class ItemLayout {
   private children: HTMLCollection;
   private density: ItemDisplayDensity;
@@ -94,35 +67,15 @@ export class ItemLayout {
     this.imageSize = imageSize;
   }
 
-  private getImageSizeFromSections() {
-    const imageSize = this.getSection(
-      'atomic-result-section-visual'
-    )?.getAttribute('image-size');
-    if (!imageSize) {
-      return undefined;
-    }
-    return imageSize as ItemDisplayImageSize;
-  }
-
-  private getSection(section: ItemSectionTagName) {
-    return Array.from(this.children).find(
-      (element) => element.tagName.toLowerCase() === section
-    );
-  }
-
   public getClasses(HTMLContent?: string) {
-    const classes = getItemDisplayClasses(
-      this.display,
-      this.density,
-      this.getImageSizeFromSections() ?? this.imageSize
-    );
-    if (
+    return getItemLayoutClasses(
+      {
+        children: this.children,
+        display: this.display,
+        density: this.density,
+        imageSize: this.imageSize,
+      },
       HTMLContent
-        ? containsSections(HTMLContent)
-        : containsSections(this.children)
-    ) {
-      classes.push('with-sections');
-    }
-    return classes;
+    );
   }
 }
diff --git a/packages/atomic/src/components/common/layout/item-layout-controller.spec.ts b/packages/atomic/src/components/common/layout/item-layout-controller.spec.ts
diff --git a/packages/atomic/src/components/common/layout/item-layout-controller.ts b/packages/atomic/src/components/common/layout/item-layout-controller.ts
diff --git a/packages/atomic/src/components/common/layout/item-layout-utils.spec.ts b/packages/atomic/src/components/common/layout/item-layout-utils.spec.ts
diff --git a/packages/atomic/src/components/common/layout/item-layout-utils.ts b/packages/atomic/src/components/common/layout/item-layout-utils.ts
diff --git a/packages/atomic/src/components/search/atomic-search-box-instant-results/atomic-search-box-instant-results.ts b/packages/atomic/src/components/search/atomic-search-box-instant-results/atomic-search-box-instant-results.ts
