@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
268 lines • 8.11 kB
JavaScript
import React from 'react';
import TextBoxIcon from "../TextBoxIcon";
import { render } from "@testing-library/react";
describe('TextBoxIcon component', () => {
const type = ['text', 'password', 'number'];
const size = ['small', 'xsmall', 'medium', 'xmedium'];
const variant = ['primary', 'secondary', 'default'];
const borderColor = ['transparent', 'default', 'error'];
test('Should be render with the basic set of default props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, null));
expect(asFragment()).toMatchSnapshot();
});
test.each(type)('Should render type - %s', type => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
type: type
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render name', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
name: "TextBoxIconName"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render id', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
id: "TextboxIconId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render placeholder', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
placeHolder: "TextBoxIconPlaceHolder"
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(size)('Should render size - %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
size: size
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isDisabled is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
isDisabled: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isReadOnly is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
isReadOnly: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isReadOnly is true , needEffect is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
isReadOnly: true,
needEffect: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render children', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, null, " ", /*#__PURE__*/React.createElement("div", null, "test"), " "));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render value is string and length greater than 1', () => {
const mockOnClear = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
value: "Text",
onClear: mockOnClear
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render value is number', () => {
const mockOnClear = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
value: 10,
onClear: mockOnClear
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render value is string and length less than 1', () => {
const mockOnClear = jest.fn();
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
value: "0",
onClear: mockOnClear
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render iconRotated is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
iconRotated: true
}, " ", /*#__PURE__*/React.createElement("div", null, "test"), " "));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needBorder is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
needBorder: false
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(variant)('Should render Varient - %s', variant => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
variant: variant
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render title', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
title: "TextBoxIconTitle",
isDisabled: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needReadOnlyStyle is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
needReadOnlyStyle: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isClickable is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
isClickable: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needEffect is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
isReadOnly: true,
needEffect: false
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(borderColor)('Should render borderColor - %s', borderColor => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
borderColor: borderColor
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render showClearIcon is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
showClearIcon: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render htmlId ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
htmlId: "textBoxIconhtmlId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render iconOnHover is true , iconOnHover, isDisabled is true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
iconOnHover: true,
isReadOnly: true,
isDisabled: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render iconOnHover is true , iconOnHover, isDisabled is false ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
iconOnHover: true,
isReadOnly: false,
isDisabled: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isFocus is true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
isFocus: true,
isActive: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the Custom class', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
needBorder: true,
customClass: {
customTBoxWrap: 'customTBoxWrapTextBoxIcon',
customTextBox: 'customTextBoxTextBoxIcon',
customTBoxIcon: 'customTBoxIconTextBox',
customTBoxLine: 'customTBoxLineTextBox'
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the Custom Props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
text: "checkboxText",
customProps: {
TextBoxProps: {
'isClickable': 'false'
}
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the i18n value', () => {
const mockOnClear = jest.fn();
const i18nKeys = {
clearText: 'TextBoxIcon Text'
};
const {
asFragment
} = render( /*#__PURE__*/React.createElement(TextBoxIcon, {
value: "Text",
onClear: mockOnClear,
i18nKeys: i18nKeys
}));
expect(asFragment()).toMatchSnapshot();
});
});