@douyinfe/semi-ui 2.19.1-alpha.2 → 2.19.2-alpha.0

package/inputNumber/__test__/inputNumber.test.js

@@ -1,434 +0,0 @@
-import React from 'react';
-import InputNumber, { InputNumber as BaseInputNumber } from '../index';
-import { mount } from 'enzyme';
-import sinon from 'sinon';
-import keyCode from '@douyinfe/semi-foundation/utils/keyCode';
-import * as _ from 'lodash';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-import { numbers } from '@douyinfe/semi-foundation/inputNumber/constants';
-import { Form, withField, useFormApi } from '../../index';
-
-const log = (...args) => console.log(...args);
-const times = (n = 0, fn) => {
-    if (typeof n === 'number' && typeof fn === 'function') {
-        for (let i = 0; i < n; i++) {
-            fn(i);
-        }
-    }
-};
-
-describe(`InputNumber`, () => {
-    /**
-     * test appearance
-     */
-    it(`with 'defaultValue', 'showClear', 'size', 'suffix', 'ref'`, () => {
-        const defaultValue = 1020;
-        const sizeEntries = [
-            ['default', `${BASE_CLASS_PREFIX}-input-default`],
-            ['large', `${BASE_CLASS_PREFIX}-input-large`],
-            ['small', `${BASE_CLASS_PREFIX}-input-small`],
-        ];
-        const showClear = true;
-
-        sizeEntries.forEach(([size, className]) => {
-            const inputNumber = mount(<InputNumber showClear={showClear} defaultValue={defaultValue} size={size} />);
-            expect(inputNumber.find('input').hasClass(className)).toBe(true);
-        });
-
-        const inputNumberWithoutBtn = mount(<InputNumber defaultValue={defaultValue} hideButtons={true} />);
-        expect(inputNumberWithoutBtn.find('button').length).toBe(0);
-
-        /**
-         * ref object
-         */
-        const refObject = { current: undefined };
-        const inputNumberWithRefObject = mount(<InputNumber defaultValue={defaultValue} ref={refObject} />);
-
-        expect(inputNumberWithRefObject.find('input').getDOMNode()).toBe(refObject.current);
-
-        /**
-         * ref function
-         */
-        let refNode = null;
-        const refFn = sinon.spy(node => (refNode = node));
-        const inputNumberWithRefFn = mount(<InputNumber defaultValue={defaultValue} ref={refFn} />);
-
-        expect(refFn.calledOnce).toBe(true);
-        expect(inputNumberWithRefFn.find('input').getDOMNode()).toBe(refNode);
-    });
-
-    /**
-     * test events
-     */
-    it(`with 'value', 'onBlur', 'onChange', 'onInput', 'onFocus', 'onKeyDown'`, () => {
-        const onChange = sinon.spy(log);
-        const oldValue = 1020;
-        const newValue = 1301;
-        const newValidStr = '1309';
-        const newInvalidValue = `1301fd`;
-        const emptyValue = '';
-        const event = {
-            target: {
-                value: newInvalidValue,
-            },
-        };
-
-        const onBlur = sinon.spy();
-        const onFocus = sinon.spy();
-        const onKeyDown = sinon.spy();
-
-        const inputNumber = mount(
-            <InputNumber value={oldValue} onChange={onChange} onBlur={onBlur} onFocus={onFocus} onKeyDown={onKeyDown} />
-        );
-
-        inputNumber.find('input').simulate('change', event);
-
-        expect(onChange.calledOnce).toBe(true);
-        expect(onChange.calledWithMatch(event.target.value)).toBe(true);
-
-        /**
-         * set an invalid value and blur
-         */
-        inputNumber.find('input').simulate('focus');
-        inputNumber.setProps({ value: newInvalidValue });
-        inputNumber.find('input').simulate('blur');
-        expect(onBlur.calledOnce).toBe(true);
-        expect(inputNumber.find('input').instance().value).toBe(oldValue.toString());
-
-        /**
-         * empty
-         */
-        inputNumber.setProps({ value: emptyValue });
-        expect(inputNumber.find('input').getDOMNode().value).toBe('');
-
-        /**
-         * focusing and set a valid value
-         */
-        inputNumber.find('input').simulate('focus');
-        inputNumber.setProps({ value: newValue });
-        inputNumber.find('input').simulate('blur');
-        expect(inputNumber.find('input').instance().value).toBe(newValue.toString());
-
-        /**
-         * focusing and set a invalid value
-         */
-        inputNumber.find('input').simulate('focus');
-        inputNumber.setProps({ value: newInvalidValue });
-        inputNumber.find('input').simulate('blur');
-        expect(inputNumber.find('input').instance().value).toBe(newValue.toString());
-
-        /**
-         * focusing and set a valid value string
-         */
-        inputNumber.find('input').simulate('focus');
-        inputNumber.setProps({ value: newValidStr });
-        inputNumber.find('input').simulate('blur');
-        expect(inputNumber.find('input').instance().value).toBe(newValidStr);
-
-        /**
-         * press up arrow button and down arrow button
-         *
-         * @summary this testing not worked in jest
-         */
-        const upArrowPressedCount = 3;
-        const downArrowPressedCount = 1;
-
-        _.times(upArrowPressedCount, () => {
-            inputNumber.find('input').simulate('keydown', { keyCode: keyCode.UP });
-            // inputNumber.find('input').simulate('keypress', { key: 'ArrowUp' });
-        });
-        _.times(downArrowPressedCount, () => {
-            inputNumber.find('input').simulate('keydown', { keyCode: keyCode.DOWN });
-            // inputNumber.find('input').simulate('keypress', { key: 'ArrowDown' });
-        });
-        // expect(inputNumber.find('input').instance().value).toBe(
-        //     String(Number(newValidStr) + upArrowPressedCount - downArrowPressedCount)
-        // );
-        expect(onKeyDown.called).toBe(true);
-    });
-
-    /**
-     * test limits
-     */
-    it(`with 'max', 'min', 'value', 'onChange', 'precision', 'parser', 'formatter'`, () => {
-        const oldValue = 1020.245;
-        const newValue = 1302.921;
-        const min = 1000;
-        const max = 1300;
-        const event = {
-            target: {
-                value: newValue,
-            },
-        };
-        const precision = 2;
-        const formatter = value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
-        const parser = value => value.replace(/\$\s?|(,*)/g, '');
-
-        const onChange = sinon.spy();
-        const onBlur = sinon.spy();
-
-        const inputNumber = mount(
-            <InputNumber
-                value={oldValue}
-                onChange={onChange}
-                min={min}
-                max={max}
-                onBlur={onBlur}
-                precision={precision}
-                formatter={formatter}
-                parser={parser}
-            />
-        );
-        const inputElem = inputNumber.find('input');
-
-        inputElem.simulate('change', event);
-        expect(onChange.calledTwice).toBe(true);
-        expect(onChange.getCall(1).args[0]).toEqual(Number(newValue.toFixed(precision)));
-        // expect(onChange.calledWithMatch(Number(newValue.toFixed(precision)))).toBe(true);
-        expect(inputElem.instance().value).toBe(formatter(newValue));
-
-        inputElem.simulate('blur');
-        expect(onBlur.calledOnce).toBe(true);
-
-        inputNumber.setProps({ value: newValue });
-        expect(inputElem.instance().value).toBe(formatter(max.toFixed(precision)));
-
-        inputNumber.setProps({ value: min - 100 });
-        expect(inputElem.instance().value).toBe(formatter(min.toFixed(precision)));
-    });
-
-    /**
-     * test buttons
-     */
-    it(`click add/minus button, 'onUpClick', 'onDownClick'`, async () => {
-        const defaultValue = 1000;
-        const onUpClick = sinon.spy();
-        const onDownClick = sinon.spy();
-
-        const inputNumber = mount(
-            <InputNumber defaultValue={defaultValue} onUpClick={onUpClick} onDownClick={onDownClick} />
-        );
-        const inputElem = inputNumber.find('input');
-
-        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
-
-        const addBtn = btns.first();
-        const minusBtn = btns.last();
-
-        const addCount = 3;
-        const minusCount = 1;
-
-        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
-        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
-
-        expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
-        expect(onUpClick.called).toBe(true);
-        expect(onDownClick.called).toBe(true);
-    });
-
-    it(`click inner add/minus button, 'onUpClick', 'onDownClick'`, async () => {
-        const defaultValue = 1000;
-        const onUpClick = sinon.spy();
-        const onDownClick = sinon.spy();
-
-        const inputNumber = mount(
-            <InputNumber defaultValue={defaultValue} onUpClick={onUpClick} onDownClick={onDownClick} innerButtons={true} />
-        );
-        const inputElem = inputNumber.find('input');
-        const inputWrapper = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number`);
-        inputWrapper.simulate('mouseEnter');
-        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
-
-        const addBtn = btns.first();
-        const minusBtn = btns.last();
-
-        const addCount = 3;
-        const minusCount = 1;
-
-        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
-        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
-
-        expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
-        expect(onUpClick.called).toBe(true);
-        expect(onDownClick.called).toBe(true);
-    });
-
-    it('shiftStep prop', () => {
-        // shiftStep test
-        const inputNumber = mount(<InputNumber shiftStep={100} />);
-        expect(inputNumber.props().shiftStep).toEqual(100);
-        inputNumber.setProps({ shiftStep: 5 });
-        inputNumber.update();
-        expect(inputNumber.props().shiftStep).toEqual(5);
-    });
-
-    /**
-     * test input focus, click button focus & default behavior without keepFocus prop
-     */
-    it('keepFocus prop', async () => {
-        const defaultValue = 1;
-        const onBlur = sinon.spy();
-        const onFocus = sinon.spy();
-
-        const inputNumber = mount(
-            <InputNumber defaultValue={defaultValue} onBlur={onBlur} onFocus={onFocus} keepFocus={true} />
-        );
-        const inputElem = inputNumber.find('input');
-        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
-        const addBtn = btns.first();
-        const minusBtn = btns.last();
-
-        // default focus
-        expect(inputNumber.find(`.${BASE_CLASS_PREFIX}-input-wrapper-focus`).length).toBe(0);
-
-
-        // click button focus
-        const addCount = 3;
-        const minusCount = 1;
-        _.times(addCount, () => addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
-        _.times(addCount, () => addBtn.simulate('mouseup'));
-        _.times(minusCount, () => minusBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT }));
-        _.times(minusCount, () => minusBtn.simulate('mouseup'));
-        expect(inputElem.instance().value).toBe(String(defaultValue + addCount - minusCount));
-        expect(inputNumber.find(BaseInputNumber).state('focusing')).toBeTruthy();
-        inputNumber.find('input').simulate('blur');
-        expect(inputNumber.find(BaseInputNumber).state('focusing')).toBeFalsy();
-
-        // default behavior without keepFocus prop
-        inputNumber.setProps({ keepFocus: false });
-        inputNumber.update();
-        addBtn.simulate('mousedown');
-        addBtn.simulate('mouseup');
-        expect(inputNumber.find(BaseInputNumber).state('focusing')).toBeFalsy();
-    });
-
-    it('controlled value out of range', () => {
-        const max = 100;
-        const event = {
-            target: {
-                value: max + 1,
-            },
-        };
-        const onChange = sinon.spy();
-        const onNumberChange = sinon.spy();
-        const inputNumber = mount(<InputNumber value={max} onNumberChange={onNumberChange} onChange={onChange} max={max} />);
-        inputNumber.find('input').simulate('change', event);
-
-        expect(onChange.calledOnce).toBe(true);
-        expect(onChange.calledWithMatch(event.target.value)).toBe(true);
-        // 受控超出范围时不应调用onNumberChange
-        expect(onNumberChange.called).toBe(false);
-        expect(inputNumber.find(BaseInputNumber).state('number')).toBe(max);
-    });
-
-    it('controlled value given NaN', () => {
-        const initValue = 1;
-        const newValue = NaN;
-        const voidString = "";
-        const inputNumber = mount(<InputNumber value={initValue} />);
-        expect(inputNumber.find('input').instance().value).toBe(String(initValue));
-        expect(inputNumber.find(BaseInputNumber).state('number')).toBe(initValue);
-        inputNumber.setProps({ value: newValue });
-        expect(inputNumber.find('input').instance().value).toBe(voidString);
-        expect(inputNumber.find(BaseInputNumber).state('number')).toBe(null);
-
-    });
-
-    it('fix number minus bug', () => {
-        const initValue = 0.9;
-        const inputNumber = mount(<InputNumber defaultValue={initValue} step={0.1} max={1} />);
-        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
-        const inputElem = inputNumber.find('input');
-        const addBtn = btns.first();
-        addBtn.simulate('mousedown', { button: numbers.MOUSE_BUTTON_LEFT });
-        expect(inputElem.instance().value).toBe("1");
-    })
-
-    // Fix controlled setValue not processed by parser and formatter
-    it('fix controlled setValue', () => {
-        const onNumberChange = sinon.spy();
-        const CustomInput = withField(InputNumber, { onKeyChangeFnName: 'onNumberChange' });
-        const App = (
-            <Form onValueChange={(v)=>console.log(v)}>
-                <CustomInput
-                    field='custom'
-                    formatter={value => `${value}`.replace(/\D/g, '')}
-                    onNumberChange={onNumberChange}
-                />
-            </Form>
-        );
-
-        const inputNumber = mount(App);
-        const inputElem = inputNumber.find('input');
-        const event = { target: { value: 'abc' }};
-        inputElem.simulate('change', event);
-        expect(onNumberChange.calledOnce).toBe(false);
-        expect(inputElem.instance().value).toBe('');
-        const newEvent = { target: { value: '123' }};
-        inputElem.simulate('change', newEvent);
-        expect(onNumberChange.calledOnce).toBe(true);
-        expect(inputElem.instance().value).toBe('123');
-    });
-
-    /**
-     * test buttons right click
-     */
-     it(`right click add/minus button`, async () => {
-        const defaultValue = 1000;
-        const onUpClick = sinon.spy();
-        const onDownClick = sinon.spy();
-        const MOUSE_BUTTON_RIGHT = 2;
-
-        const inputNumber = mount(
-            <InputNumber defaultValue={defaultValue} onUpClick={onUpClick} onDownClick={onDownClick} />
-        );
-        const inputElem = inputNumber.find('input');
-
-        const btns = inputNumber.find(`.${BASE_CLASS_PREFIX}-input-number-suffix-btns .${BASE_CLASS_PREFIX}-input-number-button`);
-
-        const addBtn = btns.first();
-        const minusBtn = btns.last();
-
-        _.times(1, () => addBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT  }));
-        _.times(3, () => minusBtn.simulate('mousedown', { button: MOUSE_BUTTON_RIGHT }));
-
-        expect(inputElem.instance().value).toBe(String(defaultValue));
-        expect(onUpClick.called).toBe(false);
-        expect(onDownClick.called).toBe(false);
-    });
-
-    it('fix controlled min value didMount', () => {
-        const spyChange = sinon.spy();
-        const inputNumber = mount(
-            <InputNumber min={1} value={0} onChange={spyChange} />
-        );
-        expect(spyChange.calledOnce).toBe(true);
-    });
-
-    it('fix controlled min value didUpdate', () => {
-        const spyChange = sinon.spy();
-        const value = undefined;
-        const inputNumber = mount(
-            <InputNumber min={1} value={value} onChange={spyChange} />
-        );
-        inputNumber.setProps({ value: 0 });
-        expect(spyChange.calledOnce).toBe(true);
-        expect(spyChange.getCall(0).args[0]).toEqual(1);
-    });
-
-    it('fix controlled min value form field', () => {
-        const spyChange = sinon.spy();
-        let formApi = null;
-        let getFormApi = api => {
-            formApi = api;
-        };
-        const inputNumber = mount(
-            <Form initValues={{ minControlled: 0 }} getFormApi={getFormApi}>
-                <Form.InputNumber field="minControlled" min={1} onChange={spyChange} />
-            </Form>
-        );
-        expect(spyChange.calledOnce).toBe(true);
-        expect(spyChange.getCall(0).args[0]).toEqual(1);
-        expect(formApi.getValue('minControlled')).toBe(1);
-    });
-});

package/inputNumber/_story/input.stories.tsx

@@ -1,17 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { storiesOf } from '@storybook/react';
-import InputNumber from '../index';
-
-const stories = storiesOf('InputNumber', module);
-
-stories.add('default', () => {
-    const Demo = () => {
-        return (
-            <div>
-                <InputNumber defaultValue={123} />
-            </div>
-        );
-    };
-
-    return <Demo />;
-});

package/inputNumber/_story/inputNumber.scss

@@ -1,10 +0,0 @@
-.inputNumber {
-    .semi-input-wrapper {
-        width: 300px;
-        margin: 20px;
-    }
-
-    label {
-        margin-left: 20px;
-    }
-}