From 6e4ebfd886b4149921b04807604446119fce90d4 Mon Sep 17 00:00:00 2001 From: nemo-shen Date: Fri, 3 Dec 2021 00:07:21 +0800 Subject: [PATCH] test(Tab): add demo test --- example/app.json | 1 + example/pages/tab/index.js | 42 +- example/pages/tab/index.wxml | 150 +- packages/stepper/demo/index.wxml | 2 +- packages/tab/demo/index.json | 9 + .../tab/demo/index.less | 4 - packages/tab/demo/index.ts | 45 + packages/tab/demo/index.wxml | 149 ++ .../tab/test/__snapshots__/demo.spec.ts.snap | 1552 +++++++++++++++++ packages/tab/test/demo.spec.ts | 11 + 10 files changed, 1770 insertions(+), 195 deletions(-) create mode 100644 packages/tab/demo/index.json rename example/pages/tab/index.wxss => packages/tab/demo/index.less (89%) create mode 100644 packages/tab/demo/index.ts create mode 100644 packages/tab/demo/index.wxml create mode 100644 packages/tab/test/__snapshots__/demo.spec.ts.snap create mode 100644 packages/tab/test/demo.spec.ts diff --git a/example/app.json b/example/app.json index e96a0617..f7f0015a 100644 --- a/example/app.json +++ b/example/app.json @@ -121,6 +121,7 @@ "van-switch": "./dist/switch/index", "van-switch-demo": "./dist/switch/demo/index", "van-tab": "./dist/tab/index", + "van-tab-demo": "./dist/tab/demo/index", "van-tabs": "./dist/tabs/index", "van-tabbar": "./dist/tabbar/index", "van-tabbar-item": "./dist/tabbar-item/index", diff --git a/example/pages/tab/index.js b/example/pages/tab/index.js index 4860a035..cc11dfda 100644 --- a/example/pages/tab/index.js +++ b/example/pages/tab/index.js @@ -1,43 +1,3 @@ import Page from '../../common/page'; -Page({ - data: { - tabs2: [1, 2], - tabs3: [1, 2, 3], - tabs4: [1, 2, 3, 4], - tabs6: [1, 2, 3, 4, 5, 6], - tabsWithName: [ - { name: 'a', index: 1 }, - { name: 'b', index: 2 }, - { name: 'c', index: 3 } - ] - }, - - onClickDisabled(event) { - wx.showToast({ - title: `标签 ${event.detail.index + 1} 已被禁用`, - icon: 'none' - }); - }, - - onChange(event) { - wx.showToast({ - title: `切换到标签 ${event.detail.index + 1}`, - icon: 'none' - }); - }, - - onClickNavRight() { - wx.showToast({ - title: '点击 right nav', - icon: 'none' - }); - }, - - onClick(event) { - wx.showToast({ - title: `点击标签 ${event.detail.index + 1}`, - icon: 'none' - }); - } -}); +Page(); diff --git a/example/pages/tab/index.wxml b/example/pages/tab/index.wxml index 67c12433..7600bfd3 100644 --- a/example/pages/tab/index.wxml +++ b/example/pages/tab/index.wxml @@ -1,149 +1 @@ - - - - - {{ '内容' + item }} - - - - - - - - - - {{ '内容' + item.index}} - - - - - - - - - - {{ '内容' + item }} - - - - - - - - - - {{ '内容' + item }} - - - - - - - - - - {{ '内容' + item }} - - - - - - - - - - {{ '内容' + item }} - - - - - - - - - - {{ '内容' + item }} - - - - - - - - - - {{ '内容' + item }} - - - - - - - - - - {{ '内容' + item }} - - - - - - - - - - - {{ '内容' + item }} - - - - + diff --git a/packages/stepper/demo/index.wxml b/packages/stepper/demo/index.wxml index 3007ef89..7d3d3de3 100644 --- a/packages/stepper/demo/index.wxml +++ b/packages/stepper/demo/index.wxml @@ -6,7 +6,7 @@ - + diff --git a/packages/tab/demo/index.json b/packages/tab/demo/index.json new file mode 100644 index 00000000..077635e6 --- /dev/null +++ b/packages/tab/demo/index.json @@ -0,0 +1,9 @@ +{ + "component": true, + "usingComponents": { + "van-tab": "../../tab/index", + "van-tabs": "../../tabs/index", + "van-icon": "../../icon/index", + "demo-block": "../../../example/components/demo-block/index" + } +} diff --git a/example/pages/tab/index.wxss b/packages/tab/demo/index.less similarity index 89% rename from example/pages/tab/index.wxss rename to packages/tab/demo/index.less index 3521a9ec..9a91d877 100644 --- a/example/pages/tab/index.wxss +++ b/packages/tab/demo/index.less @@ -1,7 +1,3 @@ -page { - padding-bottom: 300px; -} - .content { padding: 20px; background-color: #fff; diff --git a/packages/tab/demo/index.ts b/packages/tab/demo/index.ts new file mode 100644 index 00000000..8f126791 --- /dev/null +++ b/packages/tab/demo/index.ts @@ -0,0 +1,45 @@ +import { VantComponent } from '../../common/component'; + +VantComponent({ + data: { + tabs2: [1, 2], + tabs3: [1, 2, 3], + tabs4: [1, 2, 3, 4], + tabs6: [1, 2, 3, 4, 5, 6], + tabsWithName: [ + { name: 'a', index: 1 }, + { name: 'b', index: 2 }, + { name: 'c', index: 3 }, + ], + }, + + methods: { + onClickDisabled(event) { + wx.showToast({ + title: `标签 ${event.detail.index + 1} 已被禁用`, + icon: 'none', + }); + }, + + onChange(event) { + wx.showToast({ + title: `切换到标签 ${event.detail.index + 1}`, + icon: 'none', + }); + }, + + onClickNavRight() { + wx.showToast({ + title: '点击 right nav', + icon: 'none', + }); + }, + + onClick(event) { + wx.showToast({ + title: `点击标签 ${event.detail.index + 1}`, + icon: 'none', + }); + }, + }, +}); diff --git a/packages/tab/demo/index.wxml b/packages/tab/demo/index.wxml new file mode 100644 index 00000000..67c12433 --- /dev/null +++ b/packages/tab/demo/index.wxml @@ -0,0 +1,149 @@ + + + + + {{ '内容' + item }} + + + + + + + + + + {{ '内容' + item.index}} + + + + + + + + + + {{ '内容' + item }} + + + + + + + + + + {{ '内容' + item }} + + + + + + + + + + {{ '内容' + item }} + + + + + + + + + + {{ '内容' + item }} + + + + + + + + + + {{ '内容' + item }} + + + + + + + + + + {{ '内容' + item }} + + + + + + + + + + {{ '内容' + item }} + + + + + + + + + + + {{ '内容' + item }} + + + + diff --git a/packages/tab/test/__snapshots__/demo.spec.ts.snap b/packages/tab/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 00000000..8e4aa74d --- /dev/null +++ b/packages/tab/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,1552 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+ + + + 基础用法 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + 标签 4 + + + + + + + + + + + + + + + + + + 内容2 + + + + + + + + + + + + + + + + + + 通过名称匹配 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + + + + + + + + + + + + 内容2 + + + + + + + + + + + + + + + + 横向滚动 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + 标签 4 + + + + + + + 标签 5 + + + + + + + 标签 6 + + + + + + + + + + + + + + + + 内容1 + + + + + + + + + + + + + + + + + + + + + + + + 禁用标签 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + + + + + + + + + + 内容1 + + + + + + + + + + + + + + + + + + 样式风格 + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + + + + + + + + + + 内容1 + + + + + + + + + + + + + + + + + + 点击事件 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + + + + + + + + + + 内容1 + + + + + + + + + + + + + + + + 粘性布局 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + 标签 4 + + + + + + + + + + + + + + + + 内容1 + + + + + + + + + + + + + + + + + + + + 切换动画 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + 标签 4 + + + + + + + + + + + + + + + + 内容1 + + + + + + + + + + + + + + + + + + + + + + + 滑动切换 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + 标签 3 + + + + + + + 标签 4 + + + + + + + + + + + + + + + + 内容1 + + + + + + + + + + + + + + + + + + + + 自定义标题 + + + + + + + + + + + + + + 标签 1 + + + + + + + 标签 2 + + + + + + + + + + + + 标签 3 + + + + 99 + + + + + + + + 标签 4 + + + + + + + + + + + + + + + + + + + + + 内容2 + + + + + + + + + + + + + + +
+`; diff --git a/packages/tab/test/demo.spec.ts b/packages/tab/test/demo.spec.ts new file mode 100644 index 00000000..4c3798cb --- /dev/null +++ b/packages/tab/test/demo.spec.ts @@ -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(); +});