test(tag-input): 修复因为逻辑更改导致的测试错误

Author: vaebe

packages/devui-vue/devui/tag-input/__tests__/tag-input.spec.ts

@@ -1,24 +1,28 @@
 import { mount } from '@vue/test-utils';
 import { reactive, nextTick } from 'vue';
 import DTagInput from '../src/tag-input';
+import { useNamespace } from '../../shared/hooks/use-namespace';
 
 jest.mock('../../locale/create', () => ({
  createI18nTranslate: () => jest.fn(),
 }));
 
+const ns = useNamespace('tag-input', true);
+
 const customMount = (state) => mount({
  components: { DTagInput },
  template: `
  <d-tag-input
  v-model:tags="state.tags"
  v-model:suggestionList="state.suggestionList"
- displayProperty="cname"></d-tag-input>
+ displayProperty="cname"
+ ></d-tag-input>
  `,
- setup () {
+ setup() {
  return {
- state
+ state,
  };
- }
+ },
 });
 
 describe('DTagInput', () => {
@@ -27,17 +31,16 @@ describe('DTagInput', () => {
  tags: [
  { cname: 'Y.Chen' },
  { cname: 'b' },
- { cname: 'c' }
+ { cname: 'c' },
  ],
  suggestionList: [
  { cname: 'd' },
  { cname: 'e' },
  { cname: 'f' },
- ]
+ ],
  });
  const wrapper = customMount(state);
-
- expect(wrapper.find('.devui-tags-host').exists()).toBe(true);
+ expect(wrapper.find(ns.b()).exists()).toBe(true);
  expect(wrapper.find('.devui-tags').exists()).toBe(true);
  expect(wrapper.find('.devui-tag-list').exists()).toBe(true);
  expect(wrapper.find('.devui-input').exists()).toBe(true);
@@ -49,6 +52,8 @@ describe('DTagInput', () => {
  state.tags[0] = { cname: 'X.Zhang' };
  await nextTick();
  expect(itemA.text()).toBe('X.Zhang');
+
+ wrapper.unmount();
  });
 
  it('tag-input show suggestion work', async () => {
@@ -58,14 +63,19 @@ describe('DTagInput', () => {
  ],
  suggestionList: [
  { cname: 'b' },
- ]
+ ],
  });
  const wrapper = customMount(state);
  const input = wrapper.find('input.devui-input');
 
  expect(wrapper.find('.devui-suggestion-list').exists()).toBe(false);
  await input.trigger('focus');
- expect(wrapper.find('.devui-suggestion-list').exists()).toBe(true);
+
+ // 是否存在 devui-suggestion-list
+ const suggestionList = !!document.querySelectorAll('.devui-suggestion-list')[0];
+ expect(suggestionList).toBe(true);
+
+ wrapper.unmount();
  });
 
  it('tag-input disabled work', async () => {
@@ -79,19 +89,21 @@ describe('DTagInput', () => {
  props: {
  tags,
  suggestionList,
- disabled: false
- }
+ disabled: false,
+ },
  });
 
  expect(wrapper.find('.devui-disabled').exists()).toBe(false);
  expect(wrapper.find('.devui-input').isVisible()).toBe(true);
 
  await wrapper.setProps({
- disabled: true
+ disabled: true,
  });
  expect(wrapper.find('.devui-disabled').exists()).toBe(true);
  expect(wrapper.find('.devui-input').isVisible()).toBe(false);
  expect(wrapper.find('.remove-button').exists()).toBe(false);
+
+ wrapper.unmount();
  });
 
  it('tag-input maxTags work', () => {
@@ -106,11 +118,13 @@ describe('DTagInput', () => {
  props: {
  tags,
  suggestionList,
- maxTags: 1
- }
+ maxTags: 1,
+ },
  });
 
  expect(wrapper.find('input').attributes('disabled')).toBe('');
+
+ wrapper.unmount();
  });
 
  it('tag-input removeTag work', async () => {
@@ -121,14 +135,16 @@ describe('DTagInput', () => {
  ],
  suggestionList: [
  { cname: 'c' },
- ]
+ ],
  });
  const wrapper = customMount(state);
  const removeSvg = wrapper.find('.remove-button');
