From a993d5021f2a313d1a6f79594ad11310ab089afb Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 1 Jun 2023 15:38:00 +0500 Subject: [PATCH 01/10] fix: use tooltip on money request header avatar --- src/components/AvatarWithDisplayName.js | 41 ++++++++++++++----------- src/components/MoneyRequestHeader.js | 33 ++++++++++++-------- 2 files changed, 44 insertions(+), 30 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 6da7f00f5637..374f83e259ff 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -7,6 +7,7 @@ import reportPropTypes from '../pages/reportPropTypes'; import participantPropTypes from './participantPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import Tooltip from './Tooltip'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; import SubscriptAvatar from './SubscriptAvatar'; @@ -61,24 +62,28 @@ const AvatarWithDisplayName = (props) => { {Boolean(props.report && title) && ( - {isExpenseReport ? ( - - ) : ( - - )} + + + {isExpenseReport ? ( + + ) : ( + + )} + + { {props.translate('common.to')} - + + + + + - - {payeeName} - + + + + {payeeName} + + + {isExpenseReport && ( Date: Tue, 6 Jun 2023 15:50:09 +0500 Subject: [PATCH 02/10] feat: show emails instead of displayname on tooltip for MoneyRequestHeader --- src/components/MoneyRequestHeader.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 0214f1e7dc3b..a920aba6b7f6 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -82,6 +82,7 @@ const MoneyRequestHeader = (props) => { const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport); const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail); + const payeeTooltipName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : moneyRequestReport.managerEmail; const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(moneyRequestReport) : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'avatar']), moneyRequestReport.managerEmail); @@ -117,7 +118,7 @@ const MoneyRequestHeader = (props) => { {props.translate('common.to')} - + { - + Date: Tue, 6 Jun 2023 17:43:39 +0500 Subject: [PATCH 03/10] fix: make money request header consistent with chats --- src/components/AvatarWithDisplayName.js | 33 +++++++++++++------------ src/components/MoneyRequestHeader.js | 5 ++-- 2 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 374f83e259ff..78e1064f1b96 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -62,18 +62,19 @@ const AvatarWithDisplayName = (props) => { {Boolean(props.report && title) && ( - - - {isExpenseReport ? ( - - ) : ( + {isExpenseReport ? ( + + ) : ( + + { name={icons[0].name} containerStyles={avatarContainerStyle} /> - )} - - + + + )} { tooltipEnabled numberOfLines={1} textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]} - shouldUseFullTitle={isExpenseReport || props.isAnonymous} + shouldUseFullTitle={props.isAnonymous} /> {!_.isEmpty(subtitle) && ( { const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID); const isExpenseReport = ReportUtils.isExpenseReport(moneyRequestReport); const payeeName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : ReportUtils.getDisplayNameForParticipant(moneyRequestReport.managerEmail); - const payeeTooltipName = isExpenseReport ? ReportUtils.getPolicyName(moneyRequestReport, props.policies) : moneyRequestReport.managerEmail; const payeeAvatar = isExpenseReport ? ReportUtils.getWorkspaceAvatar(moneyRequestReport) : UserUtils.getAvatar(lodashGet(props.personalDetails, [moneyRequestReport.managerEmail, 'avatar']), moneyRequestReport.managerEmail); @@ -118,7 +117,7 @@ const MoneyRequestHeader = (props) => { {props.translate('common.to')} - + { - + Date: Thu, 15 Jun 2023 01:57:56 +0500 Subject: [PATCH 04/10] feat: use full title on avatar with display names for expense report as well --- src/components/AvatarWithDisplayName.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 78e1064f1b96..ed40ccedaeef 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -50,7 +50,7 @@ const defaultProps = { size: CONST.AVATAR_SIZE.DEFAULT, }; -const AvatarWithDisplayName = (props) => { +function AvatarWithDisplayName(props) { const title = props.isAnonymous ? props.report.displayName : ReportUtils.getDisplayNameForParticipant(props.report.ownerEmail, true); const subtitle = ReportUtils.getChatRoomSubtitle(props.report); const isExpenseReport = ReportUtils.isExpenseReport(props.report); @@ -92,7 +92,7 @@ const AvatarWithDisplayName = (props) => { tooltipEnabled numberOfLines={1} textStyles={[props.isAnonymous ? styles.headerAnonymousFooter : styles.headerText, styles.pre]} - shouldUseFullTitle={props.isAnonymous} + shouldUseFullTitle={isExpenseReport || props.isAnonymous} /> {!_.isEmpty(subtitle) && ( { )} ); -}; +} AvatarWithDisplayName.propTypes = propTypes; AvatarWithDisplayName.displayName = 'AvatarWithDisplayName'; AvatarWithDisplayName.defaultProps = defaultProps; From b0ed114427e4ed4a3a5a5cfc694df1a6efd142d6 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 19 Jun 2023 12:19:06 +0500 Subject: [PATCH 05/10] feat: use new tooltips --- src/components/AvatarWithDisplayName.js | 9 ++++----- src/components/MoneyRequestHeader.js | 22 +++++++++++++++++----- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/src/components/AvatarWithDisplayName.js b/src/components/AvatarWithDisplayName.js index 363d1a72003c..181b2ff19146 100644 --- a/src/components/AvatarWithDisplayName.js +++ b/src/components/AvatarWithDisplayName.js @@ -7,7 +7,7 @@ import reportPropTypes from '../pages/reportPropTypes'; import participantPropTypes from './participantPropTypes'; import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; -import Tooltip from './Tooltip'; +import UserDetailsTooltip from './UserDetailsTooltip'; import styles from '../styles/styles'; import themeColors from '../styles/themes/default'; import SubscriptAvatar from './SubscriptAvatar'; @@ -70,10 +70,9 @@ function AvatarWithDisplayName(props) { mainTooltip={props.report.ownerEmail} secondaryTooltip={subtitle} size={props.size} - noMargin /> ) : ( - + - + )} {!_.isEmpty(subtitle) && ( {props.translate('common.to')} - + - + - + {payeeName} - + {isExpenseReport && ( Date: Mon, 19 Jun 2023 20:21:54 +0500 Subject: [PATCH 06/10] feat: remove tooltip for workspace text --- src/components/MoneyRequestHeader.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index 5db53e8b25c3..dd829ebcc250 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -136,10 +136,6 @@ function MoneyRequestHeader(props) { Date: Mon, 19 Jun 2023 20:29:03 +0500 Subject: [PATCH 07/10] feat: lint errors --- src/components/MoneyRequestHeader.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/MoneyRequestHeader.js b/src/components/MoneyRequestHeader.js index dd829ebcc250..fb63ad9c2e17 100644 --- a/src/components/MoneyRequestHeader.js +++ b/src/components/MoneyRequestHeader.js @@ -134,9 +134,7 @@ function MoneyRequestHeader(props) { - + Date: Sat, 24 Jun 2023 14:57:54 +0500 Subject: [PATCH 08/10] fix: in-consistency between web and mobile for display name --- src/components/DisplayNames/index.native.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/DisplayNames/index.native.js b/src/components/DisplayNames/index.native.js index 458c6b0acf9b..4eab44d8d3c7 100644 --- a/src/components/DisplayNames/index.native.js +++ b/src/components/DisplayNames/index.native.js @@ -1,8 +1,9 @@ -import React from 'react'; +import React, {Fragment} from 'react'; +import _ from 'underscore'; import {propTypes, defaultProps} from './displayNamesPropTypes'; import Text from '../Text'; +import styles from '../../styles/styles'; -// As we don't have to show tooltips of the Native platform so we simply render the full display names list. function DisplayNames(props) { return ( - {props.fullTitle} + {props.shouldUseFullTitle + ? props.fullTitle + : _.map(props.displayNamesWithTooltips, ({displayName}, index) => ( + + {displayName} + {index < props.displayNamesWithTooltips.length - 1 && , } + + ))} ); } From dcf2db5602f5886eb6f49dd297937465e887d743 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sat, 24 Jun 2023 15:20:28 +0500 Subject: [PATCH 09/10] fix: failing unit tests --- tests/ui/UnreadIndicatorsTest.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index c12b03c6ae18..dd3fdfe59de1 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -357,11 +357,11 @@ describe('Unread Indicators', () => { expect(displayNameTexts).toHaveLength(2); const firstReportOption = displayNameTexts[0]; expect(lodashGet(firstReportOption, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); - expect(lodashGet(firstReportOption, ['props', 'children'])).toBe('C User'); + expect(lodashGet(firstReportOption, ['props', 'children'])).toHaveTextContent('C User'); const secondReportOption = displayNameTexts[1]; expect(lodashGet(secondReportOption, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); - expect(lodashGet(secondReportOption, ['props', 'children'])).toBe('B User'); + expect(lodashGet(secondReportOption, ['props', 'children'])).toHaveTextContent('B User'); // Tap the new report option and navigate back to the sidebar again via the back button return navigateToSidebarOption(0); @@ -372,9 +372,9 @@ describe('Unread Indicators', () => { const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(2); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined); - expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('C User'); + expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toHaveTextContent('C User'); expect(lodashGet(displayNameTexts[1], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); - expect(lodashGet(displayNameTexts[1], ['props', 'children'])).toBe('B User'); + expect(lodashGet(displayNameTexts[1], ['props', 'children'])).toHaveTextContent('B User'); })); xit('Manually marking a chat message as unread shows the new line indicator and updates the LHN', () => From 4f146c7f78c68eb499879b0be0657e561400ab54 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Sat, 24 Jun 2023 16:19:44 +0500 Subject: [PATCH 10/10] fix: failing unit tests --- tests/ui/UnreadIndicatorsTest.js | 8 +-- tests/unit/SidebarFilterTest.js | 13 ++-- tests/unit/SidebarOrderTest.js | 103 +++++++++++++++---------------- 3 files changed, 61 insertions(+), 63 deletions(-) diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index dd3fdfe59de1..ac799513c856 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -357,11 +357,11 @@ describe('Unread Indicators', () => { expect(displayNameTexts).toHaveLength(2); const firstReportOption = displayNameTexts[0]; expect(lodashGet(firstReportOption, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); - expect(lodashGet(firstReportOption, ['props', 'children'])).toHaveTextContent('C User'); + expect(firstReportOption).toHaveTextContent('C User'); const secondReportOption = displayNameTexts[1]; expect(lodashGet(secondReportOption, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); - expect(lodashGet(secondReportOption, ['props', 'children'])).toHaveTextContent('B User'); + expect(secondReportOption).toHaveTextContent('B User'); // Tap the new report option and navigate back to the sidebar again via the back button return navigateToSidebarOption(0); @@ -372,9 +372,9 @@ describe('Unread Indicators', () => { const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(2); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined); - expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toHaveTextContent('C User'); + expect(displayNameTexts[0]).toHaveTextContent('C User'); expect(lodashGet(displayNameTexts[1], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); - expect(lodashGet(displayNameTexts[1], ['props', 'children'])).toHaveTextContent('B User'); + expect(displayNameTexts[1]).toHaveTextContent('B User'); })); xit('Manually marking a chat message as unread shows the new line indicator and updates the LHN', () => diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index 927381177223..68f3d0107eae 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -1,6 +1,5 @@ import {cleanup, screen} from '@testing-library/react-native'; import Onyx from 'react-native-onyx'; -import lodashGet from 'lodash/get'; import * as LHNTestUtils from '../utils/LHNTestUtils'; import waitForPromisesToResolve from '../utils/waitForPromisesToResolve'; import CONST from '../../src/CONST'; @@ -331,7 +330,7 @@ describe('Sidebar', () => { const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Three, Four'); } else { // Both reports visible const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); @@ -371,8 +370,8 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('One, Two'); + expect(displayNames[1]).toHaveTextContent('Three, Four'); }) // When report3 becomes unread @@ -440,8 +439,8 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent('Three, Four'); + expect(displayNames[1]).toHaveTextContent('One, Two'); }) ); }); @@ -652,7 +651,7 @@ describe('Sidebar', () => { const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Three, Four'); } else { // Both reports visible const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 3c3863c411b2..bfad3b925e8a 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -1,6 +1,5 @@ import Onyx from 'react-native-onyx'; import {cleanup, screen} from '@testing-library/react-native'; -import lodashGet from 'lodash/get'; import waitForPromisesToResolve from '../utils/waitForPromisesToResolve'; import * as LHNTestUtils from '../utils/LHNTestUtils'; import CONST from '../../src/CONST'; @@ -128,9 +127,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('Three, Four'); + expect(displayNames[2]).toHaveTextContent('One, Two'); }) ); }); @@ -169,9 +168,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); // this has `hasDraft` flag enabled so it will be on top - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('One, Two'); // this has `hasDraft` flag enabled so it will be on top: ; + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) ); }); @@ -210,9 +209,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('One, Two'); + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) ); }); @@ -257,9 +256,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent('Three, Four'); + expect(displayNames[1]).toHaveTextContent('Five, Six'); + expect(displayNames[2]).toHaveTextContent('One, Two'); }) ); }); @@ -395,10 +394,10 @@ describe('Sidebar', () => { expect(displayNames).toHaveLength(4); expect(screen.queryAllByTestId('Pin Icon')).toHaveLength(1); expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(1); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Email Two owes $100.00'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('One, Two'); + expect(displayNames[1]).toHaveTextContent('Email Two owes $100.00'); + expect(displayNames[2]).toHaveTextContent('Five, Six'); + expect(displayNames[3]).toHaveTextContent('Three, Four'); }) ); }); @@ -441,9 +440,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) // When a new report is added @@ -454,10 +453,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Seven, Eight'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Seven, Eight'); + expect(displayNames[3]).toHaveTextContent('Three, Four'); }) ); }); @@ -500,9 +499,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) // When a new report is added @@ -513,10 +512,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Seven, Eight'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Seven, Eight'); + expect(displayNames[3]).toHaveTextContent('Three, Four'); }) ); }); @@ -554,9 +553,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Report (archived)'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('Three, Four'); + expect(displayNames[2]).toHaveTextContent('Report (archived)'); }) ); }); @@ -590,9 +589,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) // When a new report is added @@ -603,10 +602,10 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Seven, Eight'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Seven, Eight'); + expect(displayNames[3]).toHaveTextContent('Three, Four'); }) ); }); @@ -644,9 +643,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Report (archived)'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('Three, Four'); + expect(displayNames[2]).toHaveTextContent('Report (archived)'); }) ); }); @@ -733,11 +732,11 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(5); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Email Two owes $100.00'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Email Two owes $100.00'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Email Two owes $100.00'); - expect(lodashGet(displayNames, [3, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [4, 'props', 'children'])).toBe('One, Two'); + expect(displayNames[0]).toHaveTextContent('Email Two owes $100.00'); + expect(displayNames[1]).toHaveTextContent('Email Two owes $100.00'); + expect(displayNames[2]).toHaveTextContent('Email Two owes $100.00'); + expect(displayNames[3]).toHaveTextContent('Five, Six'); + expect(displayNames[4]).toHaveTextContent('One, Two'); }) ); }); @@ -777,9 +776,9 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); - expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); - expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); + expect(displayNames[0]).toHaveTextContent('Five, Six'); + expect(displayNames[1]).toHaveTextContent('One, Two'); + expect(displayNames[2]).toHaveTextContent('Three, Four'); }) ); });