test(Foldable): test for Foldable added (#685)

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<FoldableProps>) => {
+const Foldable = ({isOpened, children, className, qa}: WithChildren<FoldableProps>) => {
+    const qaAttributes = getQaAttrubutes(qa);
     const blockRef = useRef<HTMLDivElement>(null);
     const contentRef = useRef<HTMLDivElement>(null);
     const contentHeight = useHeightCalculator(contentRef);
@@ -25,8 +26,16 @@ const Foldable = ({isOpened, children, className}: WithChildren<FoldableProps>)
     }, [isOpened, contentHeight]);
 
     return (
-        <div ref={blockRef} className={b({open: isOpened}, className)}>
-            <div ref={contentRef} className={b('content-container')}>
+        <div
+            ref={blockRef}
+            className={b({open: isOpened}, className)}
+            data-qa={qaAttributes.default}
+        >
+            <div
+                ref={contentRef}
+                className={b('content-container')}
+                data-qa={qaAttributes.container}
+            >
                 {children}
             </div>
         </div>

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) => (
+    <Foldable {...props}>
+        <div>Children</div>
+    </Foldable>
+);
+
+describe('Foldable', () => {
+    test('render Foldable by default', async () => {
+        render(<FoldableComponent {...foldableProps} />);
+        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(<FoldableComponent {...foldableProps} />);
+        const foldable = screen.getByTestId(qaAttributes.default);
+
+        expect(foldable).not.toHaveClass(IS_OPEN_CLASS_NAME);
+    });
+
+    test('render Foldable with isOpened = true', async () => {
+        render(<FoldableComponent {...foldableProps} isOpened={true} />);
+        const foldable = screen.getByTestId(qaAttributes.default);
+
+        expect(foldable).toHaveClass(IS_OPEN_CLASS_NAME);
+    });
+
+    test('add className', () => {
+        testCustomClassName<FoldableProps>({
+            component: FoldableComponent,
+            props: foldableProps,
+        });
+    });
+});