test(Grid): add demo test

example/app.json

@@ -125,6 +125,7 @@
     "van-index-bar": "./dist/index-bar/index",
     "van-index-anchor": "./dist/index-anchor/index",
     "van-grid": "./dist/grid/index",
+    "van-grid-demo": "./dist/grid/demo/index",
     "van-grid-item": "./dist/grid-item/index",
     "van-dropdown-menu": "./dist/dropdown-menu/index",
     "van-dropdown-item": "./dist/dropdown-item/index",

example/pages/grid/index.js

@@ -1,10 +1,3 @@
 import Page from '../../common/page';
 
-Page({
+Page();
-  data: {
-    array3: [0, 1, 2],
-    array4: [0, 1, 2, 3],
-    array6: [0, 1, 2, 3, 4, 5],
-    array8: [0, 1, 2, 3, 4, 5, 6, 7],
-  },
-});

example/pages/grid/index.wxml

@@ -1,51 +1 @@
-<demo-block title="基本用法">
+<van-grid-demo />
-  <van-grid>
-    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array4 }}" wx:key="*this" />
-  </van-grid>
-</demo-block>
-
-<demo-block title="自定义列数">
-  <van-grid column-num="3">
-    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array6 }}" wx:key="*this" />
-  </van-grid>
-</demo-block>
-
-<demo-block title="自定义内容">
-  <van-grid column-num="3" border="{{ false }}">
-    <van-grid-item use-slot wx:for="{{ array3 }}" wx:for-item="index" wx:key="*this">
-      <image style="width: 100%; height: 90px;" src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg" />
-    </van-grid-item>
-  </van-grid>
-</demo-block>
-
-<demo-block title="正方形格子">
-  <van-grid square>
-    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array8 }}" wx:key="*this" />
-  </van-grid>
-</demo-block>
-
-<demo-block title="格子间距">
-  <van-grid gutter="{{ 10 }}">
-    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array8 }}" wx:key="*this" />
-  </van-grid>
-</demo-block>
-
-<demo-block title="内容横排">
-  <van-grid direction="horizontal" column-num="3">
-    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array3 }}" wx:key="*this" />
-  </van-grid>
-</demo-block>
-
-<demo-block title="页面跳转">
-  <van-grid clickable column-num="2">
-    <van-grid-item icon="home-o" link-type="navigateTo" url="/pages/dashboard/index" text="Navigate 跳转" />
-    <van-grid-item icon="search" link-type="reLaunch" url="/pages/dashboard/index" text="ReLaunch 跳转" />
-  </van-grid>
-</demo-block>
-
-<demo-block title="徽标提示">
-  <van-grid column-num="2">
-    <van-grid-item icon="home-o" text="文字" dot />
-    <van-grid-item icon="search" text="文字" badge="99+" />
-  </van-grid>
-</demo-block>

example/pages/grid/index.wxss

@@ -1 +0,0 @@
-/* empty */

packages/grid/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-grid": "../../grid/index",
+    "van-grid-item": "../../grid-item/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

packages/grid/demo/index.ts

@@ -0,0 +1,10 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+  data: {
+    array3: [0, 1, 2],
+    array4: [0, 1, 2, 3],
+    array6: [0, 1, 2, 3, 4, 5],
+    array8: [0, 1, 2, 3, 4, 5, 6, 7],
+  },
+});

packages/grid/demo/index.wxml

@@ -0,0 +1,51 @@
+<demo-block title="基本用法">
+  <van-grid>
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array4 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
+<demo-block title="自定义列数">
+  <van-grid column-num="3">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array6 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
+<demo-block title="自定义内容">
+  <van-grid column-num="3" border="{{ false }}">
+    <van-grid-item use-slot wx:for="{{ array3 }}" wx:for-item="index" wx:key="*this">
+      <image style="width: 100%; height: 90px;" src="https://img.yzcdn.cn/vant/apple-{{ index + 1 }}.jpg" />
+    </van-grid-item>
+  </van-grid>
+</demo-block>
+
+<demo-block title="正方形格子">
+  <van-grid square>
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array8 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
+<demo-block title="格子间距">
+  <van-grid gutter="{{ 10 }}">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array8 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
+<demo-block title="内容横排">
+  <van-grid direction="horizontal" column-num="3">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array3 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
+<demo-block title="页面跳转">
+  <van-grid clickable column-num="2">
+    <van-grid-item icon="home-o" link-type="navigateTo" url="/pages/dashboard/index" text="Navigate 跳转" />
+    <van-grid-item icon="search" link-type="reLaunch" url="/pages/dashboard/index" text="ReLaunch 跳转" />
+  </van-grid>
+</demo-block>
+
+<demo-block title="徽标提示">
+  <van-grid column-num="2">
+    <van-grid-item icon="home-o" text="文字" dot />
+    <van-grid-item icon="search" text="文字" badge="99+" />
+  </van-grid>
+</demo-block>

packages/grid/test/demo.spec.ts

@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+    rootPath: path.resolve(__dirname, '../../'),
+  });
+  const comp = simulate.render(id);
+  comp.attach(document.createElement('parent-wrapper'));
+  expect(comp.toJSON()).toMatchSnapshot();
+});