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

@@ -1,2 +1,56 @@
-import { mount } from '@vue/test-utils';
-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', () => {
+ 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: `
+ <d-slider v-model:modelValue="modelValue" showInput />
+ `,
+ 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')
+ })
+})

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;
  }
  }
 }

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<string>('');
  const renderShowInput = () => {
- return props.showInput ? <d-input onInput={handleOnInput} value={inputValue.value + ''}></d-input> : '';
+ return props.showInput ? <div class='devui-input__outWrap'><input onInput={handleOnInput} value={inputValue.value + ''}></input></div>  : '';
  };
 
  //当传入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);
  }
  }
  }