@progress/kendo-react-inputs 5.7.0-sig.202208281415 → 5.7.0

package/test/TextArea.tsx

@@ -1,216 +0,0 @@
-import * as React from 'react';
-import { Enzyme } from '@progress//kendo-react-tasks/test-utils';
-const { mount, shallow } = Enzyme;
-
-import { TextArea, TextAreaChangeEvent } from '../src/main';
-import { FloatingLabel, Label } from '@progress/kendo-react-labels';
-
-const TEXT_AREA_WRAPPER = '.k-textarea';
-const TEXT_AREA = '.k-input-inner';
-
-describe('TextArea', () => {
-    let result: any;
-    beforeEach(() => {
-        result = null;
-    });
-
-    it('should render a span wrapping element', () => {
-        result = mount(<TextArea />);
-
-        expect(result.find(TEXT_AREA_WRAPPER).type()).toEqual('span');
-    });
-    it('should render a textarea html element', () => {
-        result = mount(<TextArea />);
-
-        expect(result.find(TEXT_AREA).type()).toEqual('textarea');
-    });
-    it('should render id to the textarea element by default', () => {
-        result = mount(<TextArea />);
-
-        expect(result.find(TEXT_AREA).props().id).toBeTruthy();
-    });
-    it('should render k-textarea class to the span element by default', () => {
-        result = mount(<TextArea />);
-
-        expect(result.find(TEXT_AREA_WRAPPER).props().className).toContain('k-textarea');
-    });
-    it('should render k-input and !k-overflow-auto classes to the textarea element by default', () => {
-        result = mount(<TextArea />);
-
-        expect(result.find(TEXT_AREA).props().className).toEqual('k-input-inner !k-overflow-auto');
-    });
-    it('should be focusable by default', () => {
-        result = mount(<TextArea />);
-
-        expect(result.find(TEXT_AREA).props().tabIndex).toEqual(0);
-    });
-    it('should set tabindex to -1 if disabled', () => {
-        result = mount(<TextArea disabled={true} />);
-
-        expect(result.find(TEXT_AREA).props().tabIndex).toEqual(-1);
-        expect(result.find(TEXT_AREA).props().disabled).toBeTruthy();
-    });
-    it('should render id to the textarea element', () => {
-        result = mount(<TextArea id={'foo'} />);
-
-        expect(result.find(TEXT_AREA).props().id).toEqual('foo');
-    });
-    it('should render the name attribute if passed', () => {
-        result = mount(<TextArea name={'foo'} />);
-
-        expect(result.find(TEXT_AREA).props().name).toContain('foo');
-    });
-    it('should set custom styles to the textarea wrapper element if `style` prop is passed', () => {
-        result = mount(<TextArea style={{ border: 'red' }} />);
-
-        expect(result.find(TEXT_AREA_WRAPPER).props().style).toEqual({ border: 'red' });
-    });
-    it('should set custom class to the textarea wrapper element if `className` prop is passed', () => {
-        result = mount(<TextArea className={'foo'} />);
-
-        expect(result.find(TEXT_AREA_WRAPPER).props().className).toContain('k-textarea');
-        expect(result.find(TEXT_AREA_WRAPPER).props().className).toContain('foo');
-    });
-    it('should set defaultValue if is passed as prop (uncontrolled mode)', () => {
-        result = mount(<TextArea defaultValue={'Default value'} />);
-
-        expect(result.find(TEXT_AREA).props().value).toEqual('Default value');
-    });
-    it('should set value prop if is passed as prop (controlled mode)', () => {
-        result = mount(<TextArea value={'Controlled value'} />);
-
-        expect(result.find(TEXT_AREA).props().value).toEqual('Controlled value');
-    });
-    it('should **not** trigger onChange when new value is passed as props', () => {
-        let spy = jasmine.createSpy('change spy');
-
-        result = mount(<TextArea value="foo" onChange={spy} />);
-
-        result.setProps({ value: 'bar' });
-
-        expect(spy).toHaveBeenCalledTimes(0);
-    });
-    it('should call onChange callback', () => {
-        let spy = jasmine.createSpy('change spy');
-
-        result = mount(<TextArea onChange={spy} />);
-
-        result.find(TEXT_AREA).simulate('change');
-
-        expect(spy).toHaveBeenCalledTimes(1);
-    });
-    it('should call onChange callback with correct parameters', () => {
-        let value, targetValue;
-        const onChange = (e: TextAreaChangeEvent) => {
-            value = e.value;
-            targetValue = e.target.value;
-        };
-
-        result = mount(<TextArea value={'foo'} onChange={onChange} />);
-
-        result.setProps({ value: 'bar' });
-        result.find(TEXT_AREA).simulate('change');
-
-        expect(value).toEqual('bar');
-        expect(targetValue).toEqual('bar');
-    });
-    it('should set aria-multiline attribute by default', () => {
-        result = mount(<TextArea />);
-
-        expect(result.find(TEXT_AREA).prop('aria-multiline')).toEqual(true);
-    });
-    it('should set dir', () => {
-        result = shallow(<TextArea dir="rtl" />);
-
-        expect(result.find(TEXT_AREA_WRAPPER).prop('dir')).toEqual('rtl');
-    });
-    it('should set tabIndex if passed as props', () => {
-        result = shallow(<TextArea tabIndex={2} />);
-
-        expect(result.find(TEXT_AREA).props().tabIndex).toEqual(2);
-    });
-    it('should set k-disabled class to the span if disabled prop is passed', () => {
-        result = mount(<TextArea disabled={true} />);
-
-        expect(result.find(TEXT_AREA_WRAPPER).hasClass('k-textarea')).toEqual(true);
-        expect(result.find(TEXT_AREA_WRAPPER).hasClass('k-disabled')).toEqual(true);
-    });
-    it('should set aria-disabled attributes if disabled prop is passed', () => {
-        result = mount(<TextArea disabled={true} />);
-
-        expect(result.find(TEXT_AREA).props()['aria-disabled']).toEqual(true);
-    });
-
-    describe('labelling', () => {
-        it('should render textarea with floating label', () => {
-            let value = '';
-            result = mount(
-              <FloatingLabel label={'Test label:'} editorId={'floating-id'} editorValue={value}>
-                <TextArea
-                  id={'floating-id'}
-                  value={value}
-                    />
-              </FloatingLabel>
-            );
-
-            expect(result.find('span').first().hasClass('k-floating-label-container k-empty')).toEqual(true);
-            expect(result.find(TEXT_AREA).props().id).toEqual('floating-id');
-            expect(result.find('.k-label').props().htmlFor).toEqual('floating-id');
-
-            result.setProps({ value: 'foo' });
-
-            expect(result.find('span').first().hasClass('k-floating-label-container')).toEqual(true);
-        });
-        it('should render textarea with regular label', () => {
-            let value = '';
-            result = mount(
-              <>
-                <Label editorId={'regular-id'}>
-                  Regular Label:
-                </Label>
-                <TextArea
-                  id={'regular-id'}
-                  value={value}
-                    />
-              </>
-            );
-
-            expect(result.find(TEXT_AREA).props().id).toEqual('regular-id');
-            expect(result.find('.k-label').props().htmlFor).toEqual('regular-id');
-        });
-    });
-
-    describe('form validation', () => {
-        it('should set required and be invalid when empty', () => {
-            result = mount(<TextArea required={true} />);
-
-            expect(result.props().required).toEqual(true);
-            expect(result.find(TEXT_AREA_WRAPPER).hasClass('k-invalid')).toBeTruthy();
-        });
-        it('should be valid when required is true but value is not empty', () => {
-            result = mount(<TextArea required={true} value={'foo'} />);
-
-            expect(result.find(TEXT_AREA_WRAPPER).hasClass('k-invalid')).toBeFalsy();
-        });
-        it('should **not** apply k-invalid if validityStyles is set to false and value is invalid', () => {
-            result = mount(<TextArea validityStyles={false} required={true} />);
-
-            expect(result.find('.k-invalid').length).toEqual(0);
-        });
-        it('should **not** apply k-invalid if validityStyles is set to false and override validity', () => {
-            result = mount(<TextArea validityStyles={false} valid={false} />);
-
-            expect(result.find('.k-invalid').length).toEqual(0);
-        });
-        it('should update invalid class when new value is passed as props and required is set to true', () => {
-            result = mount(<TextArea required={true} value={''} />);
-
-            expect(result.find('.k-textarea').hasClass('k-invalid')).toBeTruthy();
-
-            result.setProps({ value: 'foo' });
-
-            expect(result.find('.k-textarea').hasClass('k-invalid')).toBeFalsy();
-        });
-    });
-
-});

