[Test Plan] Detailed payment error messages
- Hellen Rodrigues Magalhaes
- 1 Introduction
- 1.1 Test Scope
- 1.1.1 In Scope
- 1.1.2 Out of Scope
- 1.2 Quality Objective
- 1.3 Test Methodology
- 1.4 Testing Tools
- 1.4.1 Testing Tools
- 1.4.2 Test Deliverables
- 1.5 Test Management
- 1.6 Test Actors
- 1.7 Whitelabel
- 1.7.1 General configs and pre-conditions:
- 1.7.2 Test Part 1:
- 1.7.3 Test Part 2:
- 1.8 Analytics
- 1.8.1 Test Part 3:
- 1.1 Test Scope
Introduction
This document details how the Detailed payment error messages feature should be tested
Test Scope
In Scope
Application | Description |
|---|---|
Whitelabel | Whitelabel’s is where guests finish placing their orders, either it’s on mobile or the web. |
Launch Darkly | Feature management platform that allows development teams to control and manage feature flags to release software updates safely and continuously. |
Lokalise | Translation management platform that helps teams streamline the localization process for their software and content. |
Amplitude | Data Analytics |
Out of Scope
Application | Description |
|---|---|
POS |
Won’t be tested as this application won’t be changed by this feature's development |
Kiosk | |
Call Center |
Quality Objective
Ensure that all Acceptance Criteria has been met.
Ensure that all Test Cases has been executed and have passed.
Ensure that all bugs found has been fixed and retested before the release.
Test Methodology
Exploratory Testing
Functional Testing
Testing Tools
Testing Tools
Platform | Version | Description |
|---|---|---|
macOS | 15.0 |
|
Google Chrome | 126.0 |
|
Android Device | 14.0 |
|
iOS Device | 18.0 |
|
Insomnia | 9.3.0 | For backend tests |
Testing Subjects
Subject | Description |
|---|
Subject | Description |
|---|---|
Whitelabel | localhost |
Test Deliverables
Test Plan (this document)
Test Cases
Bug Tasks
Test Management
Test Actors
User Role | Description |
|---|---|
User | User will be placing successful orders on Whitelabel |
Developer user | User responsible for: Build and run the local environment and set the mocks |
Analytics user | User responsible for checking the events on mParticle/Amplitude. |
Whitelabel
General configs and pre-conditions:
Feature flags Intl Platform (backend):
disable-paycomet-pre-auth: this FF needs to be enabled with these configs:
enable-rbi-error-2: this FF need to be enabled with these configs:
Test Part 1:
The test cases in part 1 should be performed in local environment because we are going to need the translations to be manipulated in each variation scenario and we also need to create mocks to simulate the errors coming from the backend. To do this:
1- Setup and run locally the Intl-whitelabel-graphql
Mock the backend error:
Find this file: intl-whitelabel-graphql/src/functions/graphql/providers/payments.ts
Add the code below:
const ccc = '2';
errorPayload.code = `PAYMENT.${ccc}`;
errorPayload.rbiErrorCode = ccc;
When the const ccc = ''; here you can set the backend error that you want to simulate. E.g. 2.001, 2.100.001 and etc.
2- Setup and run locally the Intl-whitelabel-frontend
Edit the file src/utils/errors/index.ts
replace the existing code from line 238 by the 261 by the code below:
export const getRbiErrorTranslation = ({
errorCode,
errorTranslation,
defaultTranslationId,
formatMessage,
}: IRbiErrorTranslation) => {
const parsedErrorCodes = errorCode ? extractRbiErrorCodes(errorCode) : [];
const foundTranslation = parsedErrorCodes.find(code => {
const key = errorTranslation ? `error.${code}.${errorTranslation}` : `error.${code}`;
return formatMessageMock({ id: key as TLocalizationKey }) !== key;
});
const getFormattedMessage = (translation: string) =>
formatMessageMock({
id: errorTranslation
? (`error.${translation}.${errorTranslation}` as TLocalizationKey)
: (`error.${translation}` as TLocalizationKey),
});
return foundTranslation
? getFormattedMessage(foundTranslation)
: formatMessageMock({ id: defaultTranslationId as TLocalizationKey });
};
Go to line 21 and add the code below:
export const formatMessageMock = ({ id }: { id: string }) => {
const keys: Record<string, string> = {
'error.payment.title': 'Uh oh!',
'error.payment.default': 'Something went wrong, please try again.',
'error.payment.cta': 'Go back',
'error.payment.2.001.title': 'Card type invalid',
'error.payment.2.001.cta': 'Pay another way',
'error.payment.2.001': 'Your card is not enabled to allow this payment at the moment. Please, contact your bank or try another payment method.',
};
return keys[id] ?? id;
};
Now on this same part, add new variables and remove them according to the pre-conditions for each test case.
Build and run the front end and access the local host.
In order to simulate the error, you can use the specific credit card available by Paycomet on this document: https://docs.paycomet.com/en/recursos/testcards in the section Test Cards to force an error.
You can use any code available on this document: https://docs.paycomet.com/en/recursos/codigos-de-error on the CVV field, it will not make a difference, because you already created a mock on backend.
Test case scenario part 1:
Test Part 2:
The objective of test part 2 is really validate the codes already implemented on the backend and check if the messages on the frontend are correct according to the map.
You can validate using the test environments and just in case you want to local it is necessary to remove any mocks applied.
Use Paycomet’s instructions to simulate some of the mapped errors. In this case, we need to use the CVV field and enter the code informed by Paycomet. The codes are available in this document.
Analytics
Test Part 3: