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

feat: Button component

Browse Source
This commit is contained in:
chenjiahan
2020-07-05 16:19:54 +08:00
parent 0010bfd461
commit 12c167fbbc
11 changed files with 1007 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src-next/button/test/__snapshots__/demo.spec.js.snap
+86
View File
@@ -0,0 +1,86 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="demo-button-row"><button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><span class="van-button__text">默认按钮</span></div>
</button> <button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">主要按钮</span></div>
</button> <button class="van-button van-button--info van-button--normal">
<div class="van-button__content"><span class="van-button__text">信息按钮</span></div>
</button></div> <button class="van-button van-button--danger van-button--normal">
<div class="van-button__content"><span class="van-button__text">危险按钮</span></div>
</button> <button class="van-button van-button--warning van-button--normal">
<div class="van-button__content"><span class="van-button__text">警告按钮</span></div>
</button>
</div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain">
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
</button> <button class="van-button van-button--info van-button--normal van-button--plain">
<div class="van-button__content"><span class="van-button__text">朴素按钮</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround">
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
</button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround">
<div class="van-button__content"><span class="van-button__text">细边框按钮</span></div>
</button></div>
<div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled">
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
</button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled">
<div class="van-button__content"><span class="van-button__text">禁用状态</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--loading">
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</button> <button class="van-button van-button--primary van-button--normal van-button--loading">
<div class="van-button__content">
<div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="color: currentColor; width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
</div>
</button> <button class="van-button van-button--info van-button--normal van-button--loading">
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
</div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--square">
<div class="van-button__content"><span class="van-button__text">方形按钮</span></div>
</button> <button class="van-button van-button--info van-button--normal van-button--round">
<div class="van-button__content"><span class="van-button__text">圆形按钮</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
<!----></i></div>
</button> <button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><i class="van-icon van-icon-star-o van-button__icon">
<!----></i><span class="van-button__text">按钮</span></div>
</button> <button class="van-button van-button--primary van-button--normal van-button--plain">
<div class="van-button__content"><i class="van-icon van-button__icon"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-icon__image">
<!----></i><span class="van-button__text">按钮</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--large">
<div class="van-button__content"><span class="van-button__text">大号按钮</span></div>
</button> <button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">普通按钮</span></div>
</button> <button class="van-button van-button--primary van-button--small">
<div class="van-button__content"><span class="van-button__text">小型按钮</span></div>
</button> <button class="van-button van-button--primary van-button--mini">
<div class="van-button__content"><span class="van-button__text">迷你按钮</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal van-button--block">
<div class="van-button__content"><span class="van-button__text">块级元素</span></div>
</button></div>
<div><button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">URL 跳转</span></div>
</button> <button class="van-button van-button--primary van-button--normal">
<div class="van-button__content"><span class="van-button__text">路由跳转</span></div>
</button></div>
<div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;">
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
</button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;">
<div class="van-button__content"><span class="van-button__text">单色按钮</span></div>
</button> <button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); border: 0px;">
<div class="van-button__content"><span class="van-button__text">渐变色按钮</span></div>
</button></div>
</div>
`;
src-next/button/test/__snapshots__/index.spec.js.snap
+16
View File
@@ -0,0 +1,16 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`icon-prefix prop 1`] = `
<button class="van-button van-button--default van-button--normal">
<div class="van-button__content"><i class="my-icon my-icon-success van-button__icon">
<!----></i></div>
</button>
`;
exports[`loading-size prop 1`] = `
<button class="van-button van-button--default van-button--normal van-button--loading">
<div class="van-button__content">
<div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: currentColor; width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div>
</button>
`;
src-next/button/test/demo.spec.js
+4
View File
@@ -0,0 +1,4 @@
import Demo from '../demo';
import { snapshotDemo } from '../../../test/demo';
snapshotDemo(Demo);
src-next/button/test/index.spec.js
+95
View File
@@ -0,0 +1,95 @@
import { mount } from '../../../test';
import Button from '..';
test('loading-size prop', () => {
const wrapper = mount(Button, {
propsData: {
loading: true,
loadingSize: '10px',
},
});
expect(wrapper).toMatchSnapshot();
});
test('click event', () => {
const onClick = jest.fn();
const wrapper = mount(Button, {
context: {
on: {
click: onClick,
},
},
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalled();
});
test('not trigger click event when disabled', () => {
const onClick = jest.fn();
const wrapper = mount(Button, {
propsData: {
disabled: true,
},
context: {
on: {
click: onClick,
},
},
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalledTimes(0);
});
test('not trigger click event when loading', () => {
const onClick = jest.fn();
const wrapper = mount(Button, {
propsData: {
loading: true,
},
context: {
on: {
click: onClick,
},
},
});
wrapper.trigger('click');
expect(onClick).toHaveBeenCalledTimes(0);
});
test('touchstart event', () => {
const onTouchstart = jest.fn();
const wrapper = mount(Button, {
context: {
on: {
touchstart: onTouchstart,
},
},
});
wrapper.trigger('touchstart');
expect(onTouchstart).toHaveBeenCalled();
});
test('hide border when color is gradient', () => {
const wrapper = mount(Button, {
propsData: {
color: 'linear-gradient(#000, #fff)',
},
});
expect(wrapper.element.style.border).toEqual('0px');
});
test('icon-prefix prop', () => {
const wrapper = mount(Button, {
propsData: {
icon: 'success',
iconPrefix: 'my-icon',
},
});
expect(wrapper).toMatchSnapshot();
});