From fb0e1dab541d3a1ba23c9f1928fa87f18509c332 Mon Sep 17 00:00:00 2001 From: DiamondYuan Date: Thu, 30 Nov 2023 10:22:55 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=20picker=20?= =?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/alipay/Picker/__tests__/index.test.ts | 190 +++++++------------- tests/alipay/Picker/__tests__/utils.ts | 41 +++++ 2 files changed, 104 insertions(+), 127 deletions(-) create mode 100644 tests/alipay/Picker/__tests__/utils.ts diff --git a/tests/alipay/Picker/__tests__/index.test.ts b/tests/alipay/Picker/__tests__/index.test.ts index b7c756fbd..5898f2d17 100644 --- a/tests/alipay/Picker/__tests__/index.test.ts +++ b/tests/alipay/Picker/__tests__/index.test.ts @@ -1,51 +1,24 @@ -import { getInstance } from 'tests/utils'; import fmtEvent from 'compiled-alipay/_util/fmtEvent'; -import { describe, it, expect, vi } from 'vitest'; +import { sleep } from 'tests/utils'; +import { describe, expect, it } from 'vitest'; +import { createPicker } from './utils'; -const my = { - canIUse() { - return false; - }, -}; describe('picker onVisibleChange', () => { it('onOpen', () => { - const onVisibleChange = vi.fn(); - const instance = getInstance( - 'Picker', - { - onVisibleChange, - }, - my - ); + const { instance, onVisibleChange } = createPicker({}); instance.callMethod('onOpen'); expect(onVisibleChange).toBeCalledWith(true, fmtEvent({})); }); + it('onMaskDismiss', () => { - const onVisibleChange = vi.fn(); - const onCancel = vi.fn(); - const instance = getInstance( - 'Picker', - { - onVisibleChange, - onCancel, - }, - my - ); + const { instance, onVisibleChange, onCancel } = createPicker({}); instance.callMethod('onMaskDismiss'); expect(onVisibleChange).toBeCalledWith(false, fmtEvent({})); expect(onCancel).toBeCalled(); }); + it('onCancel', () => { - const onVisibleChange = vi.fn(); - const onCancel = vi.fn(); - const instance = getInstance( - 'Picker', - { - onVisibleChange, - onCancel, - }, - my - ); + const { instance, onVisibleChange, onCancel } = createPicker({}); instance.callMethod('onCancel'); expect(onVisibleChange).toBeCalledWith(false, fmtEvent({})); expect(onCancel).toBeCalled(); @@ -55,18 +28,9 @@ describe('picker onVisibleChange', () => { describe('picker select', () => { it('singleOptions', () => { const options = ['北京', '上海', '深圳', '广州']; - const value = '北京'; - const onChange = vi.fn(); - const onOk = vi.fn(); - const instance = getInstance( - 'Picker', - { - options, - onChange, - onOk, - }, - my - ); + const { instance, onChange, onOk } = createPicker({ + options, + }); expect(instance.getData().columns).toStrictEqual([options]); instance.callMethod('onChange', { detail: { value: [1] } }); expect(onChange).toBeCalledWith( @@ -77,7 +41,7 @@ describe('picker select', () => { instance.callMethod('onOk'); expect(onOk).toBeCalledWith('上海', '上海', fmtEvent({})); }); - it('multiOptions', () => { + it('multiOptions', async () => { const options = [ [ { label: '周一', value: 'Mon' }, @@ -91,17 +55,7 @@ describe('picker select', () => { { label: '下午', value: 'pm' }, ], ]; - const onChange = vi.fn(); - const onOk = vi.fn(); - const instance = getInstance( - 'Picker', - { - options, - onChange, - onOk, - }, - my - ); + const { instance, onChange, onOk } = createPicker({ options }); expect(instance.getData().columns).toStrictEqual(options); instance.callMethod('onChange', { detail: { value: [1, 0] } }); expect(onChange).toBeCalledWith( @@ -127,30 +81,18 @@ describe('picker value', () => { it('props value', () => { const options = ['北京', '上海', '深圳', '广州']; const value = '上海'; - const onOk = vi.fn(); - const instance = getInstance( - 'Picker', - { - options, - value, - onOk, - }, - my - ); + const { instance, onOk } = createPicker({ + options, + value, + }); instance.callMethod('onOk'); expect(onOk).toBeCalledWith('上海', '上海', fmtEvent({})); }); it('update value', () => { const options = ['北京', '上海', '深圳', '广州']; - const onOk = vi.fn(); - const instance = getInstance( - 'Picker', - { - options, - onOk, - }, - my - ); + const { instance, onOk } = createPicker({ + options, + }); instance.setProps({ value: '上海' }); instance.callMethod('onOk'); expect(onOk).toBeCalledWith('上海', '上海', fmtEvent({})); @@ -158,16 +100,10 @@ describe('picker value', () => { it('empty value', () => { const options = ['北京', '上海', '深圳', '广州']; const value = ''; - const onOk = vi.fn(); - const instance = getInstance( - 'Picker', - { - options, - value, - onOk, - }, - my - ); + const { instance, onOk } = createPicker({ + options, + value, + }); instance.callMethod('onOk'); expect(onOk).toBeCalledWith('北京', '北京', fmtEvent({})); }); @@ -176,16 +112,10 @@ describe('picker updateColumns', () => { it('updateColumns', () => { const options = ['北京', '上海', '深圳', '广州']; const value = '上海'; - const onOk = vi.fn(); - const instance = getInstance( - 'Picker', - { - options, - value, - onOk, - }, - my - ); + const { instance, onOk } = createPicker({ + options, + value, + }); instance.setProps({ options: ['北京', '深圳', '广州'] }); expect(instance.getData().selectedIndex).toStrictEqual([0]); instance.callMethod('onOk'); @@ -198,38 +128,44 @@ describe('picker onFormat', () => { const options = ['北京', '上海', '深圳', '广州']; const value = '上海'; const onFormat = (value) => `选择了${value}`; - const instance = getInstance( - 'Picker', - { - options, - value, - onFormat, - }, - my - ); + const { instance } = createPicker({ + options, + onFormat, + value, + }); expect(instance.getData().formatValue).toBe('选择了上海'); }); }); -describe('picker value component2', () => { - const my = { - canIUse() { - return true; - }, - }; - it('picker value component2', () => { - const options = [['北京', '上海', '深圳', '广州']]; - const value = ['上海']; - const onOk = vi.fn(); - const instance = getInstance( - 'Picker', - { - options, - value, - onOk, - }, - my - ); - expect(instance.getData().columns).toStrictEqual(options); +it('测试 format 事件', async () => { + const { instance, onCancel } = createPicker({ + 'data-test': 1, }); + instance.callMethod('onCancel'); + expect(onCancel.mock.calls[0][0].currentTarget.dataset).toEqual({ test: 1 }); + instance.setProps({ 'data-test': 2 }); + instance.callMethod('onCancel'); + expect(onCancel.mock.calls[1][0].currentTarget.dataset).toEqual({ test: 2 }); +}); + +it('picker value component2', () => { + const options = [['北京', '上海', '深圳', '广州']]; + const value = ['上海']; + const { instance } = createPicker({ + options, + value, + }); + expect(instance.getData().columns).toStrictEqual(options); +}); + +it.skip('多次开启关闭, visible 状态应该正确', async () => { + const { instance, callMethod } = createPicker(); + await callMethod('onOpen'); + expect(instance.getData().state.visible).toBe(true); + await callMethod('onOk'); + expect(instance.getData().state.visible).toBe(false); + await callMethod('onOpen'); + expect(instance.getData().state.visible).toBe(true); + await callMethod('onOk'); + expect(instance.getData().state.visible).toBe(false); }); diff --git a/tests/alipay/Picker/__tests__/utils.ts b/tests/alipay/Picker/__tests__/utils.ts new file mode 100644 index 000000000..6554d053a --- /dev/null +++ b/tests/alipay/Picker/__tests__/utils.ts @@ -0,0 +1,41 @@ +import { getInstance, sleep } from 'tests/utils'; +import { IPickerProps } from '../../../../src/Picker/props'; +import { vi } from 'vitest'; + +export function createPicker( + props: Partial> = {} +) { + const onCancel = vi.fn(); + const onVisibleChange = vi.fn(); + const onChange = vi.fn(); + const onOk = vi.fn(); + + const my = { + canIUse() { + return true; + }, + }; + const instance = getInstance( + 'Picker', + { + onChange, + onCancel, + onVisibleChange, + onOk, + ...props, + }, + my + ); + + return { + instance, + onCancel, + onVisibleChange, + onChange, + onOk, + callMethod: async (name, ...args) => { + instance.callMethod(name, ...args); + await sleep(10); + }, + }; +} From 9cc7ebe18a9dbc73ab209abc84010f69d4f4f072 Mon Sep 17 00:00:00 2001 From: DiamondYuan Date: Thu, 30 Nov 2023 10:51:14 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20picker=20?= =?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/alipay/Picker/__tests__/index.test.ts | 27 ++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) diff --git a/tests/alipay/Picker/__tests__/index.test.ts b/tests/alipay/Picker/__tests__/index.test.ts index 5898f2d17..962bccf64 100644 --- a/tests/alipay/Picker/__tests__/index.test.ts +++ b/tests/alipay/Picker/__tests__/index.test.ts @@ -1,6 +1,6 @@ import fmtEvent from 'compiled-alipay/_util/fmtEvent'; import { sleep } from 'tests/utils'; -import { describe, expect, it } from 'vitest'; +import { describe, expect, it, vi } from 'vitest'; import { createPicker } from './utils'; describe('picker onVisibleChange', () => { @@ -158,6 +158,31 @@ it('picker value component2', () => { expect(instance.getData().columns).toStrictEqual(options); }); +it('模拟 picker 打开后关闭，需要调用 onFormat', async () => { + const options = [['北京', '上海', '深圳', '广州']]; + const internalState = { + value: ['上海'], + }; + const onFormat = vi.fn(); + const { instance, callMethod, onChange, onOk } = createPicker({ + options, + value: internalState.value, + onFormat, + }); + onFormat.mockImplementation(() => internalState.value.join('-')); + onChange.mockImplementation((val) => { + instance.setProps({ value: val }); + }); + onOk.mockImplementation((val) => { + internalState.value = val; + }); + await callMethod('onChange', { detail: { value: [0] } }); + expect(instance.getData().selectedIndex).toStrictEqual([0]); + expect(instance.getData().formatValue).toEqual('上海'); + await callMethod('onOk'); + expect(internalState.value).toEqual(['北京']); +}); + it.skip('多次开启关闭, visible 状态应该正确', async () => { const { instance, callMethod } = createPicker(); await callMethod('onOpen'); From 980a2f1514a32df2c6e302ead43bc5e5edaebcab Mon Sep 17 00:00:00 2001 From: DiamondYuan Date: Thu, 30 Nov 2023 11:18:24 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20picker=20?= =?UTF-8?q?=E7=9A=84=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/alipay/Picker/__tests__/index.test.ts | 30 +++++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/tests/alipay/Picker/__tests__/index.test.ts b/tests/alipay/Picker/__tests__/index.test.ts index 962bccf64..333e95513 100644 --- a/tests/alipay/Picker/__tests__/index.test.ts +++ b/tests/alipay/Picker/__tests__/index.test.ts @@ -183,6 +183,36 @@ it('模拟 picker 打开后关闭，需要调用 onFormat', async () => { expect(internalState.value).toEqual(['北京']); }); +it('假设在滚动的时候, options 变化', async () => { + const options = [['北京', '上海', '深圳', '广州']]; + const onFormat = vi.fn(); + const { instance, callMethod, onOk } = createPicker({ + options, + onFormat, + }); + + await callMethod('onChange', { detail: { value: [1] } }); + instance.setProps({ options: [['上海', '深圳', '广州']] }); + expect(instance.getData().selectedIndex).toStrictEqual([0]); + await callMethod('onOk'); + expect(onOk.mock.calls[0][0]).toEqual(['上海']); +}); + +it('假设在滚动的时候, value 变化', async () => { + const options = [['北京', '上海', '深圳', '广州']]; + const onFormat = vi.fn(); + const { instance, callMethod, onOk } = createPicker({ + options, + onFormat, + }); + + await callMethod('onChange', { detail: { value: [1] } }); + instance.setProps({ value: ['深圳'] }); + expect(instance.getData().selectedIndex).toStrictEqual([2]); + await callMethod('onOk'); + expect(onOk.mock.calls[0][0]).toEqual(['深圳']); +}); + it.skip('多次开启关闭, visible 状态应该正确', async () => { const { instance, callMethod } = createPicker(); await callMethod('onOpen'); From 4e07583de1ac677be1f6f9730d886a7cd109da6a Mon Sep 17 00:00:00 2001 From: DiamondYuan Date: Thu, 30 Nov 2023 11:35:08 +0800 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/alipay/Picker/__tests__/index.test.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/alipay/Picker/__tests__/index.test.ts b/tests/alipay/Picker/__tests__/index.test.ts index 333e95513..b390885b7 100644 --- a/tests/alipay/Picker/__tests__/index.test.ts +++ b/tests/alipay/Picker/__tests__/index.test.ts @@ -55,6 +55,8 @@ describe('picker select', () => { { label: '下午', value: 'pm' }, ], ]; + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + //@ts-expect-error const { instance, onChange, onOk } = createPicker({ options }); expect(instance.getData().columns).toStrictEqual(options); instance.callMethod('onChange', { detail: { value: [1, 0] } });