feat(Gallery): add testid's to elements and refactor (#8015)

* feat(Gallery): add testid's to elements and refactor

* fix(Gallery): reslove conflicts

* doc(Gallery): fix JSDocs

* fix(Gallery): remove object

* fix(Gallery): fix formatting

packages/vkui/src/components/BaseGallery/BaseGallery.tsx

@@ -8,7 +8,9 @@ import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
 import { useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { RootComponent } from '../RootComponent/RootComponent';
-import { type CustomTouchEvent, Touch } from '../Touch/Touch';
+import { type CustomTouchEvent } from '../Touch/Touch';
+import { Bullets } from './Bullets';
+import { GalleryViewPort } from './GalleryViewPort';
 import { ScrollArrows } from './ScrollArrows';
 import { calcMax, calcMin } from './helpers';
 import type { BaseGalleryProps, GallerySlidesState, LayoutState, ShiftingState } from './types';
@@ -34,10 +36,6 @@ const SHIFT_DEFAULT_STATE = {
   indent: 0,
 };
 
-const stylesBullets = {
-  dark: styles.bulletsDark,
-  light: styles.bulletsLight,
-};
 export const BaseGallery = ({
   bullets = false,
   getRootRef,
@@ -55,6 +53,10 @@ export const BaseGallery = ({
   getRef,
   arrowSize,
   arrowAreaHeight,
+  slideTestId,
+  bulletTestId,
+  nextArrowTestId,
+  prevArrowTestId,
   ...restProps
 }: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
@@ -331,33 +333,26 @@ export const BaseGallery = ({
       )}
       getRootRef={rootRef}
     >
-      <Touch
-        className={styles.viewport}
-        onStartX={onStart}
+      <GalleryViewPort
+        slideWidth={slideWidth}
+        slideTestId={slideTestId}
+        onStart={onStart}
         onMoveX={onMoveX}
         onEnd={onEnd}
-        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}
-        getRootRef={viewportRef}
-        noSlideClick
+        viewportRef={viewportRef}
+        layerStyle={layerStyle}
+        setSlideRef={setSlideRef}
       >
-        <div className={styles.layer} style={layerStyle}>
-          {React.Children.map(children, (item: React.ReactNode, i: number) => (
-            <div className={styles.slide} key={`slide-${i}`} ref={(el) => setSlideRef(el, i)}>
-              {item}
-            </div>
-          ))}
-        </div>
-      </Touch>
+        {children}
+      </GalleryViewPort>
 
       {bullets && (
-        <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>
-          {React.Children.map(children, (_item: React.ReactNode, index: number) => (
-            <div
-              className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}
-              key={index}
-            />
-          ))}
-        </div>
+        <Bullets
+          bullets={bullets}
+          slideIndex={slideIndex}
+          count={React.Children.count(children)}
+          bulletTestId={bulletTestId}
+        />
       )}
       <ScrollArrows
         hasPointer={hasPointer}
@@ -368,6 +363,8 @@ export const BaseGallery = ({
         showArrows={showArrows}
         arrowSize={arrowSize}
         arrowAreaHeight={arrowAreaHeight}
+        nextArrowTestId={nextArrowTestId}
+        prevArrowTestId={prevArrowTestId}
       />
     </RootComponent>
   );

packages/vkui/src/components/BaseGallery/Bullets.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { type BaseGalleryProps } from './types';
+import styles from './BaseGallery.module.css';
+
+export interface BulletsTestIds {
+  /**
+   * Передает атрибут `data-testid` для bullets
+   */
+  bulletTestId?: (index: number, active: boolean) => string;
+}
+
+interface BulletsProps extends BulletsTestIds {
+  bullets: Exclude<BaseGalleryProps['bullets'], false | undefined>;
+  slideIndex: number;
+  count: number;
+}
+
+const stylesBullets = {
+  dark: styles.bulletsDark,
+  light: styles.bulletsLight,
+};
+
+export const Bullets: React.FC<BulletsProps> = ({ bullets, slideIndex, count, bulletTestId }) => {
+  return (
+    <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>
+      {Array.from({ length: count }).map((_, index) => (
+        <div
+          className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}
+          data-testid={bulletTestId?.(index, index === slideIndex)}
+          key={index}
+        />
+      ))}
+    </div>
+  );
+};

packages/vkui/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -10,7 +10,9 @@ import { useDOM } from '../../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
 import { warnOnce } from '../../../lib/warnOnce';
 import { RootComponent } from '../../RootComponent/RootComponent';
-import { type CustomTouchEvent, Touch } from '../../Touch/Touch';
+import { type CustomTouchEvent } from '../../Touch/Touch';
+import { Bullets } from '../Bullets';
+import { GalleryViewPort } from '../GalleryViewPort';
 import { ScrollArrows } from '../ScrollArrows';
 import { type BaseGalleryProps, type GallerySlidesState } from '../types';
 import {
@@ -24,11 +26,6 @@ import { useSlideAnimation } from './hooks';
 import type { ControlElementsState, SlidesManagerState } from './types';
 import styles from '../BaseGallery.module.css';
 
-const stylesBullets = {
-  dark: styles.bulletsDark,
-  light: styles.bulletsLight,
-};
-
 const warn = warnOnce('Gallery');
 
 export const CarouselBase = ({
@@ -48,6 +45,10 @@ export const CarouselBase = ({
   getRef,
   arrowSize,
   arrowAreaHeight,
+  slideTestId,
+  bulletTestId,
+  nextArrowTestId,
+  prevArrowTestId,
   ...restProps
 }: BaseGalleryProps): React.ReactNode => {
   const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
@@ -350,33 +351,26 @@ export const CarouselBase = ({
       )}
       getRootRef={rootRef}
     >
-      <Touch
-        className={styles.viewport}
-        onStartX={onStart}
+      <GalleryViewPort
+        slideWidth={slideWidth}
+        slideTestId={slideTestId}
+        onStart={onStart}
         onMoveX={onMoveX}
         onEnd={onEnd}
-        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}
-        getRootRef={viewportRef}
-        noSlideClick
+        viewportRef={viewportRef}
+        layerRef={layerRef}
+        setSlideRef={setSlideRef}
       >
-        <div className={styles.layer} ref={layerRef}>
-          {React.Children.map(children, (item: React.ReactNode, i: number) => (
-            <div className={styles.slide} key={`slide-${i}`} ref={(el) => setSlideRef(el, i)}>
-              {item}
-            </div>
-          ))}
-        </div>
-      </Touch>
+        {children}
+      </GalleryViewPort>
 
       {bullets && (
-        <div aria-hidden className={classNames(styles.bullets, stylesBullets[bullets])}>
-          {React.Children.map(children, (_item: React.ReactNode, index: number) => (
-            <div
-              className={classNames(styles.bullet, index === slideIndex && styles.bulletActive)}
-              key={index}
-            />
-          ))}
-        </div>
+        <Bullets
+          bullets={bullets}
+          slideIndex={slideIndex}
+          count={React.Children.count(children)}
+          bulletTestId={bulletTestId}
+        />
       )}
       <ScrollArrows
         hasPointer={hasPointer}
@@ -387,6 +381,8 @@ export const CarouselBase = ({
         showArrows={showArrows}
         arrowSize={arrowSize}
         arrowAreaHeight={arrowAreaHeight}
+        prevArrowTestId={prevArrowTestId}
+        nextArrowTestId={nextArrowTestId}
       />
     </RootComponent>
   );

packages/vkui/src/components/BaseGallery/GalleryViewPort.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import * as React from 'react';
+import { type HasChildren } from '../../types';
+import { type CustomTouchEvent, Touch } from '../Touch/Touch';
+import { type BaseGalleryProps } from './types';
+import styles from './BaseGallery.module.css';
+
+type GalleryViewPortProps = Pick<BaseGalleryProps, 'slideWidth' | 'slideTestId'> &
+  HasChildren & {
+    onStart: (e: CustomTouchEvent) => void;
+    onMoveX: (e: CustomTouchEvent) => void;
+    onEnd: (e: CustomTouchEvent) => void;
+    viewportRef: React.Ref<HTMLElement>;
+    setSlideRef: (slideRef: HTMLDivElement | null, slideIndex: number) => void;
+    layerRef?: React.Ref<HTMLDivElement>;
+    layerStyle?: React.CSSProperties;
+  };
+
+export const GalleryViewPort: React.FC<GalleryViewPortProps> = ({
+  slideTestId,
+  slideWidth,
+  onStart,
+  onMoveX,
+  onEnd,
+  viewportRef,
+  layerRef,
+  layerStyle,
+  children,
+  setSlideRef,
+}) => {
+  return (
+    <Touch
+      className={styles.viewport}
+      onStartX={onStart}
+      onMoveX={onMoveX}
+      onEnd={onEnd}
+      style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}
+      getRootRef={viewportRef}
+      noSlideClick
+    >
+      <div className={styles.layer} ref={layerRef} style={layerStyle}>
+        {React.Children.map(children, (item: React.ReactNode, i: number) => (
+          <div
+            className={styles.slide}
+            key={`slide-${i}`}
+            data-testid={slideTestId?.(i)}
+            ref={(el) => setSlideRef(el, i)}
+          >
+            {item}
+          </div>
+        ))}
+      </div>
+    </Touch>
+  );
+};

packages/vkui/src/components/BaseGallery/ScrollArrows.tsx

@@ -22,8 +22,20 @@ export const getArrowClassName = (
   );
 };
 
+export interface ScrollArrowsTestIds {
+  /**
+   * Передает атрибут `data-testid` для кнопки перехода к следующему слайду
+   */
+  nextArrowTestId?: string;
+  /**
+   * Передает атрибут `data-testid` для кнопки перехода к предыдущему слайду
+   */
+  prevArrowTestId?: string;
+}
+
 interface ScrollArrowsProps
-  extends Pick<BaseGalleryProps, 'showArrows' | 'arrowSize' | 'arrowAreaHeight'> {
+  extends Pick<BaseGalleryProps, 'showArrows' | 'arrowSize' | 'arrowAreaHeight'>,
+    ScrollArrowsTestIds {
   hasPointer?: boolean;
   canSlideLeft: boolean;
   canSlideRight: boolean;
@@ -40,6 +52,8 @@ export const ScrollArrows: React.FC<ScrollArrowsProps> = ({
   showArrows = false,
   arrowSize = 'm',
   arrowAreaHeight = 'stretch',
+  nextArrowTestId,
+  prevArrowTestId,
 }) => {
   return showArrows && hasPointer ? (
     <>
@@ -49,6 +63,7 @@ export const ScrollArrows: React.FC<ScrollArrowsProps> = ({
           direction="left"
           onClick={onSlideLeft}
           size={arrowSize}
+          data-testid={prevArrowTestId}
         />
       )}
       {canSlideRight && (
@@ -57,6 +72,7 @@ export const ScrollArrows: React.FC<ScrollArrowsProps> = ({
           direction="right"
           onClick={onSlideRight}
           size={arrowSize}
+          data-testid={nextArrowTestId}
         />
       )}
     </>

packages/vkui/src/components/BaseGallery/types.ts

@@ -2,6 +2,8 @@ import type * as React from 'react';
 import type { HasAlign, HasRef, HTMLAttributesWithRootRef } from '../../types';
 import type { ScrollArrowProps } from '../ScrollArrow/ScrollArrow';
 import type { CustomTouchEvent, CustomTouchEventHandler } from '../Touch/Touch';
+import { type BulletsTestIds } from './Bullets';
+import { type ScrollArrowsTestIds } from './ScrollArrows';
 
 export interface GallerySlidesState {
   coordX: number;
@@ -28,7 +30,9 @@ export interface LayoutState {
 export interface BaseGalleryProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange' | 'onDragStart' | 'onDragEnd'>,
     HasAlign,
-    HasRef<HTMLElement> {
+    HasRef<HTMLElement>,
+    BulletsTestIds,
+    ScrollArrowsTestIds {
   slideWidth?: string | number;
   slideIndex?: number;
   onDragStart?: CustomTouchEventHandler;
@@ -62,4 +66,8 @@ export interface BaseGalleryProps
    * Текст для кнопки-стрелки вправо (вперед). Делает ее доступной для ассистивных технологий
    */
   arrowNextLabel?: string;
+  /**
+   * Передает атрибут `data-testid` для слайда
+   */
+  slideTestId?: (index: number) => string;
 }