From 9a8879dbce439dbeded7054edc75056564ecb77f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chttpxiaobocom=E2=80=9D?= <731653765@qq.com>
Date: Fri, 17 Sep 2021 11:04:55 +0800
Subject: [PATCH 1/2] feat(slider): add unit function
feat(slider): add unit test function
fix(slider): reduce some code
feat(slider): add unit test function
---
devui/slider/__tests__/slider.spec.ts | 58 ++++++++++++++++++++++++++-
devui/slider/src/slider.scss | 3 +-
devui/slider/src/slider.tsx | 7 ++--
3 files changed, 62 insertions(+), 6 deletions(-)
diff --git a/devui/slider/__tests__/slider.spec.ts b/devui/slider/__tests__/slider.spec.ts
index 9f9d6680..3ff46a0d 100644
--- a/devui/slider/__tests__/slider.spec.ts
+++ b/devui/slider/__tests__/slider.spec.ts
@@ -1,2 +1,56 @@
-import { mount } from '@vue/test-utils';
-import DSlider from '../src/slider'
\ No newline at end of file
+import { mount } from '@vue/test-utils'
+import { nextTick,ref } from 'vue'
+import DSlider from '../src/slider'
+
+describe('d-slider', () => {
+ it('slider maxValue && minValue work', () => {
+ const wrapper = mount(DSlider, {
+ props: {
+ max: 50,
+ min: 2,
+ },
+ })
+ const max = wrapper.find('.devui-max_count')
+ const min = wrapper.find('.devui-min_count')
+ expect(min.text()).toBe('2')
+ expect(max.text()).toBe('50')
+ })
+ it('slider v-model work', async () => {
+ const value=ref(5);
+ const wrapper = mount({
+ components: { DSlider },
+ template: `
+
+ `,
+ setup() {
+ return {
+ modelValue:value,
+ }
+ },
+ })
+ const input = wrapper.find('input')
+ expect(input.element.value).toBe('5')
+ input.setValue(10)
+ await nextTick()
+ expect(value.value).toBe(10)
+ })
+ it('slider showInput work', () => {
+ const wrapper = mount(DSlider, {
+ props: {
+ showInput: true,
+ },
+ })
+ const dInput = wrapper.find('.devui-input__outWrap')
+ expect(dInput.exists()).toBeTruthy()
+ })
+
+ it('slider disabled work', () => {
+ const wrapper = mount(DSlider, {
+ props: {
+ disabled: true,
+ },
+ })
+ const slider = wrapper.find('.devui-slider__runway')
+ expect(slider.classes()).toContain('disabled')
+ })
+})
diff --git a/devui/slider/src/slider.scss b/devui/slider/src/slider.scss
index 998b18c0..06016580 100644
--- a/devui/slider/src/slider.scss
+++ b/devui/slider/src/slider.scss
@@ -89,7 +89,7 @@
color: $devui-text;
}
- .devui-input__wrap {
+ .devui-input__outWrap {
position: absolute;
right: -60px;
top: -12px;
@@ -99,6 +99,7 @@
input {
width: 40px;
+ text-align: center;
}
}
}
diff --git a/devui/slider/src/slider.tsx b/devui/slider/src/slider.tsx
index 46bc6d70..bbc243f5 100644
--- a/devui/slider/src/slider.tsx
+++ b/devui/slider/src/slider.tsx
@@ -1,6 +1,6 @@
import { defineComponent, ref, computed, onMounted } from 'vue';
import { sliderProps } from './slider-types';
-import { Input } from '../../input';
+import { Input } from '../../input';
import './slider.scss';
export default defineComponent({
@@ -22,7 +22,7 @@ export default defineComponent({
//当前的位置以百分比显示
const percentDispaly = ref('');
const renderShowInput = () => {
- return props.showInput ? : '';
+ return props.showInput ? : '';
};
//当传入modelValue时用以定位button的位置
@@ -128,7 +128,7 @@ export default defineComponent({
}
//输入框内的值
function handleOnInput(event) {
- inputValue.value = parseInt(event.target.value);
+ inputValue.value=parseInt(event.target.value);
if (!inputValue.value) {
inputValue.value = props.min;
percentDispaly.value = '0%';
@@ -142,6 +142,7 @@ export default defineComponent({
const re = /^(?:[1-9]?\d|100)$/;
if (re.test(`${inputValue.value}`)) {
percentDispaly.value = ((inputValue.value - props.min) * 100) / (props.max - props.min) + '%';
+ ctx.emit('update:modelValue', inputValue.value);
}
}
}
--
Gitee
From 35c61502f703c99ec2712c5f90c2d5055fa2e1f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chttpxiaobocom=E2=80=9D?= <731653765@qq.com>
Date: Thu, 23 Sep 2021 23:38:20 +0800
Subject: [PATCH 2/2] fix(slider): fix format problems
fix(slider): fix outwrap
---
devui/slider/__tests__/slider.spec.ts | 56 +++++++++++++--------------
devui/slider/src/slider.scss | 3 +-
devui/slider/src/slider.tsx | 12 ++++--
3 files changed, 39 insertions(+), 32 deletions(-)
diff --git a/devui/slider/__tests__/slider.spec.ts b/devui/slider/__tests__/slider.spec.ts
index 3ff46a0d..146a319f 100644
--- a/devui/slider/__tests__/slider.spec.ts
+++ b/devui/slider/__tests__/slider.spec.ts
@@ -1,6 +1,6 @@
-import { mount } from '@vue/test-utils'
-import { nextTick,ref } from 'vue'
-import DSlider from '../src/slider'
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
+import DSlider from '../src/slider';
describe('d-slider', () => {
it('slider maxValue && minValue work', () => {
@@ -9,14 +9,14 @@ describe('d-slider', () => {
max: 50,
min: 2,
},
- })
- const max = wrapper.find('.devui-max_count')
- const min = wrapper.find('.devui-min_count')
- expect(min.text()).toBe('2')
- expect(max.text()).toBe('50')
- })
+ });
+ const max = wrapper.find('.devui-max_count');
+ const min = wrapper.find('.devui-min_count');
+ expect(min.text()).toBe('2');
+ expect(max.text()).toBe('50');
+ });
it('slider v-model work', async () => {
- const value=ref(5);
+ const value = ref(5);
const wrapper = mount({
components: { DSlider },
template: `
@@ -24,33 +24,33 @@ describe('d-slider', () => {
`,
setup() {
return {
- modelValue:value,
- }
+ modelValue: value,
+ };
},
- })
- const input = wrapper.find('input')
- expect(input.element.value).toBe('5')
- input.setValue(10)
- await nextTick()
- expect(value.value).toBe(10)
- })
+ });
+ const input = wrapper.find('input');
+ expect(input.element.value).toBe('5');
+ input.setValue(10);
+ await nextTick();
+ expect(value.value).toBe(10);
+ });
it('slider showInput work', () => {
const wrapper = mount(DSlider, {
props: {
showInput: true,
},
- })
- const dInput = wrapper.find('.devui-input__outWrap')
- expect(dInput.exists()).toBeTruthy()
- })
+ });
+ const dInput = wrapper.find('.devui-input__out-wrap');
+ expect(dInput.exists()).toBeTruthy();
+ });
it('slider disabled work', () => {
const wrapper = mount(DSlider, {
props: {
disabled: true,
},
- })
- const slider = wrapper.find('.devui-slider__runway')
- expect(slider.classes()).toContain('disabled')
- })
-})
+ });
+ const slider = wrapper.find('.devui-slider__runway');
+ expect(slider.classes()).toContain('disabled');
+ });
+});
diff --git a/devui/slider/src/slider.scss b/devui/slider/src/slider.scss
index 06016580..756f164a 100644
--- a/devui/slider/src/slider.scss
+++ b/devui/slider/src/slider.scss
@@ -89,7 +89,8 @@
color: $devui-text;
}
- .devui-input__outWrap {
+ .devui-input__out-wrap {
+ font-size: $devui-font-size;
position: absolute;
right: -60px;
top: -12px;
diff --git a/devui/slider/src/slider.tsx b/devui/slider/src/slider.tsx
index bbc243f5..35975ec4 100644
--- a/devui/slider/src/slider.tsx
+++ b/devui/slider/src/slider.tsx
@@ -1,6 +1,6 @@
import { defineComponent, ref, computed, onMounted } from 'vue';
import { sliderProps } from './slider-types';
-import { Input } from '../../input';
+import { Input } from '../../input';
import './slider.scss';
export default defineComponent({
@@ -22,7 +22,13 @@ export default defineComponent({
//当前的位置以百分比显示
const percentDispaly = ref('');
const renderShowInput = () => {
- return props.showInput ? : '';
+ return props.showInput ? (
+
+
+
+ ) : (
+ ''
+ );
};
//当传入modelValue时用以定位button的位置
@@ -128,7 +134,7 @@ export default defineComponent({
}
//输入框内的值
function handleOnInput(event) {
- inputValue.value=parseInt(event.target.value);
+ inputValue.value = parseInt(event.target.value);
if (!inputValue.value) {
inputValue.value = props.min;
percentDispaly.value = '0%';
--
Gitee