From 22a8bddc4d181c81e8be2d50f947eb6681a694f1 Mon Sep 17 00:00:00 2001 From: Nik Tverd Date: Tue, 7 Nov 2023 00:16:16 +0600 Subject: [PATCH 1/2] test(FileLink): test for FileLink added --- src/components/FileLink/FileLink.tsx | 12 ++- .../FileLink/__tests__/FileLink.test.tsx | 101 ++++++++++++++++++ src/models/constructor-items/common.ts | 2 +- 3 files changed, 111 insertions(+), 4 deletions(-) create mode 100644 src/components/FileLink/__tests__/FileLink.test.tsx 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..74f6d480b --- /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_SIZRS: 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_SIZRS))( + '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; From cd39bf175534d74d4de35cfa343b0d955abf0fa0 Mon Sep 17 00:00:00 2001 From: Nik Tverd Date: Wed, 28 Feb 2024 17:32:32 +0600 Subject: [PATCH 2/2] fixup! test(FileLink): test for FileLink added --- src/components/FileLink/__tests__/FileLink.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/FileLink/__tests__/FileLink.test.tsx b/src/components/FileLink/__tests__/FileLink.test.tsx index 74f6d480b..838e37941 100644 --- a/src/components/FileLink/__tests__/FileLink.test.tsx +++ b/src/components/FileLink/__tests__/FileLink.test.tsx @@ -14,7 +14,7 @@ const fileLink = { }; const TYPES: Array = ['horizontal', 'vertical']; -const TEXT_SIZRS: Array = ['s', 'xs', 'm', 'l']; +const TEXT_SIZES: Array = ['s', 'xs', 'm', 'l']; const THEMES: Array = ['default', 'dark', 'light']; const qaAttributes = getQaAttrubutes(fileLink.qa, 'link', 'link-container'); @@ -49,7 +49,7 @@ describe('FileLink', () => { expect(cardBase).toHaveClass(`pc-file-link_type_${type}`); }); - test.each(new Array(...TEXT_SIZRS))( + test.each(new Array(...TEXT_SIZES))( 'render with given "%s" textSize', (textSize) => { render();