diff --git a/src/components/FileLink/FileLink.tsx b/src/components/FileLink/FileLink.tsx index 970f00448..33453b323 100644 --- a/src/components/FileLink/FileLink.tsx +++ b/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,17 +58,22 @@ const FileLink = (props: WithChildren) => { 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 ( -
+
-
+
) => { title={urlTitle} {...getLinkProps(href, hostname)} {...extraProps} + data-qa={qaAttributes.link} > {text} diff --git a/src/components/FileLink/__tests__/FileLink.test.tsx b/src/components/FileLink/__tests__/FileLink.test.tsx new file mode 100644 index 000000000..838e37941 --- /dev/null +++ b/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 = ['horizontal', 'vertical']; +const TEXT_SIZES: Array = ['s', 'xs', 'm', 'l']; +const THEMES: Array = ['default', 'dark', 'light']; + +const qaAttributes = getQaAttrubutes(fileLink.qa, 'link', 'link-container'); + +describe('FileLink', () => { + test('render FileLink by default', async () => { + render(); + const component = screen.getByTestId(qaAttributes.default); + + expect(component).toBeInTheDocument(); + expect(component).toBeVisible(); + }); + + test('render FileLink with text', async () => { + render(); + const component = screen.getByTestId(qaAttributes.link); + + expect(component).toHaveTextContent(fileLink.text); + }); + + test('render FileLink with href', async () => { + render(); + const component = screen.getByTestId(qaAttributes.link); + + expect(component).toHaveAttribute('href', fileLink.href); + }); + + test.each(new Array(...TYPES))('render with given "%s" type', (type) => { + render(); + const cardBase = screen.getByTestId(qaAttributes.default); + + expect(cardBase).toHaveClass(`pc-file-link_type_${type}`); + }); + + test.each(new Array(...TEXT_SIZES))( + 'render with given "%s" textSize', + (textSize) => { + render(); + const cardBase = screen.getByTestId(qaAttributes.default); + + expect(cardBase).toHaveClass(`pc-file-link_size_${textSize}`); + }, + ); + + test('add className', () => { + testCustomClassName({ + component: FileLink, + props: fileLink, + }); + }); + + test.each(new Array(...THEMES))( + 'render with given "%s" theme', + (theme) => { + render(); + const cardBase = screen.getByTestId(qaAttributes.default); + + expect(cardBase).toHaveClass(`pc-file-link_theme_${theme}`); + }, + ); + + test('call onClick', async () => { + testOnClick({ + component: FileLink, + props: fileLink, + options: {qaId: qaAttributes.link}, + }); + }); + + test.each(new Array(1, 2, 3))('render with given "%s" tabIndex', (tabIndex) => { + render(); + const cardBase = screen.getByTestId(qaAttributes.link); + + expect(cardBase).toHaveAttribute('tabIndex', tabIndex.toString()); + }); + + test('render FileLink with urlTitle', async () => { + const urlTitle = 'Url Title'; + render(); + const component = screen.getByTestId(qaAttributes.link); + + expect(component).toHaveAttribute('title', urlTitle); + }); +}); diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 634a08f76..62f3c33bc 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -182,7 +182,7 @@ export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable { extraProps?: HTMLProps; } -export interface FileLinkProps extends ClassNameProps, Tabbable { +export interface FileLinkProps extends ClassNameProps, Tabbable, QAProps { href: string; text: ReactNode; type?: FileLinkType;