base-ui/src/component/b-button/__test__/index.test.js

A component library for Better Vue developmemt

import {mount} from '@vue/test-utils';
import Button from '../b-button';

describe('Button', () => {
    it('render', () => {
        const wrapper = mount(Button);
        expect(wrapper.html()).toMatchSnapshot();
      });
    it('disabled', () => {
        const onClick = jest.fn();
        const wrapper = mount(Button, {
            propsData: {
                disabled: true
            },
            listeners: {
                click: onClick
              }
        });
        expect(wrapper.find('button').attributes('disabled')).toMatch('disabled');
        expect(wrapper.html()).toMatchSnapshot();
        wrapper.find('button').trigger('click');
        expect(onClick).not.toHaveBeenCalled();
    });

    it('theme', () => {
        const wrapper1 = mount({
            render() {
                return <Button theme='primary'>按钮</Button>;
            }
        });
        expect(wrapper1.find('.theme-primary').exists()).toBe(true);
        expect(wrapper1.html()).toMatchSnapshot('primary');

        const wrapper2 = mount({
            render() {
                return <Button theme='danger'>按钮</Button>;
            }
        });
        expect(wrapper2.find('.theme-danger').exists()).toBe(true);
        expect(wrapper2.html()).toMatchSnapshot('danger');

        const wrapper3 = mount({
            render() {
                return <Button theme='normal'>按钮</Button>;
            }
        });
        expect(wrapper3.find('.theme-normal').exists()).toBe(true);
        expect(wrapper3.html()).toMatchSnapshot('normal');

        const wrapper4 = mount({
            render() {
                return <Button>按钮</Button>;
            }
        });
        expect(wrapper4.find('.theme-normal').exists()).toBe(true);
        expect(wrapper4.html()).toMatchSnapshot('default');

    });

    it('size', () => {
        const wrapper1 = mount({
            render() {
                return <Button size='sm'>按钮</Button>;
            }
        });
        expect(wrapper1.find('.size-sm').exists()).toBe(true);
        expect(wrapper1.html()).toMatchSnapshot('sm');
        const wrapper2 = mount({
            render() {
                return <Button size='md'>按钮</Button>;
            }
        });
        expect(wrapper2.find('.size-md').exists()).toBe(true);
        expect(wrapper2.html()).toMatchSnapshot('md');

        const wrapper3 = mount({
            render() {
                return <Button size='lg'>按钮</Button>;
            }
        });
        expect(wrapper3.find('.size-lg').exists()).toBe(true);
        expect(wrapper3.html()).toMatchSnapshot('lg');

        const wrapper4 = mount({
            render() {
                return <Button>按钮</Button>;
            }
        });
        expect(wrapper4.find('.size-md').exists()).toBe(true);
        expect(wrapper4.html()).toMatchSnapshot('default');

    });

    it('shape', () => {
        const wrapper = mount({
            render() {
                return <Button>按钮</Button>;
            }
        });
        expect(wrapper.find('.shape-normal').exists()).toBe(true);
        expect(wrapper.html()).toMatchSnapshot('default');

        const wrapper1 = mount({
            render() {
                return <Button shape='normal'>按钮</Button>;
            }
        });
        expect(wrapper1.find('.shape-normal').exists()).toBe(true);
        expect(wrapper1.html()).toMatchSnapshot('normal');

        const wrapper2 = mount({
            render() {
                return <Button shape='round'>按钮</Button>;
            }
        });
        expect(wrapper2.find('.shape-round').exists()).toBe(true);
        expect(wrapper2.html()).toMatchSnapshot('round');

        const wrapper3 = mount({
            render() {
                return <Button shape='icon'>按钮</Button>;
            }
        });
        expect(wrapper3.find('.shape-icon').exists()).toBe(true);
        expect(wrapper3.html()).toMatchSnapshot('icon');

        const wrapper4 = mount({
            render() {
                return <Button shape='simple'>按钮</Button>;
            }
        });
        expect(wrapper4.find('.shape-simple').exists()).toBe(true);
        expect(wrapper4.html()).toMatchSnapshot('simple');

        const wrapper5 = mount({
            render() {
                return <Button shape='link'>按钮</Button>;
            }
        });
        expect(wrapper5.find('.shape-link').exists()).toBe(true);
        expect(wrapper5.html()).toMatchSnapshot('link');

        const wrapper6 = mount({
            render() {
                return <Button shape='block'>按钮</Button>;
            }
        });
        expect(wrapper6.find('.shape-block').exists()).toBe(true);
        expect(wrapper6.html()).toMatchSnapshot('block');

    });

    it('btn-style', () => {
        const wrapper = mount(Button, {
            propsData: {
                btnStyle: {
                    color: 'white'
                }

            }
        });
        expect(wrapper.find('button').attributes('style')).toMatch('color: white;');
        expect(wrapper.html()).toMatchSnapshot();

    });

    it('click', () => {
        const onClick = jest.fn();
        const wrapper = mount(Button, {
            listeners: {
                click: onClick
              }
        });
        wrapper.find('button').trigger('click');
        expect(onClick).toHaveBeenCalled();
    });
});