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

package/test/NumericTextBox.tsx

@@ -1,984 +0,0 @@
-import * as React from 'react';
-
-import { Enzyme } from '@progress//kendo-react-tasks/test-utils';
-import { loadMessages, LocalizationService } from '@progress/kendo-react-intl';
-
-const { shallow, mount } = Enzyme;
-
-import {
-    NumericTextBox
-} from '../src/numerictextbox/NumericTextBox';
-
-import {
-    messages,
-
-    numericDecreaseValue as decreaseValue,
-    numericIncreaseValue as increaseValue
-} from '../src/messages';
-import { IntlService, load } from '@progress/kendo-react-intl';
-import { NumericTextBoxChangeEvent } from '../src/numerictextbox/interfaces/NumericTextBoxChangeEvent';
-import { sanitizeNumber } from '../src/numerictextbox/utils';
-
-// Bulgarian format space symbol - it's not regular space (32)
-const fs = String.fromCharCode(160);
-const skip = undefined;
-const customCurrencyFormat = {
-    style: 'currency',
-    currency: 'EUR',
-    currencyDisplay: 'name'
-};
-
-const testSanitize = (value, expectedValue, format?, prevLooseValue?, expectedEventValue?, isPaste?) => {
-    const result = sanitizeNumber(
-        {currentLooseValue: value, selectionStart: 0, selectionEnd: 0, prevLooseValue, isPaste} as any,
-        format,
-        new IntlService('bg')
-    );
-
-    expect(result.currentLooseValue).toBe(expectedValue);
-
-    if (expectedEventValue !== undefined) {
-        expect(result.eventValue).toBe(expectedEventValue);
-    }
-};
-
-const testSanitizePosition = (value, position, expectedValue, expectedPosition, format?, prevLooseValue?) => {
-    const newState = sanitizeNumber(
-        {
-            currentLooseValue: value,
-            selectionStart: position,
-            selectionEnd: position,
-            prevLooseValue: prevLooseValue
-        } as any,
-        format,
-        new IntlService('bg'));
-    expect(newState.currentLooseValue).toBe(expectedValue);
-    expect(newState.selectionStart).toBe(expectedPosition);
-};
-
-const testSanitizeEn = (value, position, expectedValue, expectedPosition, format?, prevLooseValue?) => {
-    const newState = sanitizeNumber(
-        {
-            currentLooseValue: value,
-            selectionStart: position,
-            selectionEnd: position,
-            prevLooseValue: prevLooseValue
-        } as any,
-        format,
-        new IntlService('en'));
-    expect(newState.currentLooseValue).toBe(expectedValue);
-    expect(newState.selectionStart).toBe(expectedPosition);
-};
-
-const loadCldr = () => {
-    load(
-        require('cldr-core/supplemental/likelySubtags.json'),
-        require('cldr-core/supplemental/currencyData.json'),
-        require('cldr-core/supplemental/weekData.json'),
-
-        require('cldr-numbers-full/main/bg/numbers.json'),
-        require('cldr-numbers-full/main/bg/currencies.json'),
-        require('cldr-dates-full/main/bg/ca-gregorian.json'),
-        require('cldr-dates-full/main/bg/dateFields.json'),
-        require('cldr-dates-full/main/bg/timeZoneNames.json')
-    );
-};
-
-describe('NumericTextBox', () => {
-
-    beforeEach(() => {
-        spyOn(console, 'error');
-    });
-
-    describe('sanitizeNumber', () => {
-        loadCldr();
-
-        it('sanitize decimal number and minus symbol', () => {
-            testSanitize('-3,0-', '3', undefined, '-3,0');
-        });
-
-        it('sanitize double decimal symbol', () => {
-            testSanitize(',,', ',' , undefined, ',');
-        });
-
-        it('sanitize percent format', () => {
-            testSanitize('123%', '123%' , 'p', '12%', 1.23);
-        });
-
-        it('sanitize percent format paste', () => {
-            testSanitize('1', '1%' , 'p', '', 0.01, true);
-        });
-
-        it('sanitize percent format', () => {
-            testSanitize('12300%', '12 300%' , 'p', '12 300%', 123);
-        });
-
-        it('sanitize percent format deletion', () => {
-            testSanitize('%', '', 'p', '1%', null);
-        });
-
-        it('sanitize percent format deletion with decimal places', () => {
-            testSanitize('4', '4,0%', 'p1', '1%', 0.04);
-        });
-
-        it('sanitize percent format with initial value', () => {
-            testSanitize('12', '12%' , 'p', undefined, 0.12);
-        });
-
-        it('sanitize repetitive number char', () => {
-            testSanitize('111,', '111,');
-        });
-
-        it('sanitize decimal symbol', () => {
-            testSanitize(',', '0,');
-        });
-
-        it('sanitize decimal symbol with no decimal', () => {
-            testSanitize(',', '0', '#', '');
-        });
-
-        it('sanitize another culture group symbol', () => {
-            testSanitize('.', '');
-        });
-
-        it('sanitize minus symbol when previous is null', () => {
-            testSanitize('-', '-0', undefined, '');
-        });
-
-        it('sanitize group symbol', () => {
-            testSanitize(' ', '');
-        });
-
-        it('sanitize exponential symbol', () => {
-            testSanitize('e', '');
-        });
-
-        // Special case comes when format have OPTIONAL DECIMAL PLACES
-        it('sanitize zero with optional decimals', () => {
-            testSanitize('0,00', '0,00', undefined, '0,0');
-        });
-
-        it('sanitize number deleting zero from negative zero', () => {
-            testSanitize('-', '', undefined, '-0');
-        });
-
-        it('sanitize replacing value', () => {
-            testSanitize('-', '-0', undefined, '123455');
-        });
-
-        it('sanitize number with two decimals', () => {
-            testSanitize('1,01', '1,01');
-        });
-
-        it('sanitize number with several minus symbols', () => {
-            testSanitize('-0-', '-0');
-        });
-
-        it('sanitize number with leading zeros', () => {
-            // leading zeros are not problem as you are not typing backwards
-            testSanitize('000,1', '000,1', '000.##');
-        });
-
-        it('sanitize number ending on letters', () => {
-            testSanitize(',sad', ',');
-        });
-
-        it('sanitize number ending on letters with custom format', () => {
-            testSanitize('(1,)', '(1,)', '#.#;(#.#)');
-        });
-
-        it('sanitize number several decimal separators', () => {
-            testSanitize('1,111,010', '1,111010', 'n2', '1,111010');
-        });
-
-        it('sanitize number with optional decimals', () => {
-            testSanitize('1,00', '1,00', undefined, '1,0');
-        });
-
-        it('sanitize number with optional decimals and custom negative format', () => {
-            testSanitize('-1,00', '(1)', '#.#;(0.##)', '1,00');
-        });
-
-        it('sanitize number with optional decimals', () => {
-            testSanitize('1,00', '1,0', '#.#;(0.##)', '1,0');
-        });
-
-        it('sanitize number with optional decimals and deletion', () => {
-            testSanitize('1', '1', '#.#', '1,');
-        });
-
-        it('sanitize number with required decimals and deletion', () => {
-            testSanitize('10', '1,0', '#.0', '1,0');
-        });
-
-        it('sanitize number with optional decimals during paste', () => {
-            testSanitize('-1,00', '(1)', '#.#;(0.##)', undefined, undefined, true);
-        });
-
-        it('sanitize number with optional decimals and grouping', () => {
-            // case when from formatted number we can move to unformatted due to decimal ending on zero
-            // Keep in mind that in BG culture group separator is not SPACE!
-            testSanitize('1 111,010', '1 111,010', undefined, '1 111,01');
-        });
-
-        it('sanitize number with optional decimals and more decimals than max', () => {
-            // case when you try handle trailing zero incorrectly
-            testSanitize('1,0000', '1,000', undefined, '1,000');
-        });
-
-        it('sanitize number where format is without decimals', () => {
-            testSanitize('1,', `1`, 'n0');
-        });
-
-        it('sanitize number with optional decimals and accounting format', () => {
-            // case when from formatted number we can move to unformatted due to decimal ending on zero
-            testSanitize(`(1 111,010${fs}лв.)`, `(1 111,010${fs}лв.)`, 'a3');
-        });
-
-        // actually not valid case
-        it('sanitize decimal negative zero', () => {
-            testSanitize('-,0', '-,0', undefined, '-,0');
-        });
-
-        it('sanitize zero', () => {
-            testSanitize('-0,0', '-0,0', undefined, '-0,');
-        });
-
-        it('sanitize decimal zero', () => {
-            testSanitize(',', '0,', undefined, '');
-        });
-
-        it('sanitize typing more than 15 symbols', () => {
-            testSanitize('11,11111111111111', '11,1111111111111', '##.#############', '11,1111111111111');
-        });
-
-        it('sanitize negative parsable decimal', () => {
-            testSanitize('-,1', '-0,1');
-        });
-
-        it('sanitize decimal negative zero', () => {
-            testSanitize('-,', '-,');
-        });
-
-        it('sanitize NaN as string zero', () => {
-            testSanitize('NaN', '');
-        });
-
-        it('sanitize NaN zero', () => {
-            testSanitize(NaN, '', skip, skip, null);
-        });
-
-        /// to format
-        it('sanitize negative', () => {
-            testSanitize('-10,', '-10,', skip, skip, -10);
-        });
-
-        it('sanitize negative parsable', () => {
-            testSanitize('-0,123', '-0,123', skip, skip, -0.123);
-        });
-
-        it('sanitize accounting format', () => {
-            testSanitize(`(123${fs}лв.)`, `(123,00${fs}лв.)`, 'a2', skip, -123);
-        });
-
-        it('sanitize decimal inside format symbols', () => {
-            testSanitize(`123${fs}л,в.`, `123${fs}лв.`, 'a2', `123${fs}лв.`, 123);
-        });
-
-        it('sanitize dots inside format symbols', () => {
-            testSanitize(`123${fs}л,.в.`, `123${fs}лв.`, 'a2', `123${fs}лв.`, 123);
-        });
-
-        it('sanitize typing after format', () => {
-            testSanitize(`(123${fs}лв.4)`, `(123${fs}лв.)`, 'a2', `(123${fs}лв.)`, -123);
-        });
-
-        it('sanitize typing format symbols in numbers', () => {
-            testSanitize(`(123.,00${fs}лв.)`, `(123,00${fs}лв.)`, 'a2', undefined, -123);
-        });
-
-        it('sanitize trailing format symbols', () => {
-            testSanitize(`(123,00..${fs}лв.)`, `(123,00${fs}лв.)`, 'a2', `(123,00${fs}лв.)`, -123);
-        });
-
-        it('sanitize format symbols in front of prefix', () => {
-            testSanitize(`(.123,00${fs}лв.)`, `(123,00${fs}лв.)`, 'a2', `(123,00${fs}лв.)`, -123);
-        });
-
-        it('sanitize format symbols in front of number', () => {
-            testSanitize(`лв. .123,00`, `лв. 123,00`, '$ ##.##', `лв. 123,00`, 123);
-        });
-
-        it('sanitize deleted number with trailing zero', () => {
-            testSanitize(`лв. 123,0`, `лв. 123,00`, '$ ##.00', `лв. 123,30`, 123);
-        });
-
-        it('sanitize typing minus', () => {
-            testSanitizePosition('-', 1, '-0,00', 2, 'n2', '');
-        });
-
-        it('sanitize replacing minus', () => {
-            testSanitizePosition('4', 1, '4', 1, 'n2', '-1');
-        });
-
-        it('sanitize typing minus in existing number', () => {
-            testSanitizePosition('-', 1, '-0,00', 2, 'n2', '');
-        });
-
-        it('sanitize typing minus in existing number with prefix format', () => {
-            testSanitizePosition(`12-3,00${fs}лв.`, 3, `(123,00${fs}лв.)`, 3, 'a2', `123,00${fs}лв.`);
-        });
-
-        it('sanitize typing minus in existing number with suffix format', () => {
-            testSanitizePosition(`12-3,00${fs}лв.`, 3, `-123,00${fs}лв.`, 3, 'c2', `123,00${fs}лв.`);
-        });
-
-        it('sanitize removing minus in existing number with suffix format', () => {
-            testSanitizePosition(`123,00${fs}лв.`, 3, `123,00${fs}лв.`, 3, 'c2', `-123,00${fs}лв.`);
-        });
-
-        it('sanitize typing minus in existing number with suffix format', () => {
-            testSanitizePosition(`-12-3,00${fs}лв.`, 4, `123,00${fs}лв.`, 2, 'c2', `-123,00${fs}лв.`);
-        });
-
-        it('sanitize typing dublicated decimal', () => {
-            testSanitizePosition(`1,,2${fs}лв.`, 3, `1,2${fs}лв.`, 3, 'c2', `1,2${fs}лв.`);
-        });
-
-        it('sanitize deleting decimal', () => {
-            testSanitizePosition(`12${fs}лв.`, 1, `1,2${fs}лв.`, 1, 'c2', `1,2${fs}лв.`);
-        });
-
-        it('sanitize adding decimal and group symbol', () => {
-            testSanitizePosition(`1111`, 4, `1${fs}111`, 5, undefined, `111`);
-        });
-
-        it('sanitize adding decimal and group symbol before the symbol', () => {
-            testSanitizePosition(`1111`, 1, `1${fs}111`, 1, undefined, `111`);
-        });
-
-        it('sanitize deleting decimal and group symbol', () => {
-            testSanitizePosition(`1 11`, 2, `111`, 1, undefined, `1 111`);
-        });
-
-        it('sanitize deleting decimal and group symbol before the symbol', () => {
-            testSanitizePosition(` 111`, 1, `111`, 0, undefined, `1 111`);
-        });
-
-        it('sanitize deleting decimal and group symbol before the symbol', () => {
-            testSanitizePosition(`1 11`, 4, `111`, 3, undefined, `1 111`);
-        });
-
-        it('sanitize deleting last number before decimal', () => {
-            testSanitizePosition(`,30${fs}лв.`, 0, `0,30${fs}лв.`, 1, 'a2', `0,30${fs}лв.`);
-        });
-
-        it('sanitize typing first number with suffix based format', () => {
-            testSanitizePosition(`1`, 1, `1,00${fs}лв.`, 1, 'a2', ``);
-        });
-
-        it('sanitize typing first number with prefix based format', () => {
-            testSanitizePosition(`1`, 1, `лв. 1,00`, 5, '$ #.00', ``);
-        });
-
-        it('sanitize next value have less numbers than previous', () => {
-            testSanitizePosition(`-00`, 3, `-0`, 2, undefined, `-0`);
-        });
-
-        it('sanitize deleting group symbol', () => {
-            testSanitizePosition(`12 323423`, 6, `12 323 423`, 6, undefined, `12 323 423`);
-        });
-
-        it('sanitize deleting decimal result', () => {
-            testSanitizePosition(`34,3${fs}лв.`, 4, `34,30${fs}лв.`, 4, 'a2', `34,30${fs}лв.`);
-        });
-
-        it('sanitize typing invalid symbols after number', () => {
-            testSanitizePosition(`34,30.${fs}лв.`, 6, `34,30${fs}лв.`, 5, 'a2', `34,30${fs}лв.`);
-        });
-
-        it('sanitize trying to delete prefix', () => {
-            testSanitizePosition(`34,30${fs}лв.)`, 0, `(34,30${fs}лв.)`, 1, 'a2', `(34,30${fs}лв.)`);
-        });
-
-        it('sanitize gap contains decimal separator', () => {
-            testSanitizePosition(`10, лв.`, 3, `10, лв.`, 3, '#.## $', `10 лв.`);
-        });
-
-        it('sanitize typing decimal', () => {
-            testSanitizePosition(`,`, 1, `0,00${fs}лв.`, 2, 'a2', `34,30${fs}лв.`);
-        });
-
-        it('sanitize typing more decimals than allowed', () => {
-            testSanitizePosition(`34,300${fs}лв.`, 6, `34,30${fs}лв.`, 5, 'a2', `34,30${fs}лв.`);
-        });
-
-        it('sanitize first digit type suffix', () => {
-            testSanitizePosition(`1`, 1, `1,00 лв.`, 1, '#.00 $', ``);
-        });
-
-        it('sanitize first digit type suffix with prefix zero and no decimal', () => {
-            testSanitizePosition(`1`, 1, `0001 лв.`, 4, '0000 $', ``);
-        });
-
-        it('sanitize first digit type prefix wo currency', () => {
-            testSanitizePosition(`1`, 1, `1,00`, 1, '#.00', ``);
-        });
-
-        it('sanitize first digit type suffix with prefix zero and no decimal wo currency', () => {
-            testSanitizePosition(`1`, 1, `0001`, 4, '0000', ``);
-        });
-
-        it('sanitize first digit type prefix', () => {
-            testSanitizePosition(`1`, 1, `лв. 1,00`, 5, '$ #.00', ``);
-        });
-
-        it('sanitize first digit type prefix with prefix zero and no decimal', () => {
-            testSanitizePosition(`1`, 1, `лв. 0001`, 8, '$ 0000', ``);
-        });
-
-        it('sanitize deleting calculate next selection out of range', () => {
-            testSanitizePosition(` 111,00${fs}лв.`, 0, `111,00${fs}лв.`, 0, 'a2', `1 111,00${fs}лв.`);
-        });
-
-        it('sanitize max number', () => {
-            testSanitizePosition(
-                `111 111 111 111 111 1141 752,00 лв.`,
-                1,
-                `11 111 111 111 111 114 752,00 лв.`,
-                1,
-                'a2',
-                `11 111 111 111 111 114 752,00 лв.`
-            );
-        });
-
-        it('sanitize toggle minus sign on zero', () => {
-            testSanitizePosition(`-0-,00${fs}лв.`, 3, `0,00${fs}лв.`, 1, 'c2', `-0,00${fs}лв.`);
-        });
-
-        it('sanitize delete last digit account format', () => {
-            testSanitizePosition(`(,00${fs}лв.)`, 1, `(0,00${fs}лв.)`, 2, 'a2', `(2,00${fs}лв.)`);
-        });
-
-        it('sanitize type more decimals than allowed in a2', () => {
-            testSanitizePosition(`(1,323${fs}лв.)`, 6, `(1,32${fs}лв.)`, 5, 'a2', `(1,32${fs}лв.)`);
-        });
-
-        // TODO: fix positioning in this case
-        it('sanitize works with 1 format add', () => {
-            testSanitizeEn(`12.00 euro`, 2, `12.00 euros`, 2, customCurrencyFormat, `1.00 euro`);
-        });
-
-        it('sanitize works with 1 format remove', () => {
-            testSanitizeEn(`1.00 euros`, 1, `1.00 euro`, 1, customCurrencyFormat, `12.00 euros`);
-        });
-
-        it('sanitize works with 0 format add', () => {
-            testSanitizeEn(`01.00 euros`, 2, `1.00 euro`, 1, customCurrencyFormat, `0.00 euros` );
-        });
-
-        it('sanitize works with 0 format remove', () => {
-            testSanitizeEn(`.00 euro`, 0, `0.00 euros`, 1, customCurrencyFormat, `1.00 euro`);
-        });
-
-        it('sanitize works with 12 format with decimal ending on one', () => {
-            testSanitizeEn(`12.01 euro`, 2, `12.01 euros`, 2, customCurrencyFormat, `1.01 euro`);
-        });
-
-        it('sanitize works with 12 format with decimal ending on one', () => {
-            testSanitizeEn(`1111.01 euro`, 4, `1,111.01 euros`, 5, customCurrencyFormat, `111.01 euro`);
-        });
-
-        it('sanitize works with 12 format with decimal ending on one', () => {
-            testSanitizeEn(`00000.01`, 0, `00000.01`, 1, '00000.##', `100000.01`);
-        });
-    });
-
-    describe('renders', () => {
-        it('should render a span', () => {
-            const type = shallow(<NumericTextBox />).type();
-            expect(type).toEqual('span');
-        });
-
-        it('should render correct class', () => {
-            const component = shallow(<NumericTextBox />);
-
-            expect(component.hasClass('k-numerictextbox')).toBe(true);
-            expect(component.hasClass('k-input')).toBe(true);
-        });
-
-        it('should have an Input with correct class', () => {
-            const inputClassName = shallow(<NumericTextBox />).find('input').hasClass('k-input-inner');
-            expect(inputClassName).toBe(true);
-        });
-
-        it('should render spinners', () => {
-            const spinners = mount(<NumericTextBox />).find('.k-input-spinner button');
-            expect(spinners.length).toEqual(2);
-        });
-
-        it('should not render spinners', () => {
-            const spinners = shallow(<NumericTextBox spinners={false} />).find('.k-input-spinner button');
-            expect(spinners.length).toEqual(0);
-        });
-
-        it('should render spinners title', () => {
-            const numeric = shallow(<NumericTextBox />);
-            const increaseSpinner = numeric.find('.k-spinner-increase');
-            const decreaseSpinner = numeric.find('.k-spinner-decrease');
-
-            expect(increaseSpinner.prop('title')).toEqual(messages[increaseValue]);
-            expect(decreaseSpinner.prop('title')).toEqual(messages[decreaseValue]);
-        });
-
-        it('should render spinners aria-label', () => {
-            const numeric = shallow(<NumericTextBox />);
-            const increaseSpinner = numeric.find('.k-spinner-increase');
-            const decreaseSpinner = numeric.find('.k-spinner-decrease');
-
-            expect(increaseSpinner.prop('aria-label')).toEqual(messages[increaseValue]);
-            expect(decreaseSpinner.prop('aria-label')).toEqual(messages[decreaseValue]);
-        });
-
-        // describe('language translations', () => {
-        //     const bgMessages = { [increaseValue]: 'Увеличи', [decreaseValue]: 'Намали' };
-
-        //     loadMessages(bgMessages, 'bg');
-
-        //     const numeric = shallow(
-        //         <NumericTextBox />,
-        //         {
-        //             context: { kendoLocalizationService: new LocalizationService('bg') }
-        //         });
-        //     const increaseSpinner = numeric.find('button.k-spinner-increase');
-        //     const decreaseSpinner = numeric.find('button.k-spinner-decrease');
-
-        //     it('should render spinners title', () => {
-        //         expect(increaseSpinner.prop('title')).toEqual(bgMessages[increaseValue]);
-        //         expect(decreaseSpinner.prop('title')).toEqual(bgMessages[decreaseValue]);
-        //     });
-
-        //     it('should render spinners aria-label', () => {
-        //         expect(increaseSpinner.prop('aria-label')).toEqual(bgMessages[increaseValue]);
-        //         expect(decreaseSpinner.prop('aria-label')).toEqual(bgMessages[decreaseValue]);
-        //     });
-        // });
-    });
-
-    it('have null default value and renders empty input', () => {
-        const numeric = mount(<NumericTextBox />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        expect(el.value).toBe('');
-    });
-
-    it('have empty placeholder by default', () => {
-        const numeric = mount(<NumericTextBox />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        expect(el.placeholder).toBe('');
-    });
-
-    it('apply placeholder correctly', () => {
-        const numeric = mount(<NumericTextBox placeholder="please enter a number" />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        expect(el.placeholder).toBe('please enter a number');
-    });
-
-    it('formats defaultValue correctly for default culture', () => {
-        const numeric = mount(<NumericTextBox defaultValue={123456.12345} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        expect(el.value).toBe('123,456.123');
-    });
-
-    it('should fire onChange event once and with correct value', () => {
-        let c = 0;
-        let val: number = 0;
-        const onChange = (e: any) => { c++; val = e.value; };
-        const wraped = mount(<NumericTextBox onChange={onChange} />);
-        const numeric = wraped.find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        el.value = '27';
-        el.selectionStart = 2;
-        el.selectionEnd = 2;
-        input.simulate('change');
-        expect(c).toBe(1);
-        expect(val).toBe(27);
-    });
-
-    it('should fire onChange based on element value, not based on the event', () => {
-        let c = 0;
-        let val: number = 0;
-        const onChange = (e: any) => { c++; val = e.value; };
-        const numeric = mount(<NumericTextBox onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        el.value = '27';
-        el.selectionStart = 2;
-        el.selectionEnd = 2;
-        input.simulate('change', { target: { value: '11' } }); // this value should be ignored
-        expect(c).toBe(1);
-        expect(val).toBe(27); // not 11
-    });
-
-    it('should handle consecutive typing and backspacing when uncontrolled', () => {
-        let c = 0;
-        let value;
-        const onChange = (e: any) => { c++; value = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={55} onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        input.simulate('focus');
-        el.value = '1';
-        // el.selectionStart = el.selectionEnd = el.value.length; selection goes at the end by default
-        input.simulate('change');
-        expect(c).toBe(1);
-        expect(value).toBe(1);
-        el.value = el.value + '2'; input.simulate('change');
-        el.value = el.value + '3'; input.simulate('change');
-        el.value = el.value + '.'; input.simulate('change');
-        el.value = el.value + '4'; input.simulate('change');
-        el.value = el.value + '5'; input.simulate('change');
-        expect(value).toBe(123.45);
-        el.value = el.value.slice(0, el.value.length - 1); input.simulate('change');
-        expect(value).toBe(123.4);
-        el.value = el.value.slice(0, el.value.length - 1); input.simulate('change');
-        el.value = el.value.slice(0, el.value.length - 1); input.simulate('change');
-        expect(value).toBe(123);
-        el.value = el.value.slice(0, el.value.length - 1); input.simulate('change');
-        expect(value).toBe(12);
-        el.value = el.value.slice(0, el.value.length - 1); input.simulate('change');
-        expect(value).toBe(1);
-        el.value = el.value.slice(0, el.value.length - 1); input.simulate('change');
-        expect(value).toBe(null);
-    });
-
-    it('should handle consecutive typing with zeros', () => {
-        let c = 0;
-        let value;
-        const onChange = (e: any) => { c++; value = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={55} onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-
-        const el = (input.getDOMNode() as HTMLInputElement);
-        input.simulate('focus');
-        el.value = '0';
-        input.simulate('change');
-        expect(c).toBe(1);
-        expect(value).toBe(0);
-        el.value = el.value + '0'; input.simulate('change');
-        el.value = el.value + '0'; input.simulate('change');
-        el.value = el.value + '.'; input.simulate('change');
-        el.value = el.value + '0'; input.simulate('change');
-        el.value = el.value + '1'; input.simulate('change');
-        expect(c).toBe(6);
-        expect(value).toBe(0.01);
-    });
-
-    it('should correct invalid value on blur', () => {
-        let c = 0;
-        let value;
-        const onChange = (e: any) => { c++; value = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={1} format={'p'} min={0} max={1} />).find(NumericTextBox);
-        const input = numeric.find('input');
-
-        const el = (input.getDOMNode() as HTMLInputElement);
-        input.simulate('focus');
-
-        el.value = '1000%';
-        input.simulate('change');
-        input.simulate('blur');
-        expect(el.value).toBe('100%');
-    });
-
-    it('should handle consecutive typing', () => {
-        let c = 0;
-        let value;
-        const onChange = (e: any) => { c++; value = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={55} onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        el.value = '0';
-        input.simulate('change');
-        expect(c).toBe(1);
-        expect(value).toBe(0);
-        for (let i = 0; i <= 9; i++) {
-            el.value = el.value + '' + i.toString(); input.simulate('change');
-        }
-        expect(c).toBe(11);
-        expect(value).toBe(123456789);
-    });
-
-    it('increases its value or up spin button click', () => {
-        let c = 0;
-        let val = 0;
-        const onChange = (e: any) => { c++; val = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={1234.55} onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        const spinUpButton = numeric.find('.k-spinner-increase').first();
-        spinUpButton.simulate('click');
-        expect(c).toBe(1);
-        expect(el.value).toBe('1,235.55');
-        expect(val).toBe(1235.55);
-    });
-
-    it('decrease its value or down spin button click', () => {
-        let c = 0;
-        let val = 0;
-        const onChange = (e: any) => { c++; val = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={1234.55} onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        const spinDownButton = numeric.find('.k-spinner-decrease').first();
-        spinDownButton.simulate('click');
-        expect(c).toBe(1);
-        expect(el.value).toBe('1,233.55');
-        expect(val).toBe(1233.55);
-    });
-
-    it('increases and decreases its value using arrow key up and down', () => {
-        let c = 0;
-        let val = 0;
-        const onChange = (e: any) => { c++; val = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={1234.55} onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        expect(el.value).toBe('1,234.55');
-        input.simulate('keyDown', { keyCode: 38 });
-        expect(el.value).toBe('1,235.55');
-        expect(val).toBe(1235.55);
-        input.simulate('keyDown', { keyCode: 40 });
-        expect(el.value).toBe('1,234.55');
-        expect(val).toBe(1234.55);
-        expect(c).toBe(2);
-    });
-
-    it('parse and format a pasted values', () => {
-        let c = 0;
-        let val: number | null = 0;
-        const onChange = (e: any) => { c++; val = e.value; };
-        const numeric = mount(<NumericTextBox defaultValue={null} onChange={onChange} />).find(NumericTextBox);
-        const input = numeric.find('input');
-        const el = (input.getDOMNode() as HTMLInputElement);
-        expect(el.value).toBe('');
-
-        el.value = '12345.54321';  // paste over empty input
-        el.selectionStart = el.selectionStart = 11;
-        input.simulate('change');
-        expect(el.value).toBe('12,345.543');
-        expect(val).toBe(12345.543);
-
-        el.value = '.21'; // paste over the whole selection
-        el.selectionStart = el.selectionStart = 3;
-        input.simulate('change');
-        expect(el.value).toBe('0.21');
-        expect(val).toBe(0.21);
-
-        el.value = '';  // cut
-        el.selectionStart = el.selectionStart = 0;
-        input.simulate('change');
-        expect(el.value).toBe('');
-        expect(val).toBeNull();
-
-        el.value = '012,345.543';  // paste in empty input
-        el.selectionStart = el.selectionStart = 11;
-        input.simulate('change');
-        expect(el.value).toBe('12,345.543');
-        expect(val).toBe(12345.543);
-
-        el.value = '99' + el.value; // paste in front
-        el.selectionStart = el.selectionStart = 2;
-        input.simulate('change');
-        expect(el.value).toBe('9,912,345.543');
-        expect(val).toBe(9912345.543);
-
-        el.value = '9,5.543'; // paste empty value over selection
-        el.selectionStart = el.selectionStart = 2;
-        input.simulate('change');
-        expect(el.value).toBe('95.543');
-        expect(val).toBe(95.543);
-        expect(c).toBe(6);
-    });
-
-    it('should set name property to HTML input DOM element when name is passed as props', () => {
-        const name = 'myCustomName';
-        let result = mount(<NumericTextBox name={name} />);
-
-        expect(result.find(`input[name="${name}"]`).length).toEqual(1);
-    });
-
-    it('value is correct during change, and after change if controlled', () => {
-        let valueDuringOnChange: number | null = null;
-        let targetValueDuringOnChange: number | null = null;
-
-        const onChange = (e: NumericTextBoxChangeEvent) => {
-            valueDuringOnChange = e.value;
-            targetValueDuringOnChange = e.target.value;
-        };
-        let numericInstance;
-        const wrapper = mount(
-          <NumericTextBox
-            ref={ref => numericInstance = ref}
-            value={1}
-            onChange={onChange}
-            />
-        );
-        const input = wrapper.find(NumericTextBox).find('input');
-
-        const el = (input.getDOMNode() as HTMLInputElement);
-        el.value = '12';
-        el.selectionStart = el.selectionEnd = 2;
-        input.simulate('change');
-
-        expect(valueDuringOnChange || 0).toBe(12);
-        expect(targetValueDuringOnChange || 0).toBe(12);
-        expect(numericInstance.value).toBe(1); // since it is controlled
-    });
-
-    it('value is correct during change, and after change if not controlled', () => {
-        let valueDuringOnChange: number | null = null;
-        let targetValueDuringOnChange: number | null = null;
-
-        const onChange = (e: NumericTextBoxChangeEvent) => {
-            valueDuringOnChange = e.value;
-            targetValueDuringOnChange = e.target.value;
-        };
-        let numericInstance;
-        const wrapper = mount(
-          <NumericTextBox
-            ref={ref => numericInstance = ref}
-            onChange={onChange}
-            />
-        );
-        const input = wrapper.find(NumericTextBox).find('input');
-
-        const el = (input.getDOMNode() as HTMLInputElement);
-        el.value = '12';
-        el.selectionStart = el.selectionEnd = 2;
-        input.simulate('change');
-
-        expect(valueDuringOnChange || 0).toBe(12);
-        expect(targetValueDuringOnChange || 0).toBe(12);
-        expect(numericInstance.value).toBe(12); // since it is not controlled
-    });
-
-    describe('Floating Label functionality', () => {
-        it('should not initiate FloatingLabel if label is not passed as props', () => {
-            const result = shallow(<NumericTextBox />);
-
-            expect(result.find('FloatingLabel').length).toEqual(0);
-        });
-        it('should initiate FloatingLabel if label is passed as props', () => {
-            const result = shallow(<NumericTextBox label="foo" />);
-
-            expect(result.find('FloatingLabel').length).toEqual(1);
-        });
-        it('should pass NumericTextBox label to FloatingLabel', () => {
-            const result = shallow(<NumericTextBox label="foo" />);
-
-            expect(result.find('FloatingLabel').props().label).toEqual('foo');
-        });
-        it('should pass NumericTextBox value to FloatingLabel', () => {
-            const result = shallow(<NumericTextBox label="foo" value={42} />);
-
-            expect(result.find('FloatingLabel').props().editorValue).toEqual('42');
-        });
-        it('should pass NumericTextBox defaultValue as value to FloatingLabel', () => {
-            const result = shallow(<NumericTextBox label="foo" defaultValue={42} />);
-
-            expect(result.find('FloatingLabel').props().editorValue).toEqual('42');
-        });
-        it('should pass NumericTextBox placeholder to FloatingLabel', () => {
-            const result = shallow(<NumericTextBox label="foo" placeholder="foo" />);
-
-            expect(result.find('FloatingLabel').props().editorPlaceholder).toEqual('foo');
-        });
-        it('should set width to NumericTextBox if label is not passed as props', () => {
-            const result = shallow(<NumericTextBox width="210px" />);
-
-            expect(result.find('.k-numerictextbox').props().style.width).toEqual('210px');
-        });
-        it('should pass width to Floating Label if label is passed as props', () => {
-            const result = shallow(<NumericTextBox label="foo" width="210px" />);
-
-            const input = result.find('.k-numerictextbox');
-            const label = result.find('FloatingLabel');
-
-            expect(input.props().style).toEqual(undefined);
-            expect(label.props().style.width).toEqual('210px');
-        });
-    });
-    describe('form validation', () => {
-        let result;
-        it('should set required and be invalid when empty', () => {
-            let componentInstance;
-            result = mount(<NumericTextBox ref={(ref) => componentInstance = ref} required={true} />);
-
-            expect(result.props().required).toEqual(true);
-            expect(componentInstance.validity.valid).toEqual(false);
-        });
-
-        it('should be valid when required is true but value is not empty', () => {
-            let componentInstance;
-            const val = 42;
-            result = mount(<NumericTextBox ref={(ref) => componentInstance = ref} required={true} value={val} />);
-
-            expect(componentInstance.validity.valid).toEqual(true);
-        });
-
-        it('should be invalid when required is true but value is empty', () => {
-            let componentInstance;
-            result = mount(<NumericTextBox ref={(ref) => componentInstance = ref} required={true} value={null} />);
-
-            expect(componentInstance.validity.valid).toEqual(false);
-        });
-
-        it('should expose name getter', () => {
-            let componentInstance;
-            result = mount(<NumericTextBox ref={(ref) => componentInstance = ref} name="foo" />);
-
-            expect(componentInstance.name).toEqual('foo');
-        });
-
-        it('should override validity if valid is passed as props', () => {
-            let componentInstance;
-            result = mount(<NumericTextBox ref={(ref) => componentInstance = ref} required={true} valid={true} />);
-
-            expect(componentInstance.validity.valid).toEqual(true);
-        });
-
-        it('should be valid when value is invalid but valid is set to true', () => {
-            let componentInstance;
-            result = mount(<NumericTextBox ref={(ref) => componentInstance = ref} required={true} valid={true} value={0} />);
-            expect(componentInstance.validity.valid).toEqual(true);
-        });
-
-        it('should **not** apply k-invalid if validityStyles is set to false and value is invalid', () => {
-            result = mount(<NumericTextBox validityStyles={false} required={true} />);
-
-            expect(result.find('.k-invalid').length).toEqual(0);
-        });
-
-        it('should **not** pass invalid if validityStyles is set to false label is present', () => {
-            result = mount(<NumericTextBox label="foo" 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(<NumericTextBox validityStyles={false} valid={false} />);
-
-            expect(result.find('.k-invalid').length).toEqual(0);
-        });
-
-        it('should **not** pass invalid if validityStyles is set to false and override validity with label', () => {
-            result = mount(<NumericTextBox label={'foo'} validityStyles={false} valid={false} />);
-
-            expect(result.find('.k-invalid').length).toEqual(0);
-        });
-    });
-});