YH-2010: add tests for Checkbox component

src/shared/ui/Checkbox/Checkbox.skeleton.tsx

@@ -1,5 +1,14 @@
 import { Skeleton } from '../Skeleton';
 
+import { checkBoxTestIDs } from './constants';
+
 export const CheckboxSkeleton = () => {
-	return <Skeleton width={20} height={20} borderRadius="4px" />;
+	return (
+		<Skeleton
+			width={20}
+			height={20}
+			borderRadius="4px"
+			dataTestId={checkBoxTestIDs.checkboxSkeleton}
+		/>
+	);
 };

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(<Checkbox {...props} />);
+};
+const renderSkeleton = () => {
+	return renderComponent(<CheckboxSkeleton />);
+};
+
+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(<Checkbox />);
+
+			const checkbox = screen.getByTestId(checkBoxTestIDs.checkbox) as HTMLInputElement;
+			expect(checkbox).not.toHaveProperty('indeterminate', true);
+
+			rerender(<Checkbox isIntermediate />);
+			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<HTMLInputElement>();
+
+			render(<Checkbox ref={ref} />);
+
+			expect(ref.current).toBeInstanceOf(HTMLInputElement);
+			expect(ref.current?.type).toBe('checkbox');
+		});
+	});
+});

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<HTMLInputElement, CheckboxProps>(
 
 		return (
 			<label
+				data-testid={checkBoxTestIDs.checkboxComponent}
 				className={classnames(styles['checkbox-wrapper'], className, {
 					[styles.disabled]: props.disabled,
 				})}
 			>
 				<input
+					data-testid={checkBoxTestIDs.checkbox}
 					ref={internalRef}
 					type="checkbox"
 					className={classnames(styles.checkbox)}
 					{...props}
 				/>
-				{label && <span className={styles.label}>{label}</span>}
+				{label && (
+					<span data-testid={checkBoxTestIDs.label} className={styles.label}>
+						{label}
+					</span>
+				)}
 			</label>
 		);
 	},

src/shared/ui/Checkbox/constants.ts

@@ -0,0 +1,6 @@
+export const checkBoxTestIDs = {
+	checkboxComponent: 'checkbox-component',
+	label: 'label',
+	checkbox: 'checkbox',
+	checkboxSkeleton: 'checkbox-skeleton',
+};