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',
+};