test(Image): add demo test

This commit is contained in:
nemo-shen 2021-12-02 23:36:03 +08:00 committed by neverland
parent 13df6519a4
commit 24017c1c88
9 changed files with 1067 additions and 121 deletions

View File

@ -93,6 +93,7 @@
"van-icon": "./dist/icon/index", "van-icon": "./dist/icon/index",
"van-icon-demo": "./dist/icon/demo/index", "van-icon-demo": "./dist/icon/demo/index",
"van-image": "./dist/image/index", "van-image": "./dist/image/index",
"van-image-demo": "./dist/image/demo/index",
"van-loading": "./dist/loading/index", "van-loading": "./dist/loading/index",
"van-nav-bar": "./dist/nav-bar/index", "van-nav-bar": "./dist/nav-bar/index",
"van-notice-bar": "./dist/notice-bar/index", "van-notice-bar": "./dist/notice-bar/index",

View File

@ -1,16 +1,3 @@
import Page from '../../common/page'; import Page from '../../common/page';
Page({ Page();
data: {
fits: [
'contain',
'cover',
'fill',
'none',
'scale-down',
'widthFix',
'heightFix'
],
src: 'https://img.yzcdn.cn/vant/cat.jpeg'
}
});

View File

@ -1,103 +1 @@
<van-image-demo />
<demo-block title="基础用法" padding>
<van-row>
<van-image
width="100"
height="100"
src="{{ src }}"
/>
</van-row>
</demo-block>
<demo-block title="填充模式" padding>
<van-row gutter="20">
<van-col
wx:for="{{ fits }}"
wx:for-item="fit"
wx:key="fit"
span="8"
>
<van-image
fit="{{ fit }}"
width="100%"
height="27vw"
src="{{ src }}"
/>
<view class="text">{{ fit }}</view>
</van-col>
</van-row>
</demo-block>
<demo-block title="圆形图片" padding>
<van-row gutter="20">
<van-col
wx:for="{{ fits }}"
wx:for-item="fit"
wx:key="fit"
span="8"
>
<van-image
round
fit="{{ fit }}"
width="100%"
height="27vw"
src="{{ src }}"
/>
<view class="text">{{ fit }}</view>
</van-col>
</van-row>
</demo-block>
<demo-block title="加载中提示" padding>
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
/>
<view class="text">默认提示</view>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
use-loading-slot
>
<van-loading
slot="loading"
type="spinner"
size="20"
vertical
/>
</van-image>
<view class="text">自定义提示</view>
</van-col>
</van-row>
</demo-block>
<demo-block title="加载失败提示" padding>
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
/>
<view class="text">默认提示</view>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
use-error-slot
>
<text slot="error">加载失败</text>
</van-image>
<view class="text">自定义提示</view>
</van-col>
</van-row>
</demo-block>

View File

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

View File

@ -1,7 +1,3 @@
page {
background-color: #fff;
}
.text { .text {
width: 100%; width: 100%;
margin: 5px 0 20px; margin: 5px 0 20px;

View File

@ -0,0 +1,16 @@
import { VantComponent } from '../../common/component';
VantComponent({
data: {
fits: [
'contain',
'cover',
'fill',
'none',
'scale-down',
'widthFix',
'heightFix',
],
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
},
});

View File

@ -0,0 +1,101 @@
<demo-block title="基础用法" padding>
<van-row>
<van-image
width="100"
height="100"
src="{{ src }}"
/>
</van-row>
</demo-block>
<demo-block title="填充模式" padding>
<van-row gutter="20">
<van-col
wx:for="{{ fits }}"
wx:for-item="fit"
wx:key="fit"
span="8"
>
<van-image
fit="{{ fit }}"
width="100%"
height="27vw"
src="{{ src }}"
/>
<view class="text">{{ fit }}</view>
</van-col>
</van-row>
</demo-block>
<demo-block title="圆形图片" padding>
<van-row gutter="20">
<van-col
wx:for="{{ fits }}"
wx:for-item="fit"
wx:key="fit"
span="8"
>
<van-image
round
fit="{{ fit }}"
width="100%"
height="27vw"
src="{{ src }}"
/>
<view class="text">{{ fit }}</view>
</van-col>
</van-row>
</demo-block>
<demo-block title="加载中提示" padding>
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
/>
<view class="text">默认提示</view>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
use-loading-slot
>
<van-loading
slot="loading"
type="spinner"
size="20"
vertical
/>
</van-image>
<view class="text">自定义提示</view>
</van-col>
</van-row>
</demo-block>
<demo-block title="加载失败提示" padding>
<van-row gutter="20">
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
/>
<view class="text">默认提示</view>
</van-col>
<van-col span="8">
<van-image
width="100%"
height="27vw"
src="x"
use-error-slot
>
<text slot="error">加载失败</text>
</van-image>
<view class="text">自定义提示</view>
</van-col>
</van-row>
</demo-block>

View File

@ -0,0 +1,926 @@
// 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-image>
<wx-view
class="custom-class van-image"
style="width:100px;height:100px"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="scaleToFill"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
</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>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="aspectFit"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
contain
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="aspectFill"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
cover
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="scaleToFill"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
fill
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="center"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
none
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode=""
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
scale-down
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="widthFix"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
widthFix
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="heightFix"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
heightFix
</wx-view>
</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>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image van-image--round"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="aspectFit"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
contain
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image van-image--round"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="aspectFill"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
cover
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image van-image--round"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="scaleToFill"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
fill
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image van-image--round"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="center"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
none
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image van-image--round"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode=""
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
scale-down
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image van-image--round"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="widthFix"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
widthFix
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image van-image--round"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="heightFix"
showMenuByLongpress="{{false}}"
src="https://img.yzcdn.cn/vant/cat.jpeg"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
heightFix
</wx-view>
</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>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="scaleToFill"
showMenuByLongpress="{{false}}"
src=""
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
默认提示
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="scaleToFill"
showMenuByLongpress="{{false}}"
src=""
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-loading
slot="loading"
>
<wx-view
class="custom-class van-loading van-loading--vertical"
>
<wx-view
class="van-loading__spinner van-loading__spinner--spinner"
style="width:20px;height:20px"
>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
<wx-view
class="van-loading__dot"
/>
</wx-view>
<wx-view
class="van-loading__text"
style=""
/>
</wx-view>
</van-loading>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
自定义提示
</wx-view>
</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>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="scaleToFill"
showMenuByLongpress="{{false}}"
src="x"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
默认提示
</wx-view>
</wx-view>
</van-col>
<van-col>
<wx-view
class="custom-class van-col van-col--8 "
style="padding-right:10px;padding-left:10px"
>
<van-image>
<wx-view
class="custom-class van-image"
style="width:100%;height:27vw"
bind:tap="onClick"
>
<wx-image
class="image-class van-image__img"
lazyLoad="{{false}}"
mode="scaleToFill"
showMenuByLongpress="{{false}}"
src="x"
bind:error="onError"
bind:load="onLoad"
/>
<wx-view
class="loading-class van-image__loading"
>
<van-icon
customClass="van-image__loading-icon"
>
<wx-view
class="custom-class van-icon van-icon-photo"
style=""
bind:tap="onClick"
/>
</van-icon>
</wx-view>
</wx-view>
</van-image>
<wx-view
class="text"
>
自定义提示
</wx-view>
</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();
});