ant-design-vue/components/cascader/__tests__/index.test.js

import { asyncExpect } from '@/tests/utils';
import { mount } from '@vue/test-utils';
import KeyCode from '../../_util/KeyCode';
import Cascader from '..';
import focusTest from '../../../tests/shared/focusTest';

function $$(className) {
  return document.body.querySelectorAll(className);
}
const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

function filter(inputValue, path) {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
}

describe('Cascader', () => {
  focusTest(Cascader);

  it('popup correctly when panel is hidden', async () => {
    const wrapper = mount(Cascader, { propsData: { options }, sync: false });
    const CascaderWrapper = mount(
      {
        render() {
          return wrapper.find({ name: 'Trigger' }).vm.getComponent();
        },
      },
      { sync: false },
    );
    await asyncExpect(() => {
      expect(CascaderWrapper.html()).toMatchSnapshot();
    });
  });

  it('popup correctly when panel is open', async () => {
    const wrapper = mount(Cascader, { propsData: { options }, sync: false });
    await asyncExpect(() => {
      wrapper.find('input').trigger('click');
    });
    let CascaderWrapper = null;
    await asyncExpect(() => {
      CascaderWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });
    await asyncExpect(() => {
      expect(CascaderWrapper.html()).toMatchSnapshot();
    });
  });

  it('support controlled mode', async () => {
    const wrapper = mount(Cascader, { propsData: { options }, sync: false });
    await asyncExpect(() => {
      wrapper.setProps({
        value: ['zhejiang', 'hangzhou', 'xihu'],
      });
    });
    await asyncExpect(() => {
      expect(wrapper.html()).toMatchSnapshot();
    });
  });

  it('popup correctly with defaultValue', async () => {
    const wrapper = mount(Cascader, {
      propsData: {
        options,
        defaultValue: ['zhejiang', 'hangzhou'],
      },
      sync: false,
    });

    await asyncExpect(() => {
      wrapper.find('input').trigger('click');
    });
    let CascaderWrapper = null;
    await asyncExpect(() => {
      CascaderWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });

    await asyncExpect(() => {
      expect(CascaderWrapper.html()).toMatchSnapshot();
    });
  });

  it('can be selected', async () => {
    const wrapper = mount(Cascader, { propsData: { options }, sync: false });
    await asyncExpect(() => {
      wrapper.find('input').trigger('click');
    });
    let popupWrapper = null;
    await asyncExpect(() => {
      popupWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });
    await asyncExpect(() => {
      popupWrapper
        .findAll('.ant-cascader-menu')
        .at(0)
        .findAll('.ant-cascader-menu-item')
        .at(0)
        .trigger('click');
    });
    await asyncExpect(() => {
      popupWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });

    await asyncExpect(() => {
      expect(popupWrapper.html()).toMatchSnapshot();
    });
    await asyncExpect(() => {
      popupWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });
    await asyncExpect(() => {
      popupWrapper
        .findAll('.ant-cascader-menu')
        .at(1)
        .findAll('.ant-cascader-menu-item')
        .at(0)
        .trigger('click');
    });
    await asyncExpect(() => {
      popupWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });
    await asyncExpect(() => {
      expect(popupWrapper.html()).toMatchSnapshot();
    });
    await asyncExpect(() => {
      popupWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });
    await asyncExpect(() => {
      popupWrapper
        .findAll('.ant-cascader-menu')
        .at(2)
        .findAll('.ant-cascader-menu-item')
        .at(0)
        .trigger('click');
    });
    await asyncExpect(() => {
      popupWrapper = mount(
        {
          render() {
            return wrapper.find({ name: 'Trigger' }).vm.getComponent();
          },
        },
        { sync: false },
      );
    });
    await asyncExpect(() => {
      expect(popupWrapper.html()).toMatchSnapshot();
    });
  });

  it('backspace should work with `Cascader[showSearch]`', async () => {
    const wrapper = mount(Cascader, { propsData: { options, showSearch: true }, sync: false });
    await asyncExpect(() => {
      wrapper.find('input').element.value = '123';
      wrapper.find('input').trigger('input');
    });
    await asyncExpect(() => {
      expect(wrapper.vm.inputValue).toBe('123');
    });
    await asyncExpect(() => {
      wrapper.find('input').element.keyCode = KeyCode.BACKSPACE;
      wrapper.find('input').trigger('keydown');
    });
    await asyncExpect(() => {
      // trigger onKeyDown will not trigger onChange by default, so the value is still '123'
      expect(wrapper.vm.inputValue).toBe('123');
    });
  });

  describe('limit filtered item count', () => {
    beforeEach(() => {
      document.body.outerHTML = '';
    });

    afterEach(() => {
      document.body.outerHTML = '';
    });

    it('limit with positive number', async () => {
      const wrapper = mount(Cascader, {
        propsData: { options, showSearch: { filter, limit: 1 } },
        sync: false,
        attachToDocument: true,
      });
      wrapper.find('input').trigger('click');
      wrapper.find('input').element.value = 'a';
      wrapper.find('input').trigger('input');
      await asyncExpect(() => {
        expect($$('.ant-cascader-menu-item').length).toBe(1);
      }, 0);
    });

    it('not limit', async () => {
      const wrapper = mount(Cascader, {
        propsData: { options, showSearch: { filter, limit: false } },
        sync: false,
        attachToDocument: true,
      });
      wrapper.find('input').trigger('click');
      wrapper.find('input').element.value = 'a';
      wrapper.find('input').trigger('input');
      await asyncExpect(() => {
        expect($$('.ant-cascader-menu-item').length).toBe(2);
      }, 0);
    });

    it('negative limit', async () => {
      const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
      const wrapper = mount(Cascader, {
        propsData: { options, showSearch: { filter, limit: -1 } },
        sync: false,
        attachToDocument: true,
      });
      wrapper.find('input').trigger('click');
      wrapper.find('input').element.value = 'a';
      wrapper.find('input').trigger('input');
      await asyncExpect(() => {
        expect($$('.ant-cascader-menu-item').length).toBe(2);
      }, 0);
      expect(errorSpy).toBeCalledWith(
        "Warning: 'limit' of showSearch in Cascader should be positive number or false.",
      );
    });
  });
});