From 443e6c549c60856c4e786ee0f282afe6a4cedf4f Mon Sep 17 00:00:00 2001
From: holazz <2418184580@qq.com>
Date: Sun, 12 Jun 2022 09:11:05 +0800
Subject: [PATCH 1/2] refactor(components): [slider] use JSX in Unit test

---
 .../{slider.test.ts => slider.test.tsx}       | 769 ++++++------------
 1 file changed, 261 insertions(+), 508 deletions(-)
 rename packages/components/slider/__tests__/{slider.test.ts => slider.test.tsx} (55%)

diff --git a/packages/components/slider/__tests__/slider.test.ts b/packages/components/slider/__tests__/slider.test.tsx
similarity index 55%
rename from packages/components/slider/__tests__/slider.test.ts
rename to packages/components/slider/__tests__/slider.test.tsx
index 74f5748b8ffd0..95536260643ca 100644
--- a/packages/components/slider/__tests__/slider.test.ts
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -32,14 +32,9 @@ describe('Slider', () => {
 
   it('should not exceed min and max', async () => {
     const wrapper = mount({
-      template: `
-        <slider v-model="value" :min="50"></slider>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 60,
-        }
+      data: () => ({ value: 60 }),
+      render() {
+        return <Slider v-model={this.value} min={50} />
       },
     })
 
@@ -54,38 +49,24 @@ describe('Slider', () => {
 
   it('sizes', () => {
     const wrapper = mount({
-      template: `
-        <div>
-        <slider v-model="value" size="small">
-        </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
+      data: () => ({ value: 0 }),
+      render() {
+        return <Slider v-model={this.value} size="small" />
       },
     })
+
     expect(wrapper.find('.el-slider--small').exists()).toBe(true)
   })
 
   it('show tooltip', () => {
     const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
+      data: () => ({ value: 0 }),
+      render() {
+        return <Slider v-model={this.value} />
       },
     })
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
     slider.vm.handleMouseEnter()
     expect(slider.vm.tooltipVisible).toBeTruthy()
     slider.vm.handleMouseLeave()
@@ -94,45 +75,33 @@ describe('Slider', () => {
 
   it('hide tooltip', () => {
     const wrapper = mount({
-      template: `
-        <div>
-          <slider ref="slider" v-model="value" :show-tooltip="false">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
+      data: () => ({ value: 0 }),
+      render() {
+        return <Slider ref="slider" v-model={this.value} show-tooltip={false} />
       },
     })
-    const slider = wrapper.vm.$refs.slider as any
+
+    const slider = wrapper.vm.$refs.slider
     const tooltip = slider.$refs.firstButton.$refs.tooltip
     expect(tooltip.disabled).toBe(true)
   })
 
   it('format tooltip', async () => {
     const wrapper = mount({
-      template: `
-        <div>
-          <slider ref="slider" v-model="value" :format-tooltip="formatTooltip">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
-      },
-      methods: {
-        formatTooltip(val: number) {
-          return `$${val}`
-        },
+      data: () => ({ value: 0 }),
+      render() {
+        const formatTooltip = (val: number) => `$${val}`
+        return (
+          <Slider
+            ref="slider"
+            v-model={this.value}
+            format-tooltip={formatTooltip}
+          />
+        )
       },
     })
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
     nextTick().then(() => {
       expect(slider.vm.formatValue).toBe('$0')
     })
@@ -143,22 +112,20 @@ describe('Slider', () => {
       vi.useRealTimers()
       const wrapper = mount(
         {
-          template: `
-          <div style="width: 200px;">
-            <slider v-model="value" :vertical="false"></slider>
-          </div>
-        `,
-          components: { Slider },
-          data() {
-            return {
-              value: 0,
-            }
+          data: () => ({ value: 0 }),
+          render() {
+            return (
+              <div style="width: 200px;">
+                <Slider v-model={this.value} vertical={false} />
+              </div>
+            )
           },
         },
         {
           attachTo: document.body,
         }
       )
+
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
 
       vi.spyOn(
@@ -168,44 +135,20 @@ describe('Slider', () => {
       ).mockImplementation(() => 200)
       slider.trigger('mousedown', { clientX: 0 })
 
-      const mousemove = document.createEvent('MouseEvent')
-      mousemove.initMouseEvent(
-        'mousemove',
-        true,
-        true,
-        window,
-        1,
-        100,
-        0,
-        100,
-        0,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
+      const mousemove = new MouseEvent('mousemove', {
+        screenX: 100,
+        screenY: 0,
+        clientX: 100,
+        clientY: 0,
+      })
       window.dispatchEvent(mousemove)
 
-      const mouseup = document.createEvent('MouseEvent')
-      mouseup.initMouseEvent(
-        'mouseup',
-        true,
-        true,
-        window,
-        1,
-        100,
-        0,
-        100,
-        0,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
+      const mouseup = new MouseEvent('mouseup', {
+        screenX: 100,
+        screenY: 0,
+        clientX: 100,
+        clientY: 0,
+      })
       window.dispatchEvent(mouseup)
 
       await nextTick()
@@ -216,22 +159,20 @@ describe('Slider', () => {
       vi.useRealTimers()
       const wrapper = mount(
         {
-          template: `
-          <div style="height: 200px;">
-            <slider v-model="value" :vertical="true"></slider>
-          </div>
-        `,
-          components: { Slider },
-          data() {
-            return {
-              value: 0,
-            }
+          data: () => ({ value: 0 }),
+          render() {
+            return (
+              <div style="width: 200px;">
+                <Slider v-model={this.value} vertical={true} />
+              </div>
+            )
           },
         },
         {
           attachTo: document.body,
         }
       )
+
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
       vi.spyOn(
         wrapper.find('.el-slider__runway').element,
@@ -239,43 +180,21 @@ describe('Slider', () => {
         'get'
       ).mockImplementation(() => 200)
       slider.trigger('mousedown', { clientY: 0 })
-      const mousemove = document.createEvent('MouseEvent')
-      mousemove.initMouseEvent(
-        'mousemove',
-        true,
-        true,
-        window,
-        1,
-        0,
-        -100,
-        0,
-        -100,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
+
+      const mousemove = new MouseEvent('mousemove', {
+        screenX: 0,
+        screenY: -100,
+        clientX: 0,
+        clientY: -100,
+      })
       window.dispatchEvent(mousemove)
-      const mouseup = document.createEvent('MouseEvent')
-      mouseup.initMouseEvent(
-        'mouseup',
-        true,
-        true,
-        window,
-        1,
-        0,
-        -100,
-        0,
-        -100,
-        false,
-        false,
-        true,
-        false,
-        0,
-        null
-      )
+
+      const mouseup = new MouseEvent('mouseup', {
+        screenX: 0,
+        screenY: -100,
+        clientX: 0,
+        clientY: -100,
+      })
       window.dispatchEvent(mouseup)
       await nextTick()
       expect(wrapper.vm.value).toBe(50)
@@ -285,19 +204,13 @@ describe('Slider', () => {
   describe('accessibility', () => {
     it('left/right arrows', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0.1,
-          }
+        data: () => ({ value: 0.1 }),
+        render() {
+          return <Slider v-model={this.value} />
         },
       })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
 
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.right })
@@ -314,19 +227,13 @@ describe('Slider', () => {
 
     it('up/down arrows', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0.1,
-          }
+        data: () => ({ value: 0.1 }),
+        render() {
+          return <Slider v-model={this.value} />
         },
       })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
 
       slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.up }))
       await nextTick()
@@ -341,19 +248,13 @@ describe('Slider', () => {
 
     it('page up/down keys', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" :min="-5" :max="10"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: -1,
-          }
+        data: () => ({ value: -1 }),
+        render() {
+          return <Slider v-model={this.value} min={-5} max={10} />
         },
       })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.pageUp })
       )
@@ -369,19 +270,13 @@ describe('Slider', () => {
 
     it('home/end keys', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" :min="-5" :max="10"></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0,
-          }
+        data: () => ({ value: 0 }),
+        render() {
+          return <Slider v-model={this.value} min={-5} max={10} />
         },
       })
-      const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+
+      const slider = wrapper.findComponent({ name: 'ElSliderButton' })
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.home })
       )
@@ -398,66 +293,42 @@ describe('Slider', () => {
     vi.useRealTimers()
     const wrapper = mount(
       {
-        template: `
-        <div style="width: 200px;">
-          <slider v-model="value" :min="0" :max="1" :step="0.1"></slider>
-        </div>
-      `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0,
-          }
+        data: () => ({ value: 0 }),
+        render() {
+          return (
+            <div style="width: 200px;">
+              <Slider v-model={this.value} min={0} max={1} step={0.1} />
+            </div>
+          )
         },
       },
       {
         attachTo: document.body,
       }
     )
+
     const mockClientWidth = vi
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
       .mockImplementation(() => 200)
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
     await nextTick()
 
     slider.trigger('mousedown', { clientX: 0 })
-    const mousemove = document.createEvent('MouseEvent')
-    mousemove.initMouseEvent(
-      'mousemove',
-      true,
-      true,
-      window,
-      1,
-      100,
-      0,
-      100,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
+
+    const mousemove = new MouseEvent('mousemove', {
+      screenX: 100,
+      screenY: 0,
+      clientX: 100,
+      clientY: 0,
+    })
     window.dispatchEvent(mousemove)
-    const mouseup = document.createEvent('MouseEvent')
-    mouseup.initMouseEvent(
-      'mouseup',
-      true,
-      true,
-      window,
-      1,
-      100,
-      0,
-      100,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
+
+    const mouseup = new MouseEvent('mouseup', {
+      screenX: 100,
+      screenY: 0,
+      clientX: 100,
+      clientY: 0,
+    })
     await nextTick()
     window.dispatchEvent(mouseup)
     await nextTick()
@@ -468,22 +339,16 @@ describe('Slider', () => {
   it('click', async () => {
     vi.useRealTimers()
     const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value"></slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
+      data: () => ({ value: 0 }),
+      render() {
+        return <Slider v-model={this.value} />
       },
     })
+
     const mockClientWidth = vi
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
       .mockImplementation(() => 200)
-    const slider: any = wrapper.findComponent({ name: 'ElSlider' })
+    const slider = wrapper.findComponent({ name: 'ElSlider' })
     slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
     await nextTick()
     expect(wrapper.vm.value > 0).toBeTruthy()
@@ -493,26 +358,18 @@ describe('Slider', () => {
   it('change event', async () => {
     vi.useRealTimers()
     const wrapper = mount({
-      template: `
-        <div style="width: 200px">
-          <slider v-model="value" @change="onChange">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          data: 0,
-          value: 0,
-        }
-      },
-      methods: {
-        onChange(val: number) {
-          this.data = val
-        },
+      data: () => ({ data: 0, value: 0 }),
+      render() {
+        const onChange = (val: number | number[]) => (this.data = val)
+        return (
+          <div style="width: 200px">
+            <Slider v-model={this.value} onChange={onChange} />
+          </div>
+        )
       },
     })
-    const slider: any = wrapper.findComponent({ name: 'ElSlider' })
+
+    const slider = wrapper.findComponent({ name: 'ElSlider' })
     const mockRectLeft = vi
       .spyOn(
         wrapper.find('.el-slider__runway').element,
@@ -537,26 +394,18 @@ describe('Slider', () => {
   it('input event', async () => {
     vi.useRealTimers()
     const wrapper = mount({
-      template: `
-        <div style="width: 200px">
-          <slider v-model="value" @input="onInput">
-          </slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          data: 0,
-          value: 0,
-        }
-      },
-      methods: {
-        onInput(val: number) {
-          this.data = val
-        },
+      data: () => ({ data: 0, value: 0 }),
+      render() {
+        const onInput = (val: number | number[]) => (this.data = val)
+        return (
+          <div style="width: 200px">
+            <Slider v-model={this.value} onInput={onInput} />
+          </div>
+        )
       },
     })
-    const slider: any = wrapper.findComponent({ name: 'ElSlider' })
+
+    const slider = wrapper.findComponent({ name: 'ElSlider' })
     const mockRectLeft = vi
       .spyOn(
         wrapper.find('.el-slider__runway').element,
@@ -582,60 +431,32 @@ describe('Slider', () => {
   it('disabled', async () => {
     vi.useRealTimers()
     const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value" disabled></slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
+      data: () => ({ value: 0 }),
+      render() {
+        return <Slider v-model={this.value} disabled />
       },
     })
+
     const mockClientWidth = vi
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
       .mockImplementation(() => 200)
-    const slider: any = wrapper.findComponent({ name: 'ElSliderButton' })
+    const slider = wrapper.findComponent({ name: 'ElSliderButton' })
     slider.vm.onButtonDown({ clientX: 0 })
-    const mousemove = document.createEvent('MouseEvent')
-    mousemove.initMouseEvent(
-      'mousemove',
-      true,
-      true,
-      window,
-      1,
-      50,
-      0,
-      50,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
+
+    const mousemove = new MouseEvent('mousemove', {
+      screenX: 50,
+      screenY: 0,
+      clientX: 50,
+      clientY: 0,
+    })
     window.dispatchEvent(mousemove)
-    const mouseup = document.createEvent('MouseEvent')
-    mouseup.initMouseEvent(
-      'mouseup',
-      true,
-      true,
-      window,
-      1,
-      50,
-      0,
-      50,
-      0,
-      false,
-      false,
-      true,
-      false,
-      0,
-      null
-    )
+
+    const mouseup = new MouseEvent('mouseup', {
+      screenX: 50,
+      screenY: 0,
+      clientX: 50,
+      clientY: 0,
+    })
     window.dispatchEvent(mouseup)
     await nextTick()
     expect(wrapper.vm.value).toBe(0)
@@ -644,18 +465,12 @@ describe('Slider', () => {
 
   it('show input', async () => {
     const wrapper = mount({
-      template: `
-        <div>
-          <slider v-model="value" show-input></slider>
-        </div>
-      `,
-      components: { Slider },
-      data() {
-        return {
-          value: 0,
-        }
+      data: () => ({ value: 0 }),
+      render() {
+        return <Slider v-model={this.value} show-input />
       },
     })
+
     const increaseButton = wrapper.find('.el-input-number__increase')
     await increaseButton.trigger('mousedown')
     vi.advanceTimersByTime(200)
@@ -663,12 +478,8 @@ describe('Slider', () => {
   })
 
   it('show stops', () => {
-    const wrapper = mount(Slider, {
-      props: {
-        showStops: true,
-        step: 10,
-      },
-    })
+    const wrapper = mount(() => <Slider step={10} show-stops />)
+
     const stops = wrapper.findAll('.el-slider__stop')
     expect(stops.length).toBe(9)
   })
@@ -677,22 +488,16 @@ describe('Slider', () => {
     vi.useRealTimers()
     const wrapper = mount(
       {
-        template: `
-        <div>
-          <slider vertical v-model="value" height="200px"></slider>
-        </div>
-      `,
-        components: { Slider },
-        data() {
-          return {
-            value: 0,
-          }
+        data: () => ({ value: 0 }),
+        render() {
+          return <Slider height="200px" v-model={this.value} vertical />
         },
       },
       {
         attachTo: document.body,
       }
     )
+
     const mockRectBottom = vi
       .spyOn(
         wrapper.find('.el-slider__runway').element,
@@ -706,7 +511,7 @@ describe('Slider', () => {
     const mockClientHeight = vi
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientHeight', 'get')
       .mockImplementation(() => 200)
-    const slider: any = wrapper.getComponent({ name: 'ElSlider' })
+    const slider = wrapper.getComponent({ name: 'ElSlider' })
     slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
     await nextTick()
     expect(wrapper.vm.value > 0).toBeTruthy()
@@ -715,19 +520,23 @@ describe('Slider', () => {
   })
 
   it('rerender with min and show-input', async () => {
-    const wrapper = mount({
-      template: '<slider v-if="show" v-model="value" :min="10" show-input/>',
-      components: { Slider },
-      data() {
-        return {
-          show: false,
-          value: 30,
-        }
-      },
-      mounted() {
-        this.show = true
+    const wrapper = mount(
+      {
+        data: () => ({ show: false, value: 30 }),
+        mounted() {
+          this.show = true
+        },
+        render() {
+          return (
+            this.show && <Slider v-model={this.value} min={10} show-input />
+          )
+        },
       },
-    })
+      {
+        attachTo: document.body,
+      }
+    )
+
     await nextTick()
     expect(wrapper.vm.value).toEqual(30)
   })
@@ -735,37 +544,24 @@ describe('Slider', () => {
   describe('range', () => {
     it('basic ranged slider', () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" range></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [10, 20],
-          }
+        data: () => ({ value: [10, 20] }),
+        render() {
+          return <Slider v-model={this.value} range />
         },
       })
+
       const sliders = wrapper.findAllComponents({ name: 'ElSliderButton' })
       expect(sliders.length).toBe(2)
     })
 
     it('should not exceed min and max', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" range :min="50">
-            </slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [50, 60],
-          }
+        data: () => ({ value: [50, 60] }),
+        render() {
+          return <Slider v-model={this.value} min={50} range />
         },
       })
+
       await nextTick()
 
       wrapper.vm.value = [40, 60]
@@ -781,22 +577,20 @@ describe('Slider', () => {
       vi.useRealTimers()
       const wrapper = mount(
         {
-          template: `
-          <div style="width: 200px;">
-            <slider range v-model="value"></slider>
-          </div>
-        `,
-          components: { Slider },
-          data() {
-            return {
-              value: [0, 100],
-            }
+          data: () => ({ value: [0, 100] }),
+          render() {
+            return (
+              <div style="width: 200px;">
+                <Slider v-model={this.value} range />
+              </div>
+            )
           },
         },
         {
           attachTo: document.body,
         }
       )
+
       const mockRectLeft = vi
         .spyOn(
           wrapper.find('.el-slider__runway').element,
@@ -810,7 +604,7 @@ describe('Slider', () => {
       const mockClientWidth = vi
         .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
         .mockImplementation(() => 200)
-      const slider: any = wrapper.getComponent({ name: 'ElSlider' })
+      const slider = wrapper.getComponent({ name: 'ElSlider' })
       slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
       await nextTick()
       // Because mock the clientWidth, so the targetValue is 50.
@@ -823,21 +617,14 @@ describe('Slider', () => {
 
     it('responsive to dynamic min and max', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider v-model="value" range :min="min" :max="max">
-            </slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            min: 0,
-            max: 100,
-            value: [50, 80],
-          }
+        data: () => ({ min: 0, max: 100, value: [50, 80] }),
+        render() {
+          return (
+            <Slider v-model={this.value} min={this.min} max={this.max} range />
+          )
         },
       })
+
       await nextTick()
 
       wrapper.vm.min = 60
@@ -852,23 +639,12 @@ describe('Slider', () => {
 
     it('show stops', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider
-              v-model="value"
-              range
-              :step="10"
-              show-stops
-            ></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [30, 60],
-          }
+        data: () => ({ value: [30, 60] }),
+        render() {
+          return <Slider v-model={this.value} step={10} range show-stops />
         },
       })
+
       await nextTick()
       const stops = wrapper.findAll('.el-slider__stop')
       expect(stops.length).toBe(5)
@@ -876,34 +652,31 @@ describe('Slider', () => {
 
     it('marks', async () => {
       const wrapper = mount({
-        template: `
-          <div>
-            <slider
-              v-model="value"
-              range
-              :step="10"
-              :marks="marks"
-              :min="20"
-              show-stops
-            ></slider>
-          </div>
-        `,
-        components: { Slider },
-        data() {
-          return {
-            value: [30, 60],
-            marks: {
-              0: '0°C',
-              8: '8°C',
-              37: '37°C',
-              50: {
-                style: {
-                  color: '#f50',
-                },
-                label: h('strong', '50°C'),
+        data: () => ({
+          value: [30, 60],
+          marks: {
+            0: '0°C',
+            8: '8°C',
+            37: '37°C',
+            50: {
+              style: {
+                color: '#f50',
               },
+              label: h('strong', '50°C'),
             },
-          }
+          },
+        }),
+        render() {
+          return (
+            <Slider
+              v-model={this.value}
+              min={20}
+              step={10}
+              marks={this.marks}
+              range
+              show-stops
+            />
+          )
         },
       })
 
@@ -917,15 +690,11 @@ describe('Slider', () => {
 
   describe('form item accessibility integration', () => {
     it('automatic id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')
@@ -936,15 +705,11 @@ describe('Slider', () => {
     })
 
     it('range with automatic id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider :range="true" />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider range />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')
@@ -955,15 +720,11 @@ describe('Slider', () => {
     })
 
     it('specified id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider id="foobar" />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider id="foobar" />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')
@@ -975,15 +736,11 @@ describe('Slider', () => {
     })
 
     it('range with specified id attachment', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider id="foobar" :range="true" />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider id="foobar" range />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')
@@ -995,16 +752,12 @@ describe('Slider', () => {
     })
 
     it('form item role is group when multiple inputs', async () => {
-      const wrapper = mount({
-        template: `<el-form-item label="Foobar" data-test-ref="item">
-            <el-slider />
-            <el-slider />
-          </el-form-item>`,
-        components: {
-          'el-slider': Slider,
-          'el-form-item': ElFormItem,
-        },
-      })
+      const wrapper = mount(() => (
+        <ElFormItem label="Foobar" data-test-ref="item">
+          <Slider />
+          <Slider />
+        </ElFormItem>
+      ))
 
       await nextTick()
       const formItem = wrapper.find('[data-test-ref="item"]')

From 847a55f807bfbf0d643ab14e3222e27164bd0f3c Mon Sep 17 00:00:00 2001
From: holazz <2418184580@qq.com>
Date: Mon, 13 Jun 2022 16:34:18 +0800
Subject: [PATCH 2/2] chore: improve code

---
 .../slider/__tests__/slider.test.tsx          | 397 +++++++-----------
 1 file changed, 154 insertions(+), 243 deletions(-)

diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
index 95536260643ca..a8e1dbeb70d22 100644
--- a/packages/components/slider/__tests__/slider.test.tsx
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -1,4 +1,4 @@
-import { h, nextTick } from 'vue'
+import { h, nextTick, onMounted, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { EVENT_CODE } from '@element-plus/constants'
@@ -31,40 +31,28 @@ describe('Slider', () => {
   })
 
   it('should not exceed min and max', async () => {
-    const wrapper = mount({
-      data: () => ({ value: 60 }),
-      render() {
-        return <Slider v-model={this.value} min={50} />
-      },
-    })
+    const value = ref(60)
+    mount(() => <Slider v-model={value.value} min={50} />)
 
     await nextTick()
-    wrapper.vm.value = 40
+    value.value = 40
     await nextTick()
-    expect(wrapper.vm.value).toBe(50)
-    wrapper.vm.value = 120
+    expect(value.value).toBe(50)
+    value.value = 120
     await nextTick()
-    expect(wrapper.vm.value).toBe(100)
+    expect(value.value).toBe(100)
   })
 
   it('sizes', () => {
-    const wrapper = mount({
-      data: () => ({ value: 0 }),
-      render() {
-        return <Slider v-model={this.value} size="small" />
-      },
-    })
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} size="small" />)
 
     expect(wrapper.find('.el-slider--small').exists()).toBe(true)
   })
 
   it('show tooltip', () => {
-    const wrapper = mount({
-      data: () => ({ value: 0 }),
-      render() {
-        return <Slider v-model={this.value} />
-      },
-    })
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} />)
 
     const slider = wrapper.findComponent({ name: 'ElSliderButton' })
     slider.vm.handleMouseEnter()
@@ -74,10 +62,12 @@ describe('Slider', () => {
   })
 
   it('hide tooltip', () => {
+    const value = ref(0)
     const wrapper = mount({
-      data: () => ({ value: 0 }),
-      render() {
-        return <Slider ref="slider" v-model={this.value} show-tooltip={false} />
+      setup() {
+        return () => (
+          <Slider ref="slider" v-model={value.value} show-tooltip={false} />
+        )
       },
     })
 
@@ -87,40 +77,27 @@ describe('Slider', () => {
   })
 
   it('format tooltip', async () => {
-    const wrapper = mount({
-      data: () => ({ value: 0 }),
-      render() {
-        const formatTooltip = (val: number) => `$${val}`
-        return (
-          <Slider
-            ref="slider"
-            v-model={this.value}
-            format-tooltip={formatTooltip}
-          />
-        )
-      },
-    })
+    const value = ref(0)
+    const formatTooltip = (val: number) => `$${val}`
+    const wrapper = mount(() => (
+      <Slider v-model={value.value} format-tooltip={formatTooltip} />
+    ))
 
     const slider = wrapper.findComponent({ name: 'ElSliderButton' })
-    nextTick().then(() => {
-      expect(slider.vm.formatValue).toBe('$0')
-    })
+    await nextTick()
+    expect(slider.vm.formatValue).toBe('$0')
   })
 
   describe('drag', () => {
     it('horizontal', async () => {
       vi.useRealTimers()
+      const value = ref(0)
       const wrapper = mount(
-        {
-          data: () => ({ value: 0 }),
-          render() {
-            return (
-              <div style="width: 200px;">
-                <Slider v-model={this.value} vertical={false} />
-              </div>
-            )
-          },
-        },
+        () => (
+          <div style="width: 200px;">
+            <Slider v-model={value.value} vertical={false} />
+          </div>
+        ),
         {
           attachTo: document.body,
         }
@@ -152,22 +129,18 @@ describe('Slider', () => {
       window.dispatchEvent(mouseup)
 
       await nextTick()
-      expect(wrapper.vm.value === 50).toBeTruthy()
+      expect(value.value === 50).toBeTruthy()
     })
 
     it('vertical', async () => {
       vi.useRealTimers()
+      const value = ref(0)
       const wrapper = mount(
-        {
-          data: () => ({ value: 0 }),
-          render() {
-            return (
-              <div style="width: 200px;">
-                <Slider v-model={this.value} vertical={true} />
-              </div>
-            )
-          },
-        },
+        () => (
+          <div style="width: 200px;">
+            <Slider v-model={value.value} vertical={true} />
+          </div>
+        ),
         {
           attachTo: document.body,
         }
@@ -197,18 +170,14 @@ describe('Slider', () => {
       })
       window.dispatchEvent(mouseup)
       await nextTick()
-      expect(wrapper.vm.value).toBe(50)
+      expect(value.value).toBe(50)
     })
   })
 
   describe('accessibility', () => {
     it('left/right arrows', async () => {
-      const wrapper = mount({
-        data: () => ({ value: 0.1 }),
-        render() {
-          return <Slider v-model={this.value} />
-        },
-      })
+      const value = ref(0)
+      const wrapper = mount(() => <Slider v-model={value.value} />)
 
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
 
@@ -216,92 +185,80 @@ describe('Slider', () => {
         new KeyboardEvent('keydown', { key: EVENT_CODE.right })
       )
       await nextTick()
-      expect(wrapper.vm.value).toBe(1)
+      expect(value.value).toBe(1)
 
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.left })
       )
       await nextTick()
-      expect(wrapper.vm.value).toBe(0)
+      expect(value.value).toBe(0)
     })
 
     it('up/down arrows', async () => {
-      const wrapper = mount({
-        data: () => ({ value: 0.1 }),
-        render() {
-          return <Slider v-model={this.value} />
-        },
-      })
+      const value = ref(0.1)
+      const wrapper = mount(() => <Slider v-model={value.value} />)
 
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
 
       slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.up }))
       await nextTick()
-      expect(wrapper.vm.value).toBe(1)
+      expect(value.value).toBe(1)
 
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.down })
       )
       await nextTick()
-      expect(wrapper.vm.value).toBe(0)
+      expect(value.value).toBe(0)
     })
 
     it('page up/down keys', async () => {
-      const wrapper = mount({
-        data: () => ({ value: -1 }),
-        render() {
-          return <Slider v-model={this.value} min={-5} max={10} />
-        },
-      })
+      const value = ref(-1)
+      const wrapper = mount(() => (
+        <Slider v-model={value.value} min={-5} max={10} />
+      ))
 
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.pageUp })
       )
       await nextTick()
-      expect(wrapper.vm.value).toBe(3)
+      expect(value.value).toBe(3)
 
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.pageDown })
       )
       await nextTick()
-      expect(wrapper.vm.value).toBe(-1)
+      expect(value.value).toBe(-1)
     })
 
     it('home/end keys', async () => {
-      const wrapper = mount({
-        data: () => ({ value: 0 }),
-        render() {
-          return <Slider v-model={this.value} min={-5} max={10} />
-        },
-      })
+      const value = ref(0)
+      const wrapper = mount(() => (
+        <Slider v-model={value.value} min={-5} max={10} />
+      ))
 
       const slider = wrapper.findComponent({ name: 'ElSliderButton' })
       slider.vm.onKeyDown(
         new KeyboardEvent('keydown', { key: EVENT_CODE.home })
       )
       await nextTick()
-      expect(wrapper.vm.value).toBe(-5)
+      expect(value.value).toBe(-5)
 
       slider.vm.onKeyDown(new KeyboardEvent('keydown', { key: EVENT_CODE.end }))
       await nextTick()
-      expect(wrapper.vm.value).toBe(10)
+      expect(value.value).toBe(10)
     })
   })
 
   it('step', async () => {
     vi.useRealTimers()
+    const value = ref(0)
     const wrapper = mount(
-      {
-        data: () => ({ value: 0 }),
-        render() {
-          return (
-            <div style="width: 200px;">
-              <Slider v-model={this.value} min={0} max={1} step={0.1} />
-            </div>
-          )
-        },
-      },
+      () => (
+        <div style="width: 200px;">
+          <Slider v-model={value.value} min={0} max={1} step={0.1} />
+        </div>
+      ),
       {
         attachTo: document.body,
       }
@@ -332,18 +289,14 @@ describe('Slider', () => {
     await nextTick()
     window.dispatchEvent(mouseup)
     await nextTick()
-    expect(wrapper.vm.value === 0.5).toBeTruthy()
+    expect(value.value === 0.5).toBeTruthy()
     mockClientWidth.mockRestore()
   })
 
   it('click', async () => {
     vi.useRealTimers()
-    const wrapper = mount({
-      data: () => ({ value: 0 }),
-      render() {
-        return <Slider v-model={this.value} />
-      },
-    })
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} />)
 
     const mockClientWidth = vi
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
@@ -351,23 +304,20 @@ describe('Slider', () => {
     const slider = wrapper.findComponent({ name: 'ElSlider' })
     slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
     await nextTick()
-    expect(wrapper.vm.value > 0).toBeTruthy()
+    expect(value.value > 0).toBeTruthy()
     mockClientWidth.mockRestore()
   })
 
   it('change event', async () => {
     vi.useRealTimers()
-    const wrapper = mount({
-      data: () => ({ data: 0, value: 0 }),
-      render() {
-        const onChange = (val: number | number[]) => (this.data = val)
-        return (
-          <div style="width: 200px">
-            <Slider v-model={this.value} onChange={onChange} />
-          </div>
-        )
-      },
-    })
+    const value = ref(0)
+    const data = ref(0)
+    const onChange = (val: number) => (data.value = val)
+    const wrapper = mount(() => (
+      <div style="width: 200px">
+        <Slider v-model={value.value} onChange={onChange} />
+      </div>
+    ))
 
     const slider = wrapper.findComponent({ name: 'ElSlider' })
     const mockRectLeft = vi
@@ -383,27 +333,24 @@ describe('Slider', () => {
     const mockClientWidth = vi
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
       .mockImplementation(() => 200)
-    expect(wrapper.vm.data).toBe(0)
+    expect(data.value).toBe(0)
     slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
     await nextTick()
-    expect(wrapper.vm.data === 50).toBeTruthy()
+    expect(data.value === 50).toBeTruthy()
     mockRectLeft.mockRestore()
     mockClientWidth.mockRestore()
   })
 
   it('input event', async () => {
     vi.useRealTimers()
-    const wrapper = mount({
-      data: () => ({ data: 0, value: 0 }),
-      render() {
-        const onInput = (val: number | number[]) => (this.data = val)
-        return (
-          <div style="width: 200px">
-            <Slider v-model={this.value} onInput={onInput} />
-          </div>
-        )
-      },
-    })
+    const value = ref(0)
+    const data = ref(0)
+    const onInput = (val: number) => (data.value = val)
+    const wrapper = mount(() => (
+      <div style="width: 200px">
+        <Slider v-model={value.value} onInput={onInput} />
+      </div>
+    ))
 
     const slider = wrapper.findComponent({ name: 'ElSlider' })
     const mockRectLeft = vi
@@ -420,22 +367,18 @@ describe('Slider', () => {
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
       .mockImplementation(() => 200)
     await nextTick()
-    expect(wrapper.vm.data).toBe(0)
+    expect(data.value).toBe(0)
     slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
     await nextTick()
-    expect(wrapper.vm.data === 50).toBeTruthy()
+    expect(data.value === 50).toBeTruthy()
     mockRectLeft.mockRestore()
     mockClientWidth.mockRestore()
   })
 
   it('disabled', async () => {
     vi.useRealTimers()
-    const wrapper = mount({
-      data: () => ({ value: 0 }),
-      render() {
-        return <Slider v-model={this.value} disabled />
-      },
-    })
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} disabled />)
 
     const mockClientWidth = vi
       .spyOn(wrapper.find('.el-slider__runway').element, 'clientWidth', 'get')
@@ -459,22 +402,18 @@ describe('Slider', () => {
     })
     window.dispatchEvent(mouseup)
     await nextTick()
-    expect(wrapper.vm.value).toBe(0)
+    expect(value.value).toBe(0)
     mockClientWidth.mockRestore()
   })
 
   it('show input', async () => {
-    const wrapper = mount({
-      data: () => ({ value: 0 }),
-      render() {
-        return <Slider v-model={this.value} show-input />
-      },
-    })
+    const value = ref(0)
+    const wrapper = mount(() => <Slider v-model={value.value} show-input />)
 
     const increaseButton = wrapper.find('.el-input-number__increase')
     await increaseButton.trigger('mousedown')
     vi.advanceTimersByTime(200)
-    expect(wrapper.vm.value > 0).toBeTruthy()
+    expect(value.value > 0).toBeTruthy()
   })
 
   it('show stops', () => {
@@ -486,13 +425,9 @@ describe('Slider', () => {
 
   it('vertical mode', async () => {
     vi.useRealTimers()
+    const value = ref(0)
     const wrapper = mount(
-      {
-        data: () => ({ value: 0 }),
-        render() {
-          return <Slider height="200px" v-model={this.value} vertical />
-        },
-      },
+      () => <Slider height="200px" v-model={value.value} vertical />,
       {
         attachTo: document.body,
       }
@@ -514,22 +449,20 @@ describe('Slider', () => {
     const slider = wrapper.getComponent({ name: 'ElSlider' })
     slider.vm.onSliderClick(new MouseEvent('mousedown', { clientX: 100 }))
     await nextTick()
-    expect(wrapper.vm.value > 0).toBeTruthy()
+    expect(value.value > 0).toBeTruthy()
     mockRectBottom.mockRestore()
     mockClientHeight.mockRestore()
   })
 
   it('rerender with min and show-input', async () => {
-    const wrapper = mount(
+    const value = ref(30)
+    const show = ref(false)
+    mount(
       {
-        data: () => ({ show: false, value: 30 }),
-        mounted() {
-          this.show = true
-        },
-        render() {
-          return (
-            this.show && <Slider v-model={this.value} min={10} show-input />
-          )
+        setup() {
+          onMounted(() => (show.value = true))
+          return () =>
+            show.value && <Slider v-model={value.value} min={10} show-input />
         },
       },
       {
@@ -538,54 +471,42 @@ describe('Slider', () => {
     )
 
     await nextTick()
-    expect(wrapper.vm.value).toEqual(30)
+    expect(value.value).toEqual(30)
   })
 
   describe('range', () => {
     it('basic ranged slider', () => {
-      const wrapper = mount({
-        data: () => ({ value: [10, 20] }),
-        render() {
-          return <Slider v-model={this.value} range />
-        },
-      })
+      const value = ref([10, 20])
+      const wrapper = mount(() => <Slider v-model={value.value} range />)
 
       const sliders = wrapper.findAllComponents({ name: 'ElSliderButton' })
       expect(sliders.length).toBe(2)
     })
 
     it('should not exceed min and max', async () => {
-      const wrapper = mount({
-        data: () => ({ value: [50, 60] }),
-        render() {
-          return <Slider v-model={this.value} min={50} range />
-        },
-      })
+      const value = ref([50, 60])
+      mount(() => <Slider v-model={value.value} min={50} range />)
 
       await nextTick()
 
-      wrapper.vm.value = [40, 60]
+      value.value = [40, 60]
       await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([50, 60])
+      expect(value.value).toStrictEqual([50, 60])
 
-      wrapper.vm.value = [50, 120]
+      value.value = [50, 120]
       await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([50, 100])
+      expect(value.value).toStrictEqual([50, 100])
     })
 
     it('click', async () => {
       vi.useRealTimers()
+      const value = ref([0, 100])
       const wrapper = mount(
-        {
-          data: () => ({ value: [0, 100] }),
-          render() {
-            return (
-              <div style="width: 200px;">
-                <Slider v-model={this.value} range />
-              </div>
-            )
-          },
-        },
+        () => (
+          <div style="width: 200px;">
+            <Slider v-model={value.value} range />
+          </div>
+        ),
         {
           attachTo: document.body,
         }
@@ -609,41 +530,37 @@ describe('Slider', () => {
       await nextTick()
       // Because mock the clientWidth, so the targetValue is 50.
       // The behavior of the setPosition method in the useSlider.ts file should be that the value of the second button is 50
-      expect(wrapper.vm.value[0] === 0).toBeTruthy()
-      expect(wrapper.vm.value[1] === 50).toBeTruthy()
+      expect(value.value[0] === 0).toBeTruthy()
+      expect(value.value[1] === 50).toBeTruthy()
       mockRectLeft.mockRestore()
       mockClientWidth.mockRestore()
     })
 
     it('responsive to dynamic min and max', async () => {
-      const wrapper = mount({
-        data: () => ({ min: 0, max: 100, value: [50, 80] }),
-        render() {
-          return (
-            <Slider v-model={this.value} min={this.min} max={this.max} range />
-          )
-        },
-      })
+      const min = ref(0)
+      const max = ref(100)
+      const value = ref([50, 80])
+      mount(() => (
+        <Slider v-model={value.value} min={min.value} max={max.value} range />
+      ))
 
       await nextTick()
 
-      wrapper.vm.min = 60
+      min.value = 60
       await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([60, 80])
+      expect(value.value).toStrictEqual([60, 80])
 
-      wrapper.vm.min = 30
-      wrapper.vm.max = 40
+      min.value = 30
+      max.value = 40
       await nextTick()
-      expect(wrapper.vm.value).toStrictEqual([40, 40])
+      expect(value.value).toStrictEqual([40, 40])
     })
 
     it('show stops', async () => {
-      const wrapper = mount({
-        data: () => ({ value: [30, 60] }),
-        render() {
-          return <Slider v-model={this.value} step={10} range show-stops />
-        },
-      })
+      const value = ref([30, 60])
+      const wrapper = mount(() => (
+        <Slider v-model={value.value} step={10} range show-stops />
+      ))
 
       await nextTick()
       const stops = wrapper.findAll('.el-slider__stop')
@@ -651,34 +568,28 @@ describe('Slider', () => {
     })
 
     it('marks', async () => {
-      const wrapper = mount({
-        data: () => ({
-          value: [30, 60],
-          marks: {
-            0: '0°C',
-            8: '8°C',
-            37: '37°C',
-            50: {
-              style: {
-                color: '#f50',
-              },
-              label: h('strong', '50°C'),
-            },
+      const value = ref([30, 60])
+      const marksValue = ref({
+        0: '0°C',
+        8: '8°C',
+        37: '37°C',
+        50: {
+          style: {
+            color: '#f50',
           },
-        }),
-        render() {
-          return (
-            <Slider
-              v-model={this.value}
-              min={20}
-              step={10}
-              marks={this.marks}
-              range
-              show-stops
-            />
-          )
+          label: h('strong', '50°C'),
         },
       })
+      const wrapper = mount(() => (
+        <Slider
+          v-model={value.value}
+          min={20}
+          step={10}
+          marks={marksValue.value}
+          range
+          show-stops
+        />
+      ))
 
       await nextTick()
       const stops = wrapper.findAll('.el-slider__marks-stop.el-slider__stop')