From 1356f66ee1920ed296316773a56772fea6f517ca Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Fri, 8 Jan 2021 17:30:37 +0800 Subject: [PATCH] test(Area): update test cases --- .../test/__snapshots__/index.legacy.js.snap | 407 ------------------ .../test/__snapshots__/index.spec.js.snap | 203 +++++++++ src/area/test/index.legacy.js | 147 ------- src/area/test/index.spec.js | 145 +++++++ 4 files changed, 348 insertions(+), 554 deletions(-) delete mode 100644 src/area/test/__snapshots__/index.legacy.js.snap create mode 100644 src/area/test/__snapshots__/index.spec.js.snap delete mode 100644 src/area/test/index.legacy.js create mode 100644 src/area/test/index.spec.js diff --git a/src/area/test/__snapshots__/index.legacy.js.snap b/src/area/test/__snapshots__/index.legacy.js.snap deleted file mode 100644 index e29ea9587..000000000 --- a/src/area/test/__snapshots__/index.legacy.js.snap +++ /dev/null @@ -1,407 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`change option 1`] = ` -
-
- -
-
-
    -
  • -
    北京市
    -
    • -
  • -
    天津市
    -
    • -
-
-
-
    -
  • -
    北京市
    -
    • -
  • -
    县
    -
    • -
-
-
-
    -
  • -
    东城区
    -
    • -
  • -
    西城区
    -
    • -
-
-
-
-
- -
-`; - -exports[`change option 2`] = ` -
-
- -
-
-
    -
  • -
    北京市
    -
    • -
  • -
    天津市
    -
    • -
-
-
-
    -
  • -
    天津市
    -
    • -
  • -
    县
    -
    • -
-
-
-
    -
  • -
    和平区
    -
    • -
  • -
    河东区
    -
    • -
-
-
-
-
- -
-`; - -exports[`change option 3`] = ` -
-
- -
-
-
    -
  • -
    北京市
    -
    • -
  • -
    天津市
    -
    • -
-
-
-
    -
  • -
    天津市
    -
    • -
  • -
    县
    -
    • -
-
-
-
    -
  • -
    和平区
    -
    • -
  • -
    河东区
    -
    • -
-
-
-
-
- -
-`; - -exports[`columns-num prop 1`] = ` -
-
- -
-
-
    -
  • -
    北京市
    -
    • -
  • -
    天津市
    -
    • -
-
-
-
    -
  • -
    北京市
    -
    • -
  • -
    县
    -
    • -
-
-
-
-
- -
-`; - -exports[`columns-top、columns-bottom slot 1`] = ` -
-
- Top
-
-
    -
    -
    -
      -
      -
      -
        -
        -
        -
        -
        Bottom - -
        -`; - -exports[`reset method 1`] = ` -
        -
        - -
        -
        -
          -
        • -
          北京市
          -
          • -
        • -
          天津市
          -
          • -
        -
        -
        -
          -
        • -
          天津市
          -
          • -
        • -
          县
          -
          • -
        -
        -
        -
          -
        • -
          蓟县
          -
          • -
        -
        -
        -
        -
        - -
        -`; - -exports[`reset method 2`] = ` -
        -
        - -
        -
        -
          -
        • -
          北京市
          -
          • -
        • -
          天津市
          -
          • -
        -
        -
        -
          -
        • -
          北京市
          -
          • -
        • -
          县
          -
          • -
        -
        -
        -
          -
        • -
          东城区
          -
          • -
        • -
          西城区
          -
          • -
        -
        -
        -
        -
        - -
        -`; - -exports[`title slot 1`] = ` -
        -
        Custom Title
        - -
        -
        -
          -
          -
          -
            -
            -
            -
              -
              -
              -
              -
              - -
              -`; - -exports[`watch areaList & code 1`] = ` -
              -
              - -
              -
              -
                -
              • -
                北京市
                -
                • -
              • -
                天津市
                -
                • -
              -
              -
              -
                -
              • -
                北京市
                -
                • -
              • -
                县
                -
                • -
              -
              -
              -
                -
              • -
                东城区
                -
                • -
              • -
                西城区
                -
                • -
              -
              -
              -
              -
              - -
              -`; - -exports[`watch areaList & code 2`] = ` -
              -
              - -
              -
              -
                -
              • -
                北京市
                -
                • -
              • -
                天津市
                -
                • -
              -
              -
              -
                -
              • -
                北京市
                -
                • -
              • -
                县
                -
                • -
              -
              -
              -
                -
              • -
                东城区
                -
                • -
              • -
                西城区
                -
                • -
              -
              -
              -
              -
              - -
              -`; - -exports[`watch areaList & code 3`] = ` -
              -
              - -
              -
              -
                -
              • -
                北京市
                -
                • -
              • -
                天津市
                -
                • -
              -
              -
              -
                -
              • -
                北京市
                -
                • -
              • -
                县
                -
                • -
              -
              -
              -
                -
              • -
                东城区
                -
                • -
              • -
                西城区
                -
                • -
              -
              -
              -
              -
              - -
              -`; diff --git a/src/area/test/__snapshots__/index.spec.js.snap b/src/area/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..69c356191 --- /dev/null +++ b/src/area/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,203 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`should render columns-top、columns-bottom slot correctly 1`] = ` +
              +
              + + +
              + Top +
              +
              +
                +
              +
              +
              +
                +
              +
              +
              +
                +
              +
              +
              +
              +
              +
              +
              + Bottom +
              +`; + +exports[`should render title slot correctly 1`] = ` +
              + + Custom Title + +
              +`; + +exports[`should render two columns when columns-num prop is two 1`] = ` +
              +
              + + +
              +
              +
              +
                +
              • +
                + 北京市 +
                +
                • +
              • +
                + 天津市 +
                +
                • +
              +
              +
              +
                +
              • +
                + 北京市 +
                +
                • +
              • +
                + 县 +
                +
                • +
              +
              +
              +
              +
              +
              +
              +
              +`; + +exports[`should reset selected option after calling the reset method 1`] = ` +
            • +
              + 天津市 +
              +
              • +`; + +exports[`should reset selected option after calling the reset method 2`] = ` +
            • +
              + 北京市 +
              +
              • +`; + +exports[`should watch value prop and render correctly 1`] = ` +
            • +
              + 北京市 +
              +
              • +`; + +exports[`should watch value prop and render correctly 2`] = ` +
            • +
              + 天津市 +
              +
              • +`; + +exports[`should watch value prop and render correctly 3`] = ` +
            • +
              + 北京市 +
              +
              • +`; diff --git a/src/area/test/index.legacy.js b/src/area/test/index.legacy.js deleted file mode 100644 index cc2ab165b..000000000 --- a/src/area/test/index.legacy.js +++ /dev/null @@ -1,147 +0,0 @@ -import Area from '..'; -import areaList from '../demo/area-simple'; -import { mount, later, triggerDrag } from '../../../test'; - -const firstOption = [ - { code: '110000', name: '北京市' }, - { code: '110100', name: '北京市' }, - { code: '110101', name: '东城区' }, -]; - -const secondOption = [ - { code: '120000', name: '天津市' }, - { code: '120100', name: '天津市' }, - { code: '120101', name: '和平区' }, -]; - -test('confirm & cancel event', async () => { - const onConfirm = jest.fn(); - const onCancel = jest.fn(); - const wrapper = mount(Area, { - props: { - areaList, - }, - listeners: { - confirm: onConfirm, - cancel: onCancel, - }, - }); - - await later(); - - wrapper.find('.van-picker__confirm').trigger('click'); - wrapper.find('.van-picker__cancel').trigger('click'); - - expect(onConfirm).toHaveBeenCalledWith(firstOption, [0, 0, 0]); - expect(onCancel).toHaveBeenCalledWith(firstOption, [0, 0, 0]); -}); - -test('watch areaList & code', async () => { - const wrapper = mount(Area, { - props: { - areaList, - }, - }); - - expect(wrapper.html()).toMatchSnapshot(); - wrapper.setProps({ value: '110117' }); - - await later(); - expect(wrapper.html()).toMatchSnapshot(); - - wrapper.setProps({ - value: '', - }); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('change option', () => { - const onChange = jest.fn(); - const wrapper = mount(Area, { - props: { - areaList, - }, - listeners: { - change: onChange, - }, - }); - - const columns = wrapper.findAll('.van-picker-column'); - expect(wrapper.html()).toMatchSnapshot(); - - triggerDrag(columns[0], 0, -100); - columns[0].find('ul').trigger('transitionend'); - expect(wrapper.html()).toMatchSnapshot(); - - triggerDrag(columns[2], 0, -100); - columns[2].find('ul').trigger('transitionend'); - expect(wrapper.html()).toMatchSnapshot(); - - expect(onChange.mock.calls[0][1]).toEqual(secondOption); -}); - -test('getValues method', () => { - const wrapper = mount(Area, { - props: { - areaList, - }, - created() { - expect(this.getValues()).toEqual([]); - }, - }); - - expect(wrapper.vm.getValues()).toEqual(firstOption); -}); - -test('reset method', async () => { - const wrapper = mount(Area, { - props: { - areaList, - value: '120225', - }, - }); - - await later(); - expect(wrapper.html()).toMatchSnapshot(); - wrapper.vm.reset(); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('columns-num prop', async () => { - const wrapper = mount(Area, { - props: { - areaList, - columnsNum: 3, - }, - }); - - wrapper.setProps({ - columnsNum: 2, - }); - - await later(); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('title slot', async () => { - const wrapper = mount(Area, { - slots: { - title: () => 'Custom Title', - }, - }); - - await later(); - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('columns-top、columns-bottom slot', async () => { - const wrapper = mount(Area, { - slots: { - 'columns-top': 'Top', - 'columns-bottom': 'Bottom', - }, - }); - - await later(); - expect(wrapper.html()).toMatchSnapshot(); -}); diff --git a/src/area/test/index.spec.js b/src/area/test/index.spec.js new file mode 100644 index 000000000..bf1a78cf0 --- /dev/null +++ b/src/area/test/index.spec.js @@ -0,0 +1,145 @@ +import Area from '..'; +import areaList from '../demo/area-simple'; +import { mount, later, triggerDrag } from '../../../test'; + +const firstOption = [ + { code: '110000', name: '北京市' }, + { code: '110100', name: '北京市' }, + { code: '110101', name: '东城区' }, +]; + +const secondOption = [ + { code: '120000', name: '天津市' }, + { code: '120100', name: '天津市' }, + { code: '120101', name: '和平区' }, +]; + +test('should emit confirm event after click the confirm button', () => { + const wrapper = mount(Area, { + props: { + areaList, + }, + }); + + wrapper.find('.van-picker__confirm').trigger('click'); + expect(wrapper.emitted('confirm')[0]).toEqual([firstOption, [0, 0, 0]]); +}); + +test('should emit cancel event after click the cancel button', () => { + const onCancel = jest.fn(); + const wrapper = mount(Area, { + props: { + areaList, + onCancel, + }, + }); + + wrapper.find('.van-picker__cancel').trigger('click'); + expect(onCancel).toHaveBeenLastCalledWith(firstOption, [0, 0, 0]); +}); + +test('should watch value prop and render correctly', async () => { + const wrapper = mount(Area, { + props: { + areaList, + }, + }); + + await later(); + expect( + wrapper.find('.van-picker-column__item--selected').html() + ).toMatchSnapshot(); + await wrapper.setProps({ value: '120225' }); + + await later(); + expect( + wrapper.find('.van-picker-column__item--selected').html() + ).toMatchSnapshot(); + + await wrapper.setProps({ value: '' }); + expect( + wrapper.find('.van-picker-column__item--selected').html() + ).toMatchSnapshot(); +}); + +test('should emit change event after dragging options', () => { + const wrapper = mount(Area, { + props: { + areaList, + }, + }); + + const columns = wrapper.findAll('.van-picker-column'); + triggerDrag(columns[0], 0, -100); + columns[0].find('ul').trigger('transitionend'); + triggerDrag(columns[2], 0, -100); + columns[2].find('ul').trigger('transitionend'); + + expect(wrapper.emitted('change')[0][0]).toEqual(secondOption); +}); + +test('should return current values when calling getValues method', () => { + const wrapper = mount(Area, { + props: { + areaList, + }, + }); + + expect(wrapper.vm.getValues()).toEqual(firstOption); +}); + +test('should reset selected option after calling the reset method', async () => { + const wrapper = mount(Area, { + props: { + areaList, + value: '120225', + }, + }); + + await later(); + expect( + wrapper.find('.van-picker-column__item--selected').html() + ).toMatchSnapshot(); + + wrapper.vm.reset(); + await later(); + expect( + wrapper.find('.van-picker-column__item--selected').html() + ).toMatchSnapshot(); +}); + +test('should render two columns when columns-num prop is two', async () => { + const wrapper = mount(Area, { + props: { + areaList, + columnsNum: 3, + }, + }); + + expect(wrapper.findAll('.van-picker-column').length).toEqual(3); + + await wrapper.setProps({ columnsNum: 2 }); + expect(wrapper.findAll('.van-picker-column').length).toEqual(2); + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('should render title slot correctly', () => { + const wrapper = mount(Area, { + slots: { + title: () => 'Custom Title', + }, + }); + + expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot(); +}); + +test('should render columns-top、columns-bottom slot correctly', () => { + const wrapper = mount(Area, { + slots: { + 'columns-top': () => 'Top', + 'columns-bottom': () => 'Bottom', + }, + }); + + expect(wrapper.html()).toMatchSnapshot(); +});