From d05541f7e90385b12f06cf3d744e5453da1f9daa Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 7 Jan 2025 18:54:40 +0800 Subject: [PATCH 1/5] fix hidden shows when sending invoice to new user --- src/components/DisplayNames/index.native.tsx | 1 + src/components/ReportActionItem/ReportPreview.tsx | 7 ++++++- src/libs/ReportUtils.ts | 8 ++++---- 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/components/DisplayNames/index.native.tsx b/src/components/DisplayNames/index.native.tsx index ceee34586e8b..3ca810aa4d36 100644 --- a/src/components/DisplayNames/index.native.tsx +++ b/src/components/DisplayNames/index.native.tsx @@ -11,6 +11,7 @@ function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfL accessibilityLabel={accessibilityLabel} style={textStyles} numberOfLines={numberOfLines} + testID={DisplayNames.displayName} > {fullTitle || translate('common.hidden')} {renderAdditionalText?.()} diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 8b37bb4e2665..a4304c2eca46 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -105,6 +105,10 @@ function ReportPreview({ const [invoiceReceiverPolicy] = useOnyx( `${ONYXKEYS.COLLECTION.POLICY}${chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`, ); + const [invoiceReceiverPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, { + selector: (personalDetails) => + personalDetails?.[chatReport?.invoiceReceiver && 'accountID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.accountID : CONST.DEFAULT_NUMBER_ID], + }); const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -329,7 +333,7 @@ function ReportPreview({ if (isPolicyExpenseChat) { payerOrApproverName = ReportUtils.getPolicyName(chatReport, undefined, policy); } else if (isInvoiceRoom) { - payerOrApproverName = ReportUtils.getInvoicePayerName(chatReport, invoiceReceiverPolicy); + payerOrApproverName = ReportUtils.getInvoicePayerName(chatReport, invoiceReceiverPolicy, invoiceReceiverPersonalDetail); } else { payerOrApproverName = ReportUtils.getDisplayNameForParticipant(managerID, true); } @@ -352,6 +356,7 @@ function ReportPreview({ chatReport, isInvoiceRoom, invoiceReceiverPolicy, + invoiceReceiverPersonalDetail, managerID, isApproved, iouSettled, diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 9c6377474e78..dd55db241d2d 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -3898,12 +3898,12 @@ function getAdminRoomInvitedParticipants(parentReportAction: OnyxEntry, invoiceReceiverPolicy?: OnyxEntry): string { +function getInvoicePayerName(report: OnyxEntry, invoiceReceiverPolicy?: OnyxEntry, invoiceReceiverPersonalDetail?: PersonalDetails): string { const invoiceReceiver = report?.invoiceReceiver; const isIndividual = invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL; if (isIndividual) { - return LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiver.accountID])); + return LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(invoiceReceiverPersonalDetail ?? allPersonalDetails?.[invoiceReceiver.accountID])); } return getPolicyName(report, false, invoiceReceiverPolicy ?? allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiver?.policyID}`]); @@ -3982,7 +3982,7 @@ function getReportActionMessage(reportAction: OnyxEntry, reportID? /** * Get the title for an invoice room. */ -function getInvoicesChatName(report: OnyxEntry, receiverPolicy: OnyxEntry): string { +function getInvoicesChatName(report: OnyxEntry, receiverPolicy: OnyxEntry, personalDetails?: Partial): string { const invoiceReceiver = report?.invoiceReceiver; const isIndividual = invoiceReceiver?.type === CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL; const invoiceReceiverAccountID = isIndividual ? invoiceReceiver.accountID : CONST.DEFAULT_NUMBER_ID; @@ -3995,7 +3995,7 @@ function getInvoicesChatName(report: OnyxEntry, receiverPolicy: OnyxEntr } if (isIndividual) { - return LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault(allPersonalDetails?.[invoiceReceiverAccountID])); + return LocalePhoneNumber.formatPhoneNumber(PersonalDetailsUtils.getDisplayNameOrDefault((personalDetails ?? allPersonalDetails)?.[invoiceReceiverAccountID])); } return getPolicyName(report, false, invoiceReceiverPolicy); From 9ec2b21496dda7fc1a37fb44eb2f26f71a9c0a04 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 11 Jan 2025 11:33:49 +0800 Subject: [PATCH 2/5] pass the personal details --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index be6503faf189..2db0d1976f01 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -4152,7 +4152,7 @@ function getReportName( } if (isInvoiceRoom(report)) { - formattedName = getInvoicesChatName(report, invoiceReceiverPolicy); + formattedName = getInvoicesChatName(report, invoiceReceiverPolicy, personalDetails); } if (isArchivedRoom(report, getReportNameValuePairs(report?.reportID))) { From d0fa810132af56d2e547fd3b8bb5ded578cdc61c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 13 Jan 2025 20:55:24 +0800 Subject: [PATCH 3/5] add test --- .../ReportActionItem/ReportPreview.tsx | 7 +- tests/ui/components/HeaderViewTest.tsx | 72 +++++++++++++++ tests/ui/components/ReportPreviewTest.tsx | 92 +++++++++++++++++++ 3 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 tests/ui/components/HeaderViewTest.tsx create mode 100644 tests/ui/components/ReportPreviewTest.tsx diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx index 22f82a11bafc..142b5f876468 100644 --- a/src/components/ReportActionItem/ReportPreview.tsx +++ b/src/components/ReportActionItem/ReportPreview.tsx @@ -516,7 +516,12 @@ function ReportPreview({ - {previewMessage} + + {previewMessage} + {shouldShowRBR && ( { + const actualNav = jest.requireActual('@react-navigation/native'); + return { + ...actualNav, + useRoute: () => jest.fn(), + }; +}); + +describe('HeaderView', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + beforeAll(() => { + Onyx.init({keys: ONYXKEYS}); + }); + + it('should update invoice room title when the invoice receiver detail is updated', async () => { + // Given an invoice room header + const chatReportID = '1'; + const accountID = 2; + let displayName = 'test'; + const report = { + ...createRandomReport(Number(chatReportID)), + chatType: CONST.REPORT.CHAT_TYPE.INVOICE, + invoiceReceiver: { + accountID, + type: CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL, + }, + }; + await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, { + [accountID]: { + displayName, + }, + }); + + render( + {}} + parentReportAction={createRandomReportAction(0)} + reportID={report.reportID} + />, + ); + + await waitForBatchedUpdates(); + + expect(screen.getByTestId('DisplayNames')).toHaveTextContent(displayName); + + // When the invoice receiver display name is updated + displayName = 'test edit'; + await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, { + [accountID]: { + displayName, + }, + }); + + // Then the header title should be updated using the new display name + expect(screen.getByTestId('DisplayNames')).toHaveTextContent(displayName); + }); +}); diff --git a/tests/ui/components/ReportPreviewTest.tsx b/tests/ui/components/ReportPreviewTest.tsx new file mode 100644 index 000000000000..ac9b49f228ca --- /dev/null +++ b/tests/ui/components/ReportPreviewTest.tsx @@ -0,0 +1,92 @@ +import {render, screen} from '@testing-library/react-native'; +import React from 'react'; +import Onyx from 'react-native-onyx'; +import {LocaleContextProvider} from '@components/LocaleContextProvider'; +import OnyxProvider from '@components/OnyxProvider'; +import ReportPreview from '@components/ReportActionItem/ReportPreview'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import createRandomReportAction from '../../utils/collections/reportActions'; +import createRandomReport from '../../utils/collections/reports'; +import waitForBatchedUpdates from '../../utils/waitForBatchedUpdates'; + +jest.mock('@rnmapbox/maps', () => { + const {View} = require('react-native'); + return { + __esModule: true, + default: View, + MarkerView: View, + setAccessToken: jest.fn(), + }; +}); + +jest.mock('@react-native-community/geolocation', () => ({ + setRNConfiguration: jest.fn(), +})); + +describe('ReportPreview', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + beforeAll(() => { + Onyx.init({keys: ONYXKEYS}); + }); + + it('should update preview message when the invoice receiver detail is updated', async () => { + // Given an invoice report preview + const chatReportID = '1'; + const iouReportID = '2'; + const accountID = 3; + let displayName = 'test'; + await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`, { + ...createRandomReport(Number(chatReportID)), + chatType: CONST.REPORT.CHAT_TYPE.INVOICE, + invoiceReceiver: { + accountID, + type: CONST.REPORT.INVOICE_RECEIVER_TYPE.INDIVIDUAL, + }, + }); + await Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`, { + ...createRandomReport(Number(chatReportID)), + type: CONST.REPORT.TYPE.INVOICE, + isWaitingOnBankAccount: false, + stateNum: CONST.REPORT.STATE_NUM.OPEN, + statusNum: CONST.REPORT.STATUS_NUM.OPEN, + }); + await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, { + [accountID]: { + displayName, + }, + }); + + render( + + + {}} + /> + + , + ); + + await waitForBatchedUpdates(); + + expect(screen.getByTestId('reportPreview-previewMessage')).toHaveTextContent(`${displayName} owes:`); + + // When the invoice receiver display name is updated + displayName = 'test edit'; + await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, { + [accountID]: { + displayName, + }, + }); + + // Then the report preview's preview message should be updated using the new display name + expect(screen.getByTestId('reportPreview-previewMessage')).toHaveTextContent(`${displayName} owes:`); + }); +}); From d608b87049f6442ac63e3d726845f77d323099f1 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 13 Jan 2025 20:59:39 +0800 Subject: [PATCH 4/5] use translate key --- tests/ui/components/ReportPreviewTest.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tests/ui/components/ReportPreviewTest.tsx b/tests/ui/components/ReportPreviewTest.tsx index ac9b49f228ca..e7cb5d93dcfc 100644 --- a/tests/ui/components/ReportPreviewTest.tsx +++ b/tests/ui/components/ReportPreviewTest.tsx @@ -4,6 +4,7 @@ import Onyx from 'react-native-onyx'; import {LocaleContextProvider} from '@components/LocaleContextProvider'; import OnyxProvider from '@components/OnyxProvider'; import ReportPreview from '@components/ReportActionItem/ReportPreview'; +import {translateLocal} from '@libs/Localize'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import createRandomReportAction from '../../utils/collections/reportActions'; @@ -76,7 +77,7 @@ describe('ReportPreview', () => { await waitForBatchedUpdates(); - expect(screen.getByTestId('reportPreview-previewMessage')).toHaveTextContent(`${displayName} owes:`); + expect(screen.getByTestId('reportPreview-previewMessage')).toHaveTextContent(translateLocal('iou.payerOwes', {payer: displayName})); // When the invoice receiver display name is updated displayName = 'test edit'; @@ -87,6 +88,6 @@ describe('ReportPreview', () => { }); // Then the report preview's preview message should be updated using the new display name - expect(screen.getByTestId('reportPreview-previewMessage')).toHaveTextContent(`${displayName} owes:`); + expect(screen.getByTestId('reportPreview-previewMessage')).toHaveTextContent(translateLocal('iou.payerOwes', {payer: displayName})); }); }); From 9150afccb38fda05f9df7e150fc9014ac023ef3b Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 13 Jan 2025 21:02:40 +0800 Subject: [PATCH 5/5] lint --- tests/ui/components/HeaderViewTest.tsx | 2 +- tests/ui/components/ReportPreviewTest.tsx | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/tests/ui/components/HeaderViewTest.tsx b/tests/ui/components/HeaderViewTest.tsx index 5ee2b5a5033c..cf4d20d2fd4c 100644 --- a/tests/ui/components/HeaderViewTest.tsx +++ b/tests/ui/components/HeaderViewTest.tsx @@ -1,7 +1,7 @@ import {render, screen} from '@testing-library/react-native'; import React from 'react'; import Onyx from 'react-native-onyx'; -import Navigation from '@libs/Navigation/Navigation'; +import type Navigation from '@libs/Navigation/Navigation'; import HeaderView from '@pages/home/HeaderView'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/tests/ui/components/ReportPreviewTest.tsx b/tests/ui/components/ReportPreviewTest.tsx index e7cb5d93dcfc..5e5a5e4b5787 100644 --- a/tests/ui/components/ReportPreviewTest.tsx +++ b/tests/ui/components/ReportPreviewTest.tsx @@ -12,11 +12,9 @@ import createRandomReport from '../../utils/collections/reports'; import waitForBatchedUpdates from '../../utils/waitForBatchedUpdates'; jest.mock('@rnmapbox/maps', () => { - const {View} = require('react-native'); return { - __esModule: true, - default: View, - MarkerView: View, + default: jest.fn(), + MarkerView: jest.fn(), setAccessToken: jest.fn(), }; });