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 = {
|
const EmptyComponent = {
|
||||||
render() {
|
render() {
|
||||||
return h('div', [(this as any).$slots.default()]);
|
return h('div', [this.$slots.default()]);
|
||||||
},
|
},
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
};
|
};
|
||||||
@ -28,7 +28,6 @@ export function snapshotDemo(Demo: any, option: any = {}) {
|
|||||||
mixins: [DemoLocaleMixin],
|
mixins: [DemoLocaleMixin],
|
||||||
components: {
|
components: {
|
||||||
'demo-block': EmptyComponent,
|
'demo-block': EmptyComponent,
|
||||||
'demo-section': EmptyComponent,
|
|
||||||
},
|
},
|
||||||
plugins: [(window as any).vant],
|
plugins: [(window as any).vant],
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user