diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.test.tsx b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.test.tsx new file mode 100644 index 00000000000..6b6b65abea9 --- /dev/null +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.test.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import { render } from '@testing-library/react-native'; +import TemplateConfirmation, { + TemplateConfirmationProps, +} from './TemplateConfirmation'; +import { ApprovalTypes } from '../../../../../../core/RPCMethods/RPCMethodMiddleware'; +import { getTemplateValues } from './Templates'; + +jest.mock('./Templates', () => ({ + getTemplateValues: jest.fn(), +})); + +const CONTENT_MOCK = 'CONTENT_MOCK'; +const CANCEL_TEXT_MOCK = 'CANCEL_TEXT_MOCK'; +const CONFIRM_TEXT_MOCK = 'CONFIRM_TEXT_MOCK'; + +describe('TemplateConfirmation', () => { + const mockProps: TemplateConfirmationProps = { + approvalRequest: { + id: 'mocked', + origin: 'metamask', + requestData: { + data: '123', + }, + // Add props here in order to satisfy the type + type: ApprovalTypes.RESULT_SUCCESS, + expectsResult: false, + requestState: null, + time: 123456, + }, + onConfirm: jest.fn(), + onCancel: jest.fn(), + }; + + it('renders content and actions', () => { + (getTemplateValues as jest.Mock).mockReturnValue({ + content: [CONTENT_MOCK], + cancelText: CANCEL_TEXT_MOCK, + confirmText: CONFIRM_TEXT_MOCK, + }); + const wrapper = render(); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.queryByText(CONTENT_MOCK)).toBeDefined(); + expect(wrapper.queryByText(CANCEL_TEXT_MOCK)).toBeDefined(); + expect(wrapper.queryByText(CONFIRM_TEXT_MOCK)).toBeDefined(); + }); + + it('renders content without actions', () => { + (getTemplateValues as jest.Mock).mockReturnValue({ + content: [CONTENT_MOCK], + cancelText: CANCEL_TEXT_MOCK, + confirmText: CONFIRM_TEXT_MOCK, + hideSubmitButton: true, + hideCancelButton: true, + }); + const wrapper = render(); + + expect(wrapper).toMatchSnapshot(); + expect(wrapper.queryByText(CONTENT_MOCK)).toBeDefined(); + expect(wrapper.queryByText(CANCEL_TEXT_MOCK)).toBeNull(); + expect(wrapper.queryByText(CONFIRM_TEXT_MOCK)).toBeNull(); + }); +}); diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.tsx b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.tsx index 9c8de750a4d..3275fcae857 100644 --- a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.tsx +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/TemplateConfirmation.tsx @@ -61,16 +61,18 @@ const TemplateConfirmation = ({ }; }, [templatedValues.onCancel, onCancel, templatedValues]); - const buttons = [ - { + const buttons = []; + + if (!templatedValues.hideSubmitButton) { + buttons.push({ variant: ButtonVariants.Primary, label: templatedValues.confirmText ?? strings('template_confirmation.ok'), size: ButtonSize.Lg, onPress: templatedValues.onConfirm ?? onConfirm, - }, - ]; + }); + } - if (!templatedValues.onlyConfirmButton) { + if (!templatedValues.hideCancelButton) { buttons.push({ variant: ButtonVariants.Secondary, label: @@ -83,12 +85,14 @@ const TemplateConfirmation = ({ return ( - - - + {buttons.length > 0 && ( + + + + )} ); }; diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/ApprovalResult.ts b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/ApprovalResult.ts index 43e246e2a92..ec6e2dc5dc2 100644 --- a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/ApprovalResult.ts +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/ApprovalResult.ts @@ -114,7 +114,7 @@ function getValues( ], confirmText: strings('approval_result.ok'), onConfirm: actions.onConfirm, - onlyConfirmButton: true, + hideCancelButton: true, }; } diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/index.ts b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/index.ts index 09468686c08..c1971934865 100644 --- a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/index.ts +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/Templates/index.ts @@ -10,9 +10,10 @@ export interface ConfirmationTemplateValues { cancelText?: string; confirmText?: string; content: TemplateRendererInput; + hideCancelButton?: boolean; + hideSubmitButton?: boolean; onCancel?: () => void; onConfirm?: (opts?: AcceptOptions) => void; - onlyConfirmButton?: boolean; loadingText?: string; } @@ -37,9 +38,10 @@ const ALLOWED_TEMPLATE_KEYS: string[] = [ 'cancelText', 'confirmText', 'content', + 'hideCancelButton', + 'hideSubmitButton', 'onCancel', 'onConfirm', - 'onlyConfirmButton', 'loadingText', ]; diff --git a/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap new file mode 100644 index 00000000000..75314dc931b --- /dev/null +++ b/app/components/Views/confirmations/components/Approval/TemplateConfirmation/__snapshots__/TemplateConfirmation.test.tsx.snap @@ -0,0 +1,173 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TemplateConfirmation renders content and actions 1`] = ` + + + CONTENT_MOCK + + + + + + CONFIRM_TEXT_MOCK + + + + + CANCEL_TEXT_MOCK + + + + + +`; + +exports[`TemplateConfirmation renders content without actions 1`] = ` + + + CONTENT_MOCK + + +`;