Skip to content

Commit

Permalink
test: added test cases for toggle switch component
Browse files Browse the repository at this point in the history
  • Loading branch information
yaswanth-deriv committed Mar 22, 2024
1 parent 3a2d74b commit 3c5bf0c
Showing 1 changed file with 65 additions and 0 deletions.
65 changes: 65 additions & 0 deletions src/components/ToggleSwitch/__test__/ToggleSwitch.spec.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import { ToggleSwitch } from '..';

describe('ToggleSwitch Component', () => {

it('handles onChange event correctly', () => {
const onChange = jest.fn();
const { getByRole } = render(<ToggleSwitch onChange={onChange} value={false} />);
const toggleSwitch = getByRole('checkbox');
fireEvent.click(toggleSwitch);
expect(onChange).toHaveBeenCalledTimes(1);
});

it('displays correct checked state based on value prop', () => {
const onChange = jest.fn();
const { getByRole, rerender } = render(<ToggleSwitch onChange={onChange} value={false} />);
let toggleSwitch = getByRole('checkbox');
expect(toggleSwitch).not.toBeChecked();

rerender(<ToggleSwitch onChange={onChange} value={true} />);
toggleSwitch = getByRole('checkbox');
expect(toggleSwitch).toBeChecked();
});

it('applies wrapperClassName and className correctly', () => {
const onChange = jest.fn();
const { container } = render(
<ToggleSwitch
onChange={onChange}
value={false}
wrapperClassName="wrapper-class"
className="custom-class"
/>
);
const wrapper = container.querySelector('.deriv-toggle-switch.wrapper-class');
expect(wrapper).toBeInTheDocument();
const input = wrapper?.querySelector('input');
expect(input).toHaveClass('custom-class');
});

it('applies wrapperStyle and style correctly', () => {
const onChange = jest.fn();
const { container } = render(
<ToggleSwitch
onChange={onChange}
value={false}
wrapperStyle={{ backgroundColor: 'red' }}
style={{ fontSize: '16px' }}
/>
);
const input = container.querySelector('.deriv-toggle-switch input');
expect(input).toHaveStyle({ fontSize: '16px' });
const label = input?.parentElement;
expect(label).toHaveStyle({ backgroundColor: 'red' });
});

it('defaults to unchecked when no value prop is provided', () => {
const onChange = jest.fn();
const { getByRole } = render(<ToggleSwitch onChange={onChange} value={false} />);
const toggleSwitch = getByRole('checkbox');
expect(toggleSwitch).not.toBeChecked();
});

});

0 comments on commit 3c5bf0c

Please sign in to comment.