test(Col): add demo test

This commit is contained in:
nemo-shen 2021-12-02 13:23:14 +08:00 committed by neverland
parent 0ec0925001
commit b6381a0b31
8 changed files with 196 additions and 24 deletions

View File

@ -78,6 +78,7 @@
"van-checkbox-demo": "./dist/checkbox/demo/index",
"van-checkbox-group": "./dist/checkbox-group/index",
"van-col": "./dist/col/index",
"van-col-demo": "./dist/col/demo/index",
"van-count-down": "./dist/count-down/index",
"van-dialog": "./dist/dialog/index",
"van-divider": "./dist/divider/index",

View File

@ -1,24 +1 @@
<demo-block title="基础用法" padding>
<van-row>
<van-col span="8" custom-class="dark">span: 8</van-col>
<van-col span="8" custom-class="light">span: 8</van-col>
<van-col span="8" custom-class="dark">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4" custom-class="dark">span: 4</van-col>
<van-col span="10" offset="4" custom-class="light">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12" custom-class="dark">offset: 12, span: 12</van-col>
</van-row>
</demo-block>
<demo-block title="在列元素之间增加间距" padding>
<van-row gutter="20">
<van-col span="8" custom-class="dark">span: 8</van-col>
<van-col span="8" custom-class="light">span: 8</van-col>
<van-col span="8" custom-class="dark">span: 8</van-col>
</van-row>
</demo-block>
<van-col-demo />

View File

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

View File

@ -0,0 +1,5 @@
import { VantComponent } from '../../common/component';
VantComponent({
data: {},
});

View File

@ -0,0 +1,24 @@
<demo-block title="基础用法" padding>
<van-row>
<van-col span="8" custom-class="dark">span: 8</van-col>
<van-col span="8" custom-class="light">span: 8</van-col>
<van-col span="8" custom-class="dark">span: 8</van-col>
</van-row>
<van-row>
<van-col span="4" custom-class="dark">span: 4</van-col>
<van-col span="10" offset="4" custom-class="light">offset: 4, span: 10</van-col>
</van-row>
<van-row>
<van-col offset="12" span="12" custom-class="dark">offset: 12, span: 12</van-col>
</van-row>
</demo-block>
<demo-block title="在列元素之间增加间距" padding>
<van-row gutter="20">
<van-col span="8" custom-class="dark">span: 8</van-col>
<van-col span="8" custom-class="light">span: 8</van-col>
<van-col span="8" custom-class="dark">span: 8</van-col>
</van-row>
</demo-block>

View File

@ -0,0 +1,146 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render demo and match snapshot 1`] = `
<main>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix demo-block--padding"
>
<wx-view
class="demo-block__title"
>
基础用法
</wx-view>
<van-row>
<wx-view
class="van-row custom-class"
style=""
>
<van-col
customClass="dark"
>
<wx-view
class="custom-class van-col van-col--8 "
style=""
>
span: 8
</wx-view>
</van-col>
<van-col
customClass="light"
>
<wx-view
class="custom-class van-col van-col--8 "
style=""
>
span: 8
</wx-view>
</van-col>
<van-col
customClass="dark"
>
<wx-view
class="custom-class van-col van-col--8 "
style=""
>
span: 8
</wx-view>
</van-col>
</wx-view>
</van-row>
<van-row>
<wx-view
class="van-row custom-class"
style=""
>
<van-col
customClass="dark"
>
<wx-view
class="custom-class van-col van-col--4 "
style=""
>
span: 4
</wx-view>
</van-col>
<van-col
customClass="light"
>
<wx-view
class="custom-class van-col van-col--10 van-col--offset-4"
style=""
>
offset: 4, span: 10
</wx-view>
</van-col>
</wx-view>
</van-row>
<van-row>
<wx-view
class="van-row custom-class"
style=""
>
<van-col
customClass="dark"
>
<wx-view
class="custom-class van-col van-col--12 van-col--offset-12"
style=""
>
offset: 12, span: 12
</wx-view>
</van-col>
</wx-view>
</van-row>
</wx-view>
</demo-block>
<demo-block>
<wx-view
class="custom-class demo-block van-clearfix demo-block--padding"
>
<wx-view
class="demo-block__title"
>
在列元素之间增加间距
</wx-view>
<van-row>
<wx-view
class="van-row custom-class"
style="margin-right:-10px;margin-left:-10px"
>
<van-col
customClass="dark"
>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
span: 8
</wx-view>
</van-col>
<van-col
customClass="light"
>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
span: 8
</wx-view>
</van-col>
<van-col
customClass="dark"
>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
span: 8
</wx-view>
</van-col>
</wx-view>
</van-row>
</wx-view>
</demo-block>
</main>
`;

View File

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