SK-2050: Public release - Add Set Token in Reveal Element

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`test Collect And Reveal Elements Components test CardHolderNameElement component 1`] = `
+exports[`test Collect Elements Components test CardHolderNameElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -26,11 +26,12 @@ exports[`test Collect And Reveal Elements Components test CardHolderNameElement
   />
   <Text
     style={Object {}}
+    testID="name-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test CardNumberElement component 1`] = `
+exports[`test Collect Elements Components test CardNumberElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -89,11 +90,12 @@ exports[`test Collect And Reveal Elements Components test CardNumberElement comp
   </View>
   <Text
     style={Object {}}
+    testID="cardnumber-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test CvvElement component 1`] = `
+exports[`test Collect Elements Components test CvvElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -121,11 +123,12 @@ exports[`test Collect And Reveal Elements Components test CvvElement component 1
   />
   <Text
     style={Object {}}
+    testID="cvv-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test ExpirationDateElement component 1`] = `
+exports[`test Collect Elements Components test ExpirationDateElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -153,11 +156,12 @@ exports[`test Collect And Reveal Elements Components test ExpirationDateElement
   />
   <Text
     style={Object {}}
+    testID="date-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test ExpirationMonthElement component 1`] = `
+exports[`test Collect Elements Components test ExpirationMonthElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -185,11 +189,12 @@ exports[`test Collect And Reveal Elements Components test ExpirationMonthElement
   />
   <Text
     style={Object {}}
+    testID="month-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test ExpirationYearElement component 1`] = `
+exports[`test Collect Elements Components test ExpirationYearElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -217,11 +222,12 @@ exports[`test Collect And Reveal Elements Components test ExpirationYearElement
   />
   <Text
     style={Object {}}
+    testID="year-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test InputFieldElement component 1`] = `
+exports[`test Collect Elements Components test InputFieldElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -247,11 +253,12 @@ exports[`test Collect And Reveal Elements Components test InputFieldElement comp
   />
   <Text
     style={Object {}}
+    testID="inputfield-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test PinElement component 1`] = `
+exports[`test Collect Elements Components test PinElement component 1`] = `
 <View>
   <Text
     style={Object {}}
