2019-01-24 20:15:10 +00:00
|
|
|
// Copyright (C) 2019 Storj Labs, Inc.
|
2018-11-27 10:51:33 +00:00
|
|
|
// See LICENSE for copying information.
|
|
|
|
|
2019-09-09 11:33:39 +01:00
|
|
|
import { mount, shallowMount } from '@vue/test-utils';
|
|
|
|
|
2022-09-08 15:11:09 +01:00
|
|
|
import Button from '@/components/common/VButton.vue';
|
|
|
|
|
2019-09-09 11:33:39 +01:00
|
|
|
describe('Button.vue', () => {
|
2019-02-20 13:33:56 +00:00
|
|
|
it('renders correctly', () => {
|
2019-08-30 12:34:51 +01:00
|
|
|
const wrapper = shallowMount(Button, {
|
|
|
|
propsData: {
|
|
|
|
onPress: () => { return; },
|
|
|
|
},
|
|
|
|
});
|
2018-11-14 14:00:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
|
|
});
|
2018-11-14 14:00:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
it('renders correctly with isWhite prop', () => {
|
|
|
|
const wrapper = shallowMount(Button, {
|
|
|
|
propsData: {
|
2019-08-30 12:34:51 +01:00
|
|
|
isWhite: true,
|
|
|
|
onPress: () => { return; },
|
2019-09-13 15:58:18 +01:00
|
|
|
},
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2018-11-14 14:00:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
|
|
});
|
2018-11-14 14:00:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
it('renders correctly with isDisabled prop', () => {
|
|
|
|
const wrapper = shallowMount(Button, {
|
|
|
|
propsData: {
|
2019-08-30 12:34:51 +01:00
|
|
|
isDisabled: true,
|
|
|
|
onPress: () => { return; },
|
2019-09-13 15:58:18 +01:00
|
|
|
},
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2018-11-14 14:00:01 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper).toMatchSnapshot();
|
|
|
|
});
|
2018-12-18 14:43:23 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
it('renders correctly with size and label props', () => {
|
2019-09-09 11:33:39 +01:00
|
|
|
const label = 'testLabel';
|
|
|
|
const width = '30px';
|
|
|
|
const height = '20px';
|
2018-11-05 15:26:18 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
const wrapper = shallowMount(Button, {
|
2019-08-30 12:34:51 +01:00
|
|
|
propsData: {
|
|
|
|
label,
|
|
|
|
width,
|
|
|
|
height,
|
|
|
|
onPress: () => { return; },
|
|
|
|
},
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2018-11-05 15:26:18 +00:00
|
|
|
|
2022-04-07 12:04:24 +01:00
|
|
|
const el = wrapper.element as HTMLElement;
|
|
|
|
expect(el.style.width).toMatch(width);
|
|
|
|
expect(el.style.height).toMatch(height);
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper.text()).toMatch(label);
|
|
|
|
});
|
2018-11-05 15:26:18 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
it('renders correctly with default props', () => {
|
2019-08-30 12:34:51 +01:00
|
|
|
const wrapper = shallowMount(Button, {
|
|
|
|
propsData: {
|
|
|
|
onPress: () => { return; },
|
|
|
|
},
|
|
|
|
});
|
2018-11-05 15:26:18 +00:00
|
|
|
|
2022-04-07 12:04:24 +01:00
|
|
|
const el = wrapper.element as HTMLElement;
|
|
|
|
expect(el.style.width).toMatch('inherit');
|
|
|
|
expect(el.style.height).toMatch('inherit');
|
2019-02-20 13:33:56 +00:00
|
|
|
expect(wrapper.text()).toMatch('Default');
|
|
|
|
});
|
2018-11-05 15:26:18 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
it('trigger onPress correctly', () => {
|
2022-04-07 12:04:24 +01:00
|
|
|
const onPressSpy = jest.fn();
|
2018-11-05 15:26:18 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
const wrapper = mount(Button, {
|
|
|
|
propsData: {
|
|
|
|
onPress: onPressSpy,
|
2019-09-13 15:58:18 +01:00
|
|
|
isDisabled: false,
|
|
|
|
},
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2018-11-05 15:26:18 +00:00
|
|
|
|
2019-02-20 13:33:56 +00:00
|
|
|
wrapper.find('div.container').trigger('click');
|
2018-12-18 14:43:23 +00:00
|
|
|
|
2022-04-07 12:04:24 +01:00
|
|
|
expect(onPressSpy).toHaveBeenCalledTimes(1);
|
2019-02-20 13:33:56 +00:00
|
|
|
});
|
2018-12-18 14:43:23 +00:00
|
|
|
});
|