test(FileLink): test for FileLink added

Author: niktverd

src/components/FileLink/FileLink.tsx

@@ -4,7 +4,7 @@ import {Label, LabelProps} from '@gravity-ui/uikit';
 
 import {LocationContext} from '../../context/locationContext';
 import {FileLinkProps, TextSize, WithChildren} from '../../models';
-import {block, getLinkProps} from '../../utils';
+import {block, getLinkProps, getQaAttrubutes} from '../../utils';
 
 import './FileLink.scss';
 
@@ -58,24 +58,30 @@ const FileLink = (props: WithChildren<FileLinkProps>) => {
         tabIndex,
         urlTitle,
         extraProps,
+        qa,
     } = props;
+    const qaAttributes = getQaAttrubutes(qa, 'link', 'link-container');
     const fileExt = getFileExt(href) as FileExtension;
     const labelTheme = (FileExtensionThemes[fileExt] || 'unknown') as LabelProps['theme'];
     const labelSize = LabelSizeMap[textSize];
 
     return (
-        <div className={b({ext: fileExt, type, size: textSize, theme}, className)}>
+        <div
+            className={b({ext: fileExt, type, size: textSize, theme}, className)}
+            data-qa={qaAttributes.default}
+        >
             <Label className={b('file-label')} size={labelSize} theme={labelTheme}>
                 {fileExt}
             </Label>
-            <div className={b('link')}>
+            <div className={b('link')} data-qa={qaAttributes.linkContainer}>
                 <a
                     href={href}
                     onClick={onClick}
                     tabIndex={tabIndex}
                     title={urlTitle}
                     {...getLinkProps(href, hostname)}
                     {...extraProps}
+                    data-qa={qaAttributes.link}
                 >
                     {text}
                 </a>

src/components/FileLink/__tests__/FileLink.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+
+import {render, screen} from '@testing-library/react';
+
+import {testCustomClassName, testOnClick} from '../../../../test-utils/shared/common';
+import {FileLinkProps} from '../../../models';
+import {getQaAttrubutes} from '../../../utils';
+import FileLink from '../FileLink';
+
+const fileLink = {
+    href: 'qwe.pdf',
+    text: 'Link to file',
+    qa: 'file-link-component',
+};
+
+const TYPES: Array<FileLinkProps['type']> = ['horizontal', 'vertical'];
+const TEXT_SIZRS: Array<FileLinkProps['textSize']> = ['s', 'xs', 'm', 'l'];
+const THEMES: Array<FileLinkProps['theme']> = ['default', 'dark', 'light'];
+
+const qaAttributes = getQaAttrubutes(fileLink.qa, 'link', 'link-container');
+
+describe('FileLink', () => {
+    test('render FileLink by default', async () => {
+        render(<FileLink {...fileLink} />);
+        const component = screen.getByTestId(qaAttributes.default);
+
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+
+    test('render FileLink with text', async () => {
+        render(<FileLink {...fileLink} />);
+        const component = screen.getByTestId(qaAttributes.link);
+
+        expect(component).toHaveTextContent(fileLink.text);
+    });
+
+    test('render FileLink with href', async () => {
+        render(<FileLink {...fileLink} />);
+        const component = screen.getByTestId(qaAttributes.link);
+
+        expect(component).toHaveAttribute('href', fileLink.href);
+    });
+
+    test.each(new Array<FileLinkProps['type']>(...TYPES))('render with given "%s" type', (type) => {
+        render(<FileLink {...fileLink} type={type} />);
+        const cardBase = screen.getByTestId(qaAttributes.default);
+
+        expect(cardBase).toHaveClass(`pc-file-link_type_${type}`);
+    });
+
+    test.each(new Array<FileLinkProps['textSize']>(...TEXT_SIZRS))(
+        'render with given "%s" textSize',
+        (textSize) => {
+            render(<FileLink {...fileLink} textSize={textSize} />);
+            const cardBase = screen.getByTestId(qaAttributes.default);
+
+            expect(cardBase).toHaveClass(`pc-file-link_size_${textSize}`);
+        },
+    );
+
+    test('add className', () => {
+        testCustomClassName<FileLinkProps>({
+            component: FileLink,
+            props: fileLink,
+        });
+    });
+
+    test.each(new Array<FileLinkProps['theme']>(...THEMES))(
+        'render with given "%s" theme',
+        (theme) => {
+            render(<FileLink {...fileLink} theme={theme} />);
+            const cardBase = screen.getByTestId(qaAttributes.default);
+
+            expect(cardBase).toHaveClass(`pc-file-link_theme_${theme}`);
+        },
+    );
+
+    test('call onClick', async () => {
+        testOnClick<FileLinkProps>({
+            component: FileLink,
+            props: fileLink,
+            options: {qaId: qaAttributes.link},
+        });
+    });
+
+    test.each(new Array<number>(1, 2, 3))('render with given "%s" tabIndex', (tabIndex) => {
+        render(<FileLink {...fileLink} tabIndex={tabIndex} />);
+        const cardBase = screen.getByTestId(qaAttributes.link);
+
+        expect(cardBase).toHaveAttribute('tabIndex', tabIndex.toString());
+    });
+
+    test('render FileLink with urlTitle', async () => {
+        const urlTitle = 'Url Title';
+        render(<FileLink {...fileLink} urlTitle={urlTitle} />);
+        const component = screen.getByTestId(qaAttributes.link);
+
+        expect(component).toHaveAttribute('title', urlTitle);
+    });
+});

src/models/constructor-items/common.ts

@@ -182,7 +182,7 @@ export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable {
     extraProps?: HTMLProps<HTMLAnchorElement>;
 }
 
-export interface FileLinkProps extends ClassNameProps, Tabbable {
+export interface FileLinkProps extends ClassNameProps, Tabbable, QAProps {
     href: string;
     text: ReactNode;
     type?: FileLinkType;