test: add Cascader test

7 years ago · 78f7c2e4b1
parent 5f06942217
commit 78f7c2e4b1
2 changed files with 292 additions and 0 deletions
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@ -0,0 +1,102 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Cascader can be selected 1`] = `
+<div>
+  <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
+    <div class="ant-cascader-menus-content">
+      <ul class="ant-cascader-menu">
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Hangzhou</li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader can be selected 2`] = `
+<div>
+  <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
+    <div class="ant-cascader-menus-content">
+      <ul class="ant-cascader-menu">
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader can be selected 3`] = `
+<div>
+  <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">
+    <div class="ant-cascader-menus-content">
+      <ul class="ant-cascader-menu">
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li title="West Lake" class="ant-cascader-menu-item ant-cascader-menu-item-active">West Lake</li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly when panel is hidden 1`] = `
+<div>
+  <div class="ant-cascader-menus  ant-cascader-menus-empty ant-cascader-menus-placement-bottomLeft" style="display: none; left: -999px; top: -995px;">
+    <div class="ant-cascader-menus-content"></div>
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly when panel is open 1`] = `
+<div>
+  <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
+    <div class="ant-cascader-menus-content">
+      <ul class="ant-cascader-menu">
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Zhejiang</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader popup correctly with defaultValue 1`] = `
+<div>
+  <div class="ant-cascader-menus  ant-cascader-menus-placement-bottomLeft" style="left: -999px; top: -995px;">
+    <div class="ant-cascader-menus-content">
+      <ul class="ant-cascader-menu">
+        <li title="Zhejiang" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Zhejiang</li>
+        <li title="Jiangsu" class="ant-cascader-menu-item ant-cascader-menu-item-expand">Jiangsu</li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li title="Hangzhou" class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active">Hangzhou</li>
+      </ul>
+      <ul class="ant-cascader-menu">
+        <li title="West Lake" class="ant-cascader-menu-item">West Lake</li>
+      </ul>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Cascader support controlled mode 1`] = `
+<span tabindex="0" class="ant-cascader-picker"><input value="" type="text" readonly="true" class="ant-input ant-cascader-input  ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span>
+<i class="anticon anticon-cross-circle ant-cascader-picker-clear"></i>
+<i class="anticon anticon-down ant-cascader-picker-arrow"></i>
+</span>
+`;
--- a/components/cascader/tests/index.test.js
+++ b/components/cascader/tests/index.test.js
@ -0,0 +1,190 @@
+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'
+
+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',
+    }],
+  }],
+}]
+
+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')
+    })
+  })
+})