feat(editable-select): 新增单元测试

packages/devui-vue/devui/editable-select/__tests__/editable-select.spec.ts

@@ -1,8 +1,287 @@
 import { mount } from '@vue/test-utils';
+import { reactive, ref } from 'vue';
 import { EditableSelect } from '../index';
+const createData = (len = 5) => {
+  return reactive(
+    Array.from({ length: len }).map((_, index) => {
+      return {
+        label: `label${index}`,
+        value: index
+      };
+    })
+  );
+};
 
 describe('editable-select test', () => {
-  it('editable-select init render', async () => {
-    // todo
-  })
-})
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  test('create', () => {
+    const wrapper = mount(EditableSelect);
+
+    expect(wrapper.find('.devui-editable-select').exists()).toBe(true);
+  });
+
+  test('should render correctly', async () => {
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options"></editable-select>`,
+      setup() {
+        const value = '';
+        const options = createData();
+        return {
+          value,
+          options
+        };
+      }
+    });
+
+    const input = wrapper.find('input');
+
+    expect(wrapper.get('.devui-dropdown-item').isVisible()).toBe(false);
+
+    await input.trigger('click');
+
+    expect(wrapper.get('.devui-dropdown-item').isVisible()).toBe(true);
+    expect(wrapper.classes()).toContain('devui-select-open');
+
+    const options = wrapper.element.querySelectorAll('.devui-dropdown-item');
+
+    expect(options.length).toBe(5);
+  });
+
+  test('select on click ', async () => {
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options"></editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = createData();
+        return {
+          value,
+          options
+        };
+      }
+    });
+    const options = wrapper.findAll('.devui-dropdown-item');
+
+    await options[0].trigger('click');
+
+    expect(wrapper.find('input').element.value).toBe('label0');
+  });
+
+  test('disabled select', async () => {
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select disabled></editable-select>`
+    });
+    expect(wrapper.find('input').element.disabled).toBe(true);
+  });
+
+  test('disabled option', async () => {
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options" option-disabled-key="disabled"></editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = reactive([
+          {
+            label: 'label0',
+            value: 0
+          },
+          {
+            label: 'label1',
+            value: 1,
+            disabled: true
+          },
+          {
+            label: 'label2',
+            value: 2,
+            disabled: false
+          }
+        ]);
+        return {
+          value,
+          options
+        };
+      }
+    });
+    const options = wrapper.findAll('.devui-dropdown-item');
+
+    expect(options[1].classes()).toContain('disabled');
+
+    await options[1].trigger('click');
+
+    expect(wrapper.find('input').element.value).toBe('');
+
+    await options[2].trigger('click');
+
+    expect(wrapper.find('input').element.value).toBe('label2');
+  });
+
+  test('search', async () => {
+    const handleSearch = jest.fn();
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options" @search="handleSearch"></editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = createData();
+        return {
+          value,
+          options,
+          handleSearch
+        };
+      }
+    });
+    const input = wrapper.find('input');
+    await input.setValue('label');
+    await input.trigger('input');
+    expect(handleSearch).toBeCalled();
+  });
+
+  test('filter option', async () => {
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options" filter-option></editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = createData();
+        return {
+          value,
+          options
+        };
+      }
+    });
+    const input = wrapper.find('input');
+    await input.setValue('label0');
+    await input.trigger('input');
+    expect(wrapper.findAll('.devui-dropdown-item').length).toBe(1);
+  });
+
+  test('custom filter options', async () => {
+    const filterOption = jest.fn();
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options" :filter-option="filterOption"></editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = createData();
+        return {
+          value,
+          options,
+          filterOption
+        };
+      }
+    });
+    const input = wrapper.find('input');
+    await input.setValue('label0');
+    await input.trigger('input');
+    expect(filterOption).toBeCalled();
+  });
+
+  test('render slot', async () => {
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options">
+                    <template #itemTemplate="slotProps" >
+                      <div>
+                        第{{slotProps.index}}项: {{slotProps.item}}
+                      </div>
+                    </template>
+                    <template #noResultItemTemplate="slotProps" >
+                      <div id="noResultItemTemplate">
+                        {{slotProps}}
+                      </div>
+                    </template>
+                  </editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = createData();
+        return {
+          value,
+          options
+        };
+      }
+    });
+    const input = wrapper.find('input');
+    const options = wrapper.findAll('.devui-dropdown-item');
+    expect(options.length).toBe(5);
+    await input.setValue('aaa');
+    await input.trigger('input');
+    expect(wrapper.find('#noResultItemTemplate').exists()).toBe(true);
+  });
+
+  test('load more ', async () => {
+    const loadmore = jest.fn();
+    const makeScroll = async (dom: Element, name: 'scrollTop', offset: number) => {
+      const eventTarget = dom === document.documentElement ? window : dom;
+      dom[name] = offset;
+      const evt = new CustomEvent('scroll', {
+        detail: {
+          target: {
+            [name]: offset
+          }
+        }
+      });
+      eventTarget.dispatchEvent(evt);
+    };
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options" :loadMore="handleLoad" :maxHeight="300" ></editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = createData(20);
+        return {
+          value,
+          options,
+          handleLoad: loadmore
+        };
+      }
+    });
+    const ul = wrapper.find('.devui-list-unstyled');
+    await makeScroll(ul.element, 'scrollTop', 300);
+    expect(loadmore).toBeCalled();
+  });
+  test('keyboard operations', async () => {
+    const wrapper = mount({
+      components: {
+        'editable-select': EditableSelect
+      },
+      template: `<editable-select v-model="value" :options="options"></editable-select>`,
+      setup() {
+        const value = ref('');
+        const options = createData();
+        return {
+          value,
+          options
+        };
+      }
+    });
+    const input = wrapper.find('input');
+    await input.trigger('click');
+    await input.trigger('keydown', { key: 'ArrowDown' });
+    await input.trigger('keydown', { key: 'ArrowDown' });
+    await input.trigger('keydown', { key: 'Enter' });
+    expect(input.element.value).toBe('label2');
+  });
+});

packages/devui-vue/devui/editable-select/index.ts

@@ -1,16 +1,17 @@
-import type { App } from 'vue'
-import EditableSelect from './src/editable-select'
+import type { App } from 'vue';
+import EditableSelect from './src/editable-select';
+
 EditableSelect.install = function (app: App): void {
-  app.component(EditableSelect.name, EditableSelect)
-}
+  app.component(EditableSelect.name, EditableSelect);
+};
 
-export { EditableSelect }
+export { EditableSelect };
 
 export default {
   title: 'EditableSelect 可输入下拉选择框',
   category: '数据录入',
-  status: '10%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '100%',
   install(app: App): void {
-    app.use(EditableSelect as any)
+    app.use(EditableSelect as any);
   }
-}
+};