feat(tag-input): 测试用例中的 class 写成变量方便维护

Author: vaebe

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

@@ -14,6 +14,10 @@ jest.mock('../../locale/create', () => ({
 }));
 
 const ns = useNamespace('tag-input', true);
+const suggestionListCls = ns.e('suggestion-list');
+const suggestionListItemCls = ns.e('suggestion-list__item');
+const tagsItemCls = ns.e('tags__item');
+const inputCls = ns.e('input');
 
 const customMount = (state: StateType) => mount({
  components: { DTagInput },
@@ -48,9 +52,9 @@ describe('DTagInput', () => {
  const wrapper = customMount(state);
  expect(wrapper.find(ns.b()).exists()).toBe(true);
  expect(wrapper.find(ns.e('tags')).exists()).toBe(true);
- expect(wrapper.find(ns.e('input')).exists()).toBe(true);
+ expect(wrapper.find(inputCls).exists()).toBe(true);
 
- const itemA = wrapper.find(ns.e('tags__item'));
+ const itemA = wrapper.find(tagsItemCls);
  expect(itemA.exists()).toBe(true);
  expect(itemA.text()).toBe('Y.Chen');
 
@@ -71,13 +75,13 @@ describe('DTagInput', () => {
  ],
  });
  const wrapper = customMount(state);
- const input = wrapper.find(ns.e('input'));
+ const input = wrapper.find(inputCls);
 
- expect(wrapper.find(ns.e('suggestion-list')).exists()).toBe(false);
+ expect(wrapper.find(suggestionListCls).exists()).toBe(false);
  await input.trigger('focus');
 
  // 是否存在 devui-suggestion-list
- const suggestionList = !!document.querySelectorAll(ns.e('suggestion-list'))[0];
+ const suggestionList = !!document.querySelectorAll(suggestionListCls)[0];
  expect(suggestionList).toBe(true);
 
  wrapper.unmount();
@@ -99,7 +103,7 @@ describe('DTagInput', () => {
  });
 
  expect(wrapper.find('.is-disabled').exists()).toBe(false);
- expect(wrapper.find(ns.e('input')).isVisible()).toBe(true);
+ expect(wrapper.find(inputCls).isVisible()).toBe(true);
 
  await wrapper.setProps({
  disabled: true,
@@ -150,7 +154,7 @@ describe('DTagInput', () => {
  wrapper.find('.remove-button').trigger('click');
 
  nextTick(() => {
- expect(wrapper.findAll(ns.e('tags__item')).length).toBe(1);
+ expect(wrapper.findAll(tagsItemCls).length).toBe(1);
  expect(state.tags.length).toBe(1);
  expect(state.suggestionList.length).toBe(2);
 
@@ -201,17 +205,17 @@ describe('DTagInput', () => {
  const input = wrapper.find('input');
 
  await input.trigger('focus');
- let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+ let suggestionList = document.querySelectorAll(suggestionListItemCls);
  expect(suggestionList.length).toBe(3);
 
  await input.setValue('xy');
  await input.trigger('input');
- suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+ suggestionList = document.querySelectorAll(suggestionListItemCls);
  expect(suggestionList.length).toBe(2);
 
  await input.setValue('xxx');
  await input.trigger('input');
- suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+ suggestionList = document.querySelectorAll(suggestionListItemCls);
  expect(suggestionList.length).toBe(1);
 
  wrapper.unmount();
@@ -231,7 +235,7 @@ describe('DTagInput', () => {
  });
  const wrapper = customMount(state);
  await wrapper.find('input').trigger('focus');
- const suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+ const suggestionList = document.querySelectorAll(suggestionListItemCls);
  const yyy = suggestionList[1];
  yyy.dispatchEvent(new Event('click'));
 
@@ -257,18 +261,18 @@ describe('DTagInput', () => {
  const wrapper = customMount(state);
  const input = wrapper.find('input');
  await input.trigger('focus');
- let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+ let suggestionList = document.querySelectorAll(suggestionListItemCls);
  // 获取焦点默认第一个选中
  expect(suggestionList[0].className).toContain('selected');
 
  // 按下 下箭头，选中第二个数组第一个
  await input.trigger('keydown', { key: 'ArrowDown' });
- suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+ suggestionList = document.querySelectorAll(suggestionListItemCls);
  expect(suggestionList[1].className).toContain('selected');
 
  await input.trigger('keydown', { key: 'ArrowUp' });
  await input.trigger('keydown', { key: 'ArrowUp' });
- suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
+ suggestionList = document.querySelectorAll(suggestionListItemCls);
  expect(suggestionList[2].className).toContain('selected');
 
  // 按下Enter选中数据