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