Skip to content

SK-2157 custom input formatting for collect elements #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
raushan-skyflow merged 8 commits into from
Jul 8, 2025
Merged

SK-2157 custom input formatting for collect elements #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a8fc9fb
SK-2157 custom input formatting for collect elements
raushan-skyflow Jul 3, 2025
2b0bce3
Merge branch 'release/25.6.1' into raushan/2157-custom-input-formatti…
raushan-skyflow Jul 3, 2025
ac37949
SK-2157 trimmed the format string
raushan-skyflow Jul 3, 2025
154782a
SK-2157 unit test for card number, input field element & helpers func…
raushan-skyflow Jul 3, 2025
ec4abb8
SK-2157 update card number formatter & input field formatter
raushan-skyflow Jul 4, 2025
29382d5
SK-2157 fix unit test
raushan-skyflow Jul 4, 2025
0c1b2bb
SK-2157 update formatter for smoothly deletion
raushan-skyflow Jul 7, 2025
1c17d7f
SK-2168 input formatting with combination of constants & dynamic inpu…
raushan-skyflow Jul 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
128 changes: 124 additions & 4 deletions __tests__/core/collectElement.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,11 @@ describe('test Collect Element class', () => {
new SkyflowError(SKYFLOW_ERROR_CODE.INVALID_COLUMN_IN_COLLECT, [], true)
);

collecteElement = new CollectElement({ table: 'cards', column: 'test', skyflowID: '' }, {}, context);
collecteElement = new CollectElement(
{ table: 'cards', column: 'test', skyflowID: '' },
{},
context
);
expect(isValid).toThrow(
new SkyflowError(SKYFLOW_ERROR_CODE.EMPTY_SKYFLOW_ID_COLLECT, [], true)
);
Expand Down Expand Up @@ -515,8 +519,10 @@ describe('test Collect Element class', () => {
);
cardNumberElement.onDropdownSelect(CardType.DISCOVER);
cardNumberElement.onChangeElement('', true);
expect(cardNumberElement.getClientState().selectedCardScheme).toEqual('DISCOVER');
})
expect(cardNumberElement.getClientState().selectedCardScheme).toEqual(
'DISCOVER'
);
});

it('should remove spaces from value', () => {
const elementInput = {
Expand All @@ -529,4 +535,118 @@ describe('test Collect Element class', () => {
collectElement.updateValue('4111 1111 1111 1111');
expect(collectElement.getUnformattedValue()).toBe('4111111111111111');
});
});

it('test format option in card number element', () => {
const formatTestCases = [
// Test different valid formats for the card number
{
format: 'XXXX-XXXX-XXXX-XXXX',
input: '4111111111111111',
expected: '4111-1111-1111-1111',
},
{
format: 'XXXX XXXX XXXX XXXX',
input: '4111111111111111',
expected: '4111 1111 1111 1111',
},
// Test partial input
{
format: 'XXXX-XXXX-XXXX-XXXX',
input: '411111',
expected: '4111-11',
},
{
format: 'XXXX XXXX XXXX XXXX',
input: '411111',
expected: '4111 11',
},
// Test for invalid format, It will fallback to default format
{
format: ' xxxx-xxxx-xxxx ',
input: ' 4111111111111111 ',
expected: '4111 1111 1111 1111',
},
];

formatTestCases.forEach((testCase) => {
const collectElement = new CollectElement(
{
table: 'cards',
column: 'card_number',
type: ElementType.CARD_NUMBER,
containerType: ContainerType.COLLECT,
},
{
format: testCase.format,
},
context
);

collectElement.onChangeElement(testCase.input);
expect(collectElement.getInternalState().value).toBe(testCase.expected);
});
});

it('test format option in input field element', () => {
const formatTestCases = [
{
format: 'XX-XX-XX',
input: '123456',
expected: '12-34-56',
},
{
format: 'XXX XXX',
input: '123456',
expected: '123 456',
},
{
format: 'XX/XX/XX',
input: '123456',
expected: '12/34/56',
},
// Test partial input
{
format: 'XX-XX-XX',
input: '1234',
expected: '12-34',
},
// Test with special characters
{
format: 'XX@XX#XX',
input: '123456',
expected: '12@34#56',
},
// Test input longer than format
{
format: 'XX-XX',
input: '123456',
expected: '12-34',
},
// Test input with leading, trailing spaces & small format
{
format: ' xx-xx-xxx ',
input: ' 1234567 ',
expected: ' xx-xx-xxx ',
},
];

formatTestCases.forEach((testCase) => {
const collectElement = new CollectElement(
{
table: 'table',
column: 'column',
type: ElementType.INPUT_FIELD,
containerType: ContainerType.COLLECT,
},
{
format: testCase.format,
},
context
);

collectElement.onChangeElement(testCase.input);
expect(collectElement.getInternalState().value).toBe(testCase.expected);
expect(collectElement.getInternalState().isValid).toBe(true);
});
});
});
220 changes: 220 additions & 0 deletions __tests__/utils/helper.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
getYearAndMonthBasedOnFormat,
getMetaObject,
getDeviceModel,
formatInputFieldValue,
} from '../../src/utils/helpers';
import {
CardType,
Expand Down Expand Up @@ -300,4 +301,223 @@ describe('test getYearAndMonthBasedOnFormat function', () => {
year: '2032',
});
});

