mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
test(Steps): update test cases
This commit is contained in:
chenjiahan
parent
c9ff79390f
commit
cf5fda8c89
@ -1,47 +0,0 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`icon slot 1`] = `
|
|
||||||
<div class="van-steps van-steps--horizontal">
|
|
||||||
<div class="van-steps__items">
|
|
||||||
<div class="van-hairline van-step van-step--horizontal van-step--finish">
|
|
||||||
<div class="van-step__title">
|
|
||||||
A
|
|
||||||
</div>
|
|
||||||
<div class="van-step__circle-container">Custim Inactive Icon</div>
|
|
||||||
<div class="van-step__line"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
|
||||||
<div class="van-step__title van-step__title--active">
|
|
||||||
B
|
|
||||||
</div>
|
|
||||||
<div class="van-step__circle-container">Custim Active Icon</div>
|
|
||||||
<div class="van-step__line"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-hairline van-step van-step--horizontal">
|
|
||||||
<div class="van-step__title">
|
|
||||||
C
|
|
||||||
</div>
|
|
||||||
<div class="van-step__circle-container">Custim Inactive Icon</div>
|
|
||||||
<div class="van-step__line"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`inactive-color prop 1`] = `
|
|
||||||
<div class="van-steps van-steps--horizontal">
|
|
||||||
<div class="van-steps__items">
|
|
||||||
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
|
||||||
<div class="van-step__title van-step__title--active">A</div>
|
|
||||||
<div class="van-step__circle-container"><i class="van-icon van-icon-checked van-step__icon van-step__icon--active">
|
|
||||||
<!----></i></div>
|
|
||||||
<div class="van-step__line" style="background: red;"></div>
|
|
||||||
</div>
|
|
||||||
<div class="van-hairline van-step van-step--horizontal">
|
|
||||||
<div class="van-step__title" style="color: red;">B</div>
|
|
||||||
<div class="van-step__circle-container"><i class="van-step__circle" style="background: red;"></i></div>
|
|
||||||
<div class="van-step__line" style="background: red;"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
94
src/steps/test/__snapshots__/index.spec.js.snap
Normal file
94
src/steps/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should change inactive color when using inactive-color prop 1`] = `
|
||||||
|
<div class="van-steps van-steps--horizontal">
|
||||||
|
<div class="van-steps__items">
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||||
|
<div class="van-step__title van-step__title--active">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-checked van-step__icon van-step__icon--active">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div class="van-step__line"
|
||||||
|
style="background: red;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title"
|
||||||
|
style="color: red;"
|
||||||
|
>
|
||||||
|
B
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">
|
||||||
|
<i class="van-step__circle"
|
||||||
|
style="background: red;"
|
||||||
|
>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div class="van-step__line"
|
||||||
|
style="background: red;"
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should change inactive icon when using inactive-icon prop 1`] = `
|
||||||
|
<div class="van-steps van-steps--horizontal">
|
||||||
|
<div class="van-steps__items">
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||||
|
<div class="van-step__title van-step__title--active">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-checked van-step__icon van-step__icon--active">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div class="van-step__line">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title">
|
||||||
|
B
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">
|
||||||
|
<i class="van-badge__wrapper van-icon van-icon-foo van-step__icon">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<div class="van-step__line">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`should render icon slot correctly 1`] = `
|
||||||
|
<div class="van-steps van-steps--horizontal">
|
||||||
|
<div class="van-steps__items">
|
||||||
|
<div class="van-hairline van-step van-step--horizontal van-step--process">
|
||||||
|
<div class="van-step__title van-step__title--active">
|
||||||
|
B
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">
|
||||||
|
Custim Active Icon
|
||||||
|
</div>
|
||||||
|
<div class="van-step__line">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="van-hairline van-step van-step--horizontal">
|
||||||
|
<div class="van-step__title">
|
||||||
|
A
|
||||||
|
</div>
|
||||||
|
<div class="van-step__circle-container">
|
||||||
|
Custim Inactive Icon
|
||||||
|
</div>
|
||||||
|
<div class="van-step__line">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
@ -1,61 +0,0 @@
|
|||||||
import { mount } from '@vue/test-utils';
|
|
||||||
|
|
||||||
test('icon slot', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-steps :active="1">
|
|
||||||
<van-step>
|
|
||||||
<template v-slot:inactive-icon>Custim Inactive Icon</template>
|
|
||||||
A
|
|
||||||
</van-step>
|
|
||||||
<van-step>
|
|
||||||
<template v-slot:active-icon>Custim Active Icon</template>
|
|
||||||
B
|
|
||||||
</van-step>
|
|
||||||
<van-step>
|
|
||||||
<template v-slot:inactive-icon>Custim Inactive Icon</template>
|
|
||||||
C
|
|
||||||
</van-step>
|
|
||||||
</van-steps>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
|
|
||||||
test('click-step event', () => {
|
|
||||||
const onClickStep = jest.fn();
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-steps :active="1" @click-step="onClickStep">
|
|
||||||
<van-step>A</van-step>
|
|
||||||
<van-step>B</van-step>
|
|
||||||
<van-step>C</van-step>
|
|
||||||
</van-steps>
|
|
||||||
`,
|
|
||||||
methods: {
|
|
||||||
onClickStep,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
wrapper.find('.van-step').trigger('click');
|
|
||||||
expect(onClickStep).toHaveBeenCalledTimes(0);
|
|
||||||
|
|
||||||
wrapper.find('.van-step__title').trigger('click');
|
|
||||||
expect(onClickStep).toHaveBeenCalledWith(0);
|
|
||||||
|
|
||||||
wrapper.findAll('.van-step__circle-container').at(2).trigger('click');
|
|
||||||
expect(onClickStep).toHaveBeenCalledTimes(2);
|
|
||||||
expect(onClickStep).toHaveBeenLastCalledWith(2);
|
|
||||||
});
|
|
||||||
|
|
||||||
test('inactive-color prop', () => {
|
|
||||||
const wrapper = mount({
|
|
||||||
template: `
|
|
||||||
<van-steps :active="0" inactive-color="red">
|
|
||||||
<van-step>A</van-step>
|
|
||||||
<van-step>B</van-step>
|
|
||||||
</van-steps>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
expect(wrapper.html()).toMatchSnapshot();
|
|
||||||
});
|
|
||||||
72
src/steps/test/index.spec.js
Normal file
72
src/steps/test/index.spec.js
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
import { mount } from '@vue/test-utils';
|
||||||
|
import Step from '../../step';
|
||||||
|
import Steps from '..';
|
||||||
|
|
||||||
|
test('should render icon slot correctly', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Steps active={0}>
|
||||||
|
<Step v-slots={{ 'active-icon': () => `Custim Active Icon` }}>B</Step>
|
||||||
|
<Step v-slots={{ 'inactive-icon': () => `Custim Inactive Icon` }}>
|
||||||
|
A
|
||||||
|
</Step>
|
||||||
|
</Steps>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should emit click-step event when step is clicked', () => {
|
||||||
|
const onClickStep = jest.fn();
|
||||||
|
const wrapper = mount({
|
||||||
|
setup() {
|
||||||
|
return () => (
|
||||||
|
<Steps active={1} onClickStep={onClickStep}>
|
||||||
|
<Step>A</Step>
|
||||||
|
<Step>B</Step>
|
||||||
|
<Step>C</Step>
|
||||||
|
</Steps>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
wrapper.find('.van-step').trigger('click');
|
||||||
|
expect(onClickStep).toHaveBeenCalledTimes(0);
|
||||||
|
|
||||||
|
wrapper.find('.van-step__title').trigger('click');
|
||||||
|
expect(onClickStep).toHaveBeenCalledWith(0);
|
||||||
|
|
||||||
|
wrapper.findAll('.van-step__circle-container')[2].trigger('click');
|
||||||
|
expect(onClickStep).toHaveBeenCalledTimes(2);
|
||||||
|
expect(onClickStep).toHaveBeenLastCalledWith(2);
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change inactive color when using inactive-color prop', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Steps active={0} inactiveColor="red">
|
||||||
|
<Step>A</Step>
|
||||||
|
<Step>B</Step>
|
||||||
|
</Steps>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
|
|
||||||
|
test('should change inactive icon when using inactive-icon prop', () => {
|
||||||
|
const wrapper = mount({
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Steps active={0} inactiveIcon="foo">
|
||||||
|
<Step>A</Step>
|
||||||
|
<Step>B</Step>
|
||||||
|
</Steps>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(wrapper.html()).toMatchSnapshot();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user