feat(tag-input): 组件 class 使用 namespace

Author: vaebe

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

@@ -47,11 +47,10 @@ describe('DTagInput', () => {
  });
  const wrapper = customMount(state);
  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);
+ expect(wrapper.find(ns.e('tags')).exists()).toBe(true);
+ expect(wrapper.find(ns.e('input')).exists()).toBe(true);
 
- const itemA = wrapper.find('.devui-tag-item');
+ const itemA = wrapper.find(ns.e('tags__item'));
  expect(itemA.exists()).toBe(true);
  expect(itemA.text()).toBe('Y.Chen');
 
@@ -72,13 +71,13 @@ describe('DTagInput', () => {
  ],
  });
  const wrapper = customMount(state);
- const input = wrapper.find('input.devui-input');
+ const input = wrapper.find(ns.e('input'));
 
- expect(wrapper.find('.devui-suggestion-list').exists()).toBe(false);
+ expect(wrapper.find(ns.e('suggestion-list')).exists()).toBe(false);
  await input.trigger('focus');
 
  // 是否存在 devui-suggestion-list
- const suggestionList = !!document.querySelectorAll('.devui-suggestion-list')[0];
+ const suggestionList = !!document.querySelectorAll(ns.e('suggestion-list'))[0];
  expect(suggestionList).toBe(true);
 
  wrapper.unmount();
@@ -99,14 +98,16 @@ describe('DTagInput', () => {
  },
  });
 
- expect(wrapper.find('.devui-disabled').exists()).toBe(false);
- expect(wrapper.find('.devui-input').isVisible()).toBe(true);
+ expect(wrapper.find('.is-disabled').exists()).toBe(false);
+ expect(wrapper.find(ns.e('input')).isVisible()).toBe(true);
 
  await wrapper.setProps({
  disabled: true,
  });
- expect(wrapper.find('.devui-disabled').exists()).toBe(true);
- expect(wrapper.find('.devui-input').isVisible()).toBe(false);
+
+ expect(wrapper.find('.is-disabled').exists()).toBe(true);
+ // 禁用状态下不显示input
+ expect(wrapper.find(ns.e('input_hide')).exists()).toBe(true);
  expect(wrapper.find('.remove-button').exists()).toBe(false);
 
  wrapper.unmount();
@@ -146,7 +147,7 @@ describe('DTagInput', () => {
  const wrapper = customMount(state);
  const removeSvg = wrapper.find('.remove-button');
  await removeSvg.trigger('click');
- expect(wrapper.findAll('.devui-tag-item').length).toBe(1);
+ expect(wrapper.findAll(ns.e('tags__item')).length).toBe(1);
  expect(state.tags.length).toBe(1);
  expect(state.suggestionList.length).toBe(2);
 
@@ -196,17 +197,17 @@ describe('DTagInput', () => {
  const input = wrapper.find('input');
 
  await input.trigger('focus');
- let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
  expect(suggestionList.length).toBe(3);
 
  await input.setValue('xy');
  await input.trigger('input');
- suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
  expect(suggestionList.length).toBe(2);
 
  await input.setValue('xxx');
  await input.trigger('input');
- suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
  expect(suggestionList.length).toBe(1);
 
  wrapper.unmount();
@@ -226,7 +227,7 @@ describe('DTagInput', () => {
  });
  const wrapper = customMount(state);
  await wrapper.find('input').trigger('focus');
- const suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ const suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
  const yyy = suggestionList[1];
  yyy.dispatchEvent(new Event('click'));
 
@@ -252,18 +253,18 @@ describe('DTagInput', () => {
  const wrapper = customMount(state);
  const input = wrapper.find('input');
  await input.trigger('focus');
- let suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ let suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
  // 获取焦点默认第一个选中
  expect(suggestionList[0].className).toContain('selected');
 
  // 按下 下箭头，选中第二个数组第一个
  await input.trigger('keydown', { key: 'ArrowDown' });
- suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
  expect(suggestionList[1].className).toContain('selected');
 
  await input.trigger('keydown', { key: 'ArrowUp' });
  await input.trigger('keydown', { key: 'ArrowUp' });
- suggestionList = document.querySelectorAll('.devui-suggestion-item');
+ suggestionList = document.querySelectorAll(ns.e('suggestion-list__item'));
  expect(suggestionList[2].className).toContain('selected');
 
  // 按下Enter选中数据