test(MetaBlock): test for MetaBlock added

gravity-ui · Nov 3, 2023 · 283059b · 283059b
1 parent 5cdbd5b
commit 283059b
Show file tree

Hide file tree

Showing 9 changed files with 162 additions and 21 deletions.
diff --git a/.mocks/post.json b/.mocks/post.json
@@ -93,6 +93,7 @@
       "updatedAt": "2022-07-29T11:12:19.605Z"
     }
   ],
+  "shareOptions": ["Telegram"],
   "textTitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor",
   "htmlTitle": "strong>Lorem ipsum dolor sit amet</strong> <a href=\"https://example.com\">consectetur</a> adipiscing elit"
 }
diff --git a/src/blocks/Meta/Meta.tsx b/src/blocks/Meta/Meta.tsx
@@ -10,7 +10,7 @@ import {PostPageContext} from '../../contexts/PostPageContext';
 import {MetaProps} from '../../models/blocks';
 import {PaddingsDirections} from '../../models/paddings';
 import {block} from '../../utils/cn';
-import {getBreadcrumbs} from '../../utils/common';
+import {getBreadcrumbs, getQaAttributes} from '../../utils/common';
 
 import './Meta.scss';
 
@@ -32,9 +32,10 @@ const breadcrumbsGoals = [
 ];
 
 export const Meta = (props: MetaProps) => {
-    const {paddingTop = 'l', paddingBottom = 'l', theme = 'light'} = props;
+    const {paddingTop = 'l', paddingBottom = 'l', theme = 'light', qa} = props;
     const {post} = useContext(PostPageContext);
     const {locale} = useContext(LocaleContext);
+    const qaAttributes = getQaAttributes(qa, 'post-info');
 
     const {title, id, date, readingTime, tags} = post;
 
@@ -48,7 +49,7 @@ export const Meta = (props: MetaProps) => {
                 [PaddingsDirections.top]: paddingTop,
                 [PaddingsDirections.bottom]: paddingBottom,
             }}
