[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,54 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">默认排序</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">全部商品</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">筛选</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">全部商品</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">默认排序</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">全部商品</span></div>
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">默认排序</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,201 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`click option 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2009;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style=""><span>A</span></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>B</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`close on click outside 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2004; z-index: 2004; position: absolute; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`destroy one item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
|
||||
<!---->
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`didn\`t find matched option 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"></span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`direction up 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
|
||||
<div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2006; z-index: 2006; position: absolute; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`disable dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2000; z-index: 2000; position: absolute; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 2`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-enter van-fade-enter-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`show dropdown item 3`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
|
||||
<div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
|
||||
<div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
|
||||
<!----></i></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>B</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="van-overlay van-fade-leave van-fade-leave-active" style="z-index: 2001; z-index: 2001; position: absolute; animation-duration: 0.2s;"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`title prop 1`] = `
|
||||
<div class="van-dropdown-menu van-hairline--top-bottom">
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
|
||||
<div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">Title</span></div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
<div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px; display: none;">
|
||||
<!---->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,197 @@
|
||||
import { mount, later } from '../../../test/utils';
|
||||
import DropdownMenu from '..';
|
||||
import DropdownItem from '../../dropdown-item';
|
||||
|
||||
function renderWrapper(options = {}) {
|
||||
return mount({
|
||||
template: `
|
||||
<dropdown-menu :direction="direction">
|
||||
<dropdown-item v-model="value" :title="title" :options="options" />
|
||||
<dropdown-item v-model="value" :title="title" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: options.value || 0,
|
||||
title: options.title || '',
|
||||
direction: options.direction || 'down',
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
test('show dropdown item', async () => {
|
||||
const wrapper = renderWrapper();
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
|
||||
titles.at(0).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
titles.at(1).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
|
||||
titles.at(1).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('close on click outside', async () => {
|
||||
const wrapper = renderWrapper();
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
|
||||
titles.at(0).trigger('click');
|
||||
document.body.click();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('direction up', async () => {
|
||||
const wrapper = renderWrapper({
|
||||
direction: 'up'
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
|
||||
titles.at(0).trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('click option', async () => {
|
||||
const wrapper = renderWrapper();
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
titles.at(0).trigger('click');
|
||||
|
||||
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
||||
options.at(1).trigger('click');
|
||||
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('title prop', async () => {
|
||||
const wrapper = renderWrapper({ title: 'Title' });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('didn`t find matched option', async () => {
|
||||
const wrapper = renderWrapper({ value: -1 });
|
||||
await later();
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('destroy one item', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<dropdown-menu>
|
||||
<dropdown-item v-if="render" v-model="value" :options="options" />
|
||||
<dropdown-item v-model="value" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
render: true,
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
wrapper.setData({ render: false });
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('disable dropdown item', async () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<dropdown-menu>
|
||||
<dropdown-item disabled v-model="value" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const title = wrapper.find('.van-dropdown-menu__title');
|
||||
title.trigger('click');
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('change event', async () => {
|
||||
const onChange = jest.fn();
|
||||
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<dropdown-menu>
|
||||
<dropdown-item v-model="value" :options="options" @change="onChange" />
|
||||
<dropdown-item v-model="value" :options="options" />
|
||||
</dropdown-menu>
|
||||
`,
|
||||
components: {
|
||||
DropdownItem,
|
||||
DropdownMenu
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
options: [
|
||||
{ text: 'A', value: 0 },
|
||||
{ text: 'B', value: 1 }
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
onChange
|
||||
}
|
||||
});
|
||||
|
||||
await later();
|
||||
|
||||
const titles = wrapper.findAll('.van-dropdown-menu__title');
|
||||
titles.at(0).trigger('click');
|
||||
|
||||
const options = wrapper.findAll('.van-dropdown-item .van-cell');
|
||||
options.at(0).trigger('click');
|
||||
|
||||
expect(onChange).toHaveBeenCalledTimes(0);
|
||||
|
||||
options.at(1).trigger('click');
|
||||
expect(onChange).toHaveBeenCalledWith(1);
|
||||
expect(onChange).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
Reference in New Issue
Block a user