feat(Pagination): add qa attributes (#1438)

gravity-ui · Mar 21, 2024 · 785079a · 785079a
1 parent db09f93
commit 785079a
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 5 deletions.
diff --git a/src/components/Pagination/components/PaginationButton/PaginationButton.tsx b/src/components/Pagination/components/PaginationButton/PaginationButton.tsx
@@ -4,6 +4,7 @@ import {ChevronLeft, ChevronRight, ChevronsLeft} from '@gravity-ui/icons';
 
 import {Button} from '../../../Button';
 import {Icon} from '../../../Icon';
+import {PaginationQa} from '../../constants';
 import i18n from '../../i18n';
 import type {ButtonItem, PaginationProps, PaginationSize} from '../../types';
 
@@ -39,6 +40,7 @@ export const PaginationButton = ({
                     onClick={() => onUpdate(1, pageSize)}
                     title={compact ? i18n('button_first') : undefined}
                     disabled={disabled}
+                    qa={PaginationQa.PaginationButtonFirst}
                 >
                     <Icon data={ChevronsLeft} size="16" />
                     {compact ? undefined : i18n('button_first')}
@@ -54,6 +56,7 @@ export const PaginationButton = ({
                     onClick={() => onUpdate(page - 1, pageSize)}
                     title={compact ? i18n('button_previous') : undefined}
                     disabled={disabled}
+                    qa={PaginationQa.PaginationButtonPrevious}
                 >
                     <Icon data={ChevronLeft} size="16" />
                     {compact ? undefined : i18n('button_previous')}
@@ -69,6 +72,7 @@ export const PaginationButton = ({
                     onClick={() => onUpdate(page + 1, pageSize)}
                     title={compact ? i18n('button_next') : undefined}
                     disabled={disabled}
+                    qa={PaginationQa.PaginationButtonNext}
                 >
                     <Icon data={ChevronRight} size="16" />
                     {compact ? undefined : i18n('button_next')}

diff --git a/src/components/Pagination/components/PaginationInput/PaginationInput.tsx b/src/components/Pagination/components/PaginationInput/PaginationInput.tsx
@@ -4,6 +4,7 @@ import {KeyCode} from '../../../../constants';
 import {TextInput} from '../../../controls';
 import type {TextInputProps} from '../../../controls';
 import {block} from '../../../utils/cn';
+import {PaginationQa} from '../../constants';
 import i18n from '../../i18n';
 import type {PaginationProps, PaginationSize} from '../../types';
 
@@ -67,6 +68,7 @@ export const PaginationInput = ({numberOfPages, size, pageSize, onUpdate, classN
             onUpdate={handleUpdateValue}
             onBlur={handleBlur}
             onKeyUp={handleKeyUp}
+            qa={PaginationQa.PaginationInput}
         />
     );
 };
diff --git a/src/components/Pagination/components/PaginationPage/PaginationPage.tsx b/src/components/Pagination/components/PaginationPage/PaginationPage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Button} from '../../../Button';
 import {block} from '../../../utils/cn';
+import {PaginationQa} from '../../constants';
 import type {PageItem, PaginationProps, PaginationSize} from '../../types';
 
 import './PaginationPage.scss';
@@ -17,8 +18,13 @@ type Props = {
 };
 
 export const PaginationPage = ({item, size, pageSize, className, onUpdate}: Props) => {
+    const qa = `${PaginationQa.PaginationPage}-${item.page}`;
     if (item.simple) {
-        return <div className={b('simple', {size}, className)}>{item.page}</div>;
+        return (
+            <div data-qa={qa} className={b('simple', {size}, className)}>
+                {item.page}
+            </div>
+        );
     }
 
     const view = item.current ? 'normal' : 'flat';
@@ -31,6 +37,7 @@ export const PaginationPage = ({item, size, pageSize, className, onUpdate}: Prop
             selected={item.current}
             className={className}
             onClick={() => onUpdate(item.page, pageSize)}
+            qa={qa}
         >
             {item.page}
         </Button>

diff --git a/src/components/Pagination/components/PaginationPageSizer/PaginationPageSizer.tsx b/src/components/Pagination/components/PaginationPageSizer/PaginationPageSizer.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
 import {Select} from '../../../Select';
+import type {SelectOption} from '../../../Select';
+import {PaginationQa} from '../../constants';
 import type {PaginationProps, PaginationSize} from '../../types';
 import {getNumberOfPages} from '../../utils';
 
@@ -23,10 +25,13 @@ export const PaginationPageSizer = ({
     total,
     className,
 }: Props) => {
-    const options = pageSizeOptions.map((pageSizeOption) => ({
-        value: String(pageSizeOption),
-        content: pageSizeOption,
-    }));
+    const options = pageSizeOptions.map(
+        (pageSizeOption): SelectOption => ({
+            value: String(pageSizeOption),
+            content: pageSizeOption,
+            qa: `${PaginationQa.PaginationPageSizerOption}-${pageSizeOption}`,
+        }),
+    );
 
     const handleUpdate = ([newPageSizeOnUpdate]: string[]) => {
         const newPageSize = Number(newPageSizeOnUpdate);
@@ -46,6 +51,7 @@ export const PaginationPageSizer = ({
 
     return (
         <Select
+            qa={PaginationQa.PaginationPageSizer}
             className={className}
             size={size}
             onUpdate={handleUpdate}

diff --git a/src/components/Pagination/constants.ts b/src/components/Pagination/constants.ts
@@ -0,0 +1,9 @@
+export const PaginationQa = {
+    PaginationPageSizer: 'pagination-page-sizer',
+    PaginationPageSizerOption: 'pagination-page-sizer-option',
+    PaginationInput: 'pagination-input',
+    PaginationPage: 'pagination-page',
+    PaginationButtonFirst: 'pagination-button-first',
+    PaginationButtonPrevious: 'pagination-button-previous',
+    PaginationButtonNext: 'pagination-button-next',
+};