mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-11-04 12:52:08 +08:00
test(Grid): update test cases
This commit is contained in:
chenjiahan
parent
e49bee2964
commit
ba11e3f249
@ -1,37 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`icon-size prop 1`] = `
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline"><i class="van-icon van-icon-success van-grid-item__icon" style="font-size: 10px;">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`render icon-slot 1`] = `
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item" style="flex-basis: 25%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline">
|
||||
<div class="van-grid-item__icon-wrapper">
|
||||
<div>Custom Icon</div>
|
||||
<div class="van-badge">1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`sqaure and set gutter 1`] = `
|
||||
<div class="van-grid" style="padding-left: 10rem;">
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline" style="right: 10rem; bottom: 10rem; height: auto;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
49
src/grid/test/__snapshots__/index.spec.js.snap
Normal file
49
src/grid/test/__snapshots__/index.spec.js.snap
Normal file
@ -0,0 +1,49 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`should render icon-slot correctly 1`] = `
|
||||
<div class="van-grid van-hairline--top">
|
||||
<div class="van-grid-item"
|
||||
style="flex-basis: 25%;"
|
||||
>
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-hairline">
|
||||
<div class="van-badge__wrapper">
|
||||
Custom Icon
|
||||
<div class="van-badge van-badge--fixed">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`should render square grid with gutter correctly 1`] = `
|
||||
<div style="padding-left: 10rem;"
|
||||
class="van-grid"
|
||||
>
|
||||
<div class="van-grid-item van-grid-item--square"
|
||||
style="flex-basis: 50%; padding-top: 50%;"
|
||||
>
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline"
|
||||
style="right: 10rem; bottom: 10rem; height: auto;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square"
|
||||
style="flex-basis: 50%; padding-top: 50%;"
|
||||
>
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline"
|
||||
style="right: 10rem; bottom: 10rem; height: auto;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-grid-item van-grid-item--square"
|
||||
style="flex-basis: 50%; padding-top: 50%;"
|
||||
>
|
||||
<div class="van-grid-item__content van-grid-item__content--center van-grid-item__content--square van-grid-item__content--surround van-hairline"
|
||||
style="right: 10rem; bottom: 10rem; height: auto;"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -1,62 +0,0 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
|
||||
test('click grid item', () => {
|
||||
const onClick = jest.fn();
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-grid>
|
||||
<van-grid-item @click="onClick" />
|
||||
</van-grid>
|
||||
`,
|
||||
methods: {
|
||||
onClick,
|
||||
},
|
||||
});
|
||||
|
||||
const Item = wrapper.find('.van-grid-item__content');
|
||||
Item.trigger('click');
|
||||
|
||||
expect(onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
test('sqaure and set gutter', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-grid square :column-num="2" gutter="10rem">
|
||||
<van-grid-item />
|
||||
<van-grid-item />
|
||||
<van-grid-item />
|
||||
</van-grid>
|
||||
`,
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('icon-size prop', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-grid icon-size="10">
|
||||
<van-grid-item icon="success" />
|
||||
</van-grid>
|
||||
`,
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render icon-slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<van-grid icon-size="10">
|
||||
<van-grid-item badge="1">
|
||||
<template #icon>
|
||||
<div>Custom Icon</div>
|
||||
</template>
|
||||
</van-grid-item>
|
||||
</van-grid>
|
||||
`,
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
49
src/grid/test/index.spec.js
Normal file
49
src/grid/test/index.spec.js
Normal file
@ -0,0 +1,49 @@
|
||||
import { mount } from '@vue/test-utils';
|
||||
import Grid from '..';
|
||||
import GridItem from '../../grid-item';
|
||||
|
||||
test('should render square grid with gutter correctly', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Grid square columnNum="2" gutter="10rem">
|
||||
<GridItem />
|
||||
<GridItem />
|
||||
<GridItem />
|
||||
</Grid>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('should change icon size when using icon-size prop', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Grid icon-size="10">
|
||||
<GridItem icon="success" />
|
||||
</Grid>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.find('.van-grid-item__icon').element.style.fontSize).toEqual(
|
||||
'10px'
|
||||
);
|
||||
});
|
||||
|
||||
test('should render icon-slot correctly', () => {
|
||||
const wrapper = mount({
|
||||
render() {
|
||||
return (
|
||||
<Grid>
|
||||
<GridItem badge="1" v-slots={{ icon: () => 'Custom Icon' }} />
|
||||
</Grid>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
@ -8,7 +8,7 @@ Locale.use('en-US', enUS);
|
||||
|
||||
const EmptyComponent = {
|
||||
render() {
|
||||
return h('div', [(this as any).$slots.default()]);
|
||||
return h('div', [this.$slots.default()]);
|
||||
},
|
||||
inheritAttrs: false,
|
||||
};
|
||||
@ -28,7 +28,6 @@ export function snapshotDemo(Demo: any, option: any = {}) {
|
||||
mixins: [DemoLocaleMixin],
|
||||
components: {
|
||||
'demo-block': EmptyComponent,
|
||||
'demo-section': EmptyComponent,
|
||||
},
|
||||
plugins: [(window as any).vant],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user