From d0b018e96a2ca4ce9a515cd63ed147fe70c438b6 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Fri, 25 Oct 2024 15:42:27 +0200 Subject: [PATCH 1/2] fix(upi): initial state --- .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..df85ee75b 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({ ...props, defaultMode: UpiMode.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({ ...props, defaultMode: UpiMode.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({ ...props, defaultMode: UpiMode.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({ ...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({ ...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({ ...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({ ...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..87ccad92e 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 === UpiMode.QrCode); const [mode, setMode] = useState(defaultMode); const [vpa, setVpa] = useState(''); const [vpaInputHandlers, setVpaInputHandlers] = useState(null); From 7272a8c6c5d81b4dd38029f360fcd2feaa167d61 Mon Sep 17 00:00:00 2001 From: Yu Long Date: Fri, 25 Oct 2024 17:37:40 +0200 Subject: [PATCH 2/2] refactor: fix tests --- packages/lib/src/components/UPI/UPI.test.tsx | 14 +++++++------- .../UPI/components/UPIComponent/UPIComponent.tsx | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/lib/src/components/UPI/UPI.test.tsx b/packages/lib/src/components/UPI/UPI.test.tsx index df85ee75b..beb04e8b1 100644 --- a/packages/lib/src/components/UPI/UPI.test.tsx +++ b/packages/lib/src/components/UPI/UPI.test.tsx @@ -107,7 +107,7 @@ describe('UPI', () => { describe('select the QR code mode', () => { test('should be valid', async () => { isMobileMock.mockReturnValue(false); - const upi = new UPI({ ...props, defaultMode: UpiMode.QrCode }); + const upi = new UPI(global.core, { ...props, defaultMode: 'qrCode' }); render(upi.render()); await waitFor(() => { expect(upi.isValid).toBe(true); @@ -118,7 +118,7 @@ describe('UPI', () => { describe('select the vpa mode', () => { test('should not be valid on init', async () => { isMobileMock.mockReturnValue(false); - const upi = new UPI({ ...props, defaultMode: UpiMode.Vpa }); + const upi = new UPI(global.core, { ...props, defaultMode: 'vpa' }); render(upi.render()); await waitFor(() => { expect(upi.isValid).toBe(false); @@ -127,7 +127,7 @@ describe('UPI', () => { test('should be valid when filling in the vpa', async () => { isMobileMock.mockReturnValue(false); - const upi = new UPI({ ...props, defaultMode: UpiMode.Vpa }); + 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); @@ -142,7 +142,7 @@ describe('UPI', () => { }); test('should not be valid on init', async () => { - const upi = new UPI({ ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + const upi = new UPI(global.core, { ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); render(upi.render()); await waitFor(() => { expect(upi.isValid).toBe(false); @@ -150,7 +150,7 @@ describe('UPI', () => { }); test('should be valid when selecting other apps', async () => { - const upi = new UPI({ ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + 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 }); @@ -159,7 +159,7 @@ describe('UPI', () => { }); test('should not be valid when selecting upi collect', async () => { - const upi = new UPI({ ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + 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 }); @@ -168,7 +168,7 @@ describe('UPI', () => { }); test('should be valid when filling the vpa', async () => { - const upi = new UPI({ ...props, apps: [{ id: 'gpay', name: 'Google Pay' }] }); + 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 }); diff --git a/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx b/packages/lib/src/components/UPI/components/UPIComponent/UPIComponent.tsx index 87ccad92e..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(defaultMode === UpiMode.QrCode); + const [isValid, setIsValid] = useState(defaultMode === 'qrCode'); const [mode, setMode] = useState(defaultMode); const [vpa, setVpa] = useState(''); const [vpaInputHandlers, setVpaInputHandlers] = useState(null);