From 36f50deaf89b9e4a30d50deb4c512dd92ea4e7fb Mon Sep 17 00:00:00 2001 From: Yu Long Date: Mon, 28 Oct 2024 13:41:11 +0100 Subject: [PATCH] fix(upi): initial state upi intent (#2921) * fix(upi): initial state * refactor: fix tests --- .changeset/lovely-dodos-visit.md | 5 ++ packages/lib/src/components/UPI/UPI.test.tsx | 84 ++++++++++++++++++- .../components/UPIComponent/UPIComponent.tsx | 2 +- 3 files changed, 88 insertions(+), 3 deletions(-) create mode 100644 .changeset/lovely-dodos-visit.md diff --git a/.changeset/lovely-dodos-visit.md b/.changeset/lovely-dodos-visit.md new file mode 100644 index 000000000..087f43410 --- /dev/null +++ b/.changeset/lovely-dodos-visit.md @@ -0,0 +1,5 @@ +--- +"@adyen/adyen-web": patch +--- + +Fix `UPIComponent` initial value for `isValid`. It should only be default to `true` for UPI QR. \ No newline at end of file diff --git a/packages/lib/src/components/UPI/UPI.test.tsx b/packages/lib/src/components/UPI/UPI.test.tsx index 53f0fdee9..beb04e8b1 100644 --- a/packages/lib/src/components/UPI/UPI.test.tsx +++ b/packages/lib/src/components/UPI/UPI.test.tsx @@ -1,4 +1,5 @@ -import { render, screen } from '@testing-library/preact'; +import { render, screen, waitFor } from '@testing-library/preact'; +import userEvent from '@testing-library/user-event'; import UPI from './UPI'; import isMobile from '../../utils/isMobile'; import { SRPanel } from '../../core/Errors/SRPanel'; @@ -102,11 +103,90 @@ describe('UPI', () => { }); }); + describe('isValid', () => { + describe('select the QR code mode', () => { + test('should be valid', async () => { + isMobileMock.mockReturnValue(false); + const upi = new UPI(global.core, { ...props, defaultMode: 'qrCode' }); + render(upi.render()); + await waitFor(() => { + expect(upi.isValid).toBe(true); + }); + }); + }); + + describe('select the vpa mode', () => { + test('should not be valid on init', async () => { + isMobileMock.mockReturnValue(false); + const upi = new UPI(global.core, { ...props, defaultMode: 'vpa' }); + render(upi.render()); + await waitFor(() => { + expect(upi.isValid).toBe(false); + }); + }); + + test('should be valid when filling in the vpa', async () => { + isMobileMock.mockReturnValue(false); + const upi = new UPI(global.core, { ...props, defaultMode: 'vpa' }); + render(upi.render()); + const user = userEvent.setup(); + const vpaInput = await screen.findByLabelText(/Enter UPI ID \/ VPA/i); + await user.type(vpaInput, 'test@test'); + expect(upi.isValid).toBe(true); + }); + }); + + describe('select the intent mode', () => { + beforeEach(() => { + isMobileMock.mockReturnValue(true); + }); + + test('should not be valid on init', async () => { + const upi = new UPI(global.core, { ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + render(upi.render()); + await waitFor(() => { + expect(upi.isValid).toBe(false); + }); + }); + + test('should be valid when selecting other apps', async () => { + const upi = new UPI(global.core, { ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + render(upi.render()); + const user = userEvent.setup(); + const radioButton = await screen.findByRole('radio', { name: /google pay/i }); + await user.click(radioButton); + expect(upi.isValid).toBe(true); + }); + + test('should not be valid when selecting upi collect', async () => { + const upi = new UPI(global.core, { ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + render(upi.render()); + const user = userEvent.setup(); + const radioButton = await screen.findByRole('radio', { name: /Enter UPI ID/i }); + await user.click(radioButton); + expect(upi.isValid).toBe(false); + }); + + test('should be valid when filling the vpa', async () => { + const upi = new UPI(global.core, { ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + render(upi.render()); + const user = userEvent.setup(); + const radioButton = await screen.findByRole('radio', { name: /Enter UPI ID/i }); + await user.click(radioButton); + expect(upi.isValid).toBe(false); + + const vpaInput = await screen.findByLabelText(/Enter UPI ID \/ VPA/i); + await user.type(vpaInput, 'test@test'); + expect(upi.isValid).toBe(true); + }); + }); + }); + describe('render', () => { test('should render the UPI component by default', async () => { const upi = new UPI(global.core, props); render(upi.render()); - expect(await screen.findByRole('group')).toBeInTheDocument; + expect(await screen.findByRole('group')).toBeInTheDocument(); }); }); }); diff --git a/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx b/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx index b0f8688ef..4c6a46f50 100644 --- a/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx +++ b/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx @@ -34,7 +34,7 @@ export default function UPIComponent({ defaultMode, onChange, onUpdateMode, payB const { i18n } = useCoreContext(); const getImage = useImage(); const [status, setStatus] = useState('ready'); - const [isValid, setIsValid] = useState(true); + const [isValid, setIsValid] = useState(defaultMode === 'qrCode'); const [mode, setMode] = useState(defaultMode); const [vpa, setVpa] = useState(''); const [vpaInputHandlers, setVpaInputHandlers] = useState(null);