-            qa="blog-meta-content"
+            qa={qaAttributes.wrapper}
         >
             {breadcrumbs && (
                 <HeaderBreadcrumbs
@@ -73,7 +74,7 @@ export const Meta = (props: MetaProps) => {
                     date={date}
                     readingTime={readingTime}
                     metrikaGoals={metrikaGoals}
-                    qa="blog-meta-block"
+                    qa={qaAttributes.postInfo}
                 />
             )}
         </Wrapper>

diff --git a/src/blocks/Meta/__tests__/Meta.test.tsx b/src/blocks/Meta/__tests__/Meta.test.tsx
@@ -0,0 +1,130 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import {PADDING_SIZES} from '../../../../test-utils/constants';
+import {testPaddingBottom, testPaddingTop} from '../../../../test-utils/shared/common';
+import {MetaProps} from '../../../models/blocks';
+import {PaddingSize} from '../../../models/paddings';
+import {getQaAttributes} from '../../../utils/common';
+import {Meta} from '../Meta';
+import {LikesRoutineType, PostPageContext} from '../../../contexts/PostPageContext';
+import post from '../../../../.mocks/post.json';
+import {PostData} from '../../../models/common';
+import {LocaleContext} from '../../../contexts/LocaleContext';
+import {Lang} from '../../../models/locale';
+import {format} from '../../../utils/date';
+import {Keyset, i18} from '../../../i18n';
+
+const locale = {
+    code: 'en-En',
+    lang: Lang.En,
+    langName: 'English',
+    pathPrefix: 'en',
+};
+
+const metaProps = {
+    locale: 'en',
+    qa: 'meta-block',
+};
+
+const qaAttributes = getQaAttributes(metaProps.qa, 'post-info');
+const likes: LikesRoutineType = {
+    handleUserLike: jest.fn(),
+    likesCount: 1,
+    hasUserLike: true,
+};
+
+const RenderComponent = (props: MetaProps) => {
+    return (
+        <LocaleContext.Provider value={{locale}}>
+            <PostPageContext.Provider
+                value={{post: post as unknown as PostData, suggestedPosts: [] as PostData[], likes}}
+            >
+                <Meta {...props} />
+            </PostPageContext.Provider>
+        </LocaleContext.Provider>
+    );
+};
+
+describe('Meta', () => {
+    test('render meta by default', async () => {
+        render(<RenderComponent {...metaProps} />);
+        const meta = screen.getByText(post.title);
+        expect(meta).toHaveClass('yfm_blog_breadcrumbs');
+    });
+
+    test('render with breadcrumbs', async () => {
+        render(<RenderComponent {...metaProps} />);
+        const blogBreadcrumb = screen.getByText('Blog');
+        const tagBreadcrumb = screen.getByText('Slug');
+        const titleBreadcrumb = screen.getByText(post.title);
+
+        expect(blogBreadcrumb).toHaveClass('pc-header-breadcrumbs__text');
+        expect(tagBreadcrumb).toHaveClass('pc-header-breadcrumbs__text');
+        expect(titleBreadcrumb).toHaveClass('yfm_blog_breadcrumbs');
+    });
+
+    test('render with date', async () => {
+        const qaAttr = getQaAttributes(qaAttributes.postInfo, 'date');
+
+        render(<RenderComponent {...metaProps} />);
+        const blogBreadcrumb = screen.getByTestId(qaAttr.date);
+
+        expect(blogBreadcrumb).toHaveTextContent(format(post.date, 'longDate', metaProps.locale));
+    });
+
+    test('render with reading time', async () => {
+        const qaAttr = getQaAttributes(qaAttributes.postInfo, 'reading-time');
+
+        render(<RenderComponent {...metaProps} />);
+        const blogBreadcrumb = screen.getByTestId(qaAttr.readingTime);
+
+        expect(blogBreadcrumb).toHaveTextContent(
+            i18(Keyset.ContextReadingTime, {count: post.readingTime}),
+        );
+    });
+
+    test('render with share menu', async () => {
+        render(<RenderComponent {...metaProps} />);
+        const user = userEvent.setup();
+        const shareComponent = screen.getByText('Share');
+        await user.click(shareComponent);
+
+        const shareOption = screen.getByText('Copy link');
+
+        expect(shareOption).toBeVisible();
+    });
+
+    test('render with likes', async () => {
+        const qaAttr = getQaAttributes(qaAttributes.postInfo, 'save');
+
+        render(<RenderComponent {...metaProps} />);
+
+        const component = screen.getByTestId(qaAttr.save);
+
+        expect(component).toHaveTextContent(likes.likesCount.toString());
+    });
+
+    test.each(new Array<PaddingSize>(...PADDING_SIZES))(
+        'render with given "%s" paddingTop size',
+        (size: PaddingSize) => {
+            testPaddingTop<MetaProps>({
+                component: RenderComponent,
+                props: {...metaProps, paddingTop: size},
+                options: {qaId: qaAttributes.wrapper},
+            });
+        },
+    );
+
+    test.each(new Array<PaddingSize>(...PADDING_SIZES))(
+        'render with given "%s" paddingBottom size',
+        (size: PaddingSize) => {
+            testPaddingBottom<MetaProps>({
+                component: RenderComponent,
+                props: {...metaProps, paddingBottom: size},
+                options: {qaId: qaAttributes.wrapper},
+            });
+        },
+    );
+});
diff --git a/src/components/PostInfo/PostInfo.tsx b/src/components/PostInfo/PostInfo.tsx
@@ -8,6 +8,7 @@ import {Date} from './components/Date';
 import {ReadingTime} from './components/ReadingTime';
 import {Save} from './components/Save';
 import {Sharing} from './components/Sharing';
+import {getQaAttributes} from '../../utils/common';
 
 import './PostInfo.scss';
 
@@ -50,11 +51,12 @@ export const PostInfo = ({
     qa,
 }: PostInfoProps) => {
     const {likes} = useContext(PostPageContext);
+    const qaAttributes = getQaAttributes(qa, 'date', 'reading-time', 'save');
 
     return (
         <div className={b('container', {theme})}>
-            {date && <Date date={date} />}
-            {readingTime && <ReadingTime readingTime={readingTime} />}
+            {date && <Date date={date} qa={qaAttributes.date} />}
+            {readingTime && <ReadingTime readingTime={readingTime} qa={qaAttributes.readingTime} />}
             <Sharing metrikaGoal={metrikaGoals?.sharing} theme={theme} />
             {likes && (
                 <Save
@@ -64,7 +66,7 @@ export const PostInfo = ({
                     handleUserLike={likes.handleUserLike}
                     metrikaGoal={metrikaGoals?.save}
                     theme={theme}
-                    qa={qa}
+                    qa={qaAttributes.save}
                 />
             )}
         </div>

diff --git a/src/components/PostInfo/components/Date.tsx b/src/components/PostInfo/components/Date.tsx
@@ -1,21 +1,25 @@
 import React, {useContext} from 'react';
 
 import {LocaleContext} from '../../../contexts/LocaleContext';
-import {PostCardSize} from '../../../models/common';
+import {PostCardSize, QAProps} from '../../../models/common';
 import {block} from '../../../utils/cn';
 import {format} from '../../../utils/date';
 
 import '../PostInfo.scss';
 
 const b = block('post-info');
 
-type DateProps = {
+type DateProps = QAProps & {
     date: string | number;
     size?: PostCardSize;
 };
 
-export const Date = ({date, size = PostCardSize.SMALL}: DateProps) => {
+export const Date = ({date, size = PostCardSize.SMALL, qa}: DateProps) => {
     const {locale} = useContext(LocaleContext);
 
-    return <div className={b('item', {size})}>{format(date, 'longDate', locale?.code)}</div>;
+    return (
+        <div className={b('item', {size})} data-qa={qa}>
+            {format(date, 'longDate', locale?.code)}
+        </div>
+    );
 };
diff --git a/src/components/PostInfo/components/ReadingTime.tsx b/src/components/PostInfo/components/ReadingTime.tsx
@@ -6,19 +6,20 @@ import {Keyset, i18} from '../../../i18n';
 import {Time} from '../../../icons/Time';
 import {block} from '../../../utils/cn';
 
+import {QAProps} from '../../../models/common';
 import '../PostInfo.scss';
 
 const b = block('post-info');
 
 const ICON_SIZE = 16;
 
-type ReadingTimeProps = {
+type ReadingTimeProps = QAProps & {
     readingTime: number;
     size?: 's' | 'm';
 };
 
-export const ReadingTime = ({readingTime, size = 's'}: ReadingTimeProps) => (
-    <div className={b('item', {size})}>
+export const ReadingTime = ({readingTime, size = 's', qa}: ReadingTimeProps) => (
+    <div className={b('item', {size})} data-qa={qa}>
         <span className={b('icon')}>
             <Icon data={Time} size={ICON_SIZE} className={b('icon-color')} />
         </span>

diff --git a/src/components/PostInfo/components/Save.tsx b/src/components/PostInfo/components/Save.tsx
@@ -81,7 +81,7 @@ export const Save = ({
                 metrika.reachGoal(MetrikaCounter.CrossSite, metrikaGoal);
                 handleAnalytics();
             }}
-            data-qa={`${qa ? qa + '-' : ''}save`}
+            data-qa={qa}
         >
             <div className={b('content', {cursor: isLikeable, theme})}>
                 <span className={b('icon')}>

diff --git a/src/contexts/PostPageContext.ts b/src/contexts/PostPageContext.ts
@@ -4,14 +4,16 @@ import {ShareOptions} from '@gravity-ui/components';
 
 import {PostData} from '../models/common';
 
+export type LikesRoutineType = {
+    handleUserLike: () => void;
+    hasUserLike: boolean;
+    likesCount: number;
+};
+
 export interface PostPageContextProps {
     post: PostData;
     suggestedPosts: PostData[];
-    likes?: {
-        handleUserLike: () => void;
-        hasUserLike: boolean;
-        likesCount: number;
-    };
+    likes?: LikesRoutineType;
     shareOptions?: ShareOptions[];
 }
 

diff --git a/src/models/blocks.ts b/src/models/blocks.ts
@@ -51,7 +51,7 @@ export type MediaProps = ClassNameProps &
         text?: string;
     };
 
-export type MetaProps = {
+export type MetaProps = QAProps & {
     locale: string;
     theme?: TextTheme;
 } & PaddingsYFMProps;