{
});
expect(wrapper.element).toMatchSnapshot();
});
+
+ it(':collapsedItems', async () => {
+ let visible = ref(false);
+
+ const collapsedItems = (h, { collapsedSelectedItems, onClose }) => {
+ if (!(collapsedSelectedItems instanceof Array)) return null;
+ const count = collapsedSelectedItems.length;
+ if (count <= 0) return null;
+ return (
+
+ {{
+ content: () =>
+ collapsedSelectedItems.map((item, index) => (
+
+ )),
+ default: () => Function - More({count}),
+ }}
+
+ );
+ };
+
+ const currentOptions = [
+ { label: '架构云', value: '1' },
+ { label: '大数据', value: '2' },
+ { label: '区块链', value: '3' },
+ ];
+ const currentValues = ['1', '2'];
+
+ const wrapper = mount(
+ {
+ render() {
+ return (
+
+ );
+ },
+ },
+ {
+ attachTo: document.body,
+ },
+ );
+
+ const tags = wrapper.findAll('.t-tag');
+ // 默认
+ expect(tags.length).toBe(2);
+ expect(tags[0].text()).toBe('架构云');
+ expect(tags[1].text()).toBe('Function - More(1)');
+
+ // collapsedItems popup 展示
+ // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup
+ visible.value = true;
+ await wrapper.vm.$nextTick();
+ const buttons = document.querySelectorAll('.t-button');
+ expect(buttons.length).toBe(1);
+
+ // 清理测试数据
+ document.body.innerHTML = '';
+ });
+
+ it(':collapsedItems click', async () => {
+ const visible = ref(false);
+ const minCollapsedNum = 1;
+
+ const collapsedItems = (h, { collapsedSelectedItems }) => {
+ if (!(collapsedSelectedItems instanceof Array)) return null;
+ const count = collapsedSelectedItems.length;
+ if (count <= 0) return null;
+ return (
+
(
+ <>
+ {collapsedSelectedItems.map((item, index) => (
+
+ ))}
+
+ ),
+ }}
+ >
+ Function - More({count}),
+
+ );
+ };
+
+ const currentOptions = [
+ { label: '架构云', value: '1' },
+ { label: '大数据', value: '2' },
+ { label: '区块链', value: '3' },
+ ];
+ let selectedOptions = [];
+ const onChange = (_value, context) => {
+ selectedOptions = context.selectedOptions;
+ };
+
+ const wrapper = mount(
+ {
+ render() {
+ return (
+
+ );
+ },
+ },
+ {
+ attachTo: document.body,
+ },
+ );
+
+ // 默认
+ const tags = wrapper.findAll('.t-tag');
+ expect(tags.length).toBe(0);
+
+ // 第一次选择
+ // 目前无法通过 triggerEvent 触发 mouseenter 事件展开 select popup
+ await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } });
+ await wrapper.vm.$nextTick();
+ const groupNode1 = wrapper.findAll('.t-select-option');
+ expect(groupNode1.length).toBe(3);
+
+ await groupNode1[0].trigger('click');
+ await wrapper.vm.$nextTick();
+ const tags1 = wrapper.findAll('.t-tag');
+ expect(tags1.length).toBe(1);
+ expect(tags1[0].text()).toBe(currentOptions[0].label);
+
+ // 第二次选择(选择options的第三个数据-区块链)
+ await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } });
+ await wrapper.vm.$nextTick();
+ const groupNode2 = wrapper.findAll('.t-select-option');
+ expect(groupNode2.length).toBe(3);
+
+ await groupNode2[2].trigger('click');
+ await wrapper.vm.$nextTick();
+ const tags2 = wrapper.findAll('.t-tag');
+ expect(tags2.length).toBe(2);
+ expect(tags2[0].text()).toBe(currentOptions[0].label);
+ expect(tags2[1].text()).toBe(`Function - More(${selectedOptions.length - minCollapsedNum})`);
+ // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup
+ visible.value = true;
+ await wrapper.vm.$nextTick();
+ const buttons1 = document.querySelectorAll('.t-button');
+ expect(buttons1.length).toBe(1);
+ expect(buttons1[0].textContent).toBe('区块链');
+
+ // 第三次选择(选择options的第二个数据-大数据)
+ await wrapper.setProps({ popupProps: { attach: 'multiple-select', visible: true } });
+ await wrapper.vm.$nextTick();
+ const groupNode3 = wrapper.findAll('.t-select-option');
+ expect(groupNode3.length).toBe(3);
+
+ await groupNode3[1].trigger('click');
+ await wrapper.vm.$nextTick();
+ const tags3 = wrapper.findAll('.t-tag');
+ expect(tags3.length).toBe(2);
+ expect(tags3[0].text()).toBe(currentOptions[0].label);
+ expect(tags3[1].text()).toBe(`Function - More(${selectedOptions.length - minCollapsedNum})`);
+ // 这里使用 triggerEvent 无法触发 mouseenter 事件展开 select popup
+ visible.value = true;
+ await wrapper.vm.$nextTick();
+ const buttons2 = document.querySelectorAll('.t-button');
+ expect(buttons2.length).toBe(2);
+ expect(buttons2[0].textContent).toBe('区块链');
+ expect(buttons2[1].textContent).toBe('大数据');
+
+ // 清理测试数据
+ document.body.innerHTML = '';
+ });
});
describe('@event', () => {
@@ -202,85 +397,84 @@ describe('Select', () => {
});
});
});
-});
-describe('Select Option', () => {
- // test props api
- describe(':props', () => {
- it(':value', () => {
- const value = '1';
- const wrapper = mount({
- render() {
- return (
-
- );
- },
+ describe('Select Option', () => {
+ // test props api
+ describe(':props', () => {
+ it(':value', () => {
+ const value = '1';
+ const wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ expect(wrapper.element).toMatchSnapshot();
});
- expect(wrapper.element).toMatchSnapshot();
- });
- it(':label', () => {
- const value = '1';
- const wrapper = mount({
- render() {
- return (
-
- );
- },
+ it(':label', () => {
+ const value = '1';
+ const wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ expect(wrapper.element).toMatchSnapshot();
});
- expect(wrapper.element).toMatchSnapshot();
- });
- it(':disabled', () => {
- const value = '1';
- const wrapper = mount({
- render() {
- return (
-
- );
- },
+ it(':disabled', () => {
+ const value = '1';
+ const wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ expect(wrapper.element).toMatchSnapshot();
});
- expect(wrapper.element).toMatchSnapshot();
});
});
-});
-describe('Select OptionGroup', () => {
- // test props api
- describe(':props', () => {
- it(':value', () => {
- const value = '1';
- const wrapper = mount({
- render() {
- return (
-
- );
- },
+ describe('Select OptionGroup', () => {
+ // test props api
+ describe(':props', () => {
+ it(':value', () => {
+ const value = '1';
+ const wrapper = mount({
+ render() {
+ return (
+
+ );
+ },
+ });
+ expect(wrapper.element).toMatchSnapshot();
});
- expect(wrapper.element).toMatchSnapshot();
});
- });
- describe(':base', () => {
- it('v-for and option works fine', async () => {
- const Comp = {
- components: {
- TSelect: Select,
- TOptionGroup: OptionGroup,
- TOption: Option,
- },
- template: `
+ describe(':base', () => {
+ it('v-for and option works fine', async () => {
+ const Comp = {
+ components: {
+ TSelect: Select,
+ TOptionGroup: OptionGroup,
+ TOption: Option,
+ },
+ template: `
@@ -296,19 +490,20 @@ describe('Select OptionGroup', () => {
`,
- };
+ };
- const wrapper = mount(Comp);
- await wrapper.setProps({ popupProps: { visible: true } });
+ const wrapper = mount(Comp);
+ await wrapper.setProps({ popupProps: { visible: true } });
- const panelNode = document.querySelector('.t-select__list');
- const groupNode = document.querySelectorAll('.t-select-option-group');
- expect(groupNode.length).toBe(3);
- groupNode.forEach((item) => {
- const option = item.querySelectorAll('.t-select-option');
- expect(option.length).toBe(3);
+ const panelNode = document.querySelector('.t-select__list');
+ const groupNode = document.querySelectorAll('.t-select-option-group');
+ expect(groupNode.length).toBe(3);
+ groupNode.forEach((item) => {
+ const option = item.querySelectorAll('.t-select-option');
+ expect(option.length).toBe(3);
+ });
+ panelNode.parentNode.removeChild(panelNode);
});
- panelNode.parentNode.removeChild(panelNode);
});
});
});