@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
327 lines • 9.96 kB
JavaScript
import React from 'react';
import Textbox from "../TextBox";
import { render } from "@testing-library/react";
describe('Textbox component', () => {
const type = ['text', 'password', 'number'];
const size = ['small', 'xsmall', 'medium', 'xmedium'];
const variant = ['primary', 'secondary', 'default', 'light'];
const borderColor = ['transparent', 'default'];
test('Should be render with the basic set of default props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, null));
expect(asFragment()).toMatchSnapshot();
});
test.each(type)('Should render type - %s', type => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
type: type
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render name', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
name: "TextboxName"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render id', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
id: "TextboxId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render maxLength in number', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
maxLength: "11"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render maxLength in string', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
maxLength: "Ten"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render placeholder', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
placeHolder: "TextBoxPlaceHolder"
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(size)('Should render size - %s', size => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
size: size
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isReadOnly is true and needEffect is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isReadOnly: true,
needEffect: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isReadOnly is true and needEffect is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isReadOnly: true,
needEffect: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isReadOnly is false and needEffect is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isReadOnly: false,
needEffect: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isDisabled is true and needEffect is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isDisabled: true,
needEffect: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isDisabled is true and needEffect is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isDisabled: true,
needEffect: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isDisabled is false and needEffect is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isDisabled: false,
needEffect: false
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(variant)('Should render Varient - %s', variant => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
variant: variant
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needBorder is false ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
needBorder: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render value in number', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
value: 20
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render value in string', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
value: "Tewnty"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needReadOnlyStyle is false and isReadOnly true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
needReadOnlyStyle: false,
isReadOnly: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needReadOnlyStyle is false ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
needReadOnlyStyle: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needReadOnlyStyle is true and isReadOnly true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
needReadOnlyStyle: true,
isReadOnly: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render needAppearance is false ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
needAppearance: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isClickable is ture ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isClickable: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render autofocus false ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
autofocus: false
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render autofocus true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
autofocus: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render autoComplete true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
autoComplete: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render autoComplete false ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
autoComplete: false
}));
expect(asFragment()).toMatchSnapshot();
});
test.each(borderColor)('Should render borderColor - %s', borderColor => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
borderColor: borderColor
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render htmlId ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
htmlId: "textBoxhtmlId"
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isFocus is true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isFocus: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render isScrollPrevent is true ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
isScrollPrevent: true
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is true', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
a11y: {
ariaLabel: 'textboxAriaLabel',
ariaAutocomplete: 'textboxAriaAutocomplete',
ariaControls: 'textboxAriaControls',
ariaExpanded: true,
role: 'TextboxRole',
ariaDescribedby: 'textboxAriaDescribedby',
ariaHaspopup: true,
ariaRequired: true,
ariaLabelledby: 'textboxAriaLabelledby',
ariaInvalid: true,
ariaOwns: 'textboxAriaOwns',
ariaActivedescendant: 'textBoxAriaActivedescendant',
ariaReadonly: true,
ariaMultiselectable: true
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering ally ariaExpanded,ariaHaspopup,ariaRequired,ariaLabelledby,ariaReadonly,ariaMultiselectable is false', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
a11y: {
ariaLabel: 'textboxAriaLabel',
ariaAutocomplete: 'textboxAriaAutocomplete',
ariaControls: 'textboxAriaControls',
ariaExpanded: false,
role: 'TextboxRole',
ariaDescribedby: 'textboxAriaDescribedby',
ariaHaspopup: false,
ariaRequired: false,
ariaLabelledby: 'textboxAriaLabelledby',
ariaInvalid: false,
ariaOwns: 'textboxAriaOwns',
ariaActivedescendant: 'textBoxAriaActivedescendant',
ariaReadonly: false,
ariaMultiselectable: false
}
}));
expect(asFragment()).toMatchSnapshot();
});
test('Should be render customClass ', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
customClass: "TextBoxCustomClass"
}));
expect(asFragment()).toMatchSnapshot();
});
test('rendering the Custom Props', () => {
const {
asFragment
} = render( /*#__PURE__*/React.createElement(Textbox, {
customProps: {
'textbox-props': "true"
}
}));
expect(asFragment()).toMatchSnapshot();
});
});