@@ -279,11 +286,12 @@ exports[`test Collect And Reveal Elements Components test PinElement component 1
   />
   <Text
     style={Object {}}
+    testID="pin-error"
   />
 </View>
 `;
 
-exports[`test Collect And Reveal Elements Components test RevealElement component 1`] = `
+exports[`test Collect Elements Components test Reveal Elements Components renders correctly with the handler & snapshot 1`] = `
 Array [
   <Text
     style={Object {}}
@@ -298,12 +306,33 @@ Array [
   </Text>,
   <Text
     style={Object {}}
+    testID="Card Number-error"
   />,
 ]
 `;
 
-exports[`test Collect And Reveal Elements Components test skyflow provider 1`] = `
+exports[`test Collect Elements Components test RevealElement component rendering 1`] = `
+Array [
+  <Text
+    style={Object {}}
+  >
+    Card Number
+  </Text>,
+  <Text
+    selectable={true}
+    style={Object {}}
+  >
+    XXXX XXXX XXXX XXXX
+  </Text>,
+  <Text
+    style={Object {}}
+    testID="Card Number-error"
+  />,
+]
+`;
+
+exports[`test Collect Elements Components test skyflow provider 1`] = `
 <Text>
-  Provider Childern
+  Provider Children
 </Text>
 `;

__tests__/components/components.test.js

@@ -21,6 +21,7 @@ import { Text } from 'react-native';
 import SkyflowError from '../../src/utils/skyflow-error';
 import SKYFLOW_ERROR_CODE from '../../src/utils/skyflow-error-code';
 import { ContainerType, ElementType } from '../../src/utils/constants';
+import { act } from 'react-test-renderer';
 
 const testSkyflowClient = new Skyflow({
   vaultID: '1234',
@@ -37,7 +38,7 @@ const changeTrigger = jest.fn();
 const foucsTrigger = jest.fn();
 const blurTrigger = jest.fn();
 
-describe('test Collect And Reveal Elements Components', () => {
+describe('test Collect Elements Components', () => {
   let collectContainer;
   beforeEach(() => {
     jest.clearAllMocks();
@@ -558,11 +559,112 @@ describe('test Collect And Reveal Elements Components', () => {
     }
   });
 
-  it('test RevealElement component', () => {
+  describe('test Reveal Elements Components', () => {
+    it('renders correctly with the handler & snapshot', () => {
+      const revealSetMethodMock = jest.fn();
+      const revealContainer = new RevealContainer(testSkyflowClient);
+      jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
+        setMethods: revealSetMethodMock,
+      }));
+
+      const revealElement = render(
+        <RevealElement
+          token={'test_token'}
+          container={revealContainer}
+          label={'Card Number'}
+          altText={'XXXX XXXX XXXX XXXX'}
+        />
+      );
+
+      expect(revealElement).toMatchSnapshot();
+      expect(revealSetMethodMock).toBeCalledTimes(1);
+
+      // render without alttext
+      const revealElement2 = render(
+        <RevealElement
+          token={'test_token'}
+          container={revealContainer}
+          label={'Card Number'}
+        />
+      );
+      try {
+        render(<RevealElement token={'test_token'} label={'Card Number'} />);
+      } catch (err) {
+        expect(err).toEqual(
+          new SkyflowError(
+            SKYFLOW_ERROR_CODE.CONTAINER_OBJECT_IS_REQUIRED,
+            ['Reveal', 'useRevealContainer()'],
+            true
+          )
+        );
+      }
+    });
+
+    it('renders formatted value when format is provided', () => {
+      const revealSetMethodMock = jest.fn();
+      const revealContainer = new RevealContainer(testSkyflowClient);
+      jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
+        setMethods: revealSetMethodMock,
+      }));
+
+      const format = 'XXXX XXXX XXXX XXXX';
+      const altText = '4111111111111111';
+
+      render(
+        <RevealElement
+          token={'test_token'}
+          container={revealContainer}
+          label={'Card Number'}
+          altText={altText}
+          format={format}
+          testID="reveal-format"
+        />
+      );
+
+      // Should format altText using format
+      expect(screen.getByTestId('reveal-format').props.children).toBe(
+        '4111 1111 1111 1111'
+      );
+    });
+
+    it('renders formatted value when format and translation are provided', () => {
+      const revealSetMethodMock = jest.fn();
+      const revealContainer = new RevealContainer(testSkyflowClient);
+      jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
+        setMethods: revealSetMethodMock,
+      }));
+
+      const format = 'XX-XX-XX-YYZ-ZZX';
+      const translation = { X: '[0-9]', Y: '[A-Z]' };
+      const altText = '123456AB7';
+
+      render(
+        <RevealElement
+          token={'test_token'}
+          container={revealContainer}
+          label={'Code'}
+          altText={altText}
+          format={format}
+          translation={translation}
+          testID="reveal-format-translation"
+        />
+      );
+
+      // Should format altText using format and translation
+      expect(
+        screen.getByTestId('reveal-format-translation').props.children
+      ).toBe('12-34-56-ABZ-ZZ7');
+    });
+  });
+
+  it('test RevealElement component rendering', () => {
     const revealSetMethodMock = jest.fn();
+    const revealSetTokenMock = jest.fn();
     const revealContainer = new RevealContainer(testSkyflowClient);
+
     jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
       setMethods: revealSetMethodMock,
+      setToken: revealSetTokenMock,
     }));
 
     const revealElement = render(
@@ -577,14 +679,15 @@ describe('test Collect And Reveal Elements Components', () => {
     expect(revealElement).toMatchSnapshot();
     expect(revealSetMethodMock).toBeCalledTimes(1);
 
-    // render without alttext
-    const revealElement2 = render(
+    render(
       <RevealElement
-        token={'test_token'}
+        token={'test_token_no_alt'}
         container={revealContainer}
         label={'Card Number'}
       />
     );
+    expect(screen.getByText('test_token_no_alt')).toBeTruthy();
+
     try {
       render(<RevealElement token={'test_token'} label={'Card Number'} />);
     } catch (err) {
@@ -598,6 +701,40 @@ describe('test Collect And Reveal Elements Components', () => {
     }
   });
 
+  it('test RevealElement setToken via ref updates UI and internal element', () => {
+    const revealSetMethodMock = jest.fn();
+    const revealSetTokenMock = jest.fn();
+    const revealContainer = new RevealContainer(testSkyflowClient);
+
+    jest.spyOn(revealContainer, 'create').mockImplementation(() => ({
+      setMethods: revealSetMethodMock,
+      setToken: revealSetTokenMock,
+    }));
+
+    const ref = React.createRef();
+    const initialToken = 'initial_token_123';
+    const newToken = 'updated_token_456';
+
+    const { getByText } = render(
+      <RevealElement
+        ref={ref}
+        token={initialToken}
+        container={revealContainer}
+        label={'Card Number'}
+      />
+    );
+
+    expect(getByText(initialToken)).toBeTruthy();
+
+    act(() => {
+      ref.current.setToken(newToken);
+    });
+
+    expect(revealSetTokenMock).toHaveBeenCalledWith(newToken);
+
+    expect(getByText(newToken)).toBeTruthy();
+  });
+
   it('test skyflow provider', () => {
     const testSkyflowConfig = {
       vaultID: '1234',
@@ -607,7 +744,7 @@ describe('test Collect And Reveal Elements Components', () => {
 
     const providerElement = render(
       <SkyflowProvider config={testSkyflowConfig}>
-        <Text>Provider Childern</Text>
+        <Text>Provider Children</Text>
       </SkyflowProvider>
     );
     expect(providerElement).toMatchSnapshot();