@globalpayments/vega 2.56.0 → 2.57.1

package/dist/collection/components/vega-input-credit-card/vega-input-credit-card.js

@@ -22,7 +22,6 @@ import { VegaInternalIconManager } from '../../helpers/icon/internal-icon-manage
 import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputCreditCardRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input-credit-card/runtime-metrics-payload-definition';
-import { VegaInternalPasteEvent } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.26.0
  */
@@ -51,17 +50,6 @@ export class VegaInputCreditCard {
     this.focusEventEmitter = createEventEmitSlimmer(VegaInputCreditCard, VegaFocus);
     this.inputCreditCardEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange, VegaFocus, VegaBlur], () => this.host, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputCreditCardRuntimeMetricsPayloadDefinition);
-    this.maskConfig = {
-      type: 'custom',
-      options: {
-        mask: '',
-        slot: '9',
-        accept: /[\d\s]/,
-        insertMode: false,
-        triggerAtInit: FeatureFlag.isEnabled('VEGA_INPUT_CREDIT_CARD.ENABLE_HIDE_NUMBER_MASK_ON_FIRST_LOAD'),
-      },
-      trigger: 'blur',
-    };
     /**
      * Specifies whether a card number must be entered for
      *    this component to pass form validation.
@@ -149,7 +137,7 @@ export class VegaInputCreditCard {
     this.renderInputContainer = () => {
       var _a;
       const iconName = ((_a = this.getCreditCardType(this.value)) === null || _a === void 0 ? void 0 : _a.iconName) || 'regular-credit-card';
-      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(this.value), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (ref) => {
+      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (ref) => {
           this.inputRef = ref;
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
             this.handleVegaChange(input);
@@ -160,10 +148,6 @@ export class VegaInputCreditCard {
           DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, () => {
             this.handleVegaFocus();
           });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalPasteEvent, (event) => {
-            const pastedValue = event.clipboardData.getData('text');
-            this.inputRef.maskConfig = this.getMaskConfig(pastedValue); // The mask should be updated before the value changed.
-          });
         } }));
     };
     this.handleVegaChange = (e) => {
@@ -207,41 +191,18 @@ export class VegaInputCreditCard {
   getCreditCardType(value) {
     return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
   }
-  getMaskConfig(value) {
-    const maskConfig = [];
-    const creditCardType = this.getCreditCardType(value);
-    if (creditCardType) {
-      maskConfig.push(creditCardType.maskConfig);
-      if (this.hideCardNumberOnBlur && value.trim().includes(' ')) {
-        this.maskConfig.options.mask = this.generateDynamicMask();
-        maskConfig.push(this.maskConfig);
-      }
-    }
-    return maskConfig;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-input-credit-card-dynamic-mask-e2e}
-   */
-  /* istanbul ignore next */
-  /** Transform the input card number with dynamic card number mask, for example: '4111 2222 3333 44' will be transformed to 'XXXX XXXX XXXX 99' */
-  generateDynamicMask() {
-    const cardNumberSplit = this.value.trim().split(' ');
-    const cardNumberMask = this.maskCardNumber(cardNumberSplit).join(' ');
-    return cardNumberMask;
-  }
-  /**
-   * The below method is e2e-test covered in
-   * @see{module:vega-input-credit-card-dynamic-mask-e2e}
-   */
-  /* istanbul ignore next */
-  maskCardNumber(cardNumberSplit) {
-    // Map through the array and replace each character with 'X' or '9' depending on the index
-    return cardNumberSplit.map((element, index) => {
-      // Replace each character in the string with 'X' except the last element, which uses '9'
-      const replacementChar = index === cardNumberSplit.length - 1 ? '9' : 'X';
-      return replacementChar.repeat(element.length);
-    });
+  getMaskConfig() {
+    return [
+      {
+        type: 'credit-card',
+        trigger: 'input',
+      },
+      {
+        type: 'credit-card',
+        trigger: 'blur',
+        hideCardNumberOnBlur: this.hideCardNumberOnBlur,
+      },
+    ];
   }
   static get is() { return "vega-input-credit-card"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/vega-table/slimmers/controllers/dto/column-render-input-model.js

@@ -0,0 +1,216 @@
+/**
+ * ColumnRenderInputModel
+ *
+ * Render-time representation of a column or group node used by header/body renderers.
+ * Built from a ColumnStructureModel tree, it carries computed layout metadata required
+ * for rendering and pinned/sticky calculations (colSpan, rowSpan, pinned boundaries, etc).
+ *
+ * Instances form a forest (root-level nodes in an array) that mirrors the structure model
+ * but contains additional render-specific properties and parent/child links for renderers.
+ */
+export class ColumnRenderInputModel {
+  /**
+   * Create a new render input node.
+   *
+   * @param {string} key - Unique key (matches ColumnStructureModel.key).
+   * @param {string} label - Optional display label (from structure model).
+   * @param {VegaTablePinnedType} pinned - Pinned type for this node ('left' | 'right' | null).
+   * @param {Nullable<number>} colSpan - Number of visual columns spanned by this node's subtree.
+   * @param {Nullable<number>} rowSpan - Number of header rows this node should span.
+   * @param {boolean} isViewStart - True when this node is the start of a visible view range.
+   * @param {boolean} isViewEnd - True when this node is the end of a visible view range.
+   * @param {boolean} isLeftEndPinned - True when node is last left-pinned sibling.
+   * @param {boolean} isRightStartPinned - True when node is first right-pinned sibling.
+   * @param {boolean} isNoPinnedEnd - True when node is last non-pinned sibling.
+   * @param {boolean} headHasGroupColumn - Header contains group columns (affects rowSpan).
+   * @param {boolean} headHasPinnedColumn - Header contains pinned columns.
+   * @param {number} headMaxDepth - Maximum header depth (number of header rows).
+   * @param {number} level - Level/index of this node within header rows (0-based).
+   * @param {number} columnIndex - Sequential leaf index (used for ordering).
+   * @param {Nullable<ColumnRenderInputModel>} parent - Parent render input node (null for root-level).
+   * @param {ColumnRenderInputModel[]} children - Child render input nodes.
+   */
+  constructor(key, label, pinned, colSpan, rowSpan, isViewStart, isViewEnd, isLeftEndPinned, isRightStartPinned, isNoPinnedEnd, headHasGroupColumn, headHasPinnedColumn, headMaxDepth, level, columnIndex, parent, children = []) {
+    this.key = key;
+    this.label = label;
+    this.pinned = pinned;
+    this.colSpan = colSpan;
+    this.rowSpan = rowSpan;
+    this.isViewStart = isViewStart;
+    this.isViewEnd = isViewEnd;
+    this.isLeftEndPinned = isLeftEndPinned;
+    this.isRightStartPinned = isRightStartPinned;
+    this.isNoPinnedEnd = isNoPinnedEnd;
+    this.headHasGroupColumn = headHasGroupColumn;
+    this.headHasPinnedColumn = headHasPinnedColumn;
+    this.headMaxDepth = headMaxDepth;
+    this.level = level;
+    this.columnIndex = columnIndex;
+    this.parent = parent;
+    this.children = children;
+    this.iteratorCacheMap = new Map();
+    this.leaves = [];
+  }
+  /**
+   * Build a forest of ColumnRenderInputModel nodes from a ColumnStructureModel root.
+   *
+   * @param {ColumnStructureModel} rootModel - Root ColumnStructureModel that supplies tree and level data.
+   * @returns {ColumnRenderInputModel[]} Array of root-level ColumnRenderInputModel nodes (the render forest).
+   */
+  static from(rootModel) {
+    const renderInputs = [];
+    const parentStack = [];
+    const maxLevel = rootModel.getMaxDepth();
+    const hasGroupColumn = rootModel.hasGroupColumn();
+    const hasPinnedColumn = rootModel.hasLeftPinnedColumn() || rootModel.hasRightPinnedColumn();
+    let columnIndex = 0;
+    // Iterate structure model (DFS by default) and construct render nodes.
+    rootModel.iterator().forEach((model) => {
+      const parent = model.level > 0 ? parentStack[model.level - 1] : null;
+      const isParentStart = hasGroupColumn && this.isParentStart(model);
+      const isParentEnd = hasGroupColumn && this.isParentEnd(model);
+      const renderInput = new ColumnRenderInputModel(model.key, model.label, parent ? parent.pinned : model.pinned, hasGroupColumn ? this.getColSpan(model) : null, hasGroupColumn ? (model.isLeaf() ? maxLevel - model.level : 1) : null, parent ? parent.isViewStart && isParentStart : isParentStart, parent ? parent.isViewEnd && isParentEnd : isParentEnd, parent
+        ? parent.isLeftEndPinned && isParentEnd
+        : hasPinnedColumn && this.isLeftEndPinned(model), parent
+        ? parent.isRightStartPinned && isParentStart
+        : hasPinnedColumn && this.isRightStartPinned(model), parent ? parent.isNoPinnedEnd && isParentEnd : hasPinnedColumn && this.isNoPinnedEnd(model), hasGroupColumn, hasPinnedColumn, maxLevel, model.level, columnIndex, parent);
+      // Attach to parent if present, otherwise add to root-level array.
+      parent ? parent.children.push(renderInput) : renderInputs.push(renderInput);
+      // Maintain parent stack keyed by level to allow next nodes to find their parent.
+      parentStack[model.level] = renderInput;
+      parentStack.length = model.level + 1;
+      // Increment leaf index when encountering a leaf structure node.
+      if (model.isLeaf())
+        columnIndex++;
+    });
+    return renderInputs;
+  }
+  /**
+   * True when the provided structure model is the last left-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for left-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last left-pinned sibling.
+   */
+  static isLeftEndPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'left');
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided structure model is the first right-pinned sibling in its parent's children.
+   * Used to mark boundary nodes for right-pinned groups.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first right-pinned sibling.
+   */
+  static isRightStartPinned(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => child.pinned === 'right');
+    return siblings[0] === model;
+  }
+  /**
+   * True when the provided structure model is the last non-pinned sibling in its parent's children.
+   * Useful to handle the 'no-pinned-end' condition.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last non-pinned sibling.
+   */
+  static isNoPinnedEnd(model) {
+    const siblings = model.parent
+      .getOrderedChildren()
+      .filter((child) => !child.pinned);
+    return siblings[siblings.length - 1] === model;
+  }
+  /**
+   * True when the provided model is the first child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the first child.
+   */
+  static isParentStart(model) {
+    return model.parent.getOrderedChildren()[0] === model;
+  }
+  /**
+   * True when the provided model is the last child of its parent.
+   *
+   * @param {ColumnStructureModel} model - Structure model to check.
+   * @returns {boolean} True when model is the last child.
+   */
+  static isParentEnd(model) {
+    const parentChildren = model.parent.getOrderedChildren();
+    return parentChildren[parentChildren.length - 1] === model;
+  }
+  /**
+   * Compute a node's colSpan by iterating its subtree and counting the maximum number
+   * of nodes present at any single level (visual column span).
+   *
+   * @param {ColumnStructureModel} mode - ColumnStructureModel node to examine.
+   * @returns {number} Number of visual columns spanned by the node.
+   */
+  static getColSpan(mode) {
+    const children = mode.iterator();
+    const rowMap = {};
+    children.forEach((node) => {
+      rowMap[node.level] = (rowMap[node.level] || 0) + 1;
+    });
+    return Math.max(...Object.values(rowMap));
+  }
+  /**
+   * Return cached leaf render nodes for this subtree.
+   * Caches the result on first call and returns cached array on subsequent calls.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of leaf render input nodes.
+   */
+  getLeaves() {
+    if (this.leaves.length > 0) {
+      return this.leaves;
+    }
+    const leaves = this.iterator().filter((model) => model.isLeaf());
+    this.leaves = leaves;
+    return leaves;
+  }
+  /**
+   * Generic iterator that supports traversal modes ('dfs' currently implemented).
+   *
+   * @param {IteratorMode} [mode='dfs'] - Iterator mode ('dfs' | 'bfs').
+   * @returns {ColumnRenderInputModel[]} Traversal-ordered array of nodes.
+   */
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    // Future: implement BFS mode here.
+    return [];
+  }
+  /**
+   * Depth-first pre-order traversal of this node and its descendants.
+   * Caches the result for the 'dfs' mode to avoid repeated recursion.
+   *
+   * @returns {ColumnRenderInputModel[]} Array of nodes in DFS order (includes this node).
+   */
+  dfsIterator() {
+    if (this.iteratorCacheMap.has('dfs')) {
+      return this.iteratorCacheMap.get('dfs');
+    }
+    const localResult = [];
+    localResult.push(this);
+    if (this.children && this.children.length > 0) {
+      this.children.forEach((child) => {
+        localResult.push(...child.dfsIterator());
+      });
+    }
+    this.iteratorCacheMap.set('dfs', localResult);
+    return localResult;
+  }
+  /**
+   * True when this render node has no children (visual leaf).
+   *
+   * @returns {boolean} True when node is a leaf.
+   */
+  isLeaf() {
+    return !this.children || this.children.length === 0;
+  }
+}

