From 03114d53ee99ed52f6de1b66ca273709a2b7182c Mon Sep 17 00:00:00 2001
From: hdx <hdx@dcloud.io>
Date: Tue, 4 Jul 2023 16:49:27 +0800
Subject: [PATCH] feat: add slider test

---
 pages/component/slider/slider.test.js | 51 ++++++++++++++++++++++++++
 pages/component/slider/slider.uvue    | 11 ++++--
 pages/component/switch/switch.test.js | 52 +++++++++++++++++++++++++++
 pages/component/switch/switch.uvue    | 13 ++++---
 4 files changed, 120 insertions(+), 7 deletions(-)
 create mode 100644 pages/component/slider/slider.test.js
 create mode 100644 pages/component/switch/switch.test.js

diff --git a/pages/component/slider/slider.test.js b/pages/component/slider/slider.test.js
new file mode 100644
index 00000000..2a84b5f4
--- /dev/null
+++ b/pages/component/slider/slider.test.js
@@ -0,0 +1,51 @@
+const PAGE_PATH = '/pages/component/slider/slider'
+
+describe('slider', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  // it('change', async () => {})
+  it('value', async () => {
+    const slider = await page.$('.slider-custom-color-and-size')
+
+    const sliderValue = 80
+    await page.setData({
+      sliderValue: sliderValue,
+    })
+    await page.waitFor(100)
+    expect(await slider.property('value')).toBe(sliderValue)
+  })
+  it('color', async () => {
+    const slider = await page.$('.slider-custom-color-and-size')
+    expect(await slider.property('backgroundColor')).toBe('#000000')
+    expect(await slider.property('activeColor')).toBe('#FFCC33')
+    expect(await slider.property('blockColor')).toBe('#8A6DE9')
+
+    const backgroundColor = '#008000'
+    const activeColor = '#00FF00'
+    const blockColor = '#0000A0'
+
+    await page.setData({
+      sliderBackgroundColor: backgroundColor,
+      sliderActiveColor: activeColor,
+      sliderBlockColor: blockColor,
+    })
+    await page.waitFor(100)
+    expect(await slider.property('backgroundColor')).toBe(backgroundColor)
+    expect(await slider.property('activeColor')).toBe(activeColor)
+    expect(await slider.property('blockColor')).toBe(blockColor)
+  })
+  it('block-size', async () => {
+    const slider = await page.$('.slider-custom-color-and-size')
+    expect(await slider.property('blockSize')).toBe(20)
+
+    const blockSize = 18
+    await page.setData({
+      sliderBlockSize: blockSize,
+    })
+    await page.waitFor(100)
+    expect(await slider.property('blockSize')).toBe(blockSize)
+  })
+})
\ No newline at end of file
diff --git a/pages/component/slider/slider.uvue b/pages/component/slider/slider.uvue
index a988a9e5..3cf2e957 100644
--- a/pages/component/slider/slider.uvue
+++ b/pages/component/slider/slider.uvue
@@ -18,8 +18,8 @@
 
     <view class="uni-title">不同颜色和大小的滑块</view>
     <view>
-      <slider @change="sliderChange" :value="50" backgroundColor="#000000" activeColor="#FFCC33" block-color="#8A6DE9"
-        :block-size="20" />
+      <slider class="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue" :backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
+        :block-size="sliderBlockSize" />
     </view>
   </view>
 </template>
@@ -28,7 +28,12 @@
   export default {
     data() {
       return {
-        title: 'slider 滑块'
+        title: 'slider 滑块',
+        sliderValue: 50,
+        sliderBlockSize: 20,
+        sliderBackgroundColor: '#000000',
+        sliderActiveColor: '#FFCC33',
+        sliderBlockColor: '#8A6DE9',
       }
     },
     methods: {
diff --git a/pages/component/switch/switch.test.js b/pages/component/switch/switch.test.js
new file mode 100644
index 00000000..65f9cc92
--- /dev/null
+++ b/pages/component/switch/switch.test.js
@@ -0,0 +1,52 @@
+const PAGE_PATH = '/pages/component/switch/switch'
+
+describe('switch', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  // TODO
+  // it('click', async () => {
+  //   const switch_element = await page.$('.switch-checked')
+  //   const switch_element_value = await page.$('.switch-checked-value')
+  //   expect(await switch_element_value.text()).toBe('true')
+
+  //   await page.waitFor(200)
+
+  //   await switch_element.tap()
+  //   await page.waitFor(200)
+  //   expect(await switch_element_value.text()).toBe('false')
+
+  //   await switch_element.tap()
+  //   await page.waitFor(200)
+  //   expect(await switch_element_value.text()).toBe('true')
+  // })
+  it('checked', async () => {
+    const switch_element = await page.$('.switch-checked')
+
+    await page.setData({
+      checked: false,
+    })
+    await page.waitFor(100)
+    expect(await switch_element.property('checked')).toBe(false)
+
+    await page.setData({
+      checked: true,
+    })
+    await page.waitFor(100)
+    expect(await switch_element.property('checked')).toBe(true)
+  })
+  it('color', async () => {
+    const switch_element = await page.$('.switch-color')
+    expect(await switch_element.property('color')).toBe('#FFCC33')
+
+    const color = '#00ff00'
+
+    await page.setData({
+      color: color
+    })
+    await page.waitFor(100)
+    expect(await switch_element.property('color')).toBe(color)
+  })
+})
\ No newline at end of file
diff --git a/pages/component/switch/switch.uvue b/pages/component/switch/switch.uvue
index 33d29b46..1bedf3a1 100644
--- a/pages/component/switch/switch.uvue
+++ b/pages/component/switch/switch.uvue
@@ -3,13 +3,14 @@
     <view class="uni-common-mt">
       <view class="uni-title">默认样式</view>
       <view class="flex-row">
-        <switch :checked="true" @change="switch1Change" />
+        <switch class="switch-checked" :checked="checked" @change="switch1Change" />
         <switch @change="switch2Change" />
+        <!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
       </view>
       <view class="uni-title">不同颜色和尺寸的switch</view>
       <view class="flex-row">
-        <switch color="#FFCC33" style="transform:scale(0.7)" :checked="true" />
-        <switch color="#FFCC33" style="transform:scale(0.7)" />
+        <switch class="switch-color-checked" :color="color" style="transform:scale(0.7)" :checked="true" />
+        <switch class="switch-color" :color="color" style="transform:scale(0.7)" />
       </view>
       <view class="uni-title">推荐展示样式</view>
     </view>
@@ -30,11 +31,15 @@
   export default {
     data() {
       return {
-        title: 'switch 开关'
+        title: 'switch 开关',
+        checked: true,
+        color: '#FFCC33',
+        clickCheckedValue: true
       }
     },
     methods: {
       switch1Change: function (e : SwitchChangeEvent) {
+        this.clickCheckedValue = e.detail.value
         console.log('switch1 发生 change 事件，携带值为', e.detail.value)
       },
       switch2Change: function (e : SwitchChangeEvent) {
-- 
GitLab