@zohodesk/components
Version:
Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development
249 lines • 7.34 kB
JavaScript
import React from 'react';
import CheckBox from "../CheckBox";
import { render } from "@testing-library/react";
describe('CheckBox component', () => {
test('Should be render with the basic set of default props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, null));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render ID', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
id: "checkBoxId",
text: "checkBoxText"
}));
expect(asFragment()).toMatchSnapshot();
});
const palette = ['primary', 'danger'];
test.each(palette)('Should render palette and checkbox with checked - %s', palette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
checked: true,
palette: palette,
text: "checkBoxTest",
active: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be disable', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
disabled: true,
checked: true,
text: "checkboxDisable"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be isReadOnly', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
isReadOnly: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render disabledTitle and title', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
disabled: true,
disabledTitle: "checkBoxdisableTitle",
text: "CheckBoxdisabledTitle",
title: "checkBoxTitle"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render title', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "CheckBoxdisabledTitle",
title: "checkBoxTitle"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render text', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "CheckBoxdisabledTitle"
}));
expect(asFragment()).toMatchSnapshot();
});
const size = ['small', 'medium'];
test.each(size)('Should render size - %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
checked: true,
size: size
}));
expect(asFragment()).toMatchSnapshot();
});
const labelPalette = ['default', 'primary', 'secondary', 'danger', 'mandatory'];
test.each(labelPalette)('Should render size - %s', labelPalette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "checkboxText",
labelPalette: labelPalette
}));
expect(asFragment()).toMatchSnapshot();
});
const labelSize = ['small', 'medium', 'large'];
test.each(labelSize)('Should render labelSize - %s', labelSize => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "checkboxText",
labelSize: labelSize
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isFilled', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
isFilled: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isClipped is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
isClipped: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('eleRef prop is a function', () => {
// Create a mock function
const mockEleRef = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
getRef: mockEleRef
}));
expect(mockEleRef).toHaveBeenCalled();
});
const variant = ['default', 'primary'];
test.each(variant)('Should render labelSize - %s', variant => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "checkboxText",
variant: variant
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(palette)('Should render active - %s', palette => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "checkboxText",
checked: true,
active: true,
palette: palette
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render name', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
name: "checkBoxName"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should render secondaryText', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "checkboxText",
secondaryText: "secondaryText"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render activeStyle is minus', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
activeStyle: "minus"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render dataSelectorId', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
dataSelectorId: "dataSelectorIdCheck"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the Custom Props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "checkboxText",
customProps: {
CheckBoxProps: {
'data-props': true
},
LabelProps: {
'customClass': 'checkBoxCustomClass'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the Custom class', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
text: "checkboxText",
checked: true,
customClass: {
customCheckBox: 'customCheckBoxClass',
customLabel: 'customLabelClass',
customCBoxSize: 'customCBoxSizeClass',
customTickSize: 'customTickSizeClass'
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role true and entering their values', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
checked: true,
a11y: {
ariaLabel: 'ariaLabelCheckBox',
ariaLabelledby: 'ariaLabelledbyCheckBox',
ariaChecked: true,
ariaHidden: true,
role: 'checkBox2'
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering ally ariaLabel , ariaLabelledby, ariaHidden,ariaChecked,role false and entering their values', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(CheckBox, {
checked: true,
a11y: {
ariaLabel: 'ariaLabelCheckBox',
ariaLabelledby: 'ariaLabelledbyCheckBox',
ariaChecked: false,
ariaHidden: false,
role: 'checkBox3'
}
}));
expect(asFragment()).toMatchSnapshot();
});
});