feat(ModalRoot): add modalMaskTestId (#6052)

VKCOM · Oct 26, 2023 · d1f16fc · d1f16fc
1 parent 8b33cae
commit d1f16fc
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { baselineComponent, mountTest, runAllTimers } from '../../testing/utils';
 import { ModalCard } from '../ModalCard/ModalCard';
@@ -170,4 +170,13 @@ describe.each([
 
     expect(document.querySelector('.vkui--disable-overscroll-behavior')).toBeFalsy();
   });
+
+  it('modalOverlayTestId for ModalRoot', () => {
+    render(
+      <ModalRoot activeModal="page" modalOverlayTestId="modal-mask">
+        <ModalPage id="page" />
+      </ModalRoot>,
+    );
+    expect(screen.queryByTestId('modal-mask')).toBeTruthy();
+  });
 });
diff --git a/packages/vkui/src/components/ModalRoot/ModalRoot.tsx b/packages/vkui/src/components/ModalRoot/ModalRoot.tsx
@@ -554,7 +554,7 @@ class ModalRootTouchComponent extends React.Component<
   }
 
   render() {
-    const { activeModal, exitingModal, enteringModal } = this.props;
+    const { activeModal, exitingModal, enteringModal, modalOverlayTestId } = this.props;
     const { touchDown, dragging } = this.state;
 
     if (!activeModal && !exitingModal) {
@@ -579,6 +579,7 @@ class ModalRootTouchComponent extends React.Component<
             onScroll={this.onScroll}
           >
             <div
+              data-testid={modalOverlayTestId}
               className={styles['ModalRoot__mask']}
               onClick={this.props.onExit}
               ref={this.maskElementRef}

diff --git a/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx b/packages/vkui/src/components/ModalRoot/ModalRootDesktop.tsx
@@ -24,6 +24,7 @@ export const ModalRootDesktop = ({
   onOpened,
   onClose,
   onClosed,
+  modalOverlayTestId,
 }: ModalRootWithDOMProps) => {
   const maskElementRef = React.useRef<HTMLDivElement>(null);
   const maskAnimationFrame = React.useRef<number | undefined>(undefined);
@@ -189,7 +190,12 @@ export const ModalRootDesktop = ({
           styles['ModalRoot--desktop'],
         )}
       >
-        <div className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />
+        <div
+          data-testid={modalOverlayTestId}
+          className={styles['ModalRoot__mask']}
+          ref={maskElementRef}
+          onClick={onExit}
+        />
         <div className={styles['ModalRoot__viewport']}>
           {modals.map((Modal: React.ReactElement) => {
             const modalId = getNavId(Modal.props, warn);

diff --git a/packages/vkui/src/components/ModalRoot/types.ts b/packages/vkui/src/components/ModalRoot/types.ts
@@ -94,6 +94,11 @@ export interface ModalRootProps {
    * Будет вызвано при окончательном закрытии активной модалки с её id
    */
   onClosed?(modalId: string): void;
+
+  /**
+   * `data-testid` для маски
+   */
+  modalOverlayTestId?: string;
 }
 
 export interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {