diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 000000000..2d8d88130 --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // 想了解更多的信息, 请访问：https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "request": "launch", + "name": "Debug Current Test File", + "autoAttachChildProcesses": true, + "skipFiles": ["/**", "**/node_modules/**"], + "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs", + "args": ["run", "${relativeFile}"], + "smartStep": true, + "console": "integratedTerminal" + } + ] +} \ No newline at end of file diff --git a/src/select/__tests__/__snapshots__/index.test.jsx.snap b/src/select/__tests__/__snapshots__/index.test.jsx.snap index 0d6b9960d..28e184034 100644 --- a/src/select/__tests__/__snapshots__/index.test.jsx.snap +++ b/src/select/__tests__/__snapshots__/index.test.jsx.snap @@ -50,6 +50,55 @@ exports[`Select > :props > :bordered 1`] = ` `; +exports[`Select > :props > :borderless 1`] = ` +
+
+
+
+
+ + + + + + +
+
+
+
+`; + exports[`Select > :props > :clearable 1`] = `
:props > :size 1`] = `
`; +exports[`Select > Select Option > :props > :disabled 1`] = ` +
+
+
+
+
+ + + + + + +
+
+
+
+`; + +exports[`Select > Select Option > :props > :label 1`] = ` +
+
+
+
+
+ + + + + + +
+
+
+
+`; + +exports[`Select > Select Option > :props > :value 1`] = ` +
+
+
+
+
+ + + + + + +
+
+
+
+`; + +exports[`Select > Select OptionGroup > :props > :value 1`] = ` +
+
+
+
+
+ + + + + + +
+
+
+
+`; + exports[`Select Option > :props > :disabled 1`] = `
{ + beforeEach(() => { + // 清理测试数据 + document.body.innerHTML = ''; + }); + // test props api describe(':props', () => { it(':disabled', () => { @@ -92,74 +102,147 @@ describe('Select', () => { }); expect(wrapper.element).toMatchSnapshot(); }); - }); -}); -describe('Select Option', () => { - // test props api - describe(':props', () => { - it(':value', () => { - const value = '1'; + it(':collapsedItems ', async () => { + const currentOptions = [ + { label: '架构云', value: '1' }, + { label: '大数据', value: '2' }, + { label: '区块链', value: '3' }, + ]; + const wrapper = mount({ - render() { - return ( - - ); + data() { + return { + visible: false, + }; }, - }); - expect(wrapper.element).toMatchSnapshot(); - }); - it(':label', () => { - const value = '1'; - const wrapper = mount({ - render() { - return ( - - ); + render(h) { + return h(Select, { + props: { + options: currentOptions, + value: ['1', '2'], + minCollapsedNum: 1, + multiple: true, + }, + scopedSlots: { + collapsedItems: (props) => { + if (!(props.collapsedSelectedItems instanceof Array)) return null; + const count = props.collapsedSelectedItems.length; + if (count <= 0) return null; + return h(Popup, { props: { visible: this.visible } }, [ + h( + 'template', + { slot: 'content' }, + props.collapsedSelectedItems.map((item, index) => h( + Button, + { + key: item.value, + style: { marginRight: '4px' }, + on: { + close: (context) => props.onClose({ e: context.e, index: 1 + index }), + }, + }, + item.label, + )), + ), + h(Tag, {}, `Function - More(${count})`), + ]); + }, + }, + }); }, }); - expect(wrapper.element).toMatchSnapshot(); + + await wrapper.vm.$nextTick(); + const tags = wrapper.findAll('.t-tag'); + + // 默认 + expect(tags.length).toBe(2); + const tag0 = tags.at(0); + const tag1 = tags.at(1); + + expect(tag0.text()).toBe('架构云'); + expect(tag1.text()).toBe('Function - More(1)'); + + // collapsedItems popup 展示 + wrapper.setData({ visible: true }); + await wrapper.vm.$nextTick(); + const buttons = document.querySelectorAll('.t-button'); + expect(buttons.length).toBe(1); + expect(buttons[0].textContent).toBe('大数据'); }); - it(':disabled', () => { - const value = '1'; - const wrapper = mount({ - render() { - return ( - - ); - }, - }); - expect(wrapper.element).toMatchSnapshot(); + + it(':collapsedItems click', async () => { + // TODO: 选择数据 验证 collapsedItems 的变化 }); }); -}); -describe('Select OptionGroup', () => { - // test props api - describe(':props', () => { - it(':value', () => { - const value = '1'; - const wrapper = mount({ - render() { - return ( - - - - - - - ); - }, + + ); + }, + }); + expect(wrapper.element).toMatchSnapshot(); + }); + it(':label', () => { + const value = '1'; + const wrapper = mount({ + render() { + return ( + + ); + }, + }); + expect(wrapper.element).toMatchSnapshot(); + }); + it(':disabled', () => { + const value = '1'; + const wrapper = mount({ + render() { + return ( + + ); + }, + }); + expect(wrapper.element).toMatchSnapshot(); + }); + }); + }); + + 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(); }); }); }); diff --git a/src/select/_example-composition/collapsed.vue b/src/select/_example-composition/collapsed.vue index 475d20667..9078293d6 100644 --- a/src/select/_example-composition/collapsed.vue +++ b/src/select/_example-composition/collapsed.vue @@ -1,39 +1,63 @@