mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(ShareSheet): add demo test
This commit is contained in:
nemo-shen
neverland
parent
970967a63f
commit
1a9df5599d
@ -160,6 +160,7 @@
|
||||
"van-calendar": "./dist/calendar/index",
|
||||
"van-calendar-demo": "./dist/calendar/demo/index",
|
||||
"van-share-sheet": "./dist/share-sheet/index",
|
||||
"van-share-sheet-demo": "./dist/share-sheet/demo/index",
|
||||
"van-config-provider": "./dist/config-provider/index",
|
||||
"van-config-provider-demo": "./dist/config-provider/demo/index"
|
||||
},
|
||||
|
||||
@ -1,85 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
import Toast from '../../dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
show: {
|
||||
basic: false,
|
||||
withDesc: false,
|
||||
multiLine: false,
|
||||
customIcon: false,
|
||||
},
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat', openType: 'share' },
|
||||
{ name: '朋友圈', icon: 'wechat-moments' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
{ name: '小程序码', icon: 'weapp-qrcode' },
|
||||
],
|
||||
|
||||
multiLineOptions: [
|
||||
[
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
],
|
||||
[
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
],
|
||||
|
||||
customIconOptions: [
|
||||
{
|
||||
name: '名称',
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
|
||||
},
|
||||
{
|
||||
name: '名称',
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
|
||||
},
|
||||
{
|
||||
name: '名称',
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
|
||||
},
|
||||
],
|
||||
|
||||
optionsWithDesc: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{
|
||||
name: '复制链接',
|
||||
icon: 'link',
|
||||
description: '描述信息',
|
||||
},
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
},
|
||||
|
||||
onShowShareSheet(event) {
|
||||
this.setData({
|
||||
[`show.${event.target.dataset.type}`]: true,
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({
|
||||
show: {
|
||||
basic: false,
|
||||
withDesc: false,
|
||||
multiLine: false,
|
||||
customIcon: false,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
onSelect(event) {
|
||||
Toast(event.detail.name);
|
||||
this.onClose();
|
||||
},
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,45 +1 @@
|
||||
<demo-block card title="基础用法">
|
||||
<van-cell is-link title="显示分享面板" data-type="basic" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.basic }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ options }}"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="展示多行选项">
|
||||
<van-cell is-link title="显示分享面板" data-type="multiLine" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.multiLine }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ multiLineOptions }}"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="自定义图标">
|
||||
<van-cell is-link title="显示分享面板" data-type="customIcon" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.customIcon }}"
|
||||
options="{{ customIconOptions }}"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="展示描述信息">
|
||||
<van-cell is-link title="显示分享面板" data-type="withDesc" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.withDesc }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ optionsWithDesc }}"
|
||||
description="描述信息"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
<van-share-sheet-demo />
|
||||
|
||||
9
packages/share-sheet/demo/index.json
Normal file
9
packages/share-sheet/demo/index.json
Normal file
@ -0,0 +1,9 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-cell": "../../cell/index",
|
||||
"van-toast": "../../toast/index",
|
||||
"van-share-sheet": "../../share-sheet/index",
|
||||
"demo-block": "../../../example/components/demo-block/index"
|
||||
}
|
||||
}
|
||||
87
packages/share-sheet/demo/index.ts
Normal file
87
packages/share-sheet/demo/index.ts
Normal file
@ -0,0 +1,87 @@
|
||||
import { VantComponent } from '../../common/component';
|
||||
import Toast from '../../toast/toast';
|
||||
|
||||
VantComponent({
|
||||
data: {
|
||||
show: {
|
||||
basic: false,
|
||||
withDesc: false,
|
||||
multiLine: false,
|
||||
customIcon: false,
|
||||
},
|
||||
options: [
|
||||
{ name: '微信', icon: 'wechat', openType: 'share' },
|
||||
{ name: '朋友圈', icon: 'wechat-moments' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
{ name: '小程序码', icon: 'weapp-qrcode' },
|
||||
],
|
||||
|
||||
multiLineOptions: [
|
||||
[
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{ name: 'QQ', icon: 'qq' },
|
||||
],
|
||||
[
|
||||
{ name: '复制链接', icon: 'link' },
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
],
|
||||
|
||||
customIconOptions: [
|
||||
{
|
||||
name: '名称',
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-fire.png',
|
||||
},
|
||||
{
|
||||
name: '名称',
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-light.png',
|
||||
},
|
||||
{
|
||||
name: '名称',
|
||||
icon: 'https://img.yzcdn.cn/vant/custom-icon-water.png',
|
||||
},
|
||||
],
|
||||
|
||||
optionsWithDesc: [
|
||||
{ name: '微信', icon: 'wechat' },
|
||||
{ name: '微博', icon: 'weibo' },
|
||||
{
|
||||
name: '复制链接',
|
||||
icon: 'link',
|
||||
description: '描述信息',
|
||||
},
|
||||
{ name: '分享海报', icon: 'poster' },
|
||||
{ name: '二维码', icon: 'qrcode' },
|
||||
],
|
||||
},
|
||||
|
||||
methods: {
|
||||
onShowShareSheet(event) {
|
||||
this.setData({
|
||||
[`show.${event.target.dataset.type}`]: true,
|
||||
});
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.setData({
|
||||
show: {
|
||||
basic: false,
|
||||
withDesc: false,
|
||||
multiLine: false,
|
||||
customIcon: false,
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
onSelect(event) {
|
||||
Toast({ context: this, message: event.detail.name });
|
||||
this.onClose();
|
||||
},
|
||||
},
|
||||
});
|
||||
45
packages/share-sheet/demo/index.wxml
Normal file
45
packages/share-sheet/demo/index.wxml
Normal file
@ -0,0 +1,45 @@
|
||||
<demo-block card title="基础用法">
|
||||
<van-cell is-link title="显示分享面板" data-type="basic" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.basic }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ options }}"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="展示多行选项">
|
||||
<van-cell is-link title="显示分享面板" data-type="multiLine" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.multiLine }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ multiLineOptions }}"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="自定义图标">
|
||||
<van-cell is-link title="显示分享面板" data-type="customIcon" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.customIcon }}"
|
||||
options="{{ customIconOptions }}"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block card title="展示描述信息">
|
||||
<van-cell is-link title="显示分享面板" data-type="withDesc" bind:click="onShowShareSheet" />
|
||||
<van-share-sheet
|
||||
show="{{ show.withDesc }}"
|
||||
title="立即分享给好友"
|
||||
options="{{ optionsWithDesc }}"
|
||||
description="描述信息"
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
281
packages/share-sheet/test/__snapshots__/demo.spec.ts.snap
Normal file
281
packages/share-sheet/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,281 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render demo and match snapshot 1`] = `
|
||||
<main>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
基础用法
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
data-type="basic"
|
||||
bind:click="onShowShareSheet"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
显示分享面板
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-share-sheet
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
>
|
||||
<van-popup
|
||||
class="van-share-sheet"
|
||||
bind:click-overlay="onClickOverlay"
|
||||
bind:close="onClose"
|
||||
>
|
||||
<van-overlay
|
||||
bind:click="onClickOverlay"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-overlay"
|
||||
bind:tap="onClick"
|
||||
catch:touchmove="noop"
|
||||
/>
|
||||
</van-overlay>
|
||||
</van-popup>
|
||||
</van-share-sheet>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
展示多行选项
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
data-type="multiLine"
|
||||
bind:click="onShowShareSheet"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
显示分享面板
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-share-sheet
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
>
|
||||
<van-popup
|
||||
class="van-share-sheet"
|
||||
bind:click-overlay="onClickOverlay"
|
||||
bind:close="onClose"
|
||||
>
|
||||
<van-overlay
|
||||
bind:click="onClickOverlay"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-overlay"
|
||||
bind:tap="onClick"
|
||||
catch:touchmove="noop"
|
||||
/>
|
||||
</van-overlay>
|
||||
</van-popup>
|
||||
</van-share-sheet>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
自定义图标
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
data-type="customIcon"
|
||||
bind:click="onShowShareSheet"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
显示分享面板
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-share-sheet
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
>
|
||||
<van-popup
|
||||
class="van-share-sheet"
|
||||
bind:click-overlay="onClickOverlay"
|
||||
bind:close="onClose"
|
||||
>
|
||||
<van-overlay
|
||||
bind:click="onClickOverlay"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-overlay"
|
||||
bind:tap="onClick"
|
||||
catch:touchmove="noop"
|
||||
/>
|
||||
</van-overlay>
|
||||
</van-popup>
|
||||
</van-share-sheet>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<demo-block>
|
||||
<wx-view
|
||||
class="custom-class demo-block van-clearfix "
|
||||
>
|
||||
<wx-view
|
||||
class="demo-block__title"
|
||||
>
|
||||
展示描述信息
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="demo-block__card"
|
||||
>
|
||||
<van-cell
|
||||
data-type="withDesc"
|
||||
bind:click="onShowShareSheet"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-cell van-cell--clickable"
|
||||
hoverClass="van-cell--hover hover-class"
|
||||
hoverStayTime="70"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<wx-view
|
||||
class="van-cell__title title-class"
|
||||
style=""
|
||||
>
|
||||
显示分享面板
|
||||
</wx-view>
|
||||
<wx-view
|
||||
class="van-cell__value value-class"
|
||||
/>
|
||||
<van-icon
|
||||
class="van-cell__right-icon-wrap right-icon-class"
|
||||
customClass="van-cell__right-icon"
|
||||
>
|
||||
<wx-view
|
||||
class="custom-class van-icon van-icon-arrow"
|
||||
style=""
|
||||
bind:tap="onClick"
|
||||
/>
|
||||
</van-icon>
|
||||
</wx-view>
|
||||
</van-cell>
|
||||
<van-share-sheet
|
||||
bind:close="onClose"
|
||||
bind:select="onSelect"
|
||||
>
|
||||
<van-popup
|
||||
class="van-share-sheet"
|
||||
bind:click-overlay="onClickOverlay"
|
||||
bind:close="onClose"
|
||||
>
|
||||
<van-overlay
|
||||
bind:click="onClickOverlay"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-overlay"
|
||||
bind:tap="onClick"
|
||||
catch:touchmove="noop"
|
||||
/>
|
||||
</van-overlay>
|
||||
</van-popup>
|
||||
</van-share-sheet>
|
||||
</wx-view>
|
||||
</wx-view>
|
||||
</demo-block>
|
||||
<van-toast
|
||||
id="van-toast"
|
||||
>
|
||||
<van-transition
|
||||
customClass="van-toast__container"
|
||||
/>
|
||||
</van-toast>
|
||||
</main>
|
||||
`;
|
||||
11
packages/share-sheet/test/demo.spec.ts
Normal file
11
packages/share-sheet/test/demo.spec.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import path from 'path';
|
||||
import simulate from 'miniprogram-simulate';
|
||||
|
||||
test('should render demo and match snapshot', () => {
|
||||
const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
|
||||
rootPath: path.resolve(__dirname, '../../'),
|
||||
});
|
||||
const comp = simulate.render(id);
|
||||
comp.attach(document.createElement('parent-wrapper'));
|
||||
expect(comp.toJSON()).toMatchSnapshot();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user