From fd85dcb64b9320c7e9574c26206a57b5b2fe1c68 Mon Sep 17 00:00:00 2001 From: nemo-shen Date: Thu, 2 Dec 2021 00:09:17 +0800 Subject: [PATCH] test(CheckBox): add demo test --- example/app.json | 1 + example/pages/checkbox/index.js | 31 +- example/pages/checkbox/index.wxml | 151 +-- packages/checkbox/demo/index.json | 10 + .../checkbox/demo/index.less | 0 packages/checkbox/demo/index.ts | 34 + packages/checkbox/demo/index.wxml | 150 +++ .../test/__snapshots__/demo.spec.ts.snap | 875 ++++++++++++++++++ packages/checkbox/test/demo.spec.ts | 11 + 9 files changed, 1083 insertions(+), 180 deletions(-) create mode 100644 packages/checkbox/demo/index.json rename example/pages/checkbox/index.wxss => packages/checkbox/demo/index.less (100%) create mode 100644 packages/checkbox/demo/index.ts create mode 100644 packages/checkbox/demo/index.wxml create mode 100644 packages/checkbox/test/__snapshots__/demo.spec.ts.snap create mode 100644 packages/checkbox/test/demo.spec.ts diff --git a/example/app.json b/example/app.json index ccd15ebe..614fd513 100644 --- a/example/app.json +++ b/example/app.json @@ -75,6 +75,7 @@ "van-cell-demo": "./dist/cell/demo/index", "van-cell-group": "./dist/cell-group/index", "van-checkbox": "./dist/checkbox/index", + "van-checkbox-demo": "./dist/checkbox/demo/index", "van-checkbox-group": "./dist/checkbox-group/index", "van-col": "./dist/col/index", "van-count-down": "./dist/count-down/index", diff --git a/example/pages/checkbox/index.js b/example/pages/checkbox/index.js index e70fc539..cc11dfda 100644 --- a/example/pages/checkbox/index.js +++ b/example/pages/checkbox/index.js @@ -1,32 +1,3 @@ import Page from '../../common/page'; -Page({ - data: { - checkbox1: true, - checkbox2: true, - checkbox3: true, - checkboxLabel: true, - checkboxSize: true, - checkboxShape: true, - list: ['a', 'b', 'c'], - result: ['a', 'b'], - result2: [], - result3: [], - result4: [], - activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', - inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', - }, - - onChange(event) { - const { key } = event.currentTarget.dataset; - this.setData({ [key]: event.detail }); - }, - - toggle(event) { - const { index } = event.currentTarget.dataset; - const checkbox = this.selectComponent(`.checkboxes-${index}`); - checkbox.toggle(); - }, - - noop() {}, -}); +Page(); diff --git a/example/pages/checkbox/index.wxml b/example/pages/checkbox/index.wxml index 62921230..9a3e22d4 100644 --- a/example/pages/checkbox/index.wxml +++ b/example/pages/checkbox/index.wxml @@ -1,150 +1 @@ - - - 复选框 - - - - - - 复选框 - - - 复选框 - - - - - - 复选框 - - - - - - 复选框 - - - - - - 复选框 - - - - - - 自定义图标 - - - - - - - 复选框 - - - - - - - 复选框 {{ item }} - - - - - - - - 复选框 {{ item }} - - - - - - - - 复选框 {{ item }} - - - - - - - - - - - - - + diff --git a/packages/checkbox/demo/index.json b/packages/checkbox/demo/index.json new file mode 100644 index 00000000..3fdf853c --- /dev/null +++ b/packages/checkbox/demo/index.json @@ -0,0 +1,10 @@ +{ + "component": true, + "usingComponents": { + "van-button": "../../button/index", + "van-cell": "../../cell/index", + "van-checkbox": "../../checkbox/index", + "van-checkbox-group": "../../checkbox-group/index", + "demo-block": "../../../example/components/demo-block/index" + } +} diff --git a/example/pages/checkbox/index.wxss b/packages/checkbox/demo/index.less similarity index 100% rename from example/pages/checkbox/index.wxss rename to packages/checkbox/demo/index.less diff --git a/packages/checkbox/demo/index.ts b/packages/checkbox/demo/index.ts new file mode 100644 index 00000000..547eda7c --- /dev/null +++ b/packages/checkbox/demo/index.ts @@ -0,0 +1,34 @@ +import { VantComponent } from '../../common/component'; + +VantComponent({ + data: { + checkbox1: true, + checkbox2: true, + checkbox3: true, + checkboxLabel: true, + checkboxSize: true, + checkboxShape: true, + list: ['a', 'b', 'c'], + result: ['a', 'b'], + result2: [], + result3: [], + result4: [], + activeIcon: 'https://img.yzcdn.cn/vant/user-active.png', + inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png', + }, + + methods: { + onChange(event) { + const { key } = event.currentTarget.dataset; + this.setData({ [key]: event.detail }); + }, + + toggle(event) { + const { index } = event.currentTarget.dataset; + const checkbox = this.selectComponent(`.checkboxes-${index}`); + checkbox.toggle(); + }, + + noop() {}, + }, +}); diff --git a/packages/checkbox/demo/index.wxml b/packages/checkbox/demo/index.wxml new file mode 100644 index 00000000..62921230 --- /dev/null +++ b/packages/checkbox/demo/index.wxml @@ -0,0 +1,150 @@ + + + 复选框 + + + + + + 复选框 + + + 复选框 + + + + + + 复选框 + + + + + + 复选框 + + + + + + 复选框 + + + + + + 自定义图标 + + + + + + + 复选框 + + + + + + + 复选框 {{ item }} + + + + + + + + 复选框 {{ item }} + + + + + + + + 复选框 {{ item }} + + + + + + + + + + + + + diff --git a/packages/checkbox/test/__snapshots__/demo.spec.ts.snap b/packages/checkbox/test/__snapshots__/demo.spec.ts.snap new file mode 100644 index 00000000..09e87e7a --- /dev/null +++ b/packages/checkbox/test/__snapshots__/demo.spec.ts.snap @@ -0,0 +1,875 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render demo and match snapshot 1`] = ` +
+ + + + 基本用法 + + + + + + + + + + + 复选框 + + + + + + + + + + 禁用状态 + + + + + + + + + + + 复选框 + + + + + + + + + + + + + + 复选框 + + + + + + + + + + 自定义形状 + + + + + + + + + + + 复选框 + + + + + + + + + + 自定义颜色 + + + + + + + + + + + 复选框 + + + + + + + + + + 自定义大小 + + + + + + + + + + + 复选框 + + + + + + + + + + 自定义图标 + + + + + + + + + 自定义图标 + + + + + + + + + + 禁用文本点击 + + + + + + + + + + + 复选框 + + + + + + + + + + 复选框组 + + + + + + + + + + + + + 复选框 a + + + + + + + + + + + + + + 复选框 b + + + + + + + + + + + + + + 复选框 c + + + + + + + + + + + + 水平排列 + + + + + + + + + + + + + 复选框 a + + + + + + + + + + + + + + 复选框 b + + + + + + + + + + + + + + 复选框 c + + + + + + + + + + + + 限制最大可选数 + + + + + + + + + + + + + 复选框 a + + + + + + + + + + + + + + 复选框 b + + + + + + + + + + + + + + 复选框 c + + + + + + + + + + + + 搭配单元格组件使用 + + + + + + + + 复选框 a + + + + + + + + + + + + + + + + + + + 复选框 b + + + + + + + + + + + + + + + + + + + 复选框 c + + + + + + + + + + + + + + + + + + + + +
+`; diff --git a/packages/checkbox/test/demo.spec.ts b/packages/checkbox/test/demo.spec.ts new file mode 100644 index 00000000..4c3798cb --- /dev/null +++ b/packages/checkbox/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(); +});