feat: 补充动态切换 border 截图测试

.editorconfig

@@ -2,7 +2,7 @@ root = true
 
 [*]
 charset = utf-8
-end_of_line = lf
+end_of_line = auto
 indent_style = space
 indent_size = 2
 trim_trailing_whitespace = true

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

@@ -7,7 +7,9 @@ describe('css-dynamic-border', () => {
 
   // 左上、右上设置圆角
   it('check_topleft_topright', async () => {
-    const image = await program.screenshot({fullPage: true});
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
   })
 
@@ -15,7 +17,9 @@ describe('css-dynamic-border', () => {
   it('check_none', async () => {
     await page.callMethod('changeIndex', 2)
     await page.waitFor(100)
-    const image = await program.screenshot({fullPage: true});
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
   })
 
@@ -23,7 +27,26 @@ describe('css-dynamic-border', () => {
   it('check_bottomleft_bottomright', async () => {
     await page.callMethod('changeIndex', 10)
     await page.waitFor(100)
-    const image = await program.screenshot({fullPage: true});
+    const image = await program.screenshot({
+      fullPage: true
+    });
+    expect(image).toSaveImageSnapshot();
+  })
+
+  it('动态切换为空值', async () => {
+    await page.callMethod('setBorderBlank')
+    await page.waitFor(100)
+    const image = await program.screenshot({
+      fullPage: true
+    });
+    expect(image).toSaveImageSnapshot();
+  })
+  it('动态切换空值为有值', async () => {
+    await page.callMethod('setBorderBlank')
+    await page.waitFor(100)
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
   })
 

pages/CSS/border/dynamic-border.uvue

 <template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
     <view style="margin: 15px;border-radius: 10px;background-color: white;">
-		<view
-			v-for="index in 10" :key="index"
+      <view 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">
+        :style="index == currentIndex ? 'background-color :#57BE6A;' : ''" @tap="currentIndex = index">
         <view>
           <text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{ index }}</text>
         </view>
       </view>
+
+
     </view>
+    <view style="margin: 15px;margin-top: 20px;">
+      <text>动态切换 border 为空值</text>
+      <text @click="setBorderBlank" class="common" :style="style">
+        {{isSelect?'选中':'未选中'}}
+      </text>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
 </template>
 
 <script>
+  const defaultStyle = 'border:2px solid black;background :#57BE6A;'
   export default {
+
     data() {
       return {
         currentIndex: 1,
+        style: '' as string,
+      }
+    },
+    computed: {
+      isSelect() : boolean {
+        return this.style == defaultStyle
       }
     },
     methods: {
-      changeIndex(index: number) {
+      changeIndex(index : number) {
         this.currentIndex = index
+      },
+      setBorderBlank() {
+        this.style = this.style == '' ? defaultStyle : ''
       }
     }
   }
 </script>
 
 <style>
-	.bb1{
+  .common {
+    padding: 15px;
+    border-radius: 4px;
+    width: 120px;
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .bb1 {
     border-bottom: 1rpx solid #EEEEEE;
   }
-	.btlr10{
+
+  .btlr10 {
     border-top-left-radius: 10rpx;
   }
-	.btrr10{
+
+  .btrr10 {
     border-top-right-radius: 10rpx;
   }
-	.bblr10{
+
+  .bblr10 {
     border-bottom-left-radius: 10rpx;
   }
-	.bbrr10{
+
+  .bbrr10 {
     border-bottom-right-radius: 10rpx;
   }
 </style>