feat(form-control): add test id to inner elements (#1286)

* feat(form-control): add test id to inner elements * feat(form-control): add test id to inner elements
core-ds · Jul 26, 2024 · 89a3291 · 89a3291
1 parent 72d9eb8
commit 89a3291
Show file tree

Hide file tree

Showing 10 changed files with 65 additions and 4 deletions.
diff --git a/.changeset/quick-oranges-train.md b/.changeset/quick-oranges-train.md
@@ -0,0 +1,6 @@
+---
+'@alfalab/core-components-form-control': patch
+'@alfalab/core-components-plate': patch
+---
+
+Добавлены data-test-id для внутренних элементов компонентов Plate и FormControl
diff --git a/packages/form-control/src/Component.test.tsx b/packages/form-control/src/Component.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { cleanup, render } from '@testing-library/react';
 import { getFormControlTestIds } from './utils';
 
 import { FormControlDesktop as FormControl } from './desktop';
@@ -83,6 +83,22 @@ describe('FormControl', () => {
         );
 
         expect(getByTestIdHint(testIds.hint)).toBeInTheDocument();
+
+        cleanup();
+
+        const { getByTestId: getByTestIdOuterLabel } = render(
+            <FormControl labelView='outer' label='test-label' dataTestId={dti} />,
+        );
+
+        expect(getByTestIdOuterLabel(testIds.label)).toBeInTheDocument();
+
+        cleanup();
+
+        const { getByTestId: getByTestIdInnerLabel } = render(
+            <FormControl labelView='inner' label='test-label' dataTestId={dti} />,
+        );
+
+        expect(getByTestIdInnerLabel(testIds.label)).toBeInTheDocument();
     });
 
     describe('Classes tests', () => {

diff --git a/packages/form-control/src/components/base-form-control/Component.tsx b/packages/form-control/src/components/base-form-control/Component.tsx
@@ -214,6 +214,7 @@ export const BaseFormControl = React.forwardRef<HTMLDivElement, BaseFormControlP
             >
                 {label && labelView === 'outer' && (
                     <span
+                        data-test-id={getDataTestId(dataTestId, 'label')}
                         className={cn(
                             commonStyles.above,
                             styles.above,
@@ -276,7 +277,12 @@ export const BaseFormControl = React.forwardRef<HTMLDivElement, BaseFormControlP
                                         labelClassName,
                                     )}
                                 >
-                                    <span className={commonStyles.labelInner}>{label}</span>
+                                    <span
+                                        data-test-id={getDataTestId(dataTestId, 'label')}
+                                        className={commonStyles.labelInner}
+                                    >
+                                        {label}
+                                    </span>
                                 </div>
                             </React.Fragment>
                         )}

diff --git a/packages/form-control/src/docs/development.mdx b/packages/form-control/src/docs/development.mdx
@@ -30,6 +30,7 @@ import { FormControlDesktop } from '@alfalab/core-components/form-control/deskto
     rightAddons: `${dataTestId}-right-addons`,
     error: `${dataTestId}-error-message`,
     hint: `${dataTestId}-hint`,
+    label: `${dataTestId}-label`,
 };
 ```
 

diff --git a/packages/form-control/src/utils.ts b/packages/form-control/src/utils.ts
@@ -8,5 +8,6 @@ export function getFormControlTestIds(dataTestId: string) {
         rightAddons: getDataTestId(dataTestId, 'right-addons'),
         error: getDataTestId(dataTestId, 'error-message'),
         hint: getDataTestId(dataTestId, 'hint'),
+        label: getDataTestId(dataTestId, 'label'),
     };
 }
diff --git a/packages/plate/src/Component.test.tsx b/packages/plate/src/Component.test.tsx
@@ -5,6 +5,7 @@ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon'
 import userEvent from '@testing-library/user-event';
 import { PlateDesktop as Plate, PlateDesktopProps as PlateProps } from './desktop';
 import { ButtonDesktop as Button } from '@alfalab/core-components-button/desktop';
+import { getPlateTestIds } from './utils';
 
 describe('Plate', () => {
     Object.defineProperty(window, 'matchMedia', {
@@ -43,9 +44,13 @@ describe('Plate', () => {
 
     it('should set `data-test-id` attribute', () => {
         const dataTestId = 'test-id';
-        const { getByTestId } = render(<Plate dataTestId={dataTestId} />);
+        const { getByTestId } = render(<Plate dataTestId={dataTestId} title='Test title' />);
 
-        expect(getByTestId(dataTestId).tagName).toBe('DIV');
+        const testIds = getPlateTestIds(dataTestId);
+
+        expect(getByTestId(testIds.wrapper)).toBeInTheDocument();
+        expect(getByTestId(testIds.wrapper).tagName).toBe('DIV');
+        expect(getByTestId(testIds.title)).toBeInTheDocument();
     });
 
     it('should render buttons size=32, first view=secondary, others view=link', () => {

diff --git a/packages/plate/src/components/base-plate/Component.tsx b/packages/plate/src/components/base-plate/Component.tsx
@@ -13,6 +13,7 @@ import cn from 'classnames';
 
 import { ButtonProps } from '@alfalab/core-components-button';
 import { IconButton } from '@alfalab/core-components-icon-button';
+import { getDataTestId } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 import { ChevronDownMIcon } from '@alfalab/icons-glyph/ChevronDownMIcon';
 import { CrossMIcon } from '@alfalab/icons-glyph/CrossMIcon';
@@ -304,6 +305,7 @@ export const BasePlate = forwardRef<HTMLDivElement, BasePlateProps>(
                     >
                         {title && (
                             <div
+                                data-test-id={getDataTestId(dataTestId, 'title')}
                                 className={cn(commonStyles[titleView], {
                                     [styles[titleView]]: Boolean(styles[titleView]),
                                 })}

diff --git a/packages/plate/src/docs/development.mdx b/packages/plate/src/docs/development.mdx
@@ -21,3 +21,18 @@ import { PlateDesktop } from '@alfalab/core-components/plate/desktop';
 ## Переменные
 
 <CssVars css={styles} />
+
+## Использование dataTestId
+
+В компоненте используются модификаторы для `dataTestId`.  
+Для удобного поиска элементов можно воспользоваться функцией `getPlateTestIds`.  
+Импорт из `@alfalab/core-components/plate/shared`.
+
+Функция возвращает объект:
+
+```jsx
+{
+    wrapper: dataTestId,
+    title: `${dataTestId}-title`,
+};
+```
diff --git a/packages/plate/src/shared/index.ts b/packages/plate/src/shared/index.ts
@@ -0,0 +1 @@
+export { getPlateTestIds } from '../utils';
diff --git a/packages/plate/src/utils.ts b/packages/plate/src/utils.ts
@@ -0,0 +1,8 @@
+import { getDataTestId } from '@alfalab/core-components-shared';
+
+export function getPlateTestIds(dataTestId: string) {
+    return {
+        wrapper: dataTestId,
+        title: getDataTestId(dataTestId, 'title'),
+    };
+}