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

package/avatar/__test__/avatar.test.js

@@ -1,363 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import sinon from 'sinon';
-import Avatar from '../index';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-const avartarPrefix = `${BASE_CLASS_PREFIX}-avatar`
-
-describe('Avatar', () => {
-    it('size', () => {
-        const element = (
-                <div>
-        <Avatar size="extra-extra-small" style={{ margin: 4 }}>
-            U
-        </Avatar>
-        <Avatar size="extra-small" style={{ margin: 4 }}>
-            U
-        </Avatar>
-        <Avatar size="small" style={{ margin: 4 }}>
-            U
-        </Avatar>
-        <Avatar size="default" style={{ margin: 4 }}>
-            U
-        </Avatar>
-        <Avatar style={{ margin: 4 }}>U</Avatar>
-        <Avatar size="large" style={{ margin: 4 }}>
-            U
-        </Avatar>
-        <Avatar size="extra-large" style={{ margin: 4 }}>
-            U
-        </Avatar>
-    </div>
-        );
-        const wrapper = mount(element);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(1)
-                .find(`.${avartarPrefix}-extra-extra-small`)
-                .length
-        ).toEqual(0);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(0)
-                .find(`.${avartarPrefix}-extra-extra-small`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(1)
-                .find(`.${avartarPrefix}-extra-small`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(2)
-                .find(`.${avartarPrefix}-small`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(3)
-                .find(`.${avartarPrefix}-default`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(4)
-                .find(`.${avartarPrefix}-medium`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(5)
-                .find(`.${avartarPrefix}-large`)
-                .length
-        ).toEqual(1);
-    });
-
-    it('color', () => {
-        const element = (
-            <div>
-                <Avatar color="amber" style={{ margin: 4 }}>
-                    BM
-                </Avatar>
-                <Avatar color="blue" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="cyan" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="green" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="grey" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="indigo" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="light-blue" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="light-green" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="lime" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="orange" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="pink" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="purple" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="red" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="teal" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="violet" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-                <Avatar color="yellow" style={{ margin: 4 }}>
-                    TJ
-                </Avatar>
-            </div>
-        );
-        const wrapper = mount(element);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(1)
-                .find(`.${avartarPrefix}-amber`)
-                .length
-        ).toEqual(0);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(0)
-                .find(`.${avartarPrefix}-amber`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(1)
-                .find(`.${avartarPrefix}-blue`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(2)
-                .find(`.${avartarPrefix}-cyan`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(3)
-                .find(`.${avartarPrefix}-green`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(4)
-                .find(`.${avartarPrefix}-grey`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(5)
-                .find(`.${avartarPrefix}-indigo`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(6)
-                .find(`.${avartarPrefix}-light-blue`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(7)
-                .find(`.${avartarPrefix}-light-green`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(8)
-                .find(`.${avartarPrefix}-lime`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(9)
-                .find(`.${avartarPrefix}-orange`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(10)
-                .find(`.${avartarPrefix}-pink`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(11)
-                .find(`.${avartarPrefix}-purple`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(12)
-                .find(`.${avartarPrefix}-red`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(13)
-                .find(`.${avartarPrefix}-teal`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(14)
-                .find(`.${avartarPrefix}-violet`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(15)
-                .find(`.${avartarPrefix}-yellow`)
-                .length
-        ).toEqual(1);
-    });
-
-    it('src', () => {
-        const element = (
-           <Avatar
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
-                style={{ margin: 4 }}
-            />
-        );
-        const wrapper = mount(element);
-        expect(
-            wrapper
-                .find('img')
-                .at(0)
-                .props()
-                .src
-        ).toEqual('https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png');
-    });
-
-    it('shape', () => {
-        const element = (
-            <div>
-                <Avatar style={{ margin: 4 }}>U</Avatar>
-                <Avatar shape="square" style={{ margin: 4 }}>
-                    U
-                </Avatar>
-            </div>
-        );
-        const wrapper = mount(element);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(1)
-                .find(`.${avartarPrefix}-circle`)
-                .length
-        ).toEqual(0);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(0)
-                .find(`.${avartarPrefix}-circle`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${avartarPrefix}`)
-                .at(1)
-                .find(`.${avartarPrefix}-square`)
-                .length
-        ).toEqual(1);
-    });
-
-    it('className & style', () => {
-        const wrapper = mount(<Avatar className='test-avatar' style={{color: 'red'}}>A</Avatar>);
-        expect(wrapper.exists('.test-avatar')).toEqual(true);
-        expect(wrapper.find('.test-avatar').at(0)).toHaveStyle('color', 'red');
-    });
-
-    it('onError', () => {
-        const onError = () => {};
-        const spyOnError = sinon.spy(onError); 
-        const avatar = mount(
-            <Avatar 
-                onError={spyOnError}
-                src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png"
-            />
-        );
-        avatar
-            .find('img')
-            .at(0)
-            .simulate('error');
-        expect(spyOnError.callCount).toBe(2);
-    })
-
-    it('onClick', () => {
-        const onClick = () => {};
-        const spyOnClick = sinon.spy(onClick); 
-        const avatar = mount(<Avatar onClick={spyOnClick} />);
-        avatar.simulate('click');
-        expect(spyOnClick.calledOnce).toBe(true);
-    })
-
-    it('onMouseEnter', () => {
-        const onMouseEnter = () => {};
-        const spyOnMouseEnter = sinon.spy(onMouseEnter); 
-        const avatar = mount(<Avatar onMouseEnter={spyOnMouseEnter} />);
-        avatar.simulate('mouseEnter');
-        expect(spyOnMouseEnter.calledOnce).toBe(true);
-    })
-
-    it('onMouseLeave', () => {
-        const onMouseLeave = () => {};
-        const spyOnMouseLeave = sinon.spy(onMouseLeave); 
-        const avatar = mount(<Avatar onMouseLeave={spyOnMouseLeave} />);
-        avatar.simulate('mouseLeave');
-        expect(spyOnMouseLeave.calledOnce).toBe(true);
-    })
-
-    it('hoverMask', () => {
-        const avatar = mount(<Avatar hoverMask='asd' />);
-        expect(avatar.simulate('mouseEnter', {}).exists(`.${avartarPrefix}-hover`)).toEqual(true);
-
-    })
-
-});

package/avatar/__test__/avatarGroup.test.js

@@ -1,193 +0,0 @@
-import AvatarGroup from '../avatarGroup';
-import Avatar from '../index';
-import { mount } from 'enzyme';
-import React from 'react';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-function getAg(props) {
-    const baseAvatarGroup = (
-        <AvatarGroup {...props}>
-            <Avatar color='red'>LL</Avatar>
-            <Avatar >CX</Avatar>
-            <Avatar color='amber'>RM</Avatar>
-            <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
-            <Avatar style={{ backgroundColor: '#87d068' }} >YZ</Avatar>
-        </AvatarGroup>
-    );
-    return mount(baseAvatarGroup, { attachTo: document.getElementById('container') });
-}
-
-describe('AvatarGroup', () => {
-    it('【className】custom className', () => {
-        let props = {
-            className: 'test',
-        };
-        const wrapper = getAg(props);
-        expect(wrapper.hasClass('test')).toEqual(true);
-    });
-
-    it('avatarGroup overlapFrom', () => {
-        const avatarGroup = getAg();
-        expect(avatarGroup.props().overlapFrom).toEqual('start');
-        avatarGroup.setProps({ overlapFrom: 'end' });
-        avatarGroup.update();
-        expect(avatarGroup.props().overlapFrom).toEqual('end');
-    });
-
-    it('maxCount', () => {
-        const avatarGroup = getAg({maxCount: 3});
-        expect(
-            avatarGroup
-            .find(`.${BASE_CLASS_PREFIX}-avatar`)
-            .at(3)
-            .find(`.${BASE_CLASS_PREFIX}-avatar-content .${BASE_CLASS_PREFIX}-avatar-label`)
-            .getDOMNode()
-            .textContent
-        ).toEqual('+2');
-    });
-
-    it('renderMore', () => {
-        const avatarGroup = getAg({
-            maxCount: 3,
-            renderMore: restNumber => <span className='custom'>/{restNumber}</span>
-        });
-        expect(
-            avatarGroup
-            .find('.custom')
-            .at(0)
-            .getDOMNode()
-            .textContent
-        ).toEqual('/2');
-    });
-
-    it('size', () => {
-        const element = (
-            <div>
-                <AvatarGroup size="extra-extra-small" style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-                <AvatarGroup size="extra-small" style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-                <AvatarGroup size="small" style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-                <AvatarGroup size="default" style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-                <AvatarGroup size="large" style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-                <AvatarGroup size="extra-large" style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-            </div>
-        );
-        const wrapper = mount(element);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(1)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-extra-extra-small`)
-                .length
-        ).toEqual(0);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-extra-extra-small`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(1)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-extra-small`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(2)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-small`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(3)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-default`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(4)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-large`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(5)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-extra-large`)
-                .length
-        ).toEqual(1);
-    });
-
-    it('size', () => {
-        const element = (
-            <div>
-                <AvatarGroup shape='circle' style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-                <AvatarGroup shape='square' style={{ margin: 4 }}>
-                    <Avatar color="red">LL</Avatar>
-                </AvatarGroup>
-            </div>
-        );
-        const wrapper = mount(element);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(1)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-circle`)
-                .length
-        ).toEqual(0);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-circle`)
-                .length
-        ).toEqual(1);
-        expect(
-            wrapper
-                .find(`.${BASE_CLASS_PREFIX}-avatar-group`)
-                .at(1)
-                .find(`.${BASE_CLASS_PREFIX}-avatar`)
-                .at(0)
-                .find(`.${BASE_CLASS_PREFIX}-avatar-square`)
-                .length
-        ).toEqual(1);
-    });
-
-});

package/avatar/_story/Demo.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import Avatar from '../index';
-import AvatarGroup from '../avatarGroup';
-
-const Demo = () => {
-    return (
-        <div>
-            <Avatar src="//placekitten.com/200/300"></Avatar>
-            <div>
-                <AvatarGroup>
-                    <Avatar color='red'>LL</Avatar>
-                    <Avatar >CX</Avatar>
-                    <Avatar color='amber'>RM</Avatar>
-                    <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>ZL</Avatar>
-                    <Avatar style={{ backgroundColor: '#87d068' }} >YZ</Avatar>
-                </AvatarGroup>
-            </div>
-        </div>
-    )
-}
-
-export default Demo