blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

test(Steps): update test cases

Browse Source
This commit is contained in:
chenjiahan 2020-11-22 19:57:52 +08:00
parent c9ff79390f
commit cf5fda8c89
4 changed files with 166 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/steps/test/__snapshots__/index.legacy.js.snap
View File

@ -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
View 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>
`;

61
src/steps/test/index.legacy.js
View File

@ -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
View 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();
});