From 5900affe37640f288ae61287afdb3d0752960d36 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 24 Jan 2022 16:09:08 +0800 Subject: [PATCH] test(Picker): update cascade test cases --- .../test/__snapshots__/cascade.spec.ts.snap | 93 +--------- packages/vant/src/picker/test/cascade.spec.ts | 171 +++++------------- 2 files changed, 51 insertions(+), 213 deletions(-) diff --git a/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap index 0fc3969c5..c35ce2d5e 100644 --- a/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap +++ b/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap @@ -1,17 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`disabled in cascade 1`] = ` -
  • -
    - A2 -
    -
    • -`; - exports[`should move to first option when all options are disabled 1`] = `
    @@ -45,7 +33,7 @@ exports[`should move to first option when all options are disabled 1`] = `
  • A2 @@ -69,7 +57,7 @@ exports[`should move to first option when all options are disabled 1`] = `
  • B2 @@ -88,80 +76,3 @@ exports[`should move to first option when all options are disabled 1`] = `
    • `; - -exports[`should move to next option when default option is disabled 1`] = ` -
    -
    - - -
    -
    -
    -
      -
    • -
      - A1 -
      -
      • -
    • -
      - A2 -
      -
      • -
    -
    -
    -
      -
    • -
      - B3 -
      -
      • -
    • -
      - B4 -
      -
      • -
    -
    -
    -
    -
    -
    -
    -
    -`; diff --git a/packages/vant/src/picker/test/cascade.spec.ts b/packages/vant/src/picker/test/cascade.spec.ts index 4449d1799..4c789f416 100644 --- a/packages/vant/src/picker/test/cascade.spec.ts +++ b/packages/vant/src/picker/test/cascade.spec.ts @@ -1,180 +1,107 @@ -import { Picker } from '..'; -import { mount, triggerDrag } from '../../../test'; -import type { ComponentInstance } from '../../utils'; +import { Picker, PickerConfirmEventParams } from '..'; +import { mount } from '../../../test'; -const COLUMNS = [ +const cascadeColumns = [ { text: 'A1', + value: 'A1', children: [ { text: 'B1', - children: [{ text: 'C1' }, { text: 'C2' }], + value: 'B1', + children: [ + { text: 'C1', value: 'C1' }, + { text: 'C2', value: 'C2' }, + ], }, { text: 'B2', - children: [{ text: 'C3' }, { text: 'C4' }], + value: 'B2', + children: [ + { text: 'C3', value: 'C3' }, + { text: 'C4', value: 'C4' }, + ], }, ], }, { text: 'A2', + value: 'A2', children: [ { text: 'B3', - children: [{ text: 'C5' }, { text: 'C6' }], + value: 'B3', + children: [ + { text: 'C5', value: 'C5' }, + { text: 'C6', value: 'C6' }, + ], }, { text: 'B4', - children: [{ text: 'C7' }, { text: 'C8' }], + value: 'B4', + children: [ + { text: 'C7', value: 'C7' }, + { text: 'C8', value: 'C8' }, + ], }, ], }, ]; -const pickColumnText = (column: Array<{ text: string }>) => - column.map((item: { text: string }) => item.text); - -type ColumnValues = Array<{ - text: string; - children?: ColumnValues[]; -}>; - -test('cascade columns', () => { +test('should emit confirm event for cascade picker correctly', () => { const wrapper = mount(Picker, { props: { - showToolbar: true, - columns: COLUMNS, + columns: cascadeColumns, }, }); wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0]) - ).toEqual(['A1', 'B1', 'C1']); - - triggerDrag(wrapper.find('.van-picker-column'), 0, -100); - wrapper.find('.van-picker-column ul').trigger('transitionend'); - - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('change')![0][0]) - ).toEqual(['A2', 'B3', 'C5']); - - wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0]) - ).toEqual(['A2', 'B3', 'C5']); + const params = wrapper.emitted('confirm')?.[0]; + expect(params?.[0].selectedValues).toEqual(['A1', 'B1', 'C1']); }); -test('setColumnValue of cascade columns', () => { +test('should update cascade options correctly', async () => { const wrapper = mount(Picker, { props: { - showToolbar: true, - columns: COLUMNS, + columns: cascadeColumns, }, }); - (wrapper.vm as ComponentInstance).setColumnValue(0, 'A2'); - wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0]) - ).toEqual(['A2', 'B3', 'C5']); - - (wrapper.vm as ComponentInstance).setColumnValue(1, 'B4'); - wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0]) - ).toEqual(['A2', 'B4', 'C7']); + await wrapper.findAll('.van-picker-column__item')[1].trigger('click'); + await wrapper.find('.van-picker__confirm').trigger('click'); + const params = wrapper.emitted('confirm')?.[0]; + expect(params?.[0].selectedValues).toEqual(['A2', 'B3', 'C5']); }); -test('setValues of cascade columns', () => { - const wrapper = mount(Picker, { - props: { - showToolbar: true, - columns: COLUMNS, - }, - }); - - (wrapper.vm as ComponentInstance).setValues(['A2', 'B4', 'C8']); - wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0]) - ).toEqual(['A2', 'B4', 'C8']); -}); - -test('setColumnIndex of cascade columns', () => { - const wrapper = mount(Picker, { - props: { - showToolbar: true, - columns: COLUMNS, - }, - }); - - (wrapper.vm as ComponentInstance).setColumnIndex(0, 1); - wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0]) - ).toEqual(['A2', 'B3', 'C5']); - - (wrapper.vm as ComponentInstance).setColumnIndex(1, 1); - wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![1][0]) - ).toEqual(['A2', 'B4', 'C7']); -}); - -test('setIndexes of cascade columns', () => { - const wrapper = mount(Picker, { - props: { - showToolbar: true, - columns: COLUMNS, - }, - }); - - (wrapper.vm as ComponentInstance).setIndexes([1, 0, 1]); - wrapper.find('.van-picker__confirm').trigger('click'); - expect( - pickColumnText(wrapper.emitted<[ColumnValues]>('confirm')![0][0]) - ).toEqual(['A2', 'B3', 'C6']); -}); - -test('disabled in cascade', () => { - const wrapper = mount(Picker, { - props: { - showToolbar: true, - columns: [ - COLUMNS[0], - { - ...COLUMNS[1], - disabled: true, - }, - ], - }, - }); - - expect( - wrapper.find('.van-picker-column__item--disabled').html() - ).toMatchSnapshot(); -}); - -test('should move to next option when default option is disabled', () => { +test('should move to next option when default option is disabled', async () => { const wrapper = mount(Picker, { props: { columns: [ { text: 'A1', + value: 'A1', disabled: true, - children: [{ text: 'B1' }, { text: 'B2' }], + children: [ + { text: 'B1', value: 'B1' }, + { text: 'B2', value: 'B2' }, + ], }, { text: 'A2', - children: [{ text: 'B3' }, { text: 'B4' }], + value: 'A2', + children: [ + { text: 'B3', value: 'B3' }, + { text: 'B4', value: 'B4' }, + ], }, ], }, }); - expect(wrapper.html()).toMatchSnapshot(); + await wrapper.find('.van-picker__confirm').trigger('click'); + const params = wrapper.emitted('confirm')?.[0]; + expect(params?.[0].selectedValues).toEqual(['A2', 'B3']); }); test('should move to first option when all options are disabled', () => {