blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-04-05 19:41:45 +08:00
Code Issues Projects Releases Wiki Activity

test(Search): add demo test

Browse Source
This commit is contained in:
nemo-shen 2021-12-02 23:51:17 +08:00 committed by neverland
parent 293f372da5
commit 689c5d82ed
9 changed files with 803 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
example/app.json
View File

@ -107,6 +107,7 @@
"van-radio-group": "./dist/radio-group/index",
"van-row": "./dist/row/index",
"van-search": "./dist/search/index",
"van-search-demo": "./dist/search/demo/index",
"van-sidebar": "./dist/sidebar/index",
"van-sidebar-item": "./dist/sidebar-item/index",
"van-slider": "./dist/slider/index",

44
example/pages/search/index.js
View File

@ -1,45 +1,3 @@
import Page from '../../common/page';
Page({
data: {
value: ''
},
onChange(e) {
this.setData({
value: e.detail
});
},
onSearch() {
if (this.data.value) {
wx.showToast({
title: '搜索：' + this.data.value,
icon: 'none'
});
}
},
onClick() {
if (this.data.value) {
wx.showToast({
title: '搜索：' + this.data.value,
icon: 'none'
});
}
},
onCancel() {
wx.showToast({
title: '取消',
icon: 'none'
});
},
onClear() {
wx.showToast({
title: '清空',
icon: 'none'
});
}
});
Page();

57
example/pages/search/index.wxml
View File

@ -1,56 +1 @@
<demo-block title="基本用法">
<van-search
model:value="{{ value }}"
placeholder="请输入搜索关键词"
bind:search="onSearch"
/>
</demo-block>
<demo-block title="事件监听">
<van-search
model:value="{{ value }}"
show-action
placeholder="请输入搜索关键词"
bind:search="onSearch"
bind:cancel="onCancel"
bind:clear="onClear"
/>
</demo-block>
<demo-block title="搜索框内容对齐">
<van-search
model:value="{{ value }}"
input-align="center"
placeholder="请输入搜索关键词"
/>
</demo-block>
<demo-block title="禁用搜索框">
<van-search
disabled
model:value="{{ value }}"
placeholder="请输入搜索关键词"
/>
</demo-block>
<demo-block title="自定义背景色">
<van-search
model:value="{{ value }}"
shape="round"
background="#4fc08d"
placeholder="请输入搜索关键词"
/>
</demo-block>
<demo-block title="自定义按钮">
<van-search
model:value="{{ value }}"
label="地址"
shape="round"
placeholder="请输入搜索关键词"
use-action-slot
bind:search="onSearch"
>
<view slot="action" bind:tap="onClick">搜索</view>
</van-search>
</demo-block>
<van-search-demo />

0
example/pages/search/index.wxss
View File

7
packages/search/demo/index.json Normal file
View File

@ -0,0 +1,7 @@
{
"component": true,
"usingComponents": {
"van-search": "../../search/index",
"demo-block": "../../../example/components/demo-block/index"
}
}

47
packages/search/demo/index.ts Normal file
View File

@ -0,0 +1,47 @@
import { VantComponent } from '../../common/component';
VantComponent({
data: {
value: '',
},
methods: {
onChange(e) {
this.setData({
value: e.detail,
});
},
onSearch() {
if (this.data.value) {
wx.showToast({
title: '搜索：' + this.data.value,
icon: 'none',
});
}
},
onClick() {
if (this.data.value) {
wx.showToast({
title: '搜索：' + this.data.value,
icon: 'none',
});
}
},
onCancel() {
wx.showToast({
title: '取消',
icon: 'none',
});
},
onClear() {
wx.showToast({
title: '清空',
icon: 'none',
});
},
},
});

56
packages/search/demo/index.wxml Normal file
View File

@ -0,0 +1,56 @@
<demo-block title="基本用法">
<van-search
model:value="{{ value }}"
placeholder="请输入搜索关键词"
bind:search="onSearch"
/>
</demo-block>
<demo-block title="事件监听">
<van-search
model:value="{{ value }}"
show-action
placeholder="请输入搜索关键词"
bind:search="onSearch"
bind:cancel="onCancel"
bind:clear="onClear"
/>
</demo-block>
<demo-block title="搜索框内容对齐">
<van-search
model:value="{{ value }}"
input-align="center"
placeholder="请输入搜索关键词"
/>
</demo-block>
<demo-block title="禁用搜索框">
<van-search
disabled
model:value="{{ value }}"
placeholder="请输入搜索关键词"
/>
</demo-block>
<demo-block title="自定义背景色">
<van-search
model:value="{{ value }}"
shape="round"
background="#4fc08d"
placeholder="请输入搜索关键词"
/>
</demo-block>
<demo-block title="自定义按钮">
<van-search
model:value="{{ value }}"
label="地址"
shape="round"
placeholder="请输入搜索关键词"
use-action-slot
bind:search="onSearch"
>
<view slot="action" bind:tap="onClick">搜索</view>
</van-search>
</demo-block>

679
packages/search/test/__snapshots__/demo.spec.ts.snap Normal file
View File

@ -0,0 +1,679 @@
// 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>
<van-search
bind:search="onSearch"
>
<wx-view
class="van-search custom-class"
style="background: #ffffff"
>
<wx-view
class="van-search__content van-search__content--square"
>
<van-field
class="van-search__field field-class"
inputClass="input-class"
bind:blur="onBlur"
bind:change="onChange"
bind:clear="onClear"
bind:click-input="onClickInput"
bind:confirm="onSearch"
bind:focus="onFocus"
>
<van-cell
customClass="van-field"
>
<wx-view
class="custom-class van-cell van-cell--borderless"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style="padding: 5px 10px 5px 0; background-color: transparent;"
bind:tap="onClick"
>
<van-icon
class="van-cell__left-icon-wrap"
customClass="van-cell__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-search"
style=""
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-cell__title title-class"
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
/>
<wx-view
class="van-cell__value value-class"
>
<wx-view
class="van-field__body van-field__body--search"
>
<wx-view
class="van-field__control van-field__control--custom"
bind:tap="onClickInput"
/>
<wx-input
adjustPosition="{{true}}"
alwaysEmbed="{{false}}"
autoFocus="{{false}}"
class="van-field__control input-class"
confirmHold="{{false}}"
confirmType="search"
cursor="{{-1}}"
cursorSpacing="{{50}}"
disabled="{{false}}"
focus="{{false}}"
holdKeyboard="{{false}}"
maxlength="{{-1}}"
password="{{false}}"
placeholder="请输入搜索关键词"
placeholderClass="van-field__placeholder"
placeholderStyle=""
selectionEnd="{{-1}}"
selectionStart="{{-1}}"
type="search"
value=""
bind:blur="onBlur"
bind:confirm="onConfirm"
bind:focus="onFocus"
bind:input="onInput"
bind:keyboardheightchange="onKeyboardHeightChange"
bind:tap="onClickInput"
/>
<wx-view
class="van-field__icon-container"
bind:tap="onClickIcon"
/>
<wx-view
class="van-field__button"
/>
</wx-view>
</wx-view>
</wx-view>
</van-cell>
</van-field>
</wx-view>
</wx-view>
</van-search>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
事件监听
</wx-view>
<van-search
bind:cancel="onCancel"
bind:clear="onClear"
bind:search="onSearch"
>
<wx-view
class="van-search van-search--withaction custom-class"
style="background: #ffffff"
>
<wx-view
class="van-search__content van-search__content--square"
>
<van-field
class="van-search__field field-class"
inputClass="input-class"
bind:blur="onBlur"
bind:change="onChange"
bind:clear="onClear"
bind:click-input="onClickInput"
bind:confirm="onSearch"
bind:focus="onFocus"
>
<van-cell
customClass="van-field"
>
<wx-view
class="custom-class van-cell van-cell--borderless"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style="padding: 5px 10px 5px 0; background-color: transparent;"
bind:tap="onClick"
>
<van-icon
class="van-cell__left-icon-wrap"
customClass="van-cell__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-search"
style=""
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-cell__title title-class"
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
/>
<wx-view
class="van-cell__value value-class"
>
<wx-view
class="van-field__body van-field__body--search"
>
<wx-view
class="van-field__control van-field__control--custom"
bind:tap="onClickInput"
/>
<wx-input
adjustPosition="{{true}}"
alwaysEmbed="{{false}}"
autoFocus="{{false}}"
class="van-field__control input-class"
confirmHold="{{false}}"
confirmType="search"
cursor="{{-1}}"
cursorSpacing="{{50}}"
disabled="{{false}}"
focus="{{false}}"
holdKeyboard="{{false}}"
maxlength="{{-1}}"
password="{{false}}"
placeholder="请输入搜索关键词"
placeholderClass="van-field__placeholder"
placeholderStyle=""
selectionEnd="{{-1}}"
selectionStart="{{-1}}"
type="search"
value=""
bind:blur="onBlur"
bind:confirm="onConfirm"
bind:focus="onFocus"
bind:input="onInput"
bind:keyboardheightchange="onKeyboardHeightChange"
bind:tap="onClickInput"
/>
<wx-view
class="van-field__icon-container"
bind:tap="onClickIcon"
/>
<wx-view
class="van-field__button"
/>
</wx-view>
</wx-view>
</wx-view>
</van-cell>
</van-field>
</wx-view>
<wx-view
class="van-search__action"
hoverClass="van-search__action--hover"
hoverStayTime="70"
>
<wx-view
class="cancel-class"
bind:tap="onCancel"
>
取消
</wx-view>
</wx-view>
</wx-view>
</van-search>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
搜索框内容对齐
</wx-view>
<van-search>
<wx-view
class="van-search custom-class"
style="background: #ffffff"
>
<wx-view
class="van-search__content van-search__content--square"
>
<van-field
class="van-search__field field-class"
inputClass="input-class"
bind:blur="onBlur"
bind:change="onChange"
bind:clear="onClear"
bind:click-input="onClickInput"
bind:confirm="onSearch"
bind:focus="onFocus"
>
<van-cell
customClass="van-field"
>
<wx-view
class="custom-class van-cell van-cell--borderless"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style="padding: 5px 10px 5px 0; background-color: transparent;"
bind:tap="onClick"
>
<van-icon
class="van-cell__left-icon-wrap"
customClass="van-cell__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-search"
style=""
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-cell__title title-class"
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
/>
<wx-view
class="van-cell__value value-class"
>
<wx-view
class="van-field__body van-field__body--search"
>
<wx-view
class="van-field__control van-field__control--center van-field__control--custom"
bind:tap="onClickInput"
/>
<wx-input
adjustPosition="{{true}}"
alwaysEmbed="{{false}}"
autoFocus="{{false}}"
class="van-field__control van-field__control--center input-class"
confirmHold="{{false}}"
confirmType="search"
cursor="{{-1}}"
cursorSpacing="{{50}}"
disabled="{{false}}"
focus="{{false}}"
holdKeyboard="{{false}}"
maxlength="{{-1}}"
password="{{false}}"
placeholder="请输入搜索关键词"
placeholderClass="van-field__placeholder"
placeholderStyle=""
selectionEnd="{{-1}}"
selectionStart="{{-1}}"
type="search"
value=""
bind:blur="onBlur"
bind:confirm="onConfirm"
bind:focus="onFocus"
bind:input="onInput"
bind:keyboardheightchange="onKeyboardHeightChange"
bind:tap="onClickInput"
/>
<wx-view
class="van-field__icon-container"
bind:tap="onClickIcon"
/>
<wx-view
class="van-field__button"
/>
</wx-view>
</wx-view>
</wx-view>
</van-cell>
</van-field>
</wx-view>
</wx-view>
</van-search>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
禁用搜索框
</wx-view>
<van-search>
<wx-view
class="van-search custom-class"
style="background: #ffffff"
>
<wx-view
class="van-search__content van-search__content--square"
>
<van-field
class="van-search__field field-class"
inputClass="input-class"
bind:blur="onBlur"
bind:change="onChange"
bind:clear="onClear"
bind:click-input="onClickInput"
bind:confirm="onSearch"
bind:focus="onFocus"
>
<van-cell
customClass="van-field"
>
<wx-view
class="custom-class van-cell van-cell--borderless"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style="padding: 5px 10px 5px 0; background-color: transparent;"
bind:tap="onClick"
>
<van-icon
class="van-cell__left-icon-wrap"
customClass="van-cell__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-search"
style=""
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-cell__title title-class"
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
/>
<wx-view
class="van-cell__value value-class"
>
<wx-view
class="van-field__body van-field__body--search"
>
<wx-view
class="van-field__control van-field__control--custom"
bind:tap="onClickInput"
/>
<wx-input
adjustPosition="{{true}}"
alwaysEmbed="{{false}}"
autoFocus="{{false}}"
class="van-field__control van-field__control--disabled input-class"
confirmHold="{{false}}"
confirmType="search"
cursor="{{-1}}"
cursorSpacing="{{50}}"
disabled="{{true}}"
focus="{{false}}"
holdKeyboard="{{false}}"
maxlength="{{-1}}"
password="{{false}}"
placeholder="请输入搜索关键词"
placeholderClass="van-field__placeholder"
placeholderStyle=""
selectionEnd="{{-1}}"
selectionStart="{{-1}}"
type="search"
value=""
bind:blur="onBlur"
bind:confirm="onConfirm"
bind:focus="onFocus"
bind:input="onInput"
bind:keyboardheightchange="onKeyboardHeightChange"
bind:tap="onClickInput"
/>
<wx-view
class="van-field__icon-container"
bind:tap="onClickIcon"
/>
<wx-view
class="van-field__button"
/>
</wx-view>
</wx-view>
</wx-view>
</van-cell>
</van-field>
</wx-view>
</wx-view>
</van-search>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
自定义背景色
</wx-view>
<van-search>
<wx-view
class="van-search custom-class"
style="background: #4fc08d"
>
<wx-view
class="van-search__content van-search__content--round"
>
<van-field
class="van-search__field field-class"
inputClass="input-class"
bind:blur="onBlur"
bind:change="onChange"
bind:clear="onClear"
bind:click-input="onClickInput"
bind:confirm="onSearch"
bind:focus="onFocus"
>
<van-cell
customClass="van-field"
>
<wx-view
class="custom-class van-cell van-cell--borderless"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style="padding: 5px 10px 5px 0; background-color: transparent;"
bind:tap="onClick"
>
<van-icon
class="van-cell__left-icon-wrap"
customClass="van-cell__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-search"
style=""
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-cell__title title-class"
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
/>
<wx-view
class="van-cell__value value-class"
>
<wx-view
class="van-field__body van-field__body--search"
>
<wx-view
class="van-field__control van-field__control--custom"
bind:tap="onClickInput"
/>
<wx-input
adjustPosition="{{true}}"
alwaysEmbed="{{false}}"
autoFocus="{{false}}"
class="van-field__control input-class"
confirmHold="{{false}}"
confirmType="search"
cursor="{{-1}}"
cursorSpacing="{{50}}"
disabled="{{false}}"
focus="{{false}}"
holdKeyboard="{{false}}"
maxlength="{{-1}}"
password="{{false}}"
placeholder="请输入搜索关键词"
placeholderClass="van-field__placeholder"
placeholderStyle=""
selectionEnd="{{-1}}"
selectionStart="{{-1}}"
type="search"
value=""
bind:blur="onBlur"
bind:confirm="onConfirm"
bind:focus="onFocus"
bind:input="onInput"
bind:keyboardheightchange="onKeyboardHeightChange"
bind:tap="onClickInput"
/>
<wx-view
class="van-field__icon-container"
bind:tap="onClickIcon"
/>
<wx-view
class="van-field__button"
/>
</wx-view>
</wx-view>
</wx-view>
</van-cell>
</van-field>
</wx-view>
</wx-view>
</van-search>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix "
>
<wx-view
class="demo-block__title"
>
自定义按钮
</wx-view>
<van-search
bind:search="onSearch"
>
<wx-view
class="van-search van-search--withaction custom-class"
style="background: #ffffff"
>
<wx-view
class="van-search__content van-search__content--round"
>
<wx-view
class="van-search__label"
>
地址
</wx-view>
<van-field
class="van-search__field field-class"
inputClass="input-class"
bind:blur="onBlur"
bind:change="onChange"
bind:clear="onClear"
bind:click-input="onClickInput"
bind:confirm="onSearch"
bind:focus="onFocus"
>
<van-cell
customClass="van-field"
>
<wx-view
class="custom-class van-cell van-cell--borderless"
hoverClass="van-cell--hover hover-class"
hoverStayTime="70"
style="padding: 5px 10px 5px 0; background-color: transparent;"
bind:tap="onClick"
>
<van-icon
class="van-cell__left-icon-wrap"
customClass="van-cell__left-icon"
>
<wx-view
class="custom-class van-icon van-icon-search"
style=""
bind:tap="onClick"
/>
</van-icon>
<wx-view
class="van-cell__title title-class"
style="max-width:6.2em;min-width:6.2em;margin-right: 12px;"
/>
<wx-view
class="van-cell__value value-class"
>
<wx-view
class="van-field__body van-field__body--search"
>
<wx-view
class="van-field__control van-field__control--custom"
bind:tap="onClickInput"
/>
<wx-input
adjustPosition="{{true}}"
alwaysEmbed="{{false}}"
autoFocus="{{false}}"
class="van-field__control input-class"
confirmHold="{{false}}"
confirmType="search"
cursor="{{-1}}"
cursorSpacing="{{50}}"
disabled="{{false}}"
focus="{{false}}"
holdKeyboard="{{false}}"
maxlength="{{-1}}"
password="{{false}}"
placeholder="请输入搜索关键词"
placeholderClass="van-field__placeholder"
placeholderStyle=""
selectionEnd="{{-1}}"
selectionStart="{{-1}}"
type="search"
value=""
bind:blur="onBlur"
bind:confirm="onConfirm"
bind:focus="onFocus"
bind:input="onInput"
bind:keyboardheightchange="onKeyboardHeightChange"
bind:tap="onClickInput"
/>
<wx-view
class="van-field__icon-container"
bind:tap="onClickIcon"
/>
<wx-view
class="van-field__button"
/>
</wx-view>
</wx-view>
</wx-view>
</van-cell>
</van-field>
</wx-view>
<wx-view
class="van-search__action"
hoverClass="van-search__action--hover"
hoverStayTime="70"
>
<wx-view
slot="action"
bind:tap="onClick"
>
搜索
</wx-view>
</wx-view>
</wx-view>
</van-search>
</wx-view>
</demo-block>
</main>
`;

11
packages/search/test/demo.spec.ts Normal file
View 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();
});