alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Steps component

Browse Source
This commit is contained in:
chenjiahan
2020-07-06 16:59:44 +08:00
parent e8d190d51d
commit 4500e71f1a
12 changed files with 781 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-next/steps/test/__snapshots__/demo.spec.js.snap
+96
View File
@@ -0,0 +1,96 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<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">买家下单</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></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">商家接单</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"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">买家提货</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">交易完成</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
</div>
</div> <button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><span class="van-button__text">下一步</span></div>
</button>
</div>
<div>
<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">买家下单</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
<!----></i></div>
<div class="van-step__line" style="background: rgb(51, 136, 255);"></div>
</div>
<div class="van-hairline van-step van-step--horizontal van-step--process">
<div class="van-step__title van-step__title--active" style="color: rgb(51, 136, 255);">商家接单</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-success van-step__icon van-step__icon--active" style="color: rgb(51, 136, 255);">
<!----></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">买家提货</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
<!----></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--horizontal">
<div class="van-step__title">交易完成</div>
<div class="van-step__circle-container"><i class="van-icon van-icon-arrow van-step__icon">
<!----></i></div>
<div class="van-step__line"></div>
</div>
</div>
</div>
</div>
<div>
<div class="van-steps van-steps--vertical">
<div class="van-steps__items">
<div class="van-hairline van-step van-step--vertical van-step--process">
<div class="van-step__title van-step__title--active">
<h3>【城市】物流状态1</h3>
<p>2016-07-12 12:40</p>
</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"></div>
</div>
<div class="van-hairline van-step van-step--vertical">
<div class="van-step__title">
<h3>【城市】物流状态</h3>
<p>2016-07-11 10:00</p>
</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
<div class="van-hairline van-step van-step--vertical">
<div class="van-step__title">
<h3>快件已发货</h3>
<p>2016-07-10 09:30</p>
</div>
<div class="van-step__circle-container"><i class="van-step__circle"></i></div>
<div class="van-step__line"></div>
</div>
</div>
</div>
</div>
</div>
`;
src-next/steps/test/__snapshots__/index.spec.js.snap
+29
View File
@@ -0,0 +1,29 @@
// 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>
`;
src-next/steps/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import { snapshotDemo } from '../../../test/demo';
snapshotDemo(Demo);
src-next/steps/test/index.spec.js
+49
View File
@@ -0,0 +1,49 @@
import { mount } from '../../../test';
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).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);
});