chore: add tests for checkbox

Author: markw-deriv

lib/components/Checkbox/__test__/Checkbox.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Checkbox } from '../';
+
+describe('Checkbox', () => {
+  test('renders checkbox with label', () => {
+    render(<Checkbox name="test-checkbox" label="Test Checkbox" readOnly />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+    expect(screen.getByLabelText('Test Checkbox')).toBeInTheDocument();
+  });
+
+  test('renders checked checkbox', () => {
+    render(<Checkbox name="test-checkbox" checked readOnly />);
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  test('renders unchecked checkbox', () => {
+    render(<Checkbox name="test-checkbox" checked={false} readOnly />);
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  test('renders disabled checkbox', () => {
+    render(<Checkbox name="test-checkbox" disabled />);
+    expect(screen.getByRole('checkbox')).toBeDisabled();
+  });
+
+  test('renders checkbox with error state', () => {
+    render(<Checkbox name="test-checkbox" label="Test Checkbox" error={true} readOnly />);
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+
+    const checkboxWrapper = screen.getByLabelText('Test Checkbox')?.parentElement?.parentElement;
+    expect(checkboxWrapper?.querySelector('.deriv-checkbox__label')).toHaveClass(
+      'deriv-checkbox__label--error'
+    );
+  });
+
+  test('triggers onChange event when clicked', () => {
+    const handleChange = jest.fn();
+    render(<Checkbox name="test-checkbox" onChange={handleChange} />);
+    fireEvent.click(screen.getByRole('checkbox'));
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  test('applies custom className to checkbox input', () => {
+    render(<Checkbox name="test-checkbox" className="custom-class" readOnly />);
+    expect(screen.getByRole('checkbox')).toHaveClass('custom-class');
+  });
+
+  test('applies custom labelClassName to label', () => {
+    render(
+      <Checkbox name="test-checkbox" label="Test Checkbox" labelClassName="custom-label-class" readOnly />
+    );
+
+    const checkboxWrapper = screen.getByLabelText('Test Checkbox')?.parentElement?.parentElement;
+    expect(checkboxWrapper?.querySelector('.deriv-checkbox__label')).toHaveClass(
+      'custom-label-class'
+    );
+  });
+
+  test('applies custom wrapperClassName to wrapper div', () => {
+    render(
+      <Checkbox name="test-checkbox" label="Test Checkbox" wrapperClassName="custom-wrapper-class" readOnly />
+    );
+
+    const checkboxWrapper = screen.getByLabelText('Test Checkbox')?.parentElement?.parentElement;
+    expect(checkboxWrapper).toHaveClass('custom-wrapper-class');
+  });
+});