mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(SubmitBar): update test cases
This commit is contained in:
chenjiahan
parent
33627aab1b
commit
12d6b813ea
@ -1,78 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`button slot 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">Custom button</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`button-color prop 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger" style="color: rgb(255, 255, 255); background: red; border-color: red;">
|
||||
<div class="van-button__content"></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`decimal-length prop 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.1</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable safe-area-inset-bottom prop 1`] = `
|
||||
<div class="van-submit-bar van-submit-bar--unfit">
|
||||
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
|
||||
<div class="van-button__content"></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable submit 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">0</span>.01</span></div><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled van-button--round van-submit-bar__button van-submit-bar__button--danger">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`suffix-label prop 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text"><span>Label</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span><span class="van-submit-bar__suffix-label">Suffix Label</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`text-align prop 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
<div class="van-submit-bar__text" style="text-align: left;"><span>合计：</span><span class="van-submit-bar__price">¥<span class="van-submit-bar__price van-submit-bar__price--integer">1</span>.11</span></div><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
|
||||
<div class="van-button__content"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`top slot 1`] = `
|
||||
<div class="van-submit-bar">Custom Top<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
|
||||
<div class="van-button__content"></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`without price 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar"><button class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger">
|
||||
<div class="van-button__content"></div>
|
||||
</button></div>
|
||||
</div>
|
||||
`;
|
||||
80
src/submit-bar/test/__snapshots__/index.spec.js.snap
Normal file
80
src/submit-bar/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,80 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should change the color of submit button when using button-color prop 1`] = `
|
||||
<button type="button"
|
||||
class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"
|
||||
style="color: rgb(255, 255, 255); background: red; border-color: red;"
|
||||
>
|
||||
<div class="van-button__content">
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`should render button slot correctly 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
<div class="van-submit-bar__bar">
|
||||
Custom button
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render decimal length correctly when using decimal-length prop 1`] = `
|
||||
<span class="van-submit-bar__price">
|
||||
¥
|
||||
<span class="van-submit-bar__price-integer">
|
||||
1
|
||||
</span>
|
||||
.1
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`should render decimal length correctly when using decimal-length prop 2`] = `
|
||||
<span class="van-submit-bar__price">
|
||||
¥
|
||||
<span class="van-submit-bar__price-integer">
|
||||
1
|
||||
</span>
|
||||
</span>
|
||||
`;
|
||||
|
||||
exports[`should render disabled submit button correctly 1`] = `
|
||||
<button type="button"
|
||||
class="van-button van-button--danger van-button--normal van-button--round van-button--disabled van-submit-bar__button van-submit-bar__button--danger"
|
||||
disabled
|
||||
>
|
||||
<div class="van-button__content">
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
|
||||
exports[`should render suffix-label correctly 1`] = `
|
||||
<div class="van-submit-bar__text">
|
||||
<span>
|
||||
Label
|
||||
</span>
|
||||
<span class="van-submit-bar__price">
|
||||
¥
|
||||
<span class="van-submit-bar__price-integer">
|
||||
1
|
||||
</span>
|
||||
.11
|
||||
</span>
|
||||
<span class="van-submit-bar__suffix-label">
|
||||
Suffix Label
|
||||
</span>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render top slot correctly 1`] = `
|
||||
<div class="van-submit-bar">
|
||||
Custom Top
|
||||
<div class="van-submit-bar__bar">
|
||||
<button type="button"
|
||||
class="van-button van-button--danger van-button--normal van-button--round van-submit-bar__button van-submit-bar__button--danger"
|
||||
>
|
||||
<div class="van-button__content">
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,132 +0,0 @@
|
||||
import SubmitBar from '..';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
test('submit event', () => {
|
||||
const submit = jest.fn();
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
price: 1,
|
||||
},
|
||||
on: { submit },
|
||||
},
|
||||
});
|
||||
|
||||
const button = wrapper.find('.van-button');
|
||||
button.trigger('click');
|
||||
expect(submit).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('disable submit', () => {
|
||||
const submit = jest.fn();
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
price: 1,
|
||||
disabled: true,
|
||||
},
|
||||
on: { submit },
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
|
||||
// disabled
|
||||
const button = wrapper.find('.van-button');
|
||||
button.trigger('click');
|
||||
expect(submit).toHaveBeenCalledTimes(0);
|
||||
});
|
||||
|
||||
test('without price', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
label: 'Label',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('top slot', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
slots: {
|
||||
top: () => 'Custom Top',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('decimal-length prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
price: 111,
|
||||
decimalLength: 1,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('suffix-label prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
price: 111,
|
||||
label: 'Label',
|
||||
suffixLabel: 'Suffix Label',
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('text-align prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
price: 111,
|
||||
textAlign: 'left',
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable safe-area-inset-bottom prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
safeAreaInsetBottom: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('button-color prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
context: {
|
||||
props: {
|
||||
buttonColor: 'red',
|
||||
},
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('button slot', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
buttonText: 'text',
|
||||
slots: {
|
||||
button: () => 'Custom button',
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
111
src/submit-bar/test/index.spec.js
Normal file
111
src/submit-bar/test/index.spec.js
Normal file
@ -0,0 +1,111 @@
|
||||
import SubmitBar from '..';
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
test('should emit submit event when submit button is clicked', () => {
|
||||
const wrapper = mount(SubmitBar);
|
||||
const button = wrapper.find('.van-submit-bar__button');
|
||||
button.trigger('click');
|
||||
expect(wrapper.emitted('submit').length).toEqual(1);
|
||||
});
|
||||
|
||||
test('should render disabled submit button correctly', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-submit-bar__button').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should not emit submit event when disabled submit button is clicked', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
disabled: true,
|
||||
},
|
||||
});
|
||||
const button = wrapper.find('.van-submit-bar__button');
|
||||
button.trigger('click');
|
||||
expect(wrapper.emitted('submit')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should not render label without price', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
label: 'Label',
|
||||
},
|
||||
});
|
||||
expect(wrapper.html().includes('Label')).toBeFalsy();
|
||||
});
|
||||
|
||||
test('should render top slot correctly', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
slots: {
|
||||
top: () => 'Custom Top',
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render decimal length correctly when using decimal-length prop', async () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
price: 111,
|
||||
decimalLength: 1,
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-submit-bar__price').html()).toMatchSnapshot();
|
||||
|
||||
await wrapper.setProps({ decimalLength: 0 });
|
||||
expect(wrapper.find('.van-submit-bar__price').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render suffix-label correctly', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
price: 111,
|
||||
label: 'Label',
|
||||
suffixLabel: 'Suffix Label',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-submit-bar__text').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should adjust text align when using text-align prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
price: 111,
|
||||
textAlign: 'left',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-submit-bar__text').element.style.textAlign).toEqual(
|
||||
'left'
|
||||
);
|
||||
});
|
||||
|
||||
test('should allow to disable safe-area-inset-bottom prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
safeAreaInsetBottom: false,
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-submit-bar--unfit').exists()).toBeTruthy();
|
||||
});
|
||||
|
||||
test('should change the color of submit button when using button-color prop', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
props: {
|
||||
buttonColor: 'red',
|
||||
},
|
||||
});
|
||||
expect(wrapper.find('.van-submit-bar__button').html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should render button slot correctly', () => {
|
||||
const wrapper = mount(SubmitBar, {
|
||||
slots: {
|
||||
button: () => 'Custom button',
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user