From d9b97a3f6029225efb34b7f282b5d06c77690b14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 25 Jun 2024 16:38:32 +0800 Subject: [PATCH 1/3] test: adjust test case --- .../number-keyboard/number-keyboard.tsx | 26 +++++++++---------- .../tests/number-keyboard.test.tsx | 12 ++++++++- 2 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/components/number-keyboard/number-keyboard.tsx b/src/components/number-keyboard/number-keyboard.tsx index ab4ecac484..afa446d196 100644 --- a/src/components/number-keyboard/number-keyboard.tsx +++ b/src/components/number-keyboard/number-keyboard.tsx @@ -1,14 +1,14 @@ -import React, { useRef, useMemo } from 'react' -import type { FC, TouchEvent, MouseEvent } from 'react' -import classNames from 'classnames' +import { useMemoizedFn } from 'ahooks' import { DownOutline, TextDeletionOutline } from 'antd-mobile-icons' -import { mergeProps } from '../../utils/with-default-props' +import classNames from 'classnames' +import type { FC, MouseEvent, TouchEvent } from 'react' +import React, { useMemo, useRef } from 'react' +import { NativeProps, withNativeProps } from '../../utils/native-props' import { shuffle } from '../../utils/shuffle' +import { mergeProps } from '../../utils/with-default-props' +import { useConfig } from '../config-provider' import Popup, { PopupProps } from '../popup' -import { NativeProps, withNativeProps } from '../../utils/native-props' import SafeArea from '../safe-area' -import { useMemoizedFn } from 'ahooks' -import { useConfig } from '../config-provider' const classPrefix = 'adm-number-keyboard' @@ -88,13 +88,13 @@ export const NumberKeyboard: FC = p => { props.onDelete?.() }) - const onBackspacePressStart = () => { + const startContinueClear = () => { timeoutRef.current = window.setTimeout(() => { onDelete() intervalRef.current = window.setInterval(onDelete, 150) }, 700) } - const onBackspacePressEnd = () => { + const stopContinueClear = () => { clearTimeout(timeoutRef.current) clearInterval(intervalRef.current) } @@ -175,13 +175,13 @@ export const NumberKeyboard: FC = p => { className={className} onTouchStart={() => { if (key === 'BACKSPACE') { - onBackspacePressStart() + startContinueClear() } }} onTouchEnd={e => { onKeyPress(e, key) if (key === 'BACKSPACE') { - onBackspacePressEnd() + stopContinueClear() } }} {...ariaProps} @@ -226,11 +226,11 @@ export const NumberKeyboard: FC = p => {
{ - onBackspacePressStart() + startContinueClear() }} onTouchEnd={e => { onKeyPress(e, 'BACKSPACE') - onBackspacePressEnd() + stopContinueClear() }} onContextMenu={e => { // Long press should not trigger native context menu diff --git a/src/components/number-keyboard/tests/number-keyboard.test.tsx b/src/components/number-keyboard/tests/number-keyboard.test.tsx index d14db2c022..f2bae2c3c5 100644 --- a/src/components/number-keyboard/tests/number-keyboard.test.tsx +++ b/src/components/number-keyboard/tests/number-keyboard.test.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import { fireEvent, render, testA11y, screen, waitFor } from 'testing' +import { fireEvent, render, screen, testA11y, waitFor } from 'testing' import NumberKeyboard from '..' const classPrefix = 'adm-number-keyboard' @@ -10,7 +10,17 @@ function mockClick(el: HTMLElement) { } describe('NumberKeyboard', () => { + beforeEach(() => { + jest.useFakeTimers() + }) + + afterEach(() => { + jest.clearAllTimers() + jest.useRealTimers() + }) + test('a11y', async () => { + jest.useRealTimers() await testA11y() }) From d69552d37e211d32eb3f3a59f698ad1557a753d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 25 Jun 2024 16:50:20 +0800 Subject: [PATCH 2/3] test: test driven --- .../tests/number-keyboard.test.tsx | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) diff --git a/src/components/number-keyboard/tests/number-keyboard.test.tsx b/src/components/number-keyboard/tests/number-keyboard.test.tsx index f2bae2c3c5..e7e2f626e8 100644 --- a/src/components/number-keyboard/tests/number-keyboard.test.tsx +++ b/src/components/number-keyboard/tests/number-keyboard.test.tsx @@ -170,4 +170,34 @@ describe('NumberKeyboard', () => { expect(right).toBeInTheDocument() expect(screen.getByTitle('0')).not.toHaveClass(`${classPrefix}-key-mid`) }) + + test('long press backspace and release', () => { + const onDelete = jest.fn() + const { container } = render() + + // Fire touchstart event + fireEvent.touchStart( + document.body.querySelector( + '.adm-number-keyboard-key-sign' + ) as HTMLDivElement, + { touches: [{}] } + ) + onDelete.mockReset() + + jest.advanceTimersByTime(10000) + expect(onDelete).toHaveBeenCalled() + onDelete.mockReset() + + // We do not fire touchend event to mock ISO missing touchend event + // Press other key + fireEvent.touchStart( + document.body.querySelector( + '.adm-number-keyboard-key-number' + ) as HTMLDivElement, + { touches: [{}] } + ) + + jest.advanceTimersByTime(10000) + expect(onDelete).not.toHaveBeenCalled() + }) }) From 9c2df1ef2c11c520258c2a87d4bc2447af964a95 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 25 Jun 2024 16:58:31 +0800 Subject: [PATCH 3/3] test: update test case --- src/components/number-keyboard/number-keyboard.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/number-keyboard/number-keyboard.tsx b/src/components/number-keyboard/number-keyboard.tsx index afa446d196..9e08fad13e 100644 --- a/src/components/number-keyboard/number-keyboard.tsx +++ b/src/components/number-keyboard/number-keyboard.tsx @@ -174,6 +174,8 @@ export const NumberKeyboard: FC = p => { key={key} className={className} onTouchStart={() => { + stopContinueClear() + if (key === 'BACKSPACE') { startContinueClear() }