package/test/maskedtextbox/component.tsx

@@ -1,424 +0,0 @@
-import * as React from 'react';
-import { Enzyme } from '@progress//kendo-react-tasks/test-utils';
-
-const { shallow, mount } = Enzyme;
-
-import {
-    MaskedTextBoxProps
-} from './../../src/main';
-import { MaskedTextBoxWithoutContext as MaskedTextBox } from '../../src/maskedtextbox/MaskedTextBox';
-
-import { maskingChanged } from '../../src/maskedtextbox/utils';
-
-describe('MaskedTextBox', () => {
-    describe('rendering', () => {
-        it('should render a span', () => {
-            const type = shallow(<MaskedTextBox />).type();
-            expect(type).toEqual('span');
-        });
-
-        it('should render correct classes', () => {
-            expect(shallow(<MaskedTextBox />).hasClass('k-maskedtextbox')).toBe(true);
-            expect(shallow(<MaskedTextBox />).hasClass('k-input')).toBe(true);
-        });
-
-        it('should render disabled class', () => {
-            expect(shallow(<MaskedTextBox disabled={true} />).hasClass('k-disabled')).toBe(true);
-        });
-
-        // The focus styles are handled through `:focus` pseudo-class in `v5` of the themes.
-        it.skip('should render focused class', () => {
-            const component = shallow(<MaskedTextBox />);
-            const input = component.find('input');
-            input.simulate('focus');
-
-            expect(component.hasClass('k-focus')).toBe(true);
-        });
-
-        it('should have an Input with correct class', () => {
-            const inputClassName = shallow(<MaskedTextBox />).find('input').hasClass('k-input-inner');
-            expect(inputClassName).toBe(true);
-        });
-
-        it('should render component width', () => {
-            const span = shallow(<MaskedTextBox width="100px" />).find('.k-maskedtextbox');
-            expect(span.prop('style').width).toBe('100px');
-        });
-
-        it('should render component dir', () => {
-            const span = shallow(<MaskedTextBox dir="rtl" />).find('.k-maskedtextbox');
-            expect(span.prop('dir')).toBe('rtl');
-        });
-
-        describe('input attributes', () => {
-            it('should render static attributes', () => {
-                const input = shallow(<MaskedTextBox />).find('input');
-
-                expect(input.prop('type')).toBe('text');
-                expect(input.prop('autoComplete')).toBe('off');
-                expect(input.prop('autoCorrect')).toBe('off');
-                expect(input.prop('autoCapitalize')).toBe('off');
-                expect(input.prop('spellCheck')).toBe(false);
-                expect(input.prop('id')).toMatch(/^k-[a-z0-9-]{30,}/);
-            });
-
-            [
-                {
-                    message: 'should render empty value',
-                    attr: 'value',
-                    props: { value: undefined },
-                    result: { prop: 'value', value: '' }
-                }, {
-                    message: 'should render value',
-                    attr: 'value',
-                    props: { value: '(359) 884-12-33-21' },
-                    result: { prop: 'value', value: '(359) 884-12-33-21' }
-                }, {
-                    message: 'should not render tabIndex (if disabled)',
-                    attr: 'tabIndex',
-                    props: { disabled: true },
-                    result: { prop: 'tabIndex', value: undefined }
-                }, {
-                    message: 'should render tabIndex',
-                    attr: 'tabIndex',
-                    props: { tabIndex: 5 },
-                    result: { prop: 'tabIndex', value: 5 }
-                }, {
-                    message: 'should not render disabled (if not set)',
-                    attr: 'tabIndex',
-                    props: { },
-                    result: { prop: 'disabled', value: undefined }
-                }, {
-                    message: 'should not render disabled (if set to false)',
-                    attr: 'tabIndex',
-                    props: { disabled: false },
-                    result: { prop: 'disabled', value: undefined }
-                }, {
-                    message: 'should render disabled',
-                    attr: 'tabIndex',
-                    props: { disabled: true },
-                    result: { prop: 'disabled', value: true }
-                }, {
-                    message: 'should not render readonly (if not set)',
-                    attr: 'readonly',
-                    props: { },
-                    result: { prop: 'readOnly', value: undefined }
-                }, {
-                    message: 'should not render readonly (if set to false)',
-                    attr: 'readonly',
-                    props: { readonly: false },
-                    result: { prop: 'readOnly', value: undefined }
-                }, {
-                    message: 'should render readonly',
-                    attr: 'readonly',
-                    props: { readonly: true },
-                    result: { prop: 'readOnly', value: true }
-                }, {
-                    message: 'should not render name',
-                    attr: 'name',
-                    props: { },
-                    result: { prop: 'name', value: undefined }
-                }, {
-                    message: 'should render name',
-                    attr: 'name',
-                    props: { name: 'zip-code' },
-                    result: { prop: 'name', value: 'zip-code' }
-                }, {
-                    message: 'should not render title',
-                    attr: 'title',
-                    props: { },
-                    result: { prop: 'title', value: undefined }
-                }, {
-                    message: 'should render title',
-                    attr: 'title',
-                    props: { title: 'Name' },
-                    result: { prop: 'title', value: 'Name' }
-                }, {
-                    message: 'should not render placeholder',
-                    attr: 'placeholder',
-                    props: { },
-                    result: { prop: 'placeholder', value: undefined }
-                }, {
-                    message: 'should render placeholder',
-                    attr: 'placeholder',
-                    props: { placeholder: 'Enter your ...' },
-                    result: { prop: 'placeholder', value: 'Enter your ...' }
-                }
-            ].forEach((testCase) => {
-                it(testCase.message, () => {
-                    const input = shallow(<MaskedTextBox {...testCase.props} />).find('input');
-                    expect(input.prop(testCase.result.prop)).toBe(testCase.result.value);
-                });
-            });
-        });
-    });
-
-    describe('functionality', () => {
-        let result;
-        beforeEach(() => {
-            result = null;
-        });
-
-        afterEach(() => {
-            result.unmount();
-        });
-
-        const sumulate = (event, value, selection) => {
-            const input = result.find('input');
-            const element = (input.getDOMNode() as HTMLInputElement);
-            element.value = value;
-            element.selectionStart = selection.start;
-            element.selectionEnd = selection.end;
-            input.simulate(event);
-        };
-
-        it('changing value updates the input value', () => {
-            result = mount((
-              <MaskedTextBox mask="000" value="123" />
-            ));
-
-            result.setProps({ value: '567' });
-
-            expect(result.instance().value).toEqual('567');
-            expect(result.instance().element.value).toEqual('567');
-        });
-
-        [
-            {
-                title: 'typing correct value',
-                inputOnChange: {
-                    value: '1___',
-                    selection: { start: 1, end: 1 }
-                },
-                result: {
-                    value: '1__',
-                    selection: { start: 1, end: 1 }
-                }
-            }, {
-                title: 'typing wrong value',
-                inputOnChange: {
-                    value: 'a',
-                    selection: { start: 1, end: 1 }
-                },
-                result: {
-                    value: '___',
-                    selection: { start: 0, end: 0 }
-                }
-            }
-        ].forEach((testCase) => {
-            it(testCase.title, () => {
-                let newValue;
-                let newValueArgument;
-                let selection = { start: null, end: null };
-
-                const onChange = (e) => {
-                    newValue = e.target.value;
-                    newValueArgument = e.value;
-                    selection.start = e.selectionStart;
-                    selection.end = e.selectionEnd;
-                };
-                result = mount(<MaskedTextBox mask="000" onChange={onChange} />);
-
-                sumulate('change', testCase.inputOnChange.value, testCase.inputOnChange.selection);
-
-                expect(newValue).toEqual(testCase.result.value);
-                expect(newValueArgument).toEqual(testCase.result.value);
-                expect(selection.start).toEqual(testCase.result.selection.start);
-                expect(selection.end).toEqual(testCase.result.selection.end);
-            });
-        });
-
-        it('paste with no mask', () => {
-            let newValue;
-            let selection = { start: null, end: null };
-
-            const onChange = (e) => {
-                newValue = e.target.value;
-                selection.start = e.selectionStart;
-                selection.end = e.selectionEnd;
-            };
-            result = mount(<MaskedTextBox value="test" onChange={onChange} />);
-
-            const input = result.find('input');
-
-            input.simulate('paste', { target: { selectionStart: 1, selectionEnd: 1 } });
-            sumulate('change', 'tXest', { start: 2, end: 2 });
-
-            expect(newValue).toEqual('tXest');
-        });
-
-        it('paste with mask', () => {
-            let newValue;
-            let selection = { start: null, end: null };
-
-            const onChange = (e) => {
-                newValue = e.target.value;
-                selection.start = e.selectionStart;
-                selection.end = e.selectionEnd;
-            };
-            result = mount(<MaskedTextBox mask="000" value="___" onChange={onChange} />);
-
-            const input = result.find('input');
-
-            input.simulate('paste', { target: { selectionStart: 1, selectionEnd: 1 } });
-            sumulate('change', '_123', { start: 4, end: 4 });
-
-            expect(newValue).toEqual('_12');
-            expect(selection.start).toEqual(3);
-            expect(selection.end).toEqual(3);
-        });
-
-        it('paste with mask and selection', () => {
-            let newValue;
-            let selection = { start: null, end: null };
-
-            const onChange = (e) => {
-                newValue = e.target.value;
-                selection.start = e.selectionStart;
-                selection.end = e.selectionEnd;
-            };
-            result = mount(<MaskedTextBox mask="000" value="___" onChange={onChange} />);
-
-            const input = result.find('input');
-
-            input.simulate('paste', { target: { selectionStart: 1, selectionEnd: 3 } });
-            sumulate('change', '_123', { start: 4, end: 4 });
-
-            expect(newValue).toEqual('_12');
-            expect(selection.start).toEqual(3);
-            expect(selection.end).toEqual(3);
-        });
-
-        it('paste the masked value', () => {
-            let newValue;
-            let selection = { start: null, end: null };
-
-            const onChange = (e) => {
-                newValue = e.target.value;
-                selection.start = e.selectionStart;
-                selection.end = e.selectionEnd;
-            };
-            result = mount(<MaskedTextBox mask="(000)-00" value="(___)-__" onChange={onChange} />);
-
-            const input = result.find('input');
-
-            input.simulate('paste', { target: { selectionStart: 0, selectionEnd: 8 } });
-            sumulate('change', '(123)-45', { start: 8, end: 8 });
-
-            expect(newValue).toEqual('(123)-45');
-            expect(selection.start).toEqual(8);
-            expect(selection.end).toEqual(8);
-        });
-
-        it('paste less chars then the selection range', () => {
-            let newValue;
-            let selection = { start: null, end: null };
-
-            const onChange = (e) => {
-                newValue = e.target.value;
-                selection.start = e.selectionStart;
-                selection.end = e.selectionEnd;
-            };
-            result = mount(<MaskedTextBox mask="000" value="123" onChange={onChange} />);
-
-            const input = result.find('input');
-
-            // select 12 and paste 5
-            input.simulate('paste', { target: { selectionStart: 0, selectionEnd: 2 } });
-            sumulate('change', '53', { start: 1, end: 1 });
-
-            expect(newValue).toEqual('5_3');
-            expect(selection.start).toEqual(2);
-            expect(selection.end).toEqual(2);
-        });
-
-        it('paste more chars then the selection range', () => {
-            let newValue;
-            let selection = { start: null, end: null };
-
-            const onChange = (e) => {
-                newValue = e.target.value;
-                selection.start = e.selectionStart;
-                selection.end = e.selectionEnd;
-            };
-            result = mount(<MaskedTextBox mask="000" value="123" onChange={onChange} />);
-
-            const input = result.find('input');
-
-            // select 12 and paste 678
-            input.simulate('paste', { target: { selectionStart: 0, selectionEnd: 2 } });
-            sumulate('change', '6783', { start: 3, end: 3 });
-
-            expect(newValue).toEqual('673');
-            expect(selection.start).toEqual(2);
-            expect(selection.end).toEqual(2);
-        });
-    });
-});
-
-describe('maskingChanged function', () => {
-    const testMaskingProps: MaskedTextBoxProps = {
-        prompt: '_',
-        promptPlaceholder: ' ',
-        includeLiterals: false,
-        mask: '00',
-        rules: { X: /z/ }
-    };
-
-    [
-        {
-            message: 'should not be changed when pass same props',
-            props: {
-                props1: { ...testMaskingProps },
-                props2: { ...testMaskingProps }
-            },
-            result: false
-        }, {
-            message: 'should be changed when mask is different',
-            props: {
-                props1: { mask: '0' },
-                props2: { mask: '9' }
-            },
-            result: true
-        }, {
-            message: 'should be changed when prompt is different',
-            props: {
-                props1: { prompt: '_' },
-                props2: { prompt: ' ' }
-            },
-            result: true
-        }, {
-            message: 'should be changed when promptPlaceholder is different',
-            props: {
-                props1: { promptPlaceholder: ' ' },
-                props2: { promptPlaceholder: '' }
-            },
-            result: true
-        }, {
-            message: 'should be changed when new rule is added',
-            props: {
-                props1: { rules: {...MaskedTextBox.defaultProps.rules } },
-                props2: { rules: {...MaskedTextBox.defaultProps.rules, X: /Y/ } }
-            },
-            result: true
-        }, {
-            message: 'should be changed when rules are removed',
-            props: {
-                props1: { rules: {...MaskedTextBox.defaultProps.rules } },
-                props2: { }
-            },
-            result: true
-        }, {
-            message: 'should not be changed when rules are different',
-            props: {
-                props1: { rules: {...MaskedTextBox.defaultProps.rules, X: /X/ } },
-                props2: { rules: {...MaskedTextBox.defaultProps.rules, X: /Y/ } }
-            },
-            result: true
-        }
-    ].forEach((testCase) => {
-        it(testCase.message, () => {
-            expect(maskingChanged(testCase.props.props1, testCase.props.props2)).toEqual(testCase.result);
-        });
-    });
-});