it('should format expiration date options correctly', () => {
const validFormats = ['MM/YY', 'MM/YYYY', 'YYYY/MM', 'YY/MM'];
validFormats.forEach((format) => {
const result = formatCollectElementOptions(
ElementType.EXPIRATION_DATE,
{ format },
LogLevel.WARN
);
expect(result).toEqual({
format,
required: false,
});
});
});

it('should use default format for invalid expiration date format', () => {
const result = formatCollectElementOptions(
ElementType.EXPIRATION_DATE,
{ format: 'INVALID' },
LogLevel.WARN
);
expect(result).toEqual({
format: DEFAULT_EXPIRATION_DATE_FORMAT,
required: false,
});
expect(printLog).toBeCalled();
});

it('should format expiration year options correctly', () => {
const validFormats = ['YY', 'YYYY'];
validFormats.forEach((format) => {
const result = formatCollectElementOptions(
ElementType.EXPIRATION_YEAR,
{ format },
LogLevel.WARN
);
expect(result).toEqual({
format,
required: false,
});
});
});

it('should use default format for invalid expiration year format', () => {
const result = formatCollectElementOptions(
ElementType.EXPIRATION_YEAR,
{ format: 'INVALID' },
LogLevel.WARN
);
expect(result).toEqual({
format: DEFAULT_EXPIRATION_YEAR_FORMAT,
required: false,
});
expect(printLog).toBeCalled();
});
});

describe('test formatCardNumber with different formats', () => {
const testCases = [
{
input: '4111111111111111',
type: CardType.VISA,
format: 'XXXX-XXXX-XXXX-XXXX',
expected: '4111-1111-1111-1111',
},
{
input: '378282246310005',
type: CardType.AMEX,
format: 'XXXX-XXXX-XXXX-XXXX',
expected: '3782-822463-10005',
},
{
input: '6011111111111117',
type: CardType.DISCOVER,
format: 'XXXX XXXX XXXX XXXX',
expected: '6011 1111 1111 1117',
},
// Test partial inputs
{
input: '411111',
type: CardType.VISA,
format: 'XXXX-XXXX-XXXX-XXXX',
expected: '4111-11',
},
// Test empty input
{
input: '',
type: CardType.DEFAULT,
format: 'XXXX-XXXX-XXXX-XXXX',
expected: '',
},
];

testCases.forEach((testCase) => {
it(`should format ${testCase.type} card number correctly with format ${testCase.format}`, () => {
expect(
formatCardNumber(testCase.input, testCase.type, testCase.format)
).toBe(testCase.expected);
});
});
});

describe('test formatInputFieldValue with different formats', () => {
const testCases = [
{
input: '123456',
format: 'XX-XX-XX',
expected: '12-34-56',
},
{
input: '123456',
format: 'XXX XXX',
expected: '123 456',
},
{
input: '12345',
format: 'XX/XX/X',
expected: '12/34/5',
},
{
input: '1567C89',
format: 'XX/XYX/X',
translation: { X: '[5-9]', Y: '[A-C]' },
expected: '56/7C8/9',
},
// Combination of constants and dynamic inputs
{
input: '1234121234',
format: '+91 XXXX-XX-XXXX',
expected: '+91 1234-12-1234',
},
{
input: 'B5678978C7QAB97',
format: '91 YXX-XZX-XXY-XZYXX',
translation: { X: '[5-9]', Y: '[A-C]' },
expected: '91 B56-7Z8-97C-7ZA97',
},
// Test with special characters in format
{
input: '123456',
format: 'XX@XX#XX',
expected: '12@34#56',
},
// Test partial input
{
input: '123',
format: 'XX-XX-XX',
expected: '12-3',
},
// Test input longer than format
{
input: '1234567',
format: 'XX-XX',
expected: '12-34',
},
// Test empty input
{
input: '',
format: 'XX-XX',
expected: '',
},
// Test with no format
{
input: '123456',
format: '',
expected: '123456',
},
];

testCases.forEach((testCase) => {
const translation = testCase.translation || {
X: '[0-9]',
};
it(`should format input '${testCase.input}' with format '${
testCase.format
}' & translation '${JSON.stringify(translation)}' correctly`, () => {
expect(
formatInputFieldValue(
testCase.input,
testCase.format,
testCase?.translation
)
).toBe(testCase.expected);
});
});
});

describe('test formatCollectElementOptions for different element types', () => {
it('should format card number options correctly', () => {
const options = {
format: 'XXXX-XXXX-XXXX-XXXX',
required: true,
};
const result = formatCollectElementOptions(
ElementType.CARD_NUMBER,
options,
LogLevel.WARN
);
expect(result).toEqual({
format: 'XXXX-XXXX-XXXX-XXXX',
required: true,
});
});

it('should preserve other options while formatting', () => {
const options = {
format: 'XXXX-XXXX-XXXX-XXXX',
required: true,
enableCardIcon: true,
customOption: 'value',
};
const result = formatCollectElementOptions(
ElementType.CARD_NUMBER,
options,
LogLevel.WARN
);
expect(result).toEqual(options);
});
});
Loading