From 96469f1d3b53861b3f6fb297e6ba834c328e1252 Mon Sep 17 00:00:00 2001
From: yurj26 <1816387074@qq.com>
Date: Fri, 25 Aug 2023 18:31:44 +0800
Subject: [PATCH] feat: update button test

---
 pages/component/button/button.test.js |  79 +++++++++++++++
 pages/component/button/button.uvue    | 139 ++++++++++++++------------
 2 files changed, 154 insertions(+), 64 deletions(-)
 create mode 100644 pages/component/button/button.test.js

diff --git a/pages/component/button/button.test.js b/pages/component/button/button.test.js
new file mode 100644
index 00000000..76cb4fcf
--- /dev/null
+++ b/pages/component/button/button.test.js
@@ -0,0 +1,79 @@
+const PAGE_PATH = '/pages/component/button/button'
+
+describe('Button.uvue', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('click', async () => {
+    // TODO 待测试框架支持text的dispatchEvent
+    // const btn = await page.$('.btn')
+    // expect((await page.data())['count']).toEqual(0)
+    // await btn.tap()
+    // expect((await page.data())['count']).toEqual(1)
+    // await page.setData({
+    //   disabled_boolean: true,
+    // })
+    // await btn.tap()
+    // expect((await page.data())['count']).toEqual(1)
+    // await page.setData({
+    //   disabled_boolean: false,
+    // })
+    // await btn.tap()
+    // expect((await page.data())['count']).toEqual(2)
+  })
+  it('length', async () => {
+    const elements = await page.$$('.btn')
+    expect(elements.length).toBe(1)
+  })
+  it('text', async () => {
+    const textBtn = await page.$('.btn')
+    expect(await textBtn.text()).toEqual('uni-app-x')
+    await page.setData({
+      text: 'uni-app-x button',
+    })
+    expect(await textBtn.text()).toEqual('uni-app-x button')
+  })
+  it('type', async () => {
+    const btn = await page.$('.btn')
+    expect(await btn.property('type')).toBe('default')
+    await page.setData({
+      type_enum_current: 1,
+    })
+    await page.waitFor(500)
+    expect(await btn.property('type')).toBe('primary')
+    await page.setData({
+      type_enum_current: 2,
+    })
+    await page.waitFor(500)
+    expect(await btn.property('type')).toBe('warn')
+  })
+  it('size', async () => {
+    const btn = await page.$('.btn')
+    expect(await btn.property('size')).toBe('default')
+    await page.setData({
+      size_enum_current: 1,
+    })
+    await page.waitFor(500)
+    expect(await btn.property('size')).toBe('mini')
+  })
+  it('plain', async () => {
+    const btn = await page.$('.btn')
+    expect(await btn.property('plain')).toBe(false)
+    await page.setData({
+      plain_boolean: true,
+    })
+    await page.waitFor(500)
+    expect(await btn.property('plain')).toBe(true)
+  })
+  it('disabled', async () => {
+    const btn = await page.$('.btn')
+    expect(await btn.property('disabled')).toBe(false)
+    await page.setData({
+      disabled_boolean: true,
+    })
+    await page.waitFor(500)
+    expect(await btn.property('disabled')).toBe(true)
+  })
+})
\ No newline at end of file
diff --git a/pages/component/button/button.uvue b/pages/component/button/button.uvue
index e91398fb..7ceb1623 100644
--- a/pages/component/button/button.uvue
+++ b/pages/component/button/button.uvue
@@ -1,64 +1,75 @@
-<script>
-import { type ItemType } from '@/components/enum-data/enum-data.vue'
-export default {
-	data() {
-		return {
-			plain_boolean: false,
-			disabled_boolean: false,
-			size_enum: [{"value":0,"name":"default"},{"value":1,"name":"mini"}] as ItemType[],
-			size_enum_current: 0,
-			type_enum: [{"value":0,"name":"default"},{"value":1,"name":"primary"},{"value":2,"name":"warn"}] as ItemType[],
-			type_enum_current: 0
-		}
-	},
-	methods: {
-		button_click() { console.log("组件被点击时触发") },
-		button_touchstart() { console.log("手指触摸动作开始") },
-		button_touchmove() { console.log("手指触摸后移动") },
-		button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
-		button_touchend() { console.log("手指触摸动作结束") },
-		button_tap() { console.log("手指触摸后马上离开") },
-		button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
-		change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
-		change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
-		radio_change_size_enum(checked : number) { this.size_enum_current = checked },
-		radio_change_type_enum(checked : number) { this.type_enum_current = checked }
-	}
-}
-</script>
-
-<template>
-	<!-- #ifdef APP -->
-	<scroll-view style="flex:1">
-	<!-- #endif -->
-	<view class="main">
-	<button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name" :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click" @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel" @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress">uni-app-x</button>
-	</view>
-
-	<view class="content nvue">
-			<boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
-		<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
-	<enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
-	<enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
-	</view>
-	<!-- #ifdef APP -->
-	</scroll-view>
-	<!-- #endif -->
-</template>
-
-<style>
-.main {
-	max-height: 500rpx;
-	padding: 10rpx 0;
-	border-bottom: 1px solid rgba(0,0,0,.06);
-	flex-direction: row;
-	justify-content: center;
-}
-
-.main .list-item {
-	width:100%;
-	height:200rpx;
-	border: 1px solid #666;
-}
-
-</style>
+<script>
+  import { type ItemType } from '@/components/enum-data/enum-data.vue'
+  export default {
+    data() {
+      return {
+        plain_boolean: false,
+        disabled_boolean: false,
+        default_style: false,
+        size_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "mini" }] as ItemType[],
+        size_enum_current: 0,
+        type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[],
+        type_enum_current: 0,
+        count: 0,
+        text: 'uni-app-x'
+      }
+    },
+    methods: {
+      button_click() {
+        console.log("组件被点击时触发")
+        this.count++
+      },
+      button_touchstart() { console.log("手指触摸动作开始") },
+      button_touchmove() { console.log("手指触摸后移动") },
+      button_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
+      button_touchend() { console.log("手指触摸动作结束") },
+      button_tap() { console.log("手指触摸后马上离开") },
+      button_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
+      change_plain_boolean(checked : boolean) { this.plain_boolean = checked },
+      change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
+      change_default_style(checked : boolean) { this.default_style = checked },
+      radio_change_size_enum(checked : number) { this.size_enum_current = checked },
+      radio_change_type_enum(checked : number) { this.type_enum_current = checked }
+    }
+  }
+</script>
+
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex:1">
+    <!-- #endif -->
+    <view class="main">
+      <button :disabled="disabled_boolean" :size="size_enum[size_enum_current].name"
+        :type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
+        @touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
+        @touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
+        :style="default_style ? 'color: #cccccc': ''">{{text}}</button>
+    </view>
+
+    <view class="content">
+      <boolean-data :defaultValue="false" title="按钮是否镂空，背景色透明" @change="change_plain_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
+      <boolean-data :defaultValue="false" title="是否设置文字颜色" @change="change_default_style"></boolean-data>
+      <enum-data :items="size_enum" title="按钮的大小" @change="radio_change_size_enum"></enum-data>
+      <enum-data :items="type_enum" title="按钮的类型" @change="radio_change_type_enum"></enum-data>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<style>
+  .main {
+    max-height: 500rpx;
+    padding: 10rpx 0;
+    border-bottom: 1px solid rgba(0, 0, 0, .06);
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .main .list-item {
+    width: 100%;
+    height: 200rpx;
+    border: 1px solid #666;
+  }
+</style>
\ No newline at end of file
-- 
GitLab