diff --git a/src/components/Foldable/Foldable.tsx b/src/components/Foldable/Foldable.tsx index f854ab685..7d5645c95 100644 --- a/src/components/Foldable/Foldable.tsx +++ b/src/components/Foldable/Foldable.tsx @@ -1,19 +1,20 @@ import React, {useEffect, useRef} from 'react'; import useHeightCalculator from '../../hooks/useHeightCalculator'; -import {WithChildren} from '../../models'; -import {block} from '../../utils'; +import {QAProps, WithChildren} from '../../models'; +import {block, getQaAttrubutes} from '../../utils'; import './Foldable.scss'; const b = block('foldable-block'); -export interface FoldableProps { +export interface FoldableProps extends QAProps { isOpened: boolean; className?: string; } -const Foldable = ({isOpened, children, className}: WithChildren) => { +const Foldable = ({isOpened, children, className, qa}: WithChildren) => { + const qaAttributes = getQaAttrubutes(qa); const blockRef = useRef(null); const contentRef = useRef(null); const contentHeight = useHeightCalculator(contentRef); @@ -25,8 +26,16 @@ const Foldable = ({isOpened, children, className}: WithChildren) }, [isOpened, contentHeight]); return ( -
-
+
+
{children}
diff --git a/src/components/Foldable/__tests__/Foldable.test.tsx b/src/components/Foldable/__tests__/Foldable.test.tsx new file mode 100644 index 000000000..67133bf67 --- /dev/null +++ b/src/components/Foldable/__tests__/Foldable.test.tsx @@ -0,0 +1,58 @@ +import React from 'react'; + +import {render, screen} from '@testing-library/react'; + +import {testCustomClassName} from '../../../../test-utils/shared/common'; +import {getQaAttrubutes} from '../../../utils'; +import Foldable, {FoldableProps} from '../Foldable'; + +const foldableProps: FoldableProps = { + isOpened: false, + qa: 'foldable-component', +}; + +const IS_OPEN_CLASS_NAME = 'pc-foldable-block_open'; + +const qaAttributes = getQaAttrubutes(foldableProps.qa); + +const FoldableComponent = (props: FoldableProps) => ( + +
Children
+
+); + +describe('Foldable', () => { + test('render Foldable by default', async () => { + render(); + const foldable = screen.getByTestId(qaAttributes.default); + const children = screen.getByText('Children'); + + expect(foldable).toBeInTheDocument(); + expect(foldable).toBeVisible(); + expect(foldable).not.toBeDisabled(); + expect(foldable).not.toHaveClass(IS_OPEN_CLASS_NAME); + + expect(children).toBeInTheDocument(); + }); + + test('render Foldable with isOpened = false', async () => { + render(); + const foldable = screen.getByTestId(qaAttributes.default); + + expect(foldable).not.toHaveClass(IS_OPEN_CLASS_NAME); + }); + + test('render Foldable with isOpened = true', async () => { + render(); + const foldable = screen.getByTestId(qaAttributes.default); + + expect(foldable).toHaveClass(IS_OPEN_CLASS_NAME); + }); + + test('add className', () => { + testCustomClassName({ + component: FoldableComponent, + props: foldableProps, + }); + }); +});