/* eslint-disable max-lines-per-function */
import 'react-native';
import React from 'react';
import { cleanup, screen, setup } from '@/core/test-utils';
import { Checkbox, Radio, Switch } from './checkbox';
afterEach(cleanup);
describe('Checkbox, Radio & Switch components ', () => {
it('<Checkbox /> renders correctly and call on change on Press', async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Checkbox
testID="checkbox"
onChange={mockOnChange}
accessibilityLabel="agree"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
expect(screen.queryByTestId('checkbox-label')).not.toBeOnTheScreen();
expect(screen.getByTestId('checkbox')).toBeEnabled();
expect(screen.getByTestId('checkbox')).not.toBeChecked();
expect(screen.getByTestId('checkbox').props.accessibilityRole).toBe(
'checkbox',
);
expect(screen.getByTestId('checkbox').props.accessibilityLabel).toBe(
'agree',
);
await user.press(screen.getByTestId('checkbox'));
expect(mockOnChange).toHaveBeenCalledTimes(1);
expect(mockOnChange).toHaveBeenCalledWith(true);
});
it("<CheckBox/> shouldn't change value while disabled", async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Checkbox
disabled={true}
testID="checkbox"
onChange={mockOnChange}
accessibilityLabel="agree"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
expect(screen.getByTestId('checkbox')).toBeDisabled();
await user.press(screen.getByTestId('checkbox'));
expect(mockOnChange).toHaveBeenCalledTimes(0);
});
it('<CheckBox/> Should render the correct label', async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Checkbox
disabled={true}
testID="checkbox"
onChange={mockOnChange}
accessibilityLabel="agree"
accessibilityHint="toggle Agree"
label="I agree to terms and conditions"
/>,
);
expect(screen.getByTestId('checkbox')).toBeOnTheScreen();
expect(screen.getByTestId('checkbox-label')).toBeOnTheScreen();
expect(
screen.getByTestId('checkbox').props.accessibilityState.checked,
).toBe(false);
expect(screen.getByTestId('checkbox').props.accessibilityRole).toBe(
'checkbox',
);
expect(screen.getByTestId('checkbox').props.accessibilityLabel).toBe(
'agree',
);
expect(screen.getByTestId('checkbox-label')).toHaveTextContent(
'I agree to terms and conditions',
);
await user.press(screen.getByTestId('checkbox'));
expect(mockOnChange).toHaveBeenCalledTimes(0);
});
it('<Radio /> renders correctly and call on change on Press', async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Radio
testID="radio"
onChange={mockOnChange}
accessibilityLabel="agree"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('radio')).toBeOnTheScreen();
expect(screen.queryByTestId('radio-label')).not.toBeOnTheScreen();
expect(screen.getByTestId('radio')).toBeEnabled();
expect(screen.getByTestId('radio')).not.toBeChecked();
expect(screen.getByTestId('radio').props.accessibilityRole).toBe('radio');
expect(screen.getByTestId('radio').props.accessibilityLabel).toBe('agree');
await user.press(screen.getByTestId('radio'));
expect(mockOnChange).toHaveBeenCalledTimes(1);
expect(mockOnChange).toHaveBeenCalledWith(true);
});
it('<Radio /> should render the correct label', async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Radio
testID="radio"
onChange={mockOnChange}
accessibilityLabel="agree"
label="I agree to terms and conditions"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('radio')).toBeOnTheScreen();
expect(screen.getByTestId('radio-label')).toBeOnTheScreen();
expect(screen.getByTestId('radio-label')).toHaveTextContent(
'I agree to terms and conditions',
);
expect(screen.getByTestId('radio').props.accessibilityState.checked).toBe(
false,
);
expect(screen.getByTestId('radio').props.accessibilityRole).toBe('radio');
expect(screen.getByTestId('radio').props.accessibilityLabel).toBe('agree');
await user.press(screen.getByTestId('radio-label'));
expect(mockOnChange).toHaveBeenCalledTimes(1);
expect(mockOnChange).toHaveBeenCalledWith(true);
});
it("<Radio/> shouldn't change value while disabled", async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Radio
disabled={true}
testID="radio"
onChange={mockOnChange}
accessibilityLabel="agree"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('radio')).toBeOnTheScreen();
expect(screen.getByTestId('radio')).toBeDisabled();
await user.press(screen.getByTestId('radio'));
expect(mockOnChange).toHaveBeenCalledTimes(0);
});
it('<Switch /> renders correctly and call on change on Press', async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Switch
testID="switch"
onChange={mockOnChange}
accessibilityLabel="agree"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('switch')).toBeOnTheScreen();
expect(screen.queryByTestId('switch-label')).not.toBeOnTheScreen();
expect(screen.getByTestId('switch')).toBeEnabled();
expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
false,
);
expect(screen.getByTestId('switch').props.accessibilityRole).toBe('switch');
expect(screen.getByTestId('switch').props.accessibilityLabel).toBe('agree');
await user.press(screen.getByTestId('switch'));
expect(mockOnChange).toHaveBeenCalledTimes(1);
expect(mockOnChange).toHaveBeenCalledWith(true);
});
it('<Switch /> should render the correct label', async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Switch
testID="switch"
onChange={mockOnChange}
accessibilityLabel="agree"
label="I agree to terms and conditions"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('switch')).toBeOnTheScreen();
expect(screen.getByTestId('switch-label')).toBeOnTheScreen();
expect(screen.getByTestId('switch-label')).toHaveTextContent(
'I agree to terms and conditions',
);
expect(screen.getByTestId('switch').props.accessibilityState.checked).toBe(
false,
);
expect(screen.getByTestId('switch').props.accessibilityRole).toBe('switch');
expect(screen.getByTestId('switch').props.accessibilityLabel).toBe('agree');
await user.press(screen.getByTestId('switch-label'));
expect(mockOnChange).toHaveBeenCalledTimes(1);
expect(mockOnChange).toHaveBeenCalledWith(true);
});
it("<Switch/> shouldn't change value while disabled", async () => {
const mockOnChange = jest.fn((checked) => checked);
const { user } = setup(
<Switch
disabled={true}
testID="switch"
onChange={mockOnChange}
accessibilityLabel="agree"
accessibilityHint="toggle Agree"
/>,
);
expect(screen.getByTestId('switch')).toBeOnTheScreen();
await user.press(screen.getByTestId('switch'));
expect(mockOnChange).toHaveBeenCalledTimes(0);
});
});