From 41302913594af3508c0b1654bbf56097cd55d754 Mon Sep 17 00:00:00 2001 From: simeng-li Date: Thu, 12 Jan 2023 16:22:47 +0800 Subject: [PATCH] fix(ui): verification-code iteration fix (#2917) --- packages/ui/src/components/Toast/index.tsx | 1 + .../VerificationCode/index.test.tsx | 131 ++++++++++++------ .../src/components/VerificationCode/index.tsx | 8 +- .../src/containers/VerificationCode/index.tsx | 5 +- 4 files changed, 95 insertions(+), 50 deletions(-) diff --git a/packages/ui/src/components/Toast/index.tsx b/packages/ui/src/components/Toast/index.tsx index f04a3d386..37d577fe2 100644 --- a/packages/ui/src/components/Toast/index.tsx +++ b/packages/ui/src/components/Toast/index.tsx @@ -30,6 +30,7 @@ const Toast = ({ message, duration = 3000, callback }: Props) => { return ( { const onChange = jest.fn(); beforeEach(() => { - onChange.mockClear(); + jest.clearAllMocks(); }); it('render with value', () => { @@ -80,8 +80,10 @@ describe('VerificationCode Component', () => { const inputElements = container.querySelectorAll('input'); if (inputElements[2]) { - fireEvent.input(inputElements[2], { target: { value: 'a' } }); - expect(onChange).not.toBeCalled(); + for (const value of ['a', 'e', '+', '-', '.']) { + fireEvent.input(inputElements[2], { target: { value } }); + expect(onChange).not.toBeCalled(); + } } }); @@ -124,53 +126,90 @@ describe('VerificationCode Component', () => { } }); - it('onPasteHandler', () => { - const input = ['1', '2', '3', '4', '5', '6']; - const { container } = render( - - ); - const inputElements = container.querySelectorAll('input'); + describe('onPasteHandler', () => { + it('full update', () => { + const input = ['1', '2', '3', '4', '5', '6']; + const { container } = render( + + ); + const inputElements = container.querySelectorAll('input'); - // Full update - if (inputElements[0]) { - fireEvent.paste(inputElements[0], { - clipboardData: { - getData: () => '789012', - }, - }); - expect(onChange).toBeCalledWith(['7', '8', '9', '0', '1', '2']); - } + if (inputElements[0]) { + fireEvent.paste(inputElements[0], { + clipboardData: { + getData: () => '789012', + }, + }); + expect(onChange).toBeCalledWith(['7', '8', '9', '0', '1', '2']); + } + }); - // Partial update - if (inputElements[2]) { - fireEvent.paste(inputElements[2], { - clipboardData: { - getData: () => '789', - }, - }); - expect(onChange).toBeCalledWith(['1', '2', '7', '8', '9', '6']); - } + it('partial update', () => { + const input = ['1', '2', '3', '4', '5', '6']; + const { container } = render( + + ); + const inputElements = container.querySelectorAll('input'); - // OverLength update - if (inputElements[4]) { - fireEvent.paste(inputElements[4], { - clipboardData: { - getData: () => '7890', - }, - }); - expect(onChange).toBeCalledWith(['1', '2', '3', '4', '7', '8']); - } + if (inputElements[2]) { + fireEvent.paste(inputElements[2], { + clipboardData: { + getData: () => '789', + }, + }); + expect(onChange).toBeCalledWith(['1', '2', '7', '8', '9', '6']); + } + }); - onChange.mockClear(); + it('overLength partial update', () => { + const input = ['1', '2', '3', '4', '5', '6']; + const { container } = render( + + ); + const inputElements = container.querySelectorAll('input'); - // Non-numeric past data - if (inputElements[0]) { - fireEvent.paste(inputElements[0], { - clipboardData: { - getData: () => 'test input', - }, - }); - expect(onChange).not.toBeCalled(); - } + if (inputElements[4]) { + fireEvent.paste(inputElements[4], { + clipboardData: { + getData: () => '7890', + }, + }); + expect(onChange).toBeCalledWith(['1', '2', '3', '4', '7', '8']); + } + }); + + it('filter numeric past data', () => { + const input = ['1', '2', '3', '4', '5', '6']; + const { container } = render( + + ); + const inputElements = container.querySelectorAll('input'); + + if (inputElements[0]) { + fireEvent.paste(inputElements[0], { + clipboardData: { + getData: () => 'test input 124 343', + }, + }); + expect(onChange).toBeCalledWith(['1', '2', '4', '3', '4', '3']); + } + }); + + it('Non-numeric past data', () => { + const input = ['1', '2', '3', '4', '5', '6']; + const { container } = render( + + ); + const inputElements = container.querySelectorAll('input'); + + if (inputElements[0]) { + fireEvent.paste(inputElements[0], { + clipboardData: { + getData: () => 'test input', + }, + }); + expect(onChange).not.toBeCalled(); + } + }); }); }); diff --git a/packages/ui/src/components/VerificationCode/index.tsx b/packages/ui/src/components/VerificationCode/index.tsx index 4ad9a782e..d199528b1 100644 --- a/packages/ui/src/components/VerificationCode/index.tsx +++ b/packages/ui/src/components/VerificationCode/index.tsx @@ -105,7 +105,7 @@ const VerificationCode = ({ clipboardData, } = event; - const data = clipboardData.getData('text'); + const data = clipboardData.getData('text').match(/\d/g)?.join('') ?? ''; // Unrecognized target input field if (!dataset.id) { @@ -160,6 +160,10 @@ const VerificationCode = ({ event.preventDefault(); nextTarget?.focus(); break; + case '+': + case '-': + case 'e': + case '.': case 'ArrowUp': case 'ArrowDown': event.preventDefault(); @@ -175,7 +179,7 @@ const VerificationCode = ({ if (value.length === 0) { inputReferences.current[0]?.focus(); } - }, [value, onChange]); + }, [value]); return (
diff --git a/packages/ui/src/containers/VerificationCode/index.tsx b/packages/ui/src/containers/VerificationCode/index.tsx index bad802940..88eb93dac 100644 --- a/packages/ui/src/containers/VerificationCode/index.tsx +++ b/packages/ui/src/containers/VerificationCode/index.tsx @@ -71,9 +71,10 @@ const VerificationCode = ({ type, method, className, hasPasswordButton, target } { + onClick={async () => { clearErrorMessage(); - void onResendVerificationCode(); + await onResendVerificationCode(); + setCode([]); }} /> )}