添加 dynamic-border.test.js 测试例

pages/CSS/border/dynamic-border.test.js

+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();
+  })
+
+})

pages/CSS/border/dynamic-border.uvue

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