补充wxcomponents组件示例

pages.json

@@ -2285,12 +2285,15 @@
 		// #endif
     // #ifdef MP
     {
-      "path" : "pages/template/vant-button/vant-button",
+      "path" : "pages/template/vant/vant",
       "style" :
       {
         "navigationBarTitleText": "微信自定义组件示例",
         "usingComponents": {
-        	"van-button": "/wxcomponents/vant/button/index"
+        	"vant-button": "/wxcomponents/vant/button/index",
+        	"vant-icon": "/wxcomponents/vant/icon/index",
+        	"vant-info": "/wxcomponents/vant/info/index",
+        	"vant-loading": "/wxcomponents/vant/loading/index"
         }
       }
     }

pages/tabBar/template.uvue

@@ -216,8 +216,8 @@
           // #endif
           // #ifdef MP
           {
-            id: 'vant-button',
-            url: 'vant-button',
+            id: 'vant',
+            url: 'vant',
             name: '微信自定义组件示例',
             open: false,
             pages: [] as Page[],

pages/template/vant-button/vant-button.test.js → pages/template/vant/vant.test.js

 jest.setTimeout(30000);
-describe('test title', () => {
-  let page, vant;
+describe('test vant', () => {
+  let page,vantBtnContainer,vantBtn;
   if (!process.env.uniTestPlatformInfo.startsWith('mp')) {
     it('not support', () => {
       expect(1).toBe(1)
@@ -8,17 +8,21 @@ describe('test title', () => {
     return
   }
   beforeAll(async () => {
-    page = await program.reLaunch('/pages/template/vant-button/vant-button')
+    page = await program.reLaunch('/pages/template/vant/vant')
     await page.waitFor(3000);
-    vant = await page.$('van-button');
+    vantBtnContainer = await page.$('vant-button');
     expect(await page.data('jest')).toBe(false);
   });
+  afterAll(async () => {
+    expect(await program.screenshot()).toSaveImageSnapshot();
+  });
   it('check title onClick', async () => {
-    const titleText = await vant.text();
-    expect(titleText).toEqual('vant weapp的van-button按钮组件');
-    await vant.tap()
+    const titleText = await vantBtnContainer.text();
+    expect(titleText).toEqual('vant weapp的vant-button按钮组件');
+    vantBtn = await vantBtnContainer.$('button')
+    await vantBtn.tap()
     await page.waitFor(1000);
-    console.log('jest', await page.data('jest'))
-    // expect(await page.data('jest')).toBe(true);
+    console.log('jest',await page.data('jest'))
+    expect(await page.data('jest')).toBe(true);
   });
 });

pages/template/vant-button/vant-button.uvue → pages/template/vant/vant.uvue

 <template>
-  <view>
+  <view style="align-items: center;">
     <page-head title="微信小程序自定义组件示例"></page-head>
-    <view class="uni-list-cell-padding">
-      <text>
-        uni-app-x支持在微信小程序端引入微信小程序自定义组件。以下以vant weapp组件为例演示
-      </text>
-    </view>
-    <view style="text-align: center;">
-      <van-button type="primary" @click="onClick">vant weapp的van-button按钮组件</van-button>
-    </view>
+    <text class="uni-list-cell-padding">
+      uni-app-x支持在微信小程序端引入微信小程序自定义组件。以下以vant weapp组件为例演示
+    </text>
+    <text class="uni-common-mt uni-title-text uni-common-mb">vant-button组件</text>
+    <vant-button color="#55aa00" @click="onClick">vant weapp的vant-button按钮组件</vant-button>
+    <text class="uni-common-mt uni-title-text uni-common-mb">vant-icon组件</text>
+    <vant-icon name="balance-list" size="30" color="#aa55ff"></vant-icon>
+    <text class="uni-common-mt uni-title-text uni-common-mb">vant-info组件</text>
+    <vant-info info="99"></vant-info>
+    <text class="uni-common-mt uni-title-text uni-common-mb">vant-loading组件</text>
+    <vant-loading color="#00aaff"></vant-loading>
   </view>
 </template>
 <script>
   export default {
     data() {
       return {
+        // 自动化测试
         jest: false
       };
     },
@@ -31,7 +35,9 @@
     }
   }
 </script>
-
 <style>
-
+  .van-info {
+    right: 200px !important;
+    top: 370px !important;
+  }
 </style>