Skip to content

Commit 1ca624f

Browse files
saileshwar-skyflowsaileshwar-skyflow
authored
SK-2050: Public release - Add Set Token in Reveal Element (#118)
* SK-2126 insert unformatted card number to vault (#107) * SK-2173 support input formatting in reveal elements (#110) * SK-2173 fix card number regex (#111) * SK-2173 revert unformatted card no insertion to vault (#112) * SK-2167 fix critical vulnerabilities (#113) * SK-2050: set tokens in reveal elements
1 parent 4d75b41 commit 1ca624f

34 files changed

Lines changed: 1034 additions & 123 deletions

File tree

‎__tests__/components/__snapshots__/components.test.js.snap‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`test Collect And Reveal Elements Components test CardHolderNameElement component 1`] = `
3+
exports[`test Collect Elements Components test CardHolderNameElement component 1`] = `
44
<View>
55
<Text
66
style={Object {}}
@@ -26,11 +26,12 @@ exports[`test Collect And Reveal Elements Components test CardHolderNameElement
2626
/>
2727
<Text
2828
style={Object {}}
29+
testID="name-error"
2930
/>
3031
</View>
3132
`;
3233

33-
exports[`test Collect And Reveal Elements Components test CardNumberElement component 1`] = `
34+
exports[`test Collect Elements Components test CardNumberElement component 1`] = `
3435
<View>
3536
<Text
3637
style={Object {}}
@@ -89,11 +90,12 @@ exports[`test Collect And Reveal Elements Components test CardNumberElement comp
8990
</View>
9091
<Text
9192
style={Object {}}
93+
testID="cardnumber-error"
9294
/>
9395
</View>
9496
`;
9597

96-
exports[`test Collect And Reveal Elements Components test CvvElement component 1`] = `
98+
exports[`test Collect Elements Components test CvvElement component 1`] = `
9799
<View>
98100
<Text
99101
style={Object {}}
@@ -121,11 +123,12 @@ exports[`test Collect And Reveal Elements Components test CvvElement component 1
121123
/>
122124
<Text
123125
style={Object {}}
126+
testID="cvv-error"
124127
/>
125128
</View>
126129
`;
127130

128-
exports[`test Collect And Reveal Elements Components test ExpirationDateElement component 1`] = `
131+
exports[`test Collect Elements Components test ExpirationDateElement component 1`] = `
129132
<View>
130133
<Text
131134
style={Object {}}
@@ -153,11 +156,12 @@ exports[`test Collect And Reveal Elements Components test ExpirationDateElement
153156
/>
154157
<Text
155158
style={Object {}}
159+
testID="date-error"
156160
/>
157161
</View>
158162
`;
159163

160-
exports[`test Collect And Reveal Elements Components test ExpirationMonthElement component 1`] = `
164+
exports[`test Collect Elements Components test ExpirationMonthElement component 1`] = `
161165
<View>
162166
<Text
163167
style={Object {}}
@@ -185,11 +189,12 @@ exports[`test Collect And Reveal Elements Components test ExpirationMonthElement
185189
/>
186190
<Text
187191
style={Object {}}
192+
testID="month-error"
188193
/>
189194
</View>
190195
`;
191196

192-
exports[`test Collect And Reveal Elements Components test ExpirationYearElement component 1`] = `
197+
exports[`test Collect Elements Components test ExpirationYearElement component 1`] = `
193198
<View>
194199
<Text
195200
style={Object {}}
@@ -217,11 +222,12 @@ exports[`test Collect And Reveal Elements Components test ExpirationYearElement
217222
/>
218223
<Text
219224
style={Object {}}
225+
testID="year-error"
220226
/>
221227
</View>
222228
`;
223229

224-
exports[`test Collect And Reveal Elements Components test InputFieldElement component 1`] = `
230+
exports[`test Collect Elements Components test InputFieldElement component 1`] = `
225231
<View>
226232
<Text
227233
style={Object {}}
@@ -247,11 +253,12 @@ exports[`test Collect And Reveal Elements Components test InputFieldElement comp
247253
/>
248254
<Text
249255
style={Object {}}
256+
testID="inputfield-error"
250257
/>
251258
</View>
252259
`;
253260

254-
exports[`test Collect And Reveal Elements Components test PinElement component 1`] = `
261+
exports[`test Collect Elements Components test PinElement component 1`] = `
255262
<View>
256263
<Text
257264
style={Object {}}
@@ -279,11 +286,12 @@ exports[`test Collect And Reveal Elements Components test PinElement component 1
279286
/>
280287
<Text
281288
style={Object {}}
289+
testID="pin-error"
282290
/>
283291
</View>
284292
`;
285293

286-
exports[`test Collect And Reveal Elements Components test RevealElement component 1`] = `
294+
exports[`test Collect Elements Components test Reveal Elements Components renders correctly with the handler & snapshot 1`] = `
287295
Array [
288296
<Text
289297
style={Object {}}
@@ -298,12 +306,33 @@ Array [
298306
</Text>,
299307
<Text
300308
style={Object {}}
309+
testID="Card Number-error"
301310
/>,
302311
]
303312
`;
304313

305-
exports[`test Collect And Reveal Elements Components test skyflow provider 1`] = `
314+
exports[`test Collect Elements Components test RevealElement component rendering 1`] = `
315+
Array [
316+
<Text
317+
style={Object {}}
318+
>
319+
Card Number
320+
</Text>,
321+
<Text
322+
selectable={true}
323+
style={Object {}}
324+
>
325+
XXXX XXXX XXXX XXXX
326+
</Text>,
327+
<Text
328+
style={Object {}}
329+
testID="Card Number-error"
330+
/>,
331+
]
332+
`;
333+
334+
exports[`test Collect Elements Components test skyflow provider 1`] = `
306335
<Text>
307-
Provider Childern
336+
Provider Children
308337
</Text>
309338
`;

‎__tests__/components/components.test.js‎

Lines changed: 143 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { Text } from 'react-native';
2121
import SkyflowError from '../../src/utils/skyflow-error';
2222
import SKYFLOW_ERROR_CODE from '../../src/utils/skyflow-error-code';
2323
import { ContainerType, ElementType } from '../../src/utils/constants';
24+
import { act } from 'react-test-renderer';
2425

2526
const testSkyflowClient = new Skyflow({
2627
vaultID: '1234',
@@ -37,7 +38,7 @@ const changeTrigger = jest.fn();
3738
const foucsTrigger = jest.fn();
3839
const blurTrigger = jest.fn();
3940

40-
describe('test Collect And Reveal Elements Components', () => {
41+
describe('test Collect Elements Components', () => {
4142
let collectContainer;
4243
beforeEach(() => {
4344
jest.clearAllMocks();
@@ -558,11 +559,112 @@ describe('test Collect And Reveal Elements Components', () => {
558559
}
559560
});
560561

561-
it('test RevealElement component', () => {
562+
describe('test Reveal Elements Components', () => {
563+
it('renders correctly with the handler & snapshot', () => {
564+
const revealSetMethodMock = jest.fn();
565+
const revealContainer = new RevealContainer(testSkyflowClient);
566+
jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
567+
setMethods: revealSetMethodMock,
568+
}));
569+
570+
const revealElement = render(
571+
<RevealElement
572+
token={'test_token'}
573+
container={revealContainer}
574+
label={'Card Number'}
575+
altText={'XXXX XXXX XXXX XXXX'}
576+
/>
577+
);
578+
579+
expect(revealElement).toMatchSnapshot();
580+
expect(revealSetMethodMock).toBeCalledTimes(1);
581+
582+
// render without alttext
583+
const revealElement2 = render(
584+
<RevealElement
585+
token={'test_token'}
586+
container={revealContainer}
587+
label={'Card Number'}
588+
/>
589+
);
590+
try {
591+
render(<RevealElement token={'test_token'} label={'Card Number'} />);
592+
} catch (err) {
593+
expect(err).toEqual(
594+
new SkyflowError(
595+
SKYFLOW_ERROR_CODE.CONTAINER_OBJECT_IS_REQUIRED,
596+
['Reveal', 'useRevealContainer()'],
597+
true
598+
)
599+
);
600+
}
601+
});
602+
603+
it('renders formatted value when format is provided', () => {
604+
const revealSetMethodMock = jest.fn();
605+
const revealContainer = new RevealContainer(testSkyflowClient);
606+
jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
607+
setMethods: revealSetMethodMock,
608+
}));
609+
610+
const format = 'XXXX XXXX XXXX XXXX';
611+
const altText = '4111111111111111';
612+
613+
render(
614+
<RevealElement
615+
token={'test_token'}
616+
container={revealContainer}
617+
label={'Card Number'}
618+
altText={altText}
619+
format={format}
620+
testID="reveal-format"
621+
/>
622+
);
623+
624+
// Should format altText using format
625+
expect(screen.getByTestId('reveal-format').props.children).toBe(
626+
'4111 1111 1111 1111'
627+
);
628+
});
629+
630+
it('renders formatted value when format and translation are provided', () => {
631+
const revealSetMethodMock = jest.fn();
632+
const revealContainer = new RevealContainer(testSkyflowClient);
633+
jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
634+
setMethods: revealSetMethodMock,
635+
}));
636+
637+
const format = 'XX-XX-XX-YYZ-ZZX';
638+
const translation = { X: '[0-9]', Y: '[A-Z]' };
639+
const altText = '123456AB7';
640+
641+
render(
642+
<RevealElement
643+
token={'test_token'}
644+
container={revealContainer}
645+
label={'Code'}
646+
altText={altText}
647+
format={format}
648+
translation={translation}
649+
testID="reveal-format-translation"
650+
/>
651+
);
652+
653+
// Should format altText using format and translation
654+
expect(
655+
screen.getByTestId('reveal-format-translation').props.children
656+
).toBe('12-34-56-ABZ-ZZ7');
657+
});
658+
});
659+
660+
it('test RevealElement component rendering', () => {
562661
const revealSetMethodMock = jest.fn();
662+
const revealSetTokenMock = jest.fn();
563663
const revealContainer = new RevealContainer(testSkyflowClient);
664+
564665
jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
565666
setMethods: revealSetMethodMock,
667+
setToken: revealSetTokenMock,
566668
}));
567669

568670
const revealElement = render(
@@ -577,14 +679,15 @@ describe('test Collect And Reveal Elements Components', () => {
577679
expect(revealElement).toMatchSnapshot();
578680
expect(revealSetMethodMock).toBeCalledTimes(1);
579681

580-
// render without alttext
581-
const revealElement2 = render(
682+
render(
582683
<RevealElement
583-
token={'test_token'}
684+
token={'test_token_no_alt'}
584685
container={revealContainer}
585686
label={'Card Number'}
586687
/>
587688
);
689+
expect(screen.getByText('test_token_no_alt')).toBeTruthy();
690+
588691
try {
589692
render(<RevealElement token={'test_token'} label={'Card Number'} />);
590693
} catch (err) {
@@ -598,6 +701,40 @@ describe('test Collect And Reveal Elements Components', () => {
598701
}
599702
});
600703

704+
it('test RevealElement setToken via ref updates UI and internal element', () => {
705+
const revealSetMethodMock = jest.fn();
706+
const revealSetTokenMock = jest.fn();
707+
const revealContainer = new RevealContainer(testSkyflowClient);
708+
709+
jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
710+
setMethods: revealSetMethodMock,
711+
setToken: revealSetTokenMock,
712+
}));
713+
714+
const ref = React.createRef();
715+
const initialToken = 'initial_token_123';
716+
const newToken = 'updated_token_456';
717+
718+
const { getByText } = render(
719+
<RevealElement
720+
ref={ref}
721+
token={initialToken}
722+
container={revealContainer}
723+
label={'Card Number'}
724+
/>
725+
);
726+
727+
expect(getByText(initialToken)).toBeTruthy();
728+
729+
act(() => {
730+
ref.current.setToken(newToken);
731+
});
732+
733+
expect(revealSetTokenMock).toHaveBeenCalledWith(newToken);
734+
735+
expect(getByText(newToken)).toBeTruthy();
736+
});
737+
601738
it('test skyflow provider', () => {
602739
const testSkyflowConfig = {
603740
vaultID: '1234',
@@ -607,7 +744,7 @@ describe('test Collect And Reveal Elements Components', () => {
607744

608745
const providerElement = render(
609746
<SkyflowProvider config={testSkyflowConfig}>
610-
<Text>Provider Childern</Text>
747+
<Text>Provider Children</Text>
611748
</SkyflowProvider>
612749
);
613750
expect(providerElement).toMatchSnapshot();

0 commit comments

Comments
 (0)