- await removeSvg.trigger('mousedown');
+ await removeSvg.trigger('click');
  expect(wrapper.findAll('.devui-tag-item').length).toBe(1);
  expect(state.tags.length).toBe(1);
  expect(state.suggestionList.length).toBe(2);
+
+ wrapper.unmount();
  });
 
  it('tag-input keydown work', async () => {
@@ -139,8 +155,8 @@ describe('DTagInput', () => {
  ],
  suggestionList: [
  { cname: 'c' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
  });
  const wrapper = customMount(state);
  const input = wrapper.find('input');
@@ -154,6 +170,8 @@ describe('DTagInput', () => {
  expect(state.tags.length).toBe(4);
  expect(state.tags[3].cname).toBe('xyz');
  expect(state.suggestionList.length).toBe(1);
+
+ wrapper.unmount();
  });
 
  it('tag-input filter suggestion work', async () => {
@@ -165,22 +183,27 @@ describe('DTagInput', () => {
  suggestionList: [
  { cname: 'x' },
  { cname: 'xy' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
  });
  const wrapper = customMount(state);
  const input = wrapper.find('input');
 
  await input.trigger('focus');
- expect(wrapper.findAll('.devui-suggestion-item').length).toBe(3);
+ let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList.length).toBe(3);
 
  await input.setValue('xy');
  await input.trigger('input');
- expect(wrapper.findAll('.devui-suggestion-item').length).toBe(2);
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList.length).toBe(2);
 
  await input.setValue('xxx');
  await input.trigger('input');
- expect(wrapper.findAll('.devui-suggestion-item.devui-disabled').length).toBe(1);
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList.length).toBe(1);
+
+ wrapper.unmount();
  });
 
  it('tag-input click suggestion work', async () => {
@@ -192,17 +215,20 @@ describe('DTagInput', () => {
  suggestionList: [
  { cname: 'x' },
  { cname: 'yyy' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
  });
  const wrapper = customMount(state);
  await wrapper.find('input').trigger('focus');
- const yyy = wrapper.findAll('.devui-suggestion-item')[1];
+ const suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ const yyy = suggestionList[1];
+ yyy.dispatchEvent(new Event('click'));
 
- await yyy.trigger('mousedown');
  expect(state.tags.length).toBe(3);
  expect(state.tags[2].cname).toBe('yyy');
  expect(state.suggestionList.length).toBe(2);
+
+ wrapper.unmount();
  });
 
  it('tag-input arrow work', async () => {
@@ -214,24 +240,31 @@ describe('DTagInput', () => {
  suggestionList: [
  { cname: 'x' },
  { cname: 'yyy' },
- { cname: 'xyz' }
- ]
+ { cname: 'xyz' },
+ ],
  });
  const wrapper = customMount(state);
  const input = wrapper.find('input');
  await input.trigger('focus');
+ let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ // 获取焦点默认第一个选中
+ expect(suggestionList[0].className).toContain('selected');
 
- expect(wrapper.findAll('.devui-suggestion-item')[0].classes()).toContain('selected');
-
+ // 按下 下箭头，选中第二个数组第一个
  await input.trigger('keydown', { key: 'ArrowDown' });
- expect(wrapper.findAll('.devui-suggestion-item')[1].classes()).toContain('selected');
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList[1].className).toContain('selected');
 
  await input.trigger('keydown', { key: 'ArrowUp' });
  await input.trigger('keydown', { key: 'ArrowUp' });
- expect(wrapper.findAll('.devui-suggestion-item')[2].classes()).toContain('selected');
+ suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ expect(suggestionList[2].className).toContain('selected');
 
+ // 按下Enter选中数据
  await input.trigger('keydown', { key: 'Enter' });
  expect(state.tags[2].cname).toBe('xyz');
  expect(state.suggestionList.length).toBe(2);
+
+ wrapper.unmount();
  });
 });