-
Notifications
You must be signed in to change notification settings - Fork 105
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix: [IOBP-1206,IOBP-1209] Payment checkout accessibility input text (#…
…6745) ## Short description This pull request includes multiple changes aimed at improving accessibility ## List of changes proposed in this pull request - Updated `@pagopa/io-app-design-system` from version 4.5.6 to 4.6.0. - Added accessibility error messages for the payment notice code and fiscal code fields - Refactored input validation logic (using `onContinue` validation mode) and removed unused accessibility focus function ## How to test - Using a real device 📱, start a payment flow and press on `Digita` - Turn on the TalkBack accessibility tool - Press on `?` icon and then close the bottom sheet - Ensure that input text is not in error state - Insert a wrong value or leave it empty and press `Continua` - Ensure that error logic is handle corretly ## Preview https://github.com/user-attachments/assets/4de81ac3-4dc5-4cec-8caf-c1f27d460381
- Loading branch information
1 parent
92390c8
commit 4f5acaf
Showing
10 changed files
with
2,043 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 63 additions & 0 deletions
63
ts/features/payments/checkout/screens/__tests__/WalletPaymentInputFiscalCodeScreen.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| import { fireEvent } from "@testing-library/react-native"; | ||
| import { default as configureMockStore } from "redux-mock-store"; | ||
| import I18n from "../../../../../i18n"; | ||
| import { applicationChangeState } from "../../../../../store/actions/application"; | ||
| import { appReducer } from "../../../../../store/reducers"; | ||
| import { GlobalState } from "../../../../../store/reducers/types"; | ||
| import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper"; | ||
| import { PaymentsCheckoutRoutes } from "../../navigation/routes"; | ||
| import { WalletPaymentInputFiscalCodeScreen } from "../WalletPaymentInputFiscalCodeScreen"; | ||
|
|
||
| const mockNavigation = { | ||
| navigate: jest.fn(), | ||
| setOptions: jest.fn() | ||
| }; | ||
|
|
||
| jest.mock("@react-navigation/native", () => ({ | ||
| ...jest.requireActual("@react-navigation/native"), | ||
| useNavigation: () => mockNavigation | ||
| })); | ||
|
|
||
| const renderComponent = () => { | ||
| const globalState = appReducer(undefined, applicationChangeState("active")); | ||
|
|
||
| const mockStore = configureMockStore<GlobalState>(); | ||
| const store: ReturnType<typeof mockStore> = mockStore({ | ||
| ...globalState | ||
| } as GlobalState); | ||
|
|
||
| return renderScreenWithNavigationStoreContext<GlobalState>( | ||
| WalletPaymentInputFiscalCodeScreen, | ||
| PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_FISCAL_CODE, | ||
| {}, | ||
| store | ||
| ); | ||
| }; | ||
|
|
||
| describe("WalletPaymentInputFiscalCodeScreen", () => { | ||
| it(`should render the WalletPaymentInputFiscalCodeScreen`, () => { | ||
| const renderedComponent = renderComponent(); | ||
| expect(renderedComponent.toJSON()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("should update the state when input changes", () => { | ||
| const { getByTestId } = renderComponent(); | ||
| const input = getByTestId("fiscalCodeInput"); | ||
|
|
||
| fireEvent.changeText(input, "12345678901"); | ||
| expect(input.props.value).toBe("12345678901"); | ||
| }); | ||
|
|
||
| it("should show an error when input is invalid", () => { | ||
| const { getByText, getByTestId } = renderComponent(); | ||
| const input = getByTestId("fiscalCodeInput"); | ||
| const button = getByText(I18n.t("global.buttons.continue")); | ||
|
|
||
| fireEvent.changeText(input, "invalid"); | ||
| fireEvent.press(button); | ||
|
|
||
| expect( | ||
| getByText(I18n.t("wallet.payment.manual.fiscalCode.validationError")) | ||
| ).toBeTruthy(); | ||
| }); | ||
| }); |
82 changes: 82 additions & 0 deletions
82
...eatures/payments/checkout/screens/__tests__/WalletPaymentInputNoticeNumberScreen.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { fireEvent } from "@testing-library/react-native"; | ||
| import { default as configureMockStore } from "redux-mock-store"; | ||
| import I18n from "../../../../../i18n"; | ||
| import { applicationChangeState } from "../../../../../store/actions/application"; | ||
| import { appReducer } from "../../../../../store/reducers"; | ||
| import { GlobalState } from "../../../../../store/reducers/types"; | ||
| import { renderScreenWithNavigationStoreContext } from "../../../../../utils/testWrapper"; | ||
| import { PaymentsCheckoutRoutes } from "../../navigation/routes"; | ||
| import { WalletPaymentInputNoticeNumberScreen } from "../WalletPaymentInputNoticeNumberScreen"; | ||
|
|
||
| const mockNavigation = { | ||
| navigate: jest.fn(), | ||
| setOptions: jest.fn() | ||
| }; | ||
|
|
||
| jest.mock("@react-navigation/native", () => ({ | ||
| ...jest.requireActual("@react-navigation/native"), | ||
| useNavigation: () => mockNavigation | ||
| })); | ||
|
|
||
| const renderComponent = () => { | ||
| const globalState = appReducer(undefined, applicationChangeState("active")); | ||
|
|
||
| const mockStore = configureMockStore<GlobalState>(); | ||
| const store: ReturnType<typeof mockStore> = mockStore({ | ||
| ...globalState | ||
| } as GlobalState); | ||
|
|
||
| return renderScreenWithNavigationStoreContext<GlobalState>( | ||
| WalletPaymentInputNoticeNumberScreen, | ||
| PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_NOTICE_NUMBER, | ||
| {}, | ||
| store | ||
| ); | ||
| }; | ||
|
|
||
| describe("WalletPaymentInputNoticeNumberScreen", () => { | ||
| it(`should render the WalletPaymentInputNoticeNumberScreen`, () => { | ||
| const renderedComponent = renderComponent(); | ||
| expect(renderedComponent.toJSON()).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it("should update the state when input changes", () => { | ||
| const { getByTestId } = renderComponent(); | ||
| const input = getByTestId("noticeNumberInput"); | ||
|
|
||
| fireEvent.changeText(input, "123456789012345678"); | ||
| expect(input.props.value).toBe("123456789012345678"); | ||
| }); | ||
|
|
||
| it("should navigate to the next screen when input is valid", () => { | ||
| const { getByText, getByTestId } = renderComponent(); | ||
| const input = getByTestId("noticeNumberInput"); | ||
| const button = getByText(I18n.t("global.buttons.continue")); | ||
|
|
||
| fireEvent.changeText(input, "123456789012345678"); | ||
| fireEvent.press(button); | ||
|
|
||
| expect(mockNavigation.navigate).toHaveBeenCalledWith( | ||
| PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_NAVIGATOR, | ||
| { | ||
| screen: PaymentsCheckoutRoutes.PAYMENT_CHECKOUT_INPUT_FISCAL_CODE, | ||
| params: { | ||
| paymentNoticeNumber: expect.any(Object) | ||
| } | ||
| } | ||
| ); | ||
| }); | ||
|
|
||
| it("should show an error when input is invalid", () => { | ||
| const { getByText, getByTestId } = renderComponent(); | ||
| const input = getByTestId("noticeNumberInput"); | ||
| const button = getByText(I18n.t("global.buttons.continue")); | ||
|
|
||
| fireEvent.changeText(input, "invalid"); | ||
| fireEvent.press(button); | ||
|
|
||
| expect( | ||
| getByText(I18n.t("wallet.payment.manual.noticeNumber.validationError")) | ||
| ).toBeTruthy(); | ||
| }); | ||
| }); |
Oops, something went wrong.