test: add radio & tabs tests

components/radio/__tests__/__snapshots__/group.test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio all children should have a name property 1`] = `
+<div class="ant-radio-group ant-radio-group-default">
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input name="radiogroup" type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
+</div>
+`;
+
+exports[`Radio fire change events when value changes 1`] = `
+<div class="ant-radio-group ant-radio-group-default">
+  <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
+</div>
+`;
+
+exports[`Radio fire change events when value changes 2`] = `
+<div class="ant-radio-group ant-radio-group-default">
+  <label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>A</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>B</span></label>
+  <label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>C</span></label>
+</div>
+`;

components/radio/__tests__/__snapshots__/radio.test.js.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio should render correctly 1`] = `<label class="ant-radio-wrapper customized"><span class="ant-radio"><input type="radio" class="ant-radio-input"><span class="ant-radio-inner"></span></span><span>Test</span></label>`;

components/radio/__tests__/group.test.js

@@ -0,0 +1,148 @@
+import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
+import Radio from '../radio'
+import RadioGroup from '../group'
+
+describe('Radio', () => {
+  function createRadioGroup (props, listeners = {}) {
+    return {
+      props: ['value'],
+      render () {
+        const groupProps = { ...props }
+        if (this.value !== undefined) {
+          groupProps.value = this.value
+        }
+        return (
+          <RadioGroup
+            ref='radioGroup'
+            {...{ props: groupProps, on: listeners }}
+          >
+            <Radio value='A'>A</Radio>
+            <Radio value='B'>B</Radio>
+            <Radio value='C'>C</Radio>
+          </RadioGroup>
+        )
+      },
+    }
+  }
+
+  function createRadioGroupByOption () {
+    const options = [
+      { label: 'A', value: 'A' },
+      { label: 'B', value: 'B' },
+      { label: 'C', value: 'C' },
+    ]
+    return {
+      render () {
+        return (
+          <RadioGroup
+            options={options}
+          />
+        )
+      },
+    }
+  }
+
+  it('responses hover events', () => {
+    const onMouseEnter = jest.fn()
+    const onMouseLeave = jest.fn()
+
+    const wrapper = mount({
+      render () {
+        return (
+          <RadioGroup
+            onMouseenter={onMouseEnter}
+            onMouseleave={onMouseLeave}
+          >
+            <Radio />
+          </RadioGroup>
+        )
+      },
+    })
+
+    wrapper.trigger('mouseenter')
+    expect(onMouseEnter).toHaveBeenCalled()
+
+    wrapper.trigger('mouseleave')
+    expect(onMouseLeave).toHaveBeenCalled()
+  })
+
+  it('fire change events when value changes', async () => {
+    const onChange = jest.fn()
+    const props = {}
+    const wrapper = mount(
+      createRadioGroup(props, {
+        change: onChange,
+      }),
+      { sync: false }
+    )
+    let radios = null
+    await asyncExpect(() => {
+      radios = wrapper.findAll('input')
+      // uncontrolled component
+      wrapper.vm.$refs.radioGroup.stateValue = 'B'
+      // wrapper.setData({ value: 'B' })
+      radios.at(0).trigger('change')
+      expect(onChange.mock.calls.length).toBe(1)
+    })
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+    await asyncExpect(() => {
+      // controlled component
+      wrapper.setProps({ value: 'A' })
+      radios.at(1).trigger('change')
+      expect(onChange.mock.calls.length).toBe(2)
+    })
+    await asyncExpect(() => {
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+
+  // it('won\'t fire change events when value not changes', async () => {
+  //   const onChange = jest.fn()
+
+  //   const wrapper = mount(
+  //     createRadioGroup({}, {
+  //       change: onChange,
+  //     }),
+  //     { sync: false }
+  //   )
+  //   const radios = wrapper.findAll('input')
+  //   await asyncExpect(() => {
+  //     // uncontrolled component
+  //     wrapper.vm.$refs.radioGroup.stateValue = 'B'
+  //     radios.at(1).trigger('change')
+  //     expect(onChange.mock.calls.length).toBe(0)
+  //   })
+
+  //   await asyncExpect(() => {
+
+  //   }, 0)
+
+  //   // // controlled component
+  //   // wrapper.setProps({ value: 'A' })
+  //   // radios.at(0).trigger('change')
+  //   // expect(onChange.mock.calls.length).toBe(0)
+  // })
+
+  it('optional should correct render', () => {
+    const wrapper = mount(
+      createRadioGroupByOption()
+    )
+    const radios = wrapper.findAll('input')
+
+    expect(radios.length).toBe(3)
+  })
+
+  it('all children should have a name property', () => {
+    const GROUP_NAME = 'radiogroup'
+    const wrapper = mount(
+      createRadioGroup({ name: GROUP_NAME })
+    )
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(wrapper.findAll('input[type="radio"]').wrappers.forEach((el) => {
+      expect(el.element.name).toEqual(GROUP_NAME)
+    }))
+  })
+})

components/radio/__tests__/radio.test.js

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
+import Radio from '../radio'
+import focusTest from '../../../tests/shared/focusTest'
+
+describe('Radio', () => {
+  focusTest(Radio)
+
+  it('should render correctly', () => {
+    const wrapper = mount({
+      render () {
+        return <Radio class='customized'>Test</Radio>
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('responses hover events', async () => {
+    const onMouseEnter = jest.fn()
+    const onMouseLeave = jest.fn()
+
+    const wrapper = mount({
+      render () {
+        return <Radio
+          onMouseenter={onMouseEnter}
+          onMouseleave={onMouseLeave}
+        />
+      },
+    }, { sync: false })
+    await asyncExpect(() => {
+      wrapper.trigger('mouseenter')
+    })
+    await asyncExpect(() => {
+      expect(onMouseEnter).toHaveBeenCalled()
+    })
+    wrapper.trigger('mouseleave')
+    await asyncExpect(() => {
+      expect(onMouseLeave).toHaveBeenCalled()
+    })
+  })
+})

components/tabs/__tests__/__snapshots__/index.test.js.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tabs tabPosition remove card 1`] = `
+<div class="ant-tabs ant-tabs-left ant-tabs-vertical ant-tabs-line no-flex">
+  <div role="tablist" tabindex="0" class="ant-tabs-bar">
+    <div class="ant-tabs-nav-container"><span unselectable="unselectable" class="ant-tabs-tab-prev ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-prev-icon"></span></span><span unselectable="unselectable" class="ant-tabs-tab-next ant-tabs-tab-btn-disabled"><span class="ant-tabs-tab-next-icon"></span></span>
+      <div
+        class="ant-tabs-nav-wrap">
+        <div class="ant-tabs-nav-scroll">
+          <div class="ant-tabs-nav ant-tabs-nav-animated">
+            <div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
+            <div role="tab" aria-disabled="false" aria-selected="true" class="ant-tabs-tab-active ant-tabs-tab">foo</div>
+          </div>
+        </div>
+    </div>
+  </div>
+  <div class="ant-tabs-extra-content">xxx</div>
+</div>
+<div class="ant-tabs-content ant-tabs-content-animated" style="margin-top: 0%;">
+  <div role="tabpanel" aria-hidden="false" class="ant-tabs-tabpane ant-tabs-tabpane-active">foo</div>
+</div>
+</div>
+`;

components/tabs/__tests__/index.test.js

@@ -0,0 +1,50 @@
+import { mount } from '@vue/test-utils'
+import { asyncExpect } from '@/tests/utils'
+import Tabs from '..'
+
+const { TabPane } = Tabs
+
+describe('Tabs', () => {
+  describe('editable-card', () => {
+    let handleEdit
+    let wrapper
+
+    beforeEach(() => {
+      handleEdit = jest.fn()
+      wrapper = mount({
+        render () {
+          return (
+            <Tabs type='editable-card' onEdit={handleEdit}>
+              <TabPane tab='foo' key='1'>foo</TabPane>
+            </Tabs>
+          )
+        },
+      })
+    })
+
+    it('add card', () => {
+      wrapper.find('.ant-tabs-new-tab').trigger('click')
+      expect(handleEdit.mock.calls[0][1]).toBe('add')
+    })
+
+    it('remove card', () => {
+      wrapper.find('.anticon-close').trigger('click')
+      expect(handleEdit).toBeCalledWith('1', 'remove')
+    })
+  })
+
+  describe('tabPosition', () => {
+    it('remove card', () => {
+      const wrapper = mount({
+        render () {
+          return (
+            <Tabs tabPosition='left' tabBarExtraContent='xxx'>
+              <TabPane tab='foo' key='1'>foo</TabPane>
+            </Tabs>
+          )
+        },
+      })
+      expect(wrapper.html()).toMatchSnapshot()
+    })
+  })
+})