diff --git a/app/containers/Passcode/Base/Base.stories.tsx b/app/containers/Passcode/Base/Base.stories.tsx new file mode 100644 index 00000000000..5025ebd4dcb --- /dev/null +++ b/app/containers/Passcode/Base/Base.stories.tsx @@ -0,0 +1,56 @@ +import React, { useRef } from 'react'; +import { View } from 'react-native'; + +import Base, { type IBase } from '.'; +import { TYPE } from '../constants'; + +export default { + title: 'Passcode/Base' +}; + +const PasscodeBase = ({ ...props }) => { + const ref = useRef(null); + return {}} {...props} />; +}; + +export const ChooseType = () => ( + + + +); + +export const ConfirmType = () => ( + + {}} /> + +); + +export const EnterType = () => ( + + + +); + +export const WithSubtitle = () => ( + + + +); + +export const WithBiometry = () => ( + + {}} /> + +); + +export const EnterWithSubtitleAndBiometry = () => ( + + {}} + /> + +); diff --git a/app/containers/Passcode/Base/Base.test.tsx b/app/containers/Passcode/Base/Base.test.tsx new file mode 100644 index 00000000000..79fc565b778 --- /dev/null +++ b/app/containers/Passcode/Base/Base.test.tsx @@ -0,0 +1,60 @@ +import React, { createRef } from 'react'; +import { render } from '@testing-library/react-native'; + +import { generateSnapshots } from '../../../../.rnstorybook/generateSnapshots'; +import Base, { type IBase } from '.'; +import { TYPE } from '../constants'; +import * as stories from './Base.stories'; + +const onEndProcessMock = jest.fn(); + +const TestBase = ({ ...props }) => { + const ref = createRef(); + return ; +}; + +describe('Base Passcode Component', () => { + beforeEach(() => { + onEndProcessMock.mockClear(); + }); + + test('should render with title', () => { + const { getByText } = render(); + expect(getByText('Enter Passcode')).toBeTruthy(); + }); + + test('should render with subtitle when provided', () => { + const { getByText } = render(); + expect(getByText('Authentication required')).toBeTruthy(); + }); + + test('should not render subtitle when not provided', () => { + const { queryByText } = render(); + expect(queryByText('Authentication required')).toBeNull(); + }); + + test('should expose ref methods', () => { + const ref = createRef(); + render(); + expect(ref.current?.clearPasscode).toBeDefined(); + expect(ref.current?.wrongPasscode).toBeDefined(); + expect(ref.current?.animate).toBeDefined(); + }); + + test('should render biometry button when showBiometry is true', () => { + const { getByTestId } = render( {}} />); + expect(getByTestId('biometry-button')).toBeTruthy(); + }); + + test('should render all passcode buttons with testIDs', () => { + const { getByTestId } = render(); + // Number buttons 0-9 + for (let i = 0; i <= 9; i++) { + expect(getByTestId(`passcode-button-${i}`)).toBeTruthy(); + } + // backspace button + expect(getByTestId('passcode-button-backspace')).toBeTruthy(); + }); +}); + +generateSnapshots(stories); diff --git a/app/containers/Passcode/Base/Button.tsx b/app/containers/Passcode/Base/Button.tsx index ebce47d9858..2a88761a38a 100644 --- a/app/containers/Passcode/Base/Button.tsx +++ b/app/containers/Passcode/Base/Button.tsx @@ -12,15 +12,17 @@ interface IPasscodeButton { disabled?: boolean; onPress?: Function; style?: StyleProp; + testID?: string; } -const Button = React.memo(({ style, text, disabled, onPress, icon }: IPasscodeButton) => { +const Button = React.memo(({ style, text, disabled, onPress, icon, testID }: IPasscodeButton) => { const { colors } = useTheme(); const press = () => onPress && onPress(text); return ( + + + + + +  + + + + + + + Create Passcode + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + 2 + + + + + + + + + + 3 + + + + + + + + + + + + 4 + + + + + + + + + + 5 + + + + + + + + + + 6 + + + + + + + + + + + + 7 + + + + + + + + + + 8 + + + + + + + + + + 9 + + + + + + + + + + + + + 0 + + + + + + + + + +  + + + + + + + + +`; + +exports[`Story Snapshots: ConfirmType should match snapshot 1`] = ` + + + + + + +  + + + + + + + Confirm Passcode + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + 2 + + + + + + + + + + 3 + + + + + + + + + + + + 4 + + + + + + + + + + 5 + + + + + + + + + + 6 + + + + + + + + + + + + 7 + + + + + + + + + + 8 + + + + + + + + + + 9 + + + + + + + + + + + + + 0 + + + + + + + + + +  + + + + + + + + +`; + +exports[`Story Snapshots: EnterType should match snapshot 1`] = ` + + + + + + +  + + + + + + + Enter Passcode + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + 2 + + + + + + + + + + 3 + + + + + + + + + + + + 4 + + + + + + + + + + 5 + + + + + + + + + + 6 + + + + + + + + + + + + 7 + + + + + + + + + + 8 + + + + + + + + + + 9 + + + + + + + + + + + + + 0 + + + + + + + + + +  + + + + + + + + +`; + +exports[`Story Snapshots: EnterWithSubtitleAndBiometry should match snapshot 1`] = ` + + + + + + +  + + + + + + + Unlock App + + + + + + + Authentication required + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + 2 + + + + + + + + + + 3 + + + + + + + + + + + + 4 + + + + + + + + + + 5 + + + + + + + + + + 6 + + + + + + + + + + + + 7 + + + + + + + + + + 8 + + + + + + + + + + 9 + + + + + + + + + + + +  + + + + + + + + + + 0 + + + + + + + + + +  + + + + + + + + +`; + +exports[`Story Snapshots: WithBiometry should match snapshot 1`] = ` + + + + + + +  + + + + + + + Enter Passcode + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + 2 + + + + + + + + + + 3 + + + + + + + + + + + + 4 + + + + + + + + + + 5 + + + + + + + + + + 6 + + + + + + + + + + + + 7 + + + + + + + + + + 8 + + + + + + + + + + 9 + + + + + + + + + + + +  + + + + + + + + + + 0 + + + + + + + + + +  + + + + + + + + +`; + +exports[`Story Snapshots: WithSubtitle should match snapshot 1`] = ` + + + + + + +  + + + + + + + Create Passcode + + + + + + + This passcode will protect your data + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 1 + + + + + + + + + + 2 + + + + + + + + + + 3 + + + + + + + + + + + + 4 + + + + + + + + + + 5 + + + + + + + + + + 6 + + + + + + + + + + + + 7 + + + + + + + + + + 8 + + + + + + + + + + 9 + + + + + + + + + + + + + 0 + + + + + + + + + +  + + + + + + + + +`; diff --git a/app/containers/Passcode/Base/index.tsx b/app/containers/Passcode/Base/index.tsx index 5a78b58aabe..ca0ae6961d7 100644 --- a/app/containers/Passcode/Base/index.tsx +++ b/app/containers/Passcode/Base/index.tsx @@ -113,37 +113,37 @@ const Base = forwardRef( {range(1, 4).map(i => ( -