diff --git a/src/shared/ui/Checkbox/Checkbox.skeleton.tsx b/src/shared/ui/Checkbox/Checkbox.skeleton.tsx index f1c9c02ad..da38c36ed 100644 --- a/src/shared/ui/Checkbox/Checkbox.skeleton.tsx +++ b/src/shared/ui/Checkbox/Checkbox.skeleton.tsx @@ -1,5 +1,14 @@ import { Skeleton } from '../Skeleton'; +import { checkBoxTestIDs } from './constants'; + export const CheckboxSkeleton = () => { - return ; + return ( + + ); }; diff --git a/src/shared/ui/Checkbox/Checkbox.test.tsx b/src/shared/ui/Checkbox/Checkbox.test.tsx new file mode 100644 index 000000000..53bf6b8c5 --- /dev/null +++ b/src/shared/ui/Checkbox/Checkbox.test.tsx @@ -0,0 +1,111 @@ +import { render, screen } from '@testing-library/react'; +import React from 'react'; + +import { renderComponent } from '@/shared/libs'; + +import { Checkbox } from './Checkbox'; +import { CheckboxSkeleton } from './Checkbox.skeleton'; +import { checkBoxTestIDs } from './constants'; +import { CheckboxProps } from './types'; + +const renderCheckbox = (props?: CheckboxProps) => { + return renderComponent(); +}; +const renderSkeleton = () => { + return renderComponent(); +}; + +describe('Checkbox', () => { + describe('checkbox wrapper', () => { + it('should render with correct className', () => { + renderCheckbox(); + + const checkboxComponent = screen.getByTestId(checkBoxTestIDs.checkboxComponent); + + expect(checkboxComponent).toHaveClass('checkbox-wrapper'); + }); + + it('should render with custom className', () => { + renderCheckbox({ className: 'customClassName' }); + + const checkboxComponent = screen.getByTestId(checkBoxTestIDs.checkboxComponent); + + expect(checkboxComponent).toHaveClass('customClassName'); + }); + }); + + describe('checkbox', () => { + it('should render with correct className', () => { + renderCheckbox(); + + const checkbox = screen.getByTestId(checkBoxTestIDs.checkbox); + + expect(checkbox).toHaveClass('checkbox'); + }); + + it('should set indeterminate state', () => { + renderCheckbox({ isIntermediate: true }); + + const checkbox: HTMLInputElement = screen.getByTestId(checkBoxTestIDs.checkbox); + + expect(checkbox).toHaveProperty('indeterminate', true); + }); + + it('should unset indeterminate state', () => { + renderCheckbox(); + + const checkbox: HTMLInputElement = screen.getByTestId(checkBoxTestIDs.checkbox); + + expect(checkbox).not.toHaveProperty('indeterminate', true); + }); + + it('skeleton should to be rendered', () => { + renderSkeleton(); + + const checkbox = screen.queryByTestId(checkBoxTestIDs.checkboxSkeleton); + + expect(checkbox).toBeInTheDocument(); + }); + + it('should update indeterminate state when prop changes', () => { + const { rerender } = render(); + + const checkbox = screen.getByTestId(checkBoxTestIDs.checkbox) as HTMLInputElement; + expect(checkbox).not.toHaveProperty('indeterminate', true); + + rerender(); + expect(checkbox).toHaveProperty('indeterminate', true); + }); + }); + + describe('label', () => { + it('should render label when prop is provided', () => { + renderCheckbox({ label: 'label_text' }); + + const label = screen.getByTestId(checkBoxTestIDs.label); + + expect(label).toBeInTheDocument(); + expect(label).toHaveClass('label'); + expect(label).toHaveTextContent('label_text'); + }); + + it('label should not be rendered without prop', () => { + renderCheckbox(); + + const label = screen.queryByTestId(checkBoxTestIDs.label); + + expect(label).not.toBeInTheDocument(); + }); + }); + + describe('Checkbox component', () => { + it('should expose input element through ref', () => { + const ref = React.createRef(); + + render(); + + expect(ref.current).toBeInstanceOf(HTMLInputElement); + expect(ref.current?.type).toBe('checkbox'); + }); + }); +}); diff --git a/src/shared/ui/Checkbox/Checkbox.tsx b/src/shared/ui/Checkbox/Checkbox.tsx index a148e122d..2e315470f 100644 --- a/src/shared/ui/Checkbox/Checkbox.tsx +++ b/src/shared/ui/Checkbox/Checkbox.tsx @@ -2,6 +2,7 @@ import classnames from 'classnames'; import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; import styles from './Checkbox.module.css'; +import { checkBoxTestIDs } from './constants'; import { CheckboxProps } from './types'; /** @@ -26,17 +27,23 @@ export const Checkbox = forwardRef( return ( ); }, diff --git a/src/shared/ui/Checkbox/constants.ts b/src/shared/ui/Checkbox/constants.ts new file mode 100644 index 000000000..9a395b585 --- /dev/null +++ b/src/shared/ui/Checkbox/constants.ts @@ -0,0 +1,6 @@ +export const checkBoxTestIDs = { + checkboxComponent: 'checkbox-component', + label: 'label', + checkbox: 'checkbox', + checkboxSkeleton: 'checkbox-skeleton', +};