From a249bf34425e3794b8cce73b2730908e19c6dad6 Mon Sep 17 00:00:00 2001
From: XHY <xionghuayu@dcloud.io>
Date: Mon, 6 May 2024 18:15:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20dynamic-border.test.js=20?=
 =?UTF-8?q?=E6=B5=8B=E8=AF=95=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/CSS/border/dynamic-border.test.js | 30 +++++++++++++++++++++++++
 pages/CSS/border/dynamic-border.uvue    | 13 +++++++----
 2 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 pages/CSS/border/dynamic-border.test.js

diff --git a/pages/CSS/border/dynamic-border.test.js b/pages/CSS/border/dynamic-border.test.js
new file mode 100644
index 00000000..cc9dac65
--- /dev/null
+++ b/pages/CSS/border/dynamic-border.test.js
@@ -0,0 +1,30 @@
+describe('css-dynamic-border', () => {
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/CSS/border/dynamic-border')
+    await page.waitFor(600);
+  })
+
+  // 左上、右上设置圆角
+  it('check_topleft_topright', async () => {
+    const image = await program.screenshot({fullPage: true});
+    expect(image).toSaveImageSnapshot();
+  })
+
+  // 取消圆角
+  it('check_none', async () => {
+    await page.callMethod('changeIndex', 2)
+    page.waitFor(100)
+    const image = await program.screenshot({fullPage: true});
+    expect(image).toSaveImageSnapshot();
+  })
+
+  // 左下，右下设置圆角
+  it('check_bottomleft_bottomright', async () => {
+    await page.callMethod('changeIndex', 10)
+    page.waitFor(100)
+    const image = await program.screenshot({fullPage: true});
+    expect(image).toSaveImageSnapshot();
+  })
+
+})
diff --git a/pages/CSS/border/dynamic-border.uvue b/pages/CSS/border/dynamic-border.uvue
index d4f13521..fcec2558 100644
--- a/pages/CSS/border/dynamic-border.uvue
+++ b/pages/CSS/border/dynamic-border.uvue
@@ -1,13 +1,13 @@
 <template>
 	<view style="margin: 15px;border-radius: 10px;background-color: white;">
 		<view
-			v-for="(item,index) in 10" :key="index"
+			v-for="index in 10" :key="index"
 			:class="(index < 9 ? 'bb1' : '') + ' ' + (currentIndex == 0 ? 'btlr10 btrr10' : currentIndex == 9 ? 'bblr10 bbrr10' : '')"
 			style="flex-direction: row;align-items: center;padding: 15px"
 			:style="index == currentIndex ? 'background-color :#57BE6A;' : ''"
 			@tap="currentIndex = index">
 			<view>
-				<text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{index + 1}}</text>
+				<text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{ index }}</text>
 			</view>
 		</view>
 	</view>
@@ -17,9 +17,14 @@
 	export default {
 		data() {
 			return {
-				currentIndex: 0,
+				currentIndex: 1,
 			}
-		}
+		},
+    methods: {
+      changeIndex(index: number) {
+        this.currentIndex = index
+      }
+    }
 	}
 </script>
 
-- 
GitLab