feat: support data-qa attribute for aside and menu items (#241)

gravity-ui · May 20, 2024 · a5e9df0 · a5e9df0
1 parent d06aeb5
commit a5e9df0
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 8 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx b/src/components/AsideHeader/__stories__/AsideHeader.stories.tsx
@@ -113,6 +113,7 @@ const AdvancedUsageTemplate: StoryFn = (args) => {
                     'aria-label': 'Service',
                 }}
                 onChangeCompact={setCompact}
+                qa={'pl-aside'}
                 {...args}
             />
 
@@ -166,6 +167,7 @@ const FallbackTemplate: StoryFn<typeof fallbackArgs> = ({
             <AsideFallback
                 headerDecoration={headerDecoration}
                 subheaderItemsCount={subheaderItemsCount}
+                qa="pl-aside-fallback"
             />
 
             <PageLayout.Content>

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -97,6 +97,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
             </Modal>
             <AsideHeader
                 ref={ref}
+                qa={'ah-aside'}
                 logo={{
                     text: 'Service',
                     icon: logoIcon,
@@ -147,6 +148,7 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                         item: {
                             id: 'search',
                             title: 'Search',
+                            qa: 'subheader-item-search',
                             icon: Magnifier,
                             current: visiblePanel === Panel.Search,
                             onItemClick: () =>
@@ -169,6 +171,8 @@ export const AsideHeaderShowcase: React.FC<AsideHeaderShowcaseProps> = ({
                                 id: 'infra',
                                 icon: Gear,
                                 current: popupVisible,
+                                qa: 'footer-item-gear',
+                                iconQa: 'footer-item-icon-gear',
                                 title: (
                                     <div className={b('infra-text')}>
                                         <span className={b('infra-label')}>Minor issue</span>

diff --git a/src/components/AsideHeader/__stories__/moc.tsx b/src/components/AsideHeader/__stories__/moc.tsx
@@ -20,6 +20,8 @@ export const menuItemsShowcase: MenuItem[] = [
         id: 'overview',
         title: 'Overview',
         icon: Gear,
+        qa: 'menu-item-gear',
+        iconQa: 'menu-item-icon-gear',
     },
     {
         id: 'operations',

diff --git a/src/components/AsideHeader/components/FirstPanel.tsx b/src/components/AsideHeader/components/FirstPanel.tsx
@@ -25,6 +25,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
         customBackgroundClassName,
         className,
         hideCollapseButton,
+        qa,
     } = useAsideHeaderInnerContext();
     const visibleMenuItems = useVisibleMenuItems();
 
@@ -36,7 +37,7 @@ export const FirstPanel = React.forwardRef<HTMLDivElement>((_props, ref) => {
 
     return (
         <React.Fragment>
-            <div className={b('aside', className)} style={{width: size}}>
+            <div className={b('aside', className)} style={{width: size}} data-qa={qa}>
                 <div className={b('aside-popup-anchor')} ref={asideRef} />
 
                 <div className={b('aside-content', {['with-decoration']: headerDecoration})}>

diff --git a/src/components/AsideHeader/components/PageLayout/AsideFallback.tsx b/src/components/AsideHeader/components/PageLayout/AsideFallback.tsx
@@ -1,27 +1,27 @@
 import React from 'react';
 
-import {Icon} from '@gravity-ui/uikit';
+import {Icon, QAProps} from '@gravity-ui/uikit';
 
 import {ASIDE_HEADER_COMPACT_WIDTH, HEADER_DIVIDER_HEIGHT, ITEM_HEIGHT} from '../../../constants';
 import {useAsideHeaderContext} from '../../AsideHeaderContext';
 import {b} from '../../utils';
 
 import headerDividerCollapsedIcon from '../../../../../assets/icons/divider-collapsed.svg';
 
-export interface Props {
+export interface Props extends QAProps {
     headerDecoration?: boolean;
     subheaderItemsCount?: number;
 }
 
-export const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0}) => {
+export const AsideFallback: React.FC<Props> = ({headerDecoration, subheaderItemsCount = 0, qa}) => {
     const {compact} = useAsideHeaderContext();
 
     const widthVar = compact ? '--gn-aside-header-min-width' : '--gn-aside-header-size';
 
     const subheaderHeight = (1 + subheaderItemsCount) * ITEM_HEIGHT;
 
     return (
-        <div className={b('aside')} style={{width: `var(${widthVar})`}}>
+        <div className={b('aside')} style={{width: `var(${widthVar})`}} data-qa={qa}>
             <div className={b('aside-content', {'with-decoration': headerDecoration})}>
                 <div className={b('header', {'with-decoration': headerDecoration})}>
                     <div style={{height: subheaderHeight}} />

diff --git a/src/components/AsideHeader/types.tsx b/src/components/AsideHeader/types.tsx
@@ -1,3 +1,5 @@
+import {QAProps} from '@gravity-ui/uikit';
+
 import {RenderContentType} from '../Content';
 import {DrawerItemProps} from '../Drawer/Drawer';
 import {
@@ -16,7 +18,7 @@ export interface LayoutProps {
     topAlert?: AsideHeaderTopAlertProps;
 }
 
-export interface AsideHeaderGeneralProps {
+export interface AsideHeaderGeneralProps extends QAProps {
     logo: LogoProps;
     multipleTooltip?: boolean;
     className?: string;

diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -163,6 +163,7 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
                 <div
                     className={b({type, current, compact}, className)}
                     ref={ref}
+                    data-qa={item.qa}
                     onClick={(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
                         if (collapsedItem) {
                             /**

diff --git a/src/components/types.ts b/src/components/types.ts
@@ -1,6 +1,6 @@
 import React, {HTMLAttributeAnchorTarget} from 'react';
 
-import {AlertProps, IconProps} from '@gravity-ui/uikit';
+import {AlertProps, IconProps, QAProps} from '@gravity-ui/uikit';
 
 import {ItemProps} from 'src/components/CompositeBar/Item/Item';
 
@@ -13,7 +13,7 @@ export interface MakeItemParams {
     title: React.ReactNode;
 }
 
-export interface MenuItem {
+export interface MenuItem extends QAProps {
     id: string;
     title: React.ReactNode;
     tooltipText?: React.ReactNode;