fix(upi): initial state upi intent (#2921)

* fix(upi): initial state * refactor: fix tests
Adyen · Oct 28, 2024 · 36f50de · 36f50de
1 parent 4fb7df4
commit 36f50de
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 3 deletions.
diff --git a/.changeset/lovely-dodos-visit.md 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.
diff --git 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
@@ -34,7 +34,7 @@ export default function UPIComponent({ defaultMode, onChange, onUpdateMode, payB
     const { i18n } = useCoreContext();
     const getImage = useImage();
     const [status, setStatus] = useState<UIElementStatus>('ready');
-    const [isValid, setIsValid] = useState<boolean>(true);
+    const [isValid, setIsValid] = useState<boolean>(defaultMode === 'qrCode');
     const [mode, setMode] = useState<UpiMode>(defaultMode);
     const [vpa, setVpa] = useState<string>('');
     const [vpaInputHandlers, setVpaInputHandlers] = useState<VpaInputHandlers>(null);