package/dist/collection/components/vega-table/slimmers/controllers/dto/column-structure-model.js

@@ -0,0 +1,238 @@
+import { isVegaTableColumnGroupingModelType } from '../../../../../types/type-guard';
+/**
+ * Represents the hierarchical structure of table columns (including group columns).
+ *
+ * Responsibilities:
+ * - Build the tree from flat or grouped column configs (.from / .fromGroupColumns)
+ * - Provide traversal helpers (iterator / dfs) with caching
+ * - Provide utility checks (isLeaf, hasGroupColumn, hasPinnedColumn)
+ * - Produce leaf column configs for rendering (generateColumnConfigByLeaves)
+ * - Order root children by pinned type for rendering (orderChildrenByPinned)
+ */
+export class ColumnStructureModel {
+  /**
+   * Constructor for ColumnStructureModel.
+   *
+   * @param {string} key - Unique key for the column.
+   * @param {number} level - Row level of this column (root uses ROOT_LEVEL).
+   * @param {ColumnStructureModel} [parent] - Optional parent node.
+   * @param {string} [label] - Optional display label for the column.
+   * @param {VegaTablePinnedType} [pinned] - Optional pinned metadata ('left'|'right'|null).
+   */
+  constructor(key, level, parent, label, pinned) {
+    this.key = key;
+    this.level = level;
+    this.parent = parent;
+    this.label = label;
+    this.pinned = pinned;
+    this.leaves = [];
+    this.orderedChildren = [];
+    this.iteratorCacheMap = new Map();
+  }
+  /**
+   * Creates the root ColumnStructureModel from column configs.
+   *
+   * @param {VegaTableColumnConfig[]} columnsConfig - Array of column configs.
+   * @param {Nullable<VegaTableGroupColumnConfig[]>} groupColumnConfig - Optional grouping configuration.
+   * @returns {ColumnStructureModel} Root column structure model.
+   */
+  static from(columnsConfig, groupColumnConfig) {
+    const rootModel = new ColumnStructureModel(this.ROOT_KEY, ColumnStructureModel.ROOT_LEVEL);
+    if (groupColumnConfig) {
+      rootModel.children = this.fromGroupColumns(rootModel, groupColumnConfig);
+      return rootModel;
+    }
+    else if (columnsConfig) {
+      rootModel.children = columnsConfig.map((column) => new ColumnStructureModel(column.key || column.prop || column.label, 0, rootModel, null, column.pinned));
+      return rootModel;
+    }
+    else {
+      rootModel.children = [];
+      return rootModel;
+    }
+  }
+  /**
+   * Recursively creates ColumnStructureModel children from group column configs.
+   *
+   * @param {ColumnStructureModel} parent - Parent node for the created children.
+   * @param {VegaTableGroupColumnConfig[]} groupColumns - Array of group column configs.
+   * @param {number} level - Current row level.
+   * @returns {ColumnStructureModel[]} Array of child column structure models.
+   */
+  static fromGroupColumns(parent, groupColumns, level = 0) {
+    if (groupColumns && groupColumns.length > 0) {
+      return groupColumns.map((groupColumn) => {
+        if (isVegaTableColumnGroupingModelType(groupColumn)) {
+          const current = new ColumnStructureModel(groupColumn.key, level, parent, groupColumn.label, groupColumn.pinned);
+          current.children = this.fromGroupColumns(current, groupColumn.children, level + 1);
+          return current;
+        }
+        else {
+          return new ColumnStructureModel(groupColumn.key, level, parent);
+        }
+      });
+    }
+    return [];
+  }
+  /**
+   * Generates an array of VegaTableColumnConfig for all leaf columns.
+   *
+   * @param {VegaTableColumnConfig[]} columns - Array of all column configs.
+   * @returns {VegaTableColumnConfig[]} Array of configs for leaf columns.
+   */
+  generateColumnConfigByLeaves(columns) {
+    return this.getLeaves().map((leaf) => columns.find((column) => column.key === leaf.key || column.prop === leaf.key || column.label === leaf.key));
+  }
+  /**
+   * Compute the maximum depth (highest level value) under this node.
+   * This is useful to determine the number of header rows required for rendering.
+   *
+   * @returns {number} Maximum level found in the subtree (or 0 when empty).
+   */
+  getMaxDepth() {
+    const models = this.dfsIterator();
+    if (models.length === 0) {
+      return 0;
+    }
+    return Math.max(...models.map((model) => model.level)) + 1;
+  }
+  /**
+   * Checks if this subtree contains any group (non-leaf) columns.
+   *
+   * @returns {boolean} True if any descendant is a group column.
+   */
+  hasGroupColumn() {
+    return !!this.children.find((model) => !model.isLeaf());
+  }
+  /**
+   * Checks if this subtree contains any left pinned children.
+   *
+   * @returns {boolean} True if any immediate child has a pinned value.
+   */
+  hasLeftPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'left');
+  }
+  /**
+   * Checks if this subtree contains any right pinned children.
+   *
+   * @returns {boolean} True if any immediate child has a pinned value.
+   */
+  hasRightPinnedColumn() {
+    return !!this.children.find((model) => model.pinned === 'right');
+  }
+  /**
+   * Checks if this node is a leaf (no children).
+   *
+   * @returns {boolean} True when this node has no children.
+   */
+  isLeaf() {
+    return !this.children || this.children.length === 0;
+  }
+  /**
+   * Return an array of nodes for this subtree using the specified traversal mode.
+   *
+   * Currently only depth-first search ('dfs') is supported. The returned array is
+   * cached per-mode to avoid repeated traversal costs.
+   *
+   * @param {IteratorMode} mode - Traversal mode to use. Defaults to 'dfs'.
+   * @returns {ColumnStructureModel[]} Array of ColumnStructureModel nodes in traversal order.
+   */
+  iterator(mode = 'dfs') {
+    if (mode === 'dfs') {
+      return this.dfsIterator();
+    }
+    return [];
+  }
+  /**
+   * Gets all leaf nodes in the subtree, with caching.
+   *
+   * Subsequent calls return the cached array until the underlying model is rebuilt.
+   *
+   * @returns {ColumnStructureModel[]} Array of leaf column models.
+   */
+  getLeaves() {
+    if (this.leaves.length > 0) {
+      return this.leaves;
+    }
+    const leaves = this.dfsIterator().filter((model) => model.isLeaf());
+    this.leaves = leaves;
+    return leaves;
+  }
+  /**
+   * For root nodes, returns children ordered by pinned type (left, none, right).
+   * For non-root nodes, returns children in their natural order.
+   *
+   * @returns {ColumnStructureModel[]} Array of child column models.
+   */
+  getOrderedChildren() {
+    if (!this.isRoot())
+      return this.children;
+    return this.orderedChildren;
+  }
+  /**
+   * Orders root children by pinned type (left, none, right) and caches the result.
+   *
+   * For non-root nodes this method returns children in their natural order.
+   *
+   * @returns {ColumnStructureModel[]} Array of ordered child column models.
+   */
+  orderChildrenByPinned() {
+    if (!this.isRoot())
+      return this.children;
+    if (this.orderedChildren.length > 0) {
+      return this.orderedChildren;
+    }
+    const leftPinned = [];
+    const noPinned = [];
+    const rightPinned = [];
+    this.children.forEach((child) => {
+      if (child.pinned === 'left') {
+        leftPinned.push(child);
+      }
+      else if (child.pinned === 'right') {
+        rightPinned.push(child);
+      }
+      else {
+        noPinned.push(child);
+      }
+    });
+    const children = [...leftPinned, ...noPinned, ...rightPinned];
+    this.orderedChildren = children;
+    return children;
+  }
+  /**
+   * Checks if this node is the root node.
+   *
+   * @returns {boolean} True if root node, false otherwise.
+   */
+  isRoot() {
+    return this.level === ColumnStructureModel.ROOT_LEVEL;
+  }
+  /**
+   * Performs a depth-first traversal of the column structure.
+   *
+   * The traversal respects root-child pinned ordering (left/no/right) for the root node.
+   * Results are cached per-node to avoid repeated recursion costs.
+   *
+   * @returns {ColumnStructureModel[]} Array of all nodes in DFS order.
+   */
+  dfsIterator() {
+    if (this.iteratorCacheMap.has('dfs')) {
+      return this.iteratorCacheMap.get('dfs');
+    }
+    const localResult = [];
+    const children = this.orderChildrenByPinned();
+    if (!this.isRoot()) {
+      localResult.push(this);
+    }
+    if (children && children.length > 0) {
+      children.forEach((child) => {
+        localResult.push(...child.dfsIterator());
+      });
+    }
+    this.iteratorCacheMap.set('dfs', localResult);
+    return localResult;
+  }
+}
+ColumnStructureModel.ROOT_LEVEL = -1;
+ColumnStructureModel.ROOT_KEY = '#root-model#';

package/dist/collection/components/vega-table/slimmers/controllers/dto/test/column-render-input-model.test.js

@@ -0,0 +1,83 @@
+import { ColumnStructureModel } from '../column-structure-model';
+import { ColumnRenderInputModel } from '../column-render-input-model';
+describe('ColumnRenderInputModel', () => {
+  const columns = [
+    { key: 'a', label: 'A' },
+    { label: 'B' },
+    { prop: 'c', label: 'C' },
+  ];
+  const groupConfig = [
+    {
+      key: 'a',
+      label: 'Group A',
+      pinned: 'left',
+      children: [{ key: 'b', label: 'B', children: [{ key: 'c' }, { key: 'd' }] }],
+    },
+    { key: 'e' },
+    { key: 'h', label: 'Group H', pinned: 'right', children: [{ key: 'i' }] },
+  ];
+  it('normal columns', () => {
+    const root = ColumnStructureModel.from(columns, null);
+    const renders = ColumnRenderInputModel.from(root);
+    expect(renders.length).toBe(3);
+    expect(renders).toMatchSnapshot();
+  });
+  it('grouped columns', () => {
+    const root = ColumnStructureModel.from(null, groupConfig);
+    const renders = ColumnRenderInputModel.from(root);
+    expect(renders.length).toBe(3);
+    expect(renders).toMatchSnapshot();
+  });
+  it('getLeaves/iterator in columns', () => {
+    const root = ColumnStructureModel.from(columns, null);
+    const renders = ColumnRenderInputModel.from(root);
+    const leaves = renders.flatMap((model) => model.getLeaves());
+    expect(leaves.map((l) => l.key)).toEqual(['a', 'B', 'c']);
+    const iterator = renders.flatMap((model) => model.iterator());
+    expect(iterator.map((l) => l.key)).toEqual(['a', 'B', 'c']);
+  });
+  it('getLeaves/iterator in groupColumns', () => {
+    const root = ColumnStructureModel.from(null, groupConfig);
+    const renders = ColumnRenderInputModel.from(root);
+    const leaves = renders.flatMap((model) => model.getLeaves());
+    expect(leaves.map((l) => l.key)).toEqual(['c', 'd', 'e', 'i']);
+    const iterator = renders.flatMap((model) => model.iterator());
+    expect(iterator.map((l) => l.key)).toEqual([
+      'a',
+      'b',
+      'c',
+      'd',
+      'e',
+      'h',
+      'i',
+    ]);
+  });
+  it('leaves cache', () => {
+    const root = ColumnStructureModel.from(columns, null);
+    const renders = ColumnRenderInputModel.from(root);
+    const first = renders[0].getLeaves();
+    const second = renders[0].getLeaves();
+    expect(first).toBe(second);
+  });
+  it('iterator cache', () => {
+    const root = ColumnStructureModel.from(columns, null);
+    const renders = ColumnRenderInputModel.from(root);
+    const first = renders[0].iterator();
+    const second = renders[0].iterator();
+    expect(first).toBe(second);
+  });
+  it('empty group columns and columns', () => {
+    const root = ColumnStructureModel.from(null, null);
+    const renders = ColumnRenderInputModel.from(root);
+    expect(renders).toEqual([]);
+    const leaves = renders.flatMap((model) => model.getLeaves());
+    const iterator = renders.flatMap((model) => model.iterator());
+    expect(leaves).toEqual([]);
+    expect(iterator).toEqual([]);
+  });
+  it('call iterator with a not supported type', () => {
+    const root = ColumnStructureModel.from(columns, null);
+    const renders = ColumnRenderInputModel.from(root);
+    expect(renders[0].iterator('not-support')).toEqual([]);
+  });
+});