fixup! fixup! test(CardBase): test for CardBase added

gravity-ui · Sep 19, 2023 · db47596 · db47596
1 parent 5fed1c3
commit db47596
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 32 deletions.
diff --git a/src/components/CardBase/CardBase.tsx b/src/components/CardBase/CardBase.tsx
@@ -10,7 +10,7 @@ import {
     WithChildren,
 } from '../../models';
 import {AnalyticsEventsBase, DefaultEventNames} from '../../models/common';
-import {block} from '../../utils';
+import {block, getQaAttrubutes} from '../../utils';
 import BackgroundImage from '../BackgroundImage/BackgroundImage';
 import RouterLink from '../RouterLink/RouterLink';
 
@@ -39,11 +39,6 @@ export interface CardFooterBaseProps {
 
 const b = block('card-base-block');
 
-export const defaultHeaderQa = 'card-base-header';
-export const defaultBodyQa = 'card-base-body';
-export const defaultContentQa = 'card-base-content';
-export const defaultFooterQa = 'card-base-footer';
-
 const Header: React.FC<WithChildren<CardHeaderBaseProps>> = () => null;
 const Content: React.FC<WithChildren<{}>> = () => null;
 const Footer: React.FC<WithChildren<CardFooterBaseProps>> = () => null;
@@ -65,6 +60,7 @@ export const Layout = (props: CardBaseProps) => {
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
     let header, content, footer, image, headerClass, footerClass;
+    const qaAttributes = getQaAttrubutes(qa, 'header', 'footer', 'body', 'content');
 
     function handleChild(child: ReactElement) {
         switch (child.type) {
@@ -95,17 +91,17 @@ export const Layout = (props: CardBaseProps) => {
                 <BackgroundImage
                     className={b('header', headerClass)}
                     {...(typeof image === 'string' ? {src: image} : image)}
-                    qa={defaultHeaderQa}
+                    qa={qaAttributes.header}
                 >
                     <div className={b('header-content')}>{header}</div>
                 </BackgroundImage>
             )}
-            <div className={b('body', bodyClassName)} data-qa={defaultBodyQa}>
-                <div className={b('content', contentClassName)} data-qa={defaultContentQa}>
+            <div className={b('body', bodyClassName)} data-qa={qaAttributes.body}>
+                <div className={b('content', contentClassName)} data-qa={qaAttributes.content}>
                     {content}
                 </div>
                 {footer && (
-                    <div className={b('footer', footerClass)} data-qa={defaultFooterQa}>
+                    <div className={b('footer', footerClass)} data-qa={qaAttributes.footer}>
                         {footer}
                     </div>
                 )}

diff --git a/src/components/CardBase/__tests__/CardBase.test.tsx b/src/components/CardBase/__tests__/CardBase.test.tsx
@@ -8,15 +8,11 @@ import {PageConstructorProvider} from '../../../containers/PageConstructor';
 import {AnalyticsContextProps} from '../../../context/analyticsContext';
 import {MetrikaContextProps} from '../../../context/metrikaContext';
 import {CardBorder, PixelEventType} from '../../../models';
-import CardBase, {
-    CardBaseProps,
-    defaultBodyQa,
-    defaultContentQa,
-    defaultFooterQa,
-    defaultHeaderQa,
-} from '../CardBase';
+import {getQaAttrubutes} from '../../../utils';
+import CardBase, {CardBaseProps} from '../CardBase';
 
 const qaId = 'card-base-component';
+const qaAttributes = getQaAttrubutes(qaId, 'header', 'footer', 'body', 'content');
 
 const url = '#';
 
@@ -77,11 +73,11 @@ describe('CardBase', () => {
 
     test('render CardBase with header', async () => {
         render(
-            <CardBase>
+            <CardBase qa={qaId}>
                 <CardBase.Header>Header</CardBase.Header>
             </CardBase>,
         );
-        const cardBaseHeader = screen.queryByTestId(defaultHeaderQa);
+        const cardBaseHeader = screen.queryByTestId(qaAttributes.header);
 
         expect(cardBaseHeader).toBeInTheDocument();
         expect(cardBaseHeader).toBeVisible();
@@ -90,11 +86,11 @@ describe('CardBase', () => {
 
     test('render CardBase with content', async () => {
         render(
-            <CardBase>
+            <CardBase qa={qaId}>
                 <CardBase.Content>Content</CardBase.Content>
             </CardBase>,
         );
-        const cardBaseContent = screen.queryByTestId(defaultContentQa);
+        const cardBaseContent = screen.queryByTestId(qaAttributes.content);
 
         expect(cardBaseContent).toBeInTheDocument();
         expect(cardBaseContent).toBeVisible();
@@ -103,11 +99,11 @@ describe('CardBase', () => {
 
     test('render CardBase with footer', async () => {
         render(
-            <CardBase>
+            <CardBase qa={qaId}>
                 <CardBase.Footer>Footer</CardBase.Footer>
             </CardBase>,
         );
-        const cardBaseFooter = screen.queryByTestId(defaultFooterQa);
+        const cardBaseFooter = screen.queryByTestId(qaAttributes.footer);
 
         expect(cardBaseFooter).toBeInTheDocument();
         expect(cardBaseFooter).toBeVisible();
@@ -118,11 +114,11 @@ describe('CardBase', () => {
         const bodyClassName = 'body-class-name';
 
         render(
-            <CardBase bodyClassName={bodyClassName}>
+            <CardBase bodyClassName={bodyClassName} qa={qaId}>
                 <CardBase.Content>Content</CardBase.Content>
             </CardBase>,
         );
-        const cardBaseBody = screen.queryByTestId(defaultBodyQa);
+        const cardBaseBody = screen.queryByTestId(qaAttributes.body);
 
         expect(cardBaseBody).toHaveClass(bodyClassName);
     });
@@ -131,11 +127,11 @@ describe('CardBase', () => {
         const contentClassName = 'content-class-name';
 
         render(
-            <CardBase contentClassName={contentClassName}>
+            <CardBase contentClassName={contentClassName} qa={qaId}>
                 <CardBase.Content>Content</CardBase.Content>
             </CardBase>,
         );
-        const cardBaseContent = screen.queryByTestId(defaultContentQa);
+        const cardBaseContent = screen.queryByTestId(qaAttributes.content);
 
         expect(cardBaseContent).toHaveClass(contentClassName);
     });
@@ -144,25 +140,25 @@ describe('CardBase', () => {
         const className = 'body-class-name';
 
         render(
-            <CardBase>
+            <CardBase qa={qaId}>
                 <CardBase.Header className={className}>Header</CardBase.Header>
             </CardBase>,
         );
 
-        const cardBaseHeader = screen.queryByTestId(defaultHeaderQa);
+        const cardBaseHeader = screen.queryByTestId(qaAttributes.header);
 
         expect(cardBaseHeader).toHaveClass(className);
     });
 
     test('add className to Footer', async () => {
-        const className = 'body-class-name';
+        const className = 'footer-class-name';
 
         render(
-            <CardBase>
+            <CardBase qa={qaId}>
                 <CardBase.Footer className={className}>Footer</CardBase.Footer>
             </CardBase>,
         );
-        const cardBaseFooter = screen.queryByTestId(defaultFooterQa);
+        const cardBaseFooter = screen.getByTestId(qaAttributes.footer);
 
         expect(cardBaseFooter).toHaveClass(className);
     });