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

@@ -4,27 +4,50 @@ describe('css-dynamic-border', () => {
     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});
+    const image = await program.screenshot({
+      fullPage: true
+    });
     expect(image).toSaveImageSnapshot();
   })
-
+
   // 取消圆角
-  it('check_none', async () => {
+  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();
+  })
+
+  // 左下，右下设置圆角
+  it('check_bottomleft_bottomright', async () => {
+    await page.callMethod('changeIndex', 10)
+    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();
-  })
-
-  // 左下，右下设置圆角
-  it('check_bottomleft_bottomright', async () => {
-    await page.callMethod('changeIndex', 10)
-    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>
-	<view style="margin: 15px;border-radius: 10px;background-color: white;">
-		<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">
-			<view>
-				<text style="font-size: 14px;" :style="index == currentIndex ? 'color: #FFFFFF;' : ''">{{ index }}</text>
-			</view>
-		</view>
-	</view>
+  <!-- #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"
+        :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 }}</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>
-	export default {
-		data() {
-			return {
-				currentIndex: 1,
-			}
-		},
+  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{
-		border-bottom: 1rpx solid #EEEEEE;
-	}
-	.btlr10{
-		border-top-left-radius: 10rpx;
-	}
-	.btrr10{
-		border-top-right-radius: 10rpx;
-	}
-	.bblr10{
-		border-bottom-left-radius: 10rpx;
-	}
-	.bbrr10{
-		border-bottom-right-radius: 10rpx;
-	}
+  .common {
+    padding: 15px;
+    border-radius: 4px;
+    width: 120px;
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .bb1 {
+    border-bottom: 1rpx solid #EEEEEE;
+  }
+
+  .btlr10 {
+    border-top-left-radius: 10rpx;
+  }
+
+  .btrr10 {
+    border-top-right-radius: 10rpx;
+  }
+
+  .bblr10 {
+    border-bottom-left-radius: 10rpx;
+  }
+
+  .bbrr10 {
+    border-bottom-right-radius: 10rpx;
+  }
 </style>