From f65e9650640db0ddf0ad6af4176265ac2ac12530 Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 18:28:57 +0530 Subject: [PATCH 01/14] [queryByAccessibilityHint] resolve all strings Signed-off-by: Prince Mendiratta --- src/languages/en.js | 6 +++++- src/languages/es.js | 6 +++++- src/pages/home/HeaderView.js | 2 +- src/pages/home/report/FloatingMessageCounter/index.js | 4 ++-- tests/ui/UnreadIndicatorsTest.js | 7 +++++-- 5 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index 765be98ed4dc..2ad4cce57383 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -252,7 +252,10 @@ export default { sayHello: 'Say hello!', usePlusButton: '\n\nYou can also use the + button below to send or request money!', }, - newMessages: 'New messages', + floatingMessageCounter: { + newMessages: 'New messages', + scrollToNewestMessages: 'Scroll to newest messages', + }, reportTypingIndicator: { isTyping: 'is typing...', areTyping: 'are typing...', @@ -1203,4 +1206,5 @@ export default { }, allStates: COMMON_CONST.STATES, allCountries: CONST.ALL_COUNTRIES, + navigateToChatsList: 'Navigate back to chats list', }; diff --git a/src/languages/es.js b/src/languages/es.js index f7012c3d6654..8c7235505650 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -251,7 +251,10 @@ export default { sayHello: '¡Saluda!', usePlusButton: '\n\n¡También puedes usar el botón + de abajo para enviar o pedir dinero!', }, - newMessages: 'Mensajes nuevos', + floatingMessageCounter: { + newMessages: 'Mensajes nuevos', + scrollToNewestMessages: 'Desplácese a los mensajes más recientes', + }, reportTypingIndicator: { isTyping: 'está escribiendo...', areTyping: 'están escribiendo...', @@ -1669,4 +1672,5 @@ export default { ZM: 'Zambia', ZW: 'Zimbabue', }, + navigateToChatsList: 'Navegar de regreso a la lista de chats', }; diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 0c5066e652c5..6f1da4e5807f 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -93,7 +93,7 @@ const HeaderView = (props) => { diff --git a/src/pages/home/report/FloatingMessageCounter/index.js b/src/pages/home/report/FloatingMessageCounter/index.js index 2297f8fc5368..87e0ac11b5a6 100644 --- a/src/pages/home/report/FloatingMessageCounter/index.js +++ b/src/pages/home/report/FloatingMessageCounter/index.js @@ -63,7 +63,7 @@ class FloatingMessageCounter extends PureComponent { render() { return ( @@ -88,7 +88,7 @@ class FloatingMessageCounter extends PureComponent { styles.textWhite, ]} > - {this.props.translate('newMessages')} + {this.props.translate('floatingMessageCounter.newMessages')} )} diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index 5f65d8b20b50..5b877a99c438 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -24,6 +24,7 @@ import * as User from '../../src/libs/actions/User'; import * as Pusher from '../../src/libs/Pusher/pusher'; import PusherConnectionManager from '../../src/libs/PusherConnectionManager'; import CONFIG from '../../src/CONFIG'; +import * as Localize from '../../src/libs/Localize'; // We need a large timeout here as we are lazy loading React Navigation screens and this test is running against the entire mounted App jest.setTimeout(30000); @@ -74,7 +75,8 @@ function scrollUpToRevealNewMessagesBadge() { * @return {Boolean} */ function isNewMessagesBadgeVisible() { - const badge = screen.queryByAccessibilityHint('Scroll to newest messages'); + const text = Localize.translateLocal('floatingMessageCounter.scrollToNewestMessages'); + const badge = screen.queryByAccessibilityHint(text); return Math.round(badge.props.style.transform[0].translateY) === 10; } @@ -82,7 +84,8 @@ function isNewMessagesBadgeVisible() { * @return {Promise} */ function navigateToSidebar() { - const reportHeaderBackButton = screen.queryByAccessibilityHint('Navigate back to chats list'); + const text = Localize.translateLocal('navigateToChatsList'); + const reportHeaderBackButton = screen.queryByAccessibilityHint(text); fireEvent(reportHeaderBackButton, 'press'); return waitForPromisesToResolve(); } From 2613111068c5cb5b7e53c102ec058618f49a8f2d Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 18:34:12 +0530 Subject: [PATCH 02/14] [queryByLabelText] resolve all strings Signed-off-by: Prince Mendiratta --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/components/OptionRow.js | 2 +- src/languages/en.js | 3 ++ src/languages/es.js | 3 ++ .../home/report/ReportActionItemCreated.js | 4 +- src/pages/home/report/ReportActionsList.js | 4 +- tests/ui/UnreadIndicatorsTest.js | 30 ++++++++---- tests/unit/SidebarFilterTest.js | 29 ++++++++---- tests/unit/SidebarOrderTest.js | 46 +++++++++++++------ 9 files changed, 84 insertions(+), 39 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index a07b95a3675f..88c8cbf3a289 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -168,7 +168,7 @@ const OptionRowLHN = (props) => { { style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)} /> `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 38d19864ea5a..9ec1dcc4ec0d 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -20,6 +20,7 @@ import CONST from '../../../CONST'; import * as StyleUtils from '../../../styles/StyleUtils'; import reportPropTypes from '../../reportPropTypes'; import networkPropTypes from '../../../components/networkPropTypes'; +import withLocalize from '../../../components/withLocalize'; const propTypes = { /** Position of the "New" line marker */ @@ -150,7 +151,7 @@ class ReportActionsList extends React.Component { return ( { }); function scrollUpToRevealNewMessagesBadge() { - fireEvent.scroll(screen.queryByLabelText('List of chat messages'), { + const text = Localize.translateLocal('listOfChatMessages'); + fireEvent.scroll(screen.queryByLabelText(text), { nativeEvent: { contentOffset: { y: 250, @@ -213,7 +214,8 @@ describe('Unread Indicators', () => { expect(optionRows).toHaveLength(1); // And that the text is bold - const displayNameText = screen.queryByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameText = screen.queryByLabelText(text); expect(lodashGet(displayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); return navigateToSidebarOption(0); @@ -223,7 +225,8 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(false); // That the report actions are visible along with the created action - const createdAction = screen.queryByLabelText('Chat welcome message'); + const text = Localize.translateLocal('chatWelcomeMessage'); + const createdAction = screen.queryByLabelText(text); expect(createdAction).toBeTruthy(); const reportComments = screen.queryAllByLabelText('Chat message'); expect(reportComments).toHaveLength(9); @@ -255,7 +258,8 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(true); // Verify that the option row in the LHN is no longer bold (since OpenReport marked it as read) - const updatedDisplayNameText = screen.queryByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const updatedDisplayNameText = screen.queryByLabelText(text); expect(lodashGet(updatedDisplayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(undefined); // Tap on the chat again @@ -341,7 +345,8 @@ describe('Unread Indicators', () => { expect(optionRows).toHaveLength(2); // Verify the text for both chats are bold indicating that nothing has not yet been read - const displayNameTexts = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(text); expect(displayNameTexts).toHaveLength(2); const firstReportOption = displayNameTexts[0]; expect(lodashGet(firstReportOption, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); @@ -356,7 +361,8 @@ describe('Unread Indicators', () => { }) .then(() => { // Verify that report we navigated to appears in a "read" state while the original unread report still shows as unread - const displayNameTexts = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(text); expect(displayNameTexts).toHaveLength(2); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('C User'); @@ -390,7 +396,8 @@ describe('Unread Indicators', () => { .then(navigateToSidebar) .then(() => { // Verify the report is marked as unread in the sidebar - const displayNameTexts = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(text); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); @@ -401,7 +408,8 @@ describe('Unread Indicators', () => { .then(() => navigateToSidebar()) .then(() => { // Verify the report is now marked as read - const displayNameTexts = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(text); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); @@ -423,7 +431,8 @@ describe('Unread Indicators', () => { // Verify we are on the LHN and that the chat shows as unread in the LHN expect(isDrawerOpen()).toBe(true); - const displayNameTexts = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(text); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); @@ -449,7 +458,8 @@ describe('Unread Indicators', () => { // Verify we are on the LHN and that the chat shows as unread in the LHN expect(isDrawerOpen()).toBe(true); - const displayNameTexts = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(text); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index 47ead27d8789..98e94c5cf96b 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -5,6 +5,7 @@ import * as LHNTestUtils from '../utils/LHNTestUtils'; import waitForPromisesToResolve from '../utils/waitForPromisesToResolve'; import CONST from '../../src/CONST'; import DateUtils from '../../src/libs/DateUtils'; +import * as Localize from '../../src/libs/Localize'; // Be sure to include the mocked permissions library or else the beta tests won't work jest.mock('../../src/libs/Permissions'); @@ -295,9 +296,10 @@ describe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(1); - expect(screen.queryAllByLabelText('Chat user display names')).toHaveLength(1); - const displayNames = screen.queryAllByLabelText('Chat user display names'); + expect(displayNames).toHaveLength(1); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); } else { // Both reports visible @@ -331,7 +333,8 @@ describe('Sidebar', () => { // Then the reports 1 and 2 are shown and 3 is not .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(2); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); @@ -393,7 +396,8 @@ describe('Sidebar', () => { // Then both reports are visible .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(2); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -441,7 +445,8 @@ describe('Sidebar', () => { // Then neither reports are visible .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(0); }) @@ -461,7 +466,8 @@ describe('Sidebar', () => { // Then they are all visible .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); }); }); @@ -497,7 +503,8 @@ describe('Sidebar', () => { // Then neither reports are visible .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(0); }) @@ -514,7 +521,8 @@ describe('Sidebar', () => { // Then both rooms are visible .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(2); }); }); @@ -595,9 +603,10 @@ describe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(1); - expect(screen.queryAllByLabelText('Chat user display names')).toHaveLength(1); - const displayNames = screen.queryAllByLabelText('Chat user display names'); + expect(displayNames).toHaveLength(1); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); } else { // Both reports visible diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 6072bccca3de..0862ab035efa 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -5,6 +5,7 @@ import waitForPromisesToResolve from '../utils/waitForPromisesToResolve'; import * as LHNTestUtils from '../utils/LHNTestUtils'; import CONST from '../../src/CONST'; import DateUtils from '../../src/libs/DateUtils'; +import * as Localize from '../../src/libs/Localize'; // Be sure to include the mocked Permissions and Expensicons libraries or else the beta tests won't work jest.mock('../../src/libs/Permissions'); @@ -113,7 +114,8 @@ describe('Sidebar', () => { // Then the component should be rendered with the mostly recently updated report first .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); @@ -150,7 +152,8 @@ describe('Sidebar', () => { const pencilIcon = screen.getAllByAccessibilityHint('Pencil Icon'); expect(pencilIcon).toHaveLength(1); - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); 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'); @@ -185,7 +188,8 @@ describe('Sidebar', () => { // Then the order of the reports should be 1 > 3 > 2 // ^--- (1 goes to the front and pushes other two down) .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); @@ -228,7 +232,8 @@ describe('Sidebar', () => { // Then the order of the reports should be 2 > 3 > 1 // ^--- (2 goes to the front and pushes 3 down) .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Five, Six'); @@ -352,7 +357,8 @@ describe('Sidebar', () => { // there is a pencil icon // there is a pinned icon .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(screen.getAllByAccessibilityHint('Pin Icon')).toHaveLength(1); expect(screen.getAllByAccessibilityHint('Pencil Icon')).toHaveLength(1); @@ -395,7 +401,8 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -407,7 +414,8 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -449,7 +457,8 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -461,7 +470,8 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -502,7 +512,8 @@ describe('Sidebar', () => { // Then the first report is in last position .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); @@ -534,7 +545,8 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -546,7 +558,8 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -587,7 +600,8 @@ describe('Sidebar', () => { // Then the first report is in last position .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('Three, Four'); @@ -666,7 +680,8 @@ describe('Sidebar', () => { // Then the reports are ordered alphabetically since their amounts are the same .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); @@ -704,7 +719,8 @@ describe('Sidebar', () => { // Then the reports are ordered alphabetically since their lastVisibleActionCreated are the same .then(() => { - const displayNames = screen.queryAllByLabelText('Chat user display names'); + const text = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(text); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); expect(lodashGet(displayNames, [1, 'props', 'children'])).toBe('One, Two'); From 96251c677ac7c66405e2871390e285824b6ee75e Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 19:03:37 +0530 Subject: [PATCH 03/14] [queryAllByAccessibilityHint] resolve all strings Signed-off-by: Prince Mendiratta --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/languages/en.js | 1 + src/languages/es.js | 1 + tests/ui/UnreadIndicatorsTest.js | 17 ++-- tests/unit/SidebarFilterTest.js | 80 ++++++++++++------- tests/unit/SidebarOrderTest.js | 3 +- 6 files changed, 67 insertions(+), 37 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 88c8cbf3a289..ce63a44a24fd 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -127,7 +127,7 @@ const OptionRowLHN = (props) => { hovered && !props.isFocused ? props.hoverStyle : null, ]} > - + { expect(isDrawerOpen()).toBe(true); // Verify there is only one option in the sidebar - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const optionRowsHintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(optionRowsHintText); expect(optionRows).toHaveLength(1); // And that the text is bold - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNameText = screen.queryByLabelText(text); + const displayNameHintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameText = screen.queryByLabelText(displayNameHintText); expect(lodashGet(displayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); return navigateToSidebarOption(0); @@ -341,12 +343,13 @@ describe('Unread Indicators', () => { }) .then(() => { // // Verify the new report option appears in the LHN - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const optionRowsHintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(optionRowsHintText); expect(optionRows).toHaveLength(2); // Verify the text for both chats are bold indicating that nothing has not yet been read - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNameTexts = screen.queryAllByLabelText(text); + const displayNameHintTexts = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(displayNameHintTexts); expect(displayNameTexts).toHaveLength(2); const firstReportOption = displayNameTexts[0]; expect(lodashGet(firstReportOption, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index 98e94c5cf96b..84624bf5a2af 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -54,7 +54,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }); }); @@ -80,7 +81,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }) @@ -91,7 +93,8 @@ describe('Sidebar', () => { // Then there is one report rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }); }); @@ -117,7 +120,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }) @@ -128,7 +132,8 @@ describe('Sidebar', () => { // Then there is one report rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }); }); @@ -164,7 +169,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }) @@ -175,7 +181,8 @@ describe('Sidebar', () => { // Then all three reports are showing in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(3); }); }); @@ -207,7 +214,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }) @@ -216,7 +224,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }); }); @@ -296,14 +305,16 @@ describe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(1); + const displayNamesHintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(displayNamesHintText); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); } else { // Both reports visible - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(2); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); } }); }); @@ -348,7 +359,8 @@ describe('Sidebar', () => { // Then all three chats are showing .then(() => { - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(3); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3); }) // When report 1 becomes read (it's the active report) @@ -356,7 +368,8 @@ describe('Sidebar', () => { // Then all three chats are still showing .then(() => { - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(3); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3); }) // When report 2 becomes the active report @@ -367,7 +380,8 @@ describe('Sidebar', () => { // Then report 1 should now disappear .then(() => { - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(2); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); expect(screen.queryAllByText(/One, Two/)).toHaveLength(0); }); }); @@ -603,14 +617,16 @@ describe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(1); + const displayNamesHintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(displayNamesHintText); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); expect(displayNames).toHaveLength(1); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); } else { // Both reports visible - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(2); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); } }); }); @@ -649,7 +665,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }) @@ -660,7 +677,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }); }); @@ -696,7 +714,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }) @@ -708,7 +727,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }); }); @@ -743,7 +763,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }) @@ -752,7 +773,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }); }); @@ -786,7 +808,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(0); }) @@ -798,7 +821,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const optionRows = screen.queryAllByAccessibilityHint('Navigates to a chat'); + const text = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(text); expect(optionRows).toHaveLength(1); }); }); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 0862ab035efa..0b7a9accedf1 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -63,7 +63,8 @@ describe('Sidebar', () => { // Then the component should be rendered with an empty list since it will get past the early return .then(() => { expect(screen.toJSON()).not.toBe(null); - expect(screen.queryAllByAccessibilityHint('Navigates to a chat')).toHaveLength(0); + const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(0); }); }); From c9d3dd812bfc3b6bb4e076894753a6cce23b5e43 Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 19:05:33 +0530 Subject: [PATCH 04/14] use variable name hintText instead of text Signed-off-by: Prince Mendiratta --- tests/ui/UnreadIndicatorsTest.js | 44 +++++++-------- tests/unit/SidebarFilterTest.js | 92 ++++++++++++++++---------------- tests/unit/SidebarOrderTest.js | 60 ++++++++++----------- 3 files changed, 98 insertions(+), 98 deletions(-) diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index b410977b67f4..34044fc221ab 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -52,8 +52,8 @@ beforeAll(() => { }); function scrollUpToRevealNewMessagesBadge() { - const text = Localize.translateLocal('listOfChatMessages'); - fireEvent.scroll(screen.queryByLabelText(text), { + const hintText = Localize.translateLocal('listOfChatMessages'); + fireEvent.scroll(screen.queryByLabelText(hintText), { nativeEvent: { contentOffset: { y: 250, @@ -76,8 +76,8 @@ function scrollUpToRevealNewMessagesBadge() { * @return {Boolean} */ function isNewMessagesBadgeVisible() { - const text = Localize.translateLocal('floatingMessageCounter.scrollToNewestMessages'); - const badge = screen.queryByAccessibilityHint(text); + const hintText = Localize.translateLocal('floatingMessageCounter.scrollToNewestMessages'); + const badge = screen.queryByAccessibilityHint(hintText); return Math.round(badge.props.style.transform[0].translateY) === 10; } @@ -85,8 +85,8 @@ function isNewMessagesBadgeVisible() { * @return {Promise} */ function navigateToSidebar() { - const text = Localize.translateLocal('navigateToChatsList'); - const reportHeaderBackButton = screen.queryByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigateToChatsList'); + const reportHeaderBackButton = screen.queryByAccessibilityHint(hintText); fireEvent(reportHeaderBackButton, 'press'); return waitForPromisesToResolve(); } @@ -96,8 +96,8 @@ function navigateToSidebar() { * @return {Promise} */ function navigateToSidebarOption(index) { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); fireEvent(optionRows[index], 'press'); return waitForPromisesToResolve(); } @@ -227,8 +227,8 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(false); // That the report actions are visible along with the created action - const text = Localize.translateLocal('chatWelcomeMessage'); - const createdAction = screen.queryByLabelText(text); + const hintText = Localize.translateLocal('chatWelcomeMessage'); + const createdAction = screen.queryByLabelText(hintText); expect(createdAction).toBeTruthy(); const reportComments = screen.queryAllByLabelText('Chat message'); expect(reportComments).toHaveLength(9); @@ -260,8 +260,8 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(true); // Verify that the option row in the LHN is no longer bold (since OpenReport marked it as read) - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const updatedDisplayNameText = screen.queryByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const updatedDisplayNameText = screen.queryByLabelText(hintText); expect(lodashGet(updatedDisplayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(undefined); // Tap on the chat again @@ -364,8 +364,8 @@ describe('Unread Indicators', () => { }) .then(() => { // Verify that report we navigated to appears in a "read" state while the original unread report still shows as unread - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNameTexts = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + 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'); @@ -399,8 +399,8 @@ describe('Unread Indicators', () => { .then(navigateToSidebar) .then(() => { // Verify the report is marked as unread in the sidebar - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNameTexts = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); @@ -411,8 +411,8 @@ describe('Unread Indicators', () => { .then(() => navigateToSidebar()) .then(() => { // Verify the report is now marked as read - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNameTexts = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); @@ -434,8 +434,8 @@ describe('Unread Indicators', () => { // Verify we are on the LHN and that the chat shows as unread in the LHN expect(isDrawerOpen()).toBe(true); - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNameTexts = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); @@ -461,8 +461,8 @@ describe('Unread Indicators', () => { // Verify we are on the LHN and that the chat shows as unread in the LHN expect(isDrawerOpen()).toBe(true); - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNameTexts = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index 84624bf5a2af..830995f3cd9f 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -54,8 +54,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }); }); @@ -81,8 +81,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -93,8 +93,8 @@ describe('Sidebar', () => { // Then there is one report rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); }); @@ -120,8 +120,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -132,8 +132,8 @@ describe('Sidebar', () => { // Then there is one report rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); }); @@ -169,8 +169,8 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -181,8 +181,8 @@ describe('Sidebar', () => { // Then all three reports are showing in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(3); }); }); @@ -214,8 +214,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -224,8 +224,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }); }); @@ -344,8 +344,8 @@ describe('Sidebar', () => { // Then the reports 1 and 2 are shown and 3 is not .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -410,8 +410,8 @@ describe('Sidebar', () => { // Then both reports are visible .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -459,8 +459,8 @@ describe('Sidebar', () => { // Then neither reports are visible .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(0); }) @@ -480,8 +480,8 @@ describe('Sidebar', () => { // Then they are all visible .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); }); }); @@ -517,8 +517,8 @@ describe('Sidebar', () => { // Then neither reports are visible .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(0); }) @@ -535,8 +535,8 @@ describe('Sidebar', () => { // Then both rooms are visible .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); }); }); @@ -665,8 +665,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -677,8 +677,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); }); @@ -714,8 +714,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -727,8 +727,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); }); @@ -763,8 +763,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -773,8 +773,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); }); @@ -808,8 +808,8 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -821,8 +821,8 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const text = Localize.translateLocal('navigatesToChat'); - const optionRows = screen.queryAllByAccessibilityHint(text); + const hintText = Localize.translateLocal('navigatesToChat'); + const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); }); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 0b7a9accedf1..8ef4f8b97403 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -115,8 +115,8 @@ describe('Sidebar', () => { // Then the component should be rendered with the mostly recently updated report first .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -153,8 +153,8 @@ describe('Sidebar', () => { const pencilIcon = screen.getAllByAccessibilityHint('Pencil Icon'); expect(pencilIcon).toHaveLength(1); - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -189,8 +189,8 @@ describe('Sidebar', () => { // Then the order of the reports should be 1 > 3 > 2 // ^--- (1 goes to the front and pushes other two down) .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -233,8 +233,8 @@ describe('Sidebar', () => { // Then the order of the reports should be 2 > 3 > 1 // ^--- (2 goes to the front and pushes 3 down) .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -358,8 +358,8 @@ describe('Sidebar', () => { // there is a pencil icon // there is a pinned icon .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(screen.getAllByAccessibilityHint('Pin Icon')).toHaveLength(1); expect(screen.getAllByAccessibilityHint('Pencil Icon')).toHaveLength(1); @@ -402,8 +402,8 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -415,8 +415,8 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -458,8 +458,8 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -471,8 +471,8 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -513,8 +513,8 @@ describe('Sidebar', () => { // Then the first report is in last position .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -546,8 +546,8 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -559,8 +559,8 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -601,8 +601,8 @@ describe('Sidebar', () => { // Then the first report is in last position .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -681,8 +681,8 @@ describe('Sidebar', () => { // Then the reports are ordered alphabetically since their amounts are the same .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); @@ -720,8 +720,8 @@ describe('Sidebar', () => { // Then the reports are ordered alphabetically since their lastVisibleActionCreated are the same .then(() => { - const text = Localize.translateLocal('common.chatUserDisplayNames'); - const displayNames = screen.queryAllByLabelText(text); + const hintText = Localize.translateLocal('common.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'); From e088d98c673153db5d9ee31561aa91867151e08a Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 19:18:25 +0530 Subject: [PATCH 05/14] use a accessibilityHints translations object Signed-off-by: Prince Mendiratta --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/components/UnreadActionIndicator.js | 2 +- src/languages/en.js | 11 +++-- src/languages/es.js | 11 +++-- src/pages/home/HeaderView.js | 2 +- .../home/report/ReportActionItemCreated.js | 2 +- src/pages/home/report/ReportActionsList.js | 2 +- tests/ui/UnreadIndicatorsTest.js | 12 ++--- tests/unit/SidebarFilterTest.js | 48 +++++++++---------- tests/unit/SidebarOrderTest.js | 2 +- 10 files changed, 50 insertions(+), 44 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index ce63a44a24fd..70bfd4cfa16f 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -127,7 +127,7 @@ const OptionRowLHN = (props) => { hovered && !props.isFocused ? props.hoverStyle : null, ]} > - + ( - + {props.translate('common.new')} diff --git a/src/languages/en.js b/src/languages/en.js index 4edf91054066..97c4e36a2596 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1207,8 +1207,11 @@ export default { }, allStates: COMMON_CONST.STATES, allCountries: CONST.ALL_COUNTRIES, - navigateToChatsList: 'Navigate back to chats list', - listOfChatMessages: 'List of chat messages', - chatWelcomeMessage: 'Chat welcome message', - navigatesToChat: 'Navigates to a chat', + accessibilityHints: { + navigateToChatsList: 'Navigate back to chats list', + listOfChatMessages: 'List of chat messages', + chatWelcomeMessage: 'Chat welcome message', + navigatesToChat: 'Navigates to a chat', + newMessageLineIndicator: 'New message line indicator', + }, }; diff --git a/src/languages/es.js b/src/languages/es.js index e301825c72ae..6b1d6e456f46 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -1673,8 +1673,11 @@ export default { ZM: 'Zambia', ZW: 'Zimbabue', }, - navigateToChatsList: 'Navegar de regreso a la lista de chats', - listOfChatMessages: 'Lista de mensajes de chat', - chatWelcomeMessage: 'Mensaje de bienvenida al chat', - navigatesToChat: 'Navega a un chat', + accessibilityHints: { + navigateToChatsList: 'Navegar de regreso a la lista de chats', + listOfChatMessages: 'Lista de mensajes de chat', + chatWelcomeMessage: 'Mensaje de bienvenida al chat', + navigatesToChat: 'Navega a un chat', + newMessageLineIndicator: 'Indicador de nueva línea de mensaje', + }, }; diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index 6f1da4e5807f..6594ec21590f 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -93,7 +93,7 @@ const HeaderView = (props) => { diff --git a/src/pages/home/report/ReportActionItemCreated.js b/src/pages/home/report/ReportActionItemCreated.js index 8429f8addcf0..f942b9e05139 100644 --- a/src/pages/home/report/ReportActionItemCreated.js +++ b/src/pages/home/report/ReportActionItemCreated.js @@ -58,7 +58,7 @@ const ReportActionItemCreated = (props) => { style={StyleUtils.getReportWelcomeBackgroundImageStyle(props.isSmallScreenWidth)} /> { }); function scrollUpToRevealNewMessagesBadge() { - const hintText = Localize.translateLocal('listOfChatMessages'); + const hintText = Localize.translateLocal('accessibilityHints.listOfChatMessages'); fireEvent.scroll(screen.queryByLabelText(hintText), { nativeEvent: { contentOffset: { @@ -85,7 +85,7 @@ function isNewMessagesBadgeVisible() { * @return {Promise} */ function navigateToSidebar() { - const hintText = Localize.translateLocal('navigateToChatsList'); + const hintText = Localize.translateLocal('accessibilityHints.navigateToChatsList'); const reportHeaderBackButton = screen.queryByAccessibilityHint(hintText); fireEvent(reportHeaderBackButton, 'press'); return waitForPromisesToResolve(); @@ -96,7 +96,7 @@ function navigateToSidebar() { * @return {Promise} */ function navigateToSidebarOption(index) { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); fireEvent(optionRows[index], 'press'); return waitForPromisesToResolve(); @@ -211,7 +211,7 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(true); // Verify there is only one option in the sidebar - const optionRowsHintText = Localize.translateLocal('navigatesToChat'); + const optionRowsHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(optionRowsHintText); expect(optionRows).toHaveLength(1); @@ -227,7 +227,7 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(false); // That the report actions are visible along with the created action - const hintText = Localize.translateLocal('chatWelcomeMessage'); + const hintText = Localize.translateLocal('accessibilityHints.chatWelcomeMessage'); const createdAction = screen.queryByLabelText(hintText); expect(createdAction).toBeTruthy(); const reportComments = screen.queryAllByLabelText('Chat message'); @@ -343,7 +343,7 @@ describe('Unread Indicators', () => { }) .then(() => { // // Verify the new report option appears in the LHN - const optionRowsHintText = Localize.translateLocal('navigatesToChat'); + const optionRowsHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(optionRowsHintText); expect(optionRows).toHaveLength(2); diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index 830995f3cd9f..44d9ccf1774a 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -54,7 +54,7 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }); @@ -81,7 +81,7 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -93,7 +93,7 @@ describe('Sidebar', () => { // Then there is one report rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); @@ -120,7 +120,7 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -132,7 +132,7 @@ describe('Sidebar', () => { // Then there is one report rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); @@ -169,7 +169,7 @@ describe('Sidebar', () => { // Then no reports are rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -181,7 +181,7 @@ describe('Sidebar', () => { // Then all three reports are showing in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(3); }); @@ -214,7 +214,7 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -224,7 +224,7 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }); @@ -307,13 +307,13 @@ describe('Sidebar', () => { // Only one report visible const displayNamesHintText = Localize.translateLocal('common.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(displayNamesHintText); - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + 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'); } else { // Both reports visible - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); } }); @@ -359,7 +359,7 @@ describe('Sidebar', () => { // Then all three chats are showing .then(() => { - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3); }) @@ -368,7 +368,7 @@ describe('Sidebar', () => { // Then all three chats are still showing .then(() => { - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(3); }) @@ -380,7 +380,7 @@ describe('Sidebar', () => { // Then report 1 should now disappear .then(() => { - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); expect(screen.queryAllByText(/One, Two/)).toHaveLength(0); }); @@ -619,13 +619,13 @@ describe('Sidebar', () => { // Only one report visible const displayNamesHintText = Localize.translateLocal('common.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(displayNamesHintText); - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + 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'); } else { // Both reports visible - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(2); } }); @@ -665,7 +665,7 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }) @@ -677,7 +677,7 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); @@ -714,7 +714,7 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -727,7 +727,7 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); @@ -763,7 +763,7 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -773,7 +773,7 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); @@ -808,7 +808,7 @@ describe('Sidebar', () => { // Then the report is not rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(0); }) @@ -821,7 +821,7 @@ describe('Sidebar', () => { // Then the report is rendered in the LHN .then(() => { - const hintText = Localize.translateLocal('navigatesToChat'); + const hintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); const optionRows = screen.queryAllByAccessibilityHint(hintText); expect(optionRows).toHaveLength(1); }); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 8ef4f8b97403..67f894c1afa0 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -63,7 +63,7 @@ describe('Sidebar', () => { // Then the component should be rendered with an empty list since it will get past the early return .then(() => { expect(screen.toJSON()).not.toBe(null); - const navigatesToChatHintText = Localize.translateLocal('navigatesToChat'); + const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(0); }); }); From da4475f3535ab3e1660a77dad5705c3a704e8eb6 Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 19:22:20 +0530 Subject: [PATCH 06/14] [queryAllByLabelText] resolve [3/7] string Signed-off-by: Prince Mendiratta --- tests/ui/UnreadIndicatorsTest.js | 33 ++++++++++++++++++++------------ 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index 81c6a7db9338..7df7a03a076f 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -227,15 +227,16 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(false); // That the report actions are visible along with the created action - const hintText = Localize.translateLocal('accessibilityHints.chatWelcomeMessage'); - const createdAction = screen.queryByLabelText(hintText); + const welcomeMessageHintText = Localize.translateLocal('accessibilityHints.chatWelcomeMessage'); + const createdAction = screen.queryByLabelText(welcomeMessageHintText); expect(createdAction).toBeTruthy(); const reportComments = screen.queryAllByLabelText('Chat message'); expect(reportComments).toHaveLength(9); // Since the last read timestamp is the timestamp of action 3 we should have an unread indicator above the next "unread" action which will // have actionID of 4 - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(1); const reportActionID = lodashGet(unreadIndicator, [0, 'props', 'data-action-id']); expect(reportActionID).toBe('4'); @@ -269,7 +270,8 @@ describe('Unread Indicators', () => { }) .then(() => { // Verify the unread indicator is not present - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(0); expect(isDrawerOpen()).toBe(false); @@ -385,7 +387,8 @@ describe('Unread Indicators', () => { }) .then(() => { // Verify the indicator appears above the last action - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(1); const reportActionID = lodashGet(unreadIndicator, [0, 'props', 'data-action-id']); expect(reportActionID).toBe('3'); @@ -421,7 +424,8 @@ describe('Unread Indicators', () => { return navigateToSidebarOption(0); }) .then(() => { - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(0); // Scroll up and verify the "New messages" badge is hidden @@ -444,7 +448,8 @@ describe('Unread Indicators', () => { return navigateToSidebarOption(0); }) .then(() => { - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(1); // Leave a comment as the current user and verify the indicator is removed @@ -452,7 +457,8 @@ describe('Unread Indicators', () => { return waitForPromisesToResolve(); }) .then(() => { - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(0); })); @@ -471,7 +477,8 @@ describe('Unread Indicators', () => { return navigateToSidebarOption(0); }) .then(() => { - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(1); // Then back to the LHN - then back to the chat again and verify the new line indicator has cleared @@ -479,7 +486,8 @@ describe('Unread Indicators', () => { }) .then(() => navigateToSidebarOption(0)) .then(() => { - const unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + const unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(0); // Mark a previous comment as unread and verify the unread action indicator returns @@ -487,7 +495,8 @@ describe('Unread Indicators', () => { return waitForPromisesToResolve(); }) .then(() => { - let unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + const newMessageLineIndicatorHintText = Localize.translateLocal('accessibilityHints.newMessageLineIndicator'); + let unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(1); // Trigger the app going inactive and active again @@ -495,7 +504,7 @@ describe('Unread Indicators', () => { AppState.emitCurrentTestState('active'); // Verify the new line is still present - unreadIndicator = screen.queryAllByLabelText('New message line indicator'); + unreadIndicator = screen.queryAllByLabelText(newMessageLineIndicatorHintText); expect(unreadIndicator).toHaveLength(1); })); From a5517c5e2c3ee4fc2202d087f13bdc68403e4f14 Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 19:29:09 +0530 Subject: [PATCH 07/14] [queryAllByLabelText] resolve [5/7] string Signed-off-by: Prince Mendiratta --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/languages/en.js | 2 ++ src/languages/es.js | 2 ++ src/pages/home/report/ReportActionItem.js | 4 +++- tests/ui/UnreadIndicatorsTest.js | 9 ++++++--- 5 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 70bfd4cfa16f..fde8e252da8f 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -188,7 +188,7 @@ const OptionRowLHN = (props) => { {optionItem.alternateText} diff --git a/src/languages/en.js b/src/languages/en.js index 97c4e36a2596..f0ae09f72b92 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1213,5 +1213,7 @@ export default { chatWelcomeMessage: 'Chat welcome message', navigatesToChat: 'Navigates to a chat', newMessageLineIndicator: 'New message line indicator', + chatMessage: 'Chat message', + lastChatMessagePreview: 'Last chat message preview', }, }; diff --git a/src/languages/es.js b/src/languages/es.js index 6b1d6e456f46..a6f4af12f981 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -1679,5 +1679,7 @@ export default { chatWelcomeMessage: 'Mensaje de bienvenida al chat', navigatesToChat: 'Navega a un chat', newMessageLineIndicator: 'Indicador de nueva línea de mensaje', + chatMessage: 'mensaje de chat', + lastChatMessagePreview: 'Vista previa del último mensaje de chat', }, }; diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index d06e75de566f..a23b96b08b42 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -38,6 +38,7 @@ import focusTextInputAfterAnimation from '../../../libs/focusTextInputAfterAnima import ChronosOOOListActions from '../../../components/ReportActionItem/ChronosOOOListActions'; import ReportActionItemReactions from '../../../components/Reactions/ReportActionItemReactions'; import * as Report from '../../../libs/actions/Report'; +import withLocalize from '../../../components/withLocalize'; const propTypes = { /** Report for this action */ @@ -240,7 +241,7 @@ class ReportActionItem extends Component { > {hovered => ( - + {this.props.shouldDisplayNewMarker && ( )} @@ -305,6 +306,7 @@ ReportActionItem.defaultProps = defaultProps; export default compose( withWindowDimensions, + withLocalize, withNetwork(), withBlockedFromConcierge({propName: 'blockedFromConcierge'}), withReportActionsDrafts({ diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index 7df7a03a076f..7c30cd39a1f2 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -230,7 +230,8 @@ describe('Unread Indicators', () => { const welcomeMessageHintText = Localize.translateLocal('accessibilityHints.chatWelcomeMessage'); const createdAction = screen.queryByLabelText(welcomeMessageHintText); expect(createdAction).toBeTruthy(); - const reportComments = screen.queryAllByLabelText('Chat message'); + const reportCommentsHintText = Localize.translateLocal('accessibilityHints.chatMessage'); + const reportComments = screen.queryAllByLabelText(reportCommentsHintText); expect(reportComments).toHaveLength(9); // Since the last read timestamp is the timestamp of action 3 we should have an unread indicator above the next "unread" action which will @@ -537,7 +538,8 @@ describe('Unread Indicators', () => { }) .then(() => { // Verify the chat preview text matches the last comment from the current user - const alternateText = screen.queryAllByLabelText('Last chat message preview'); + const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); + const alternateText = screen.queryAllByLabelText(hintText); expect(alternateText).toHaveLength(1); expect(alternateText[0].props.children).toBe('Current User Comment 1'); @@ -545,7 +547,8 @@ describe('Unread Indicators', () => { return waitForPromisesToResolve(); }) .then(() => { - const alternateText = screen.queryAllByLabelText('Last chat message preview'); + const hintText = Localize.translateLocal('accessibilityHints.lastChatMessagePreview'); + const alternateText = screen.queryAllByLabelText(hintText); expect(alternateText).toHaveLength(1); expect(alternateText[0].props.children).toBe('Comment 9'); }); From 5eeffd36565a43e31805012b19ff7a4e5b534c85 Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 19:33:24 +0530 Subject: [PATCH 08/14] [queryAllByLabelText] resolve [7/7] string Signed-off-by: Prince Mendiratta --- src/languages/en.js | 2 ++ src/languages/es.js | 2 ++ src/pages/home/sidebar/SidebarLinks.js | 2 +- src/pages/signin/LoginForm.js | 2 +- tests/ui/UnreadIndicatorsTest.js | 9 ++++++--- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index f0ae09f72b92..f9cb75b2ef1d 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1215,5 +1215,7 @@ export default { newMessageLineIndicator: 'New message line indicator', chatMessage: 'Chat message', lastChatMessagePreview: 'Last chat message preview', + loginForm: 'Login form', + listOfChats: 'List of chats', }, }; diff --git a/src/languages/es.js b/src/languages/es.js index a6f4af12f981..c371185cb107 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -1681,5 +1681,7 @@ export default { newMessageLineIndicator: 'Indicador de nueva línea de mensaje', chatMessage: 'mensaje de chat', lastChatMessagePreview: 'Vista previa del último mensaje de chat', + loginForm: 'Formulario de inicio de sesión', + listOfChats: 'lista de charlas', }, }; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 20e67cd4d56c..4f4f652599a9 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -140,7 +140,7 @@ class SidebarLinks extends React.Component { return ( - + this.input = el} label={this.props.translate('loginForm.phoneOrEmail')} diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index 7c30cd39a1f2..a4dd9be252a1 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -106,7 +106,8 @@ function navigateToSidebarOption(index) { * @return {Boolean} */ function isDrawerOpen() { - const sidebarLinks = screen.queryAllByLabelText('List of chats'); + const hintText = Localize.translateLocal('accessibilityHints.listOfChats'); + const sidebarLinks = screen.queryAllByLabelText(hintText); return !lodashGet(sidebarLinks, [0, 'props', 'accessibilityElementsHidden']); } @@ -131,7 +132,8 @@ function signInAndGetAppWithUnreadChat() { render(); return waitForPromisesToResolveWithAct() .then(() => { - const loginForm = screen.queryAllByLabelText('Login form'); + const hintText = Localize.translateLocal('accessibilityHints.loginForm'); + const loginForm = screen.queryAllByLabelText(hintText); expect(loginForm).toHaveLength(1); return TestHelper.signInWithTestUser(USER_A_ACCOUNT_ID, USER_A_EMAIL, undefined, undefined, 'A'); @@ -206,7 +208,8 @@ describe('Unread Indicators', () => { expect(LocalNotification.showCommentNotification.mock.calls).toHaveLength(0); // Verify the sidebar links are rendered - const sidebarLinks = screen.queryAllByLabelText('List of chats'); + const sidebarLinksHintText = Localize.translateLocal('accessibilityHints.listOfChats'); + const sidebarLinks = screen.queryAllByLabelText(sidebarLinksHintText); expect(sidebarLinks).toHaveLength(1); expect(isDrawerOpen()).toBe(true); From 5a6b3b3c63f2a56cb0c2860baa370c6b4393597e Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 19:52:31 +0530 Subject: [PATCH 09/14] fix harcoded hint, not used in tests Signed-off-by: Prince Mendiratta --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/languages/en.js | 1 + src/languages/es.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index fde8e252da8f..d2dc8dc04a60 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -179,7 +179,7 @@ const OptionRowLHN = (props) => { {optionItem.isChatRoom && ( )} diff --git a/src/languages/en.js b/src/languages/en.js index f9cb75b2ef1d..42c54e5923f8 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -1217,5 +1217,6 @@ export default { lastChatMessagePreview: 'Last chat message preview', loginForm: 'Login form', listOfChats: 'List of chats', + workspaceName: 'Workspace name', }, }; diff --git a/src/languages/es.js b/src/languages/es.js index c371185cb107..d55fdb02050d 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -1683,5 +1683,6 @@ export default { lastChatMessagePreview: 'Vista previa del último mensaje de chat', loginForm: 'Formulario de inicio de sesión', listOfChats: 'lista de charlas', + workspaceName: 'Nombre del espacio de trabajo', }, }; From c3751b71de203ec71387ad77b7f0ca1921c15a2b Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 20:00:50 +0530 Subject: [PATCH 10/14] [refactor] move all accessibility hints to single obj Signed-off-by: Prince Mendiratta --- src/components/LHNOptionsList/OptionRowLHN.js | 2 +- src/components/OptionRow.js | 2 +- src/languages/en.js | 8 ++--- src/languages/es.js | 8 ++--- .../report/FloatingMessageCounter/index.js | 4 +-- tests/ui/UnreadIndicatorsTest.js | 18 +++++------ tests/unit/SidebarFilterTest.js | 16 +++++----- tests/unit/SidebarOrderTest.js | 30 +++++++++---------- 8 files changed, 42 insertions(+), 46 deletions(-) diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index d2dc8dc04a60..c8f9e36f21b2 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -168,7 +168,7 @@ const OptionRowLHN = (props) => { @@ -88,7 +88,7 @@ class FloatingMessageCounter extends PureComponent { styles.textWhite, ]} > - {this.props.translate('floatingMessageCounter.newMessages')} + {this.props.translate('newMessages')} )} diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index a4dd9be252a1..6b8430f952b7 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -76,7 +76,7 @@ function scrollUpToRevealNewMessagesBadge() { * @return {Boolean} */ function isNewMessagesBadgeVisible() { - const hintText = Localize.translateLocal('floatingMessageCounter.scrollToNewestMessages'); + const hintText = Localize.translateLocal('accessibilityHints.scrollToNewestMessages'); const badge = screen.queryByAccessibilityHint(hintText); return Math.round(badge.props.style.transform[0].translateY) === 10; } @@ -219,7 +219,7 @@ describe('Unread Indicators', () => { expect(optionRows).toHaveLength(1); // And that the text is bold - const displayNameHintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNameText = screen.queryByLabelText(displayNameHintText); expect(lodashGet(displayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); @@ -265,7 +265,7 @@ describe('Unread Indicators', () => { expect(isDrawerOpen()).toBe(true); // Verify that the option row in the LHN is no longer bold (since OpenReport marked it as read) - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const updatedDisplayNameText = screen.queryByLabelText(hintText); expect(lodashGet(updatedDisplayNameText, ['props', 'style', 0, 'fontWeight'])).toBe(undefined); @@ -354,7 +354,7 @@ describe('Unread Indicators', () => { expect(optionRows).toHaveLength(2); // Verify the text for both chats are bold indicating that nothing has not yet been read - const displayNameHintTexts = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNameHintTexts = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNameTexts = screen.queryAllByLabelText(displayNameHintTexts); expect(displayNameTexts).toHaveLength(2); const firstReportOption = displayNameTexts[0]; @@ -370,7 +370,7 @@ describe('Unread Indicators', () => { }) .then(() => { // Verify that report we navigated to appears in a "read" state while the original unread report still shows as unread - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(2); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined); @@ -406,7 +406,7 @@ describe('Unread Indicators', () => { .then(navigateToSidebar) .then(() => { // Verify the report is marked as unread in the sidebar - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(fontWeightBold); @@ -418,7 +418,7 @@ describe('Unread Indicators', () => { .then(() => navigateToSidebar()) .then(() => { // Verify the report is now marked as read - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'style', 0, 'fontWeight'])).toBe(undefined); @@ -442,7 +442,7 @@ describe('Unread Indicators', () => { // Verify we are on the LHN and that the chat shows as unread in the LHN expect(isDrawerOpen()).toBe(true); - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); @@ -471,7 +471,7 @@ describe('Unread Indicators', () => { // Verify we are on the LHN and that the chat shows as unread in the LHN expect(isDrawerOpen()).toBe(true); - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNameTexts = screen.queryAllByLabelText(hintText); expect(displayNameTexts).toHaveLength(1); expect(lodashGet(displayNameTexts[0], ['props', 'children'])).toBe('B User'); diff --git a/tests/unit/SidebarFilterTest.js b/tests/unit/SidebarFilterTest.js index 44d9ccf1774a..a393199f2d4e 100644 --- a/tests/unit/SidebarFilterTest.js +++ b/tests/unit/SidebarFilterTest.js @@ -305,7 +305,7 @@ describe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible - const displayNamesHintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNamesHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(displayNamesHintText); const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); @@ -344,7 +344,7 @@ describe('Sidebar', () => { // Then the reports 1 and 2 are shown and 3 is not .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); @@ -410,7 +410,7 @@ describe('Sidebar', () => { // Then both reports are visible .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); @@ -459,7 +459,7 @@ describe('Sidebar', () => { // Then neither reports are visible .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(0); }) @@ -480,7 +480,7 @@ describe('Sidebar', () => { // Then they are all visible .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); }); @@ -517,7 +517,7 @@ describe('Sidebar', () => { // Then neither reports are visible .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(0); }) @@ -535,7 +535,7 @@ describe('Sidebar', () => { // Then both rooms are visible .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(2); }); @@ -617,7 +617,7 @@ describe('Sidebar', () => { .then(() => { if (booleansWhichRemovesActiveReport.indexOf(JSON.stringify(boolArr)) > -1) { // Only one report visible - const displayNamesHintText = Localize.translateLocal('common.chatUserDisplayNames'); + const displayNamesHintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(displayNamesHintText); const navigatesToChatHintText = Localize.translateLocal('accessibilityHints.navigatesToChat'); expect(screen.queryAllByAccessibilityHint(navigatesToChatHintText)).toHaveLength(1); diff --git a/tests/unit/SidebarOrderTest.js b/tests/unit/SidebarOrderTest.js index 67f894c1afa0..28843c4d1d5a 100644 --- a/tests/unit/SidebarOrderTest.js +++ b/tests/unit/SidebarOrderTest.js @@ -115,7 +115,7 @@ describe('Sidebar', () => { // Then the component should be rendered with the mostly recently updated report first .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -153,7 +153,7 @@ describe('Sidebar', () => { const pencilIcon = screen.getAllByAccessibilityHint('Pencil Icon'); expect(pencilIcon).toHaveLength(1); - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + 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 @@ -189,7 +189,7 @@ describe('Sidebar', () => { // Then the order of the reports should be 1 > 3 > 2 // ^--- (1 goes to the front and pushes other two down) .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('One, Two'); @@ -233,7 +233,7 @@ describe('Sidebar', () => { // Then the order of the reports should be 2 > 3 > 1 // ^--- (2 goes to the front and pushes 3 down) .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Three, Four'); @@ -358,7 +358,7 @@ describe('Sidebar', () => { // there is a pencil icon // there is a pinned icon .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(screen.getAllByAccessibilityHint('Pin Icon')).toHaveLength(1); @@ -402,7 +402,7 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -415,7 +415,7 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -458,7 +458,7 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -471,7 +471,7 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -513,7 +513,7 @@ describe('Sidebar', () => { // Then the first report is in last position .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -546,7 +546,7 @@ describe('Sidebar', () => { // Then the reports are in alphabetical order .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -559,7 +559,7 @@ describe('Sidebar', () => { // Then they are still in alphabetical order .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(4); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -601,7 +601,7 @@ describe('Sidebar', () => { // Then the first report is in last position .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -681,7 +681,7 @@ describe('Sidebar', () => { // Then the reports are ordered alphabetically since their amounts are the same .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); @@ -720,7 +720,7 @@ describe('Sidebar', () => { // Then the reports are ordered alphabetically since their lastVisibleActionCreated are the same .then(() => { - const hintText = Localize.translateLocal('common.chatUserDisplayNames'); + const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); expect(lodashGet(displayNames, [0, 'props', 'children'])).toBe('Five, Six'); From 42c05393d4dfb8c89042b89eddd220cc23ddc8c4 Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 20:20:10 +0530 Subject: [PATCH 11/14] update es.js with misplaced key Signed-off-by: Prince Mendiratta --- src/languages/es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/es.js b/src/languages/es.js index ff94cc5278e2..edae957a2a51 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -251,6 +251,7 @@ export default { sayHello: '¡Saluda!', usePlusButton: '\n\n¡También puedes usar el botón + de abajo para enviar o pedir dinero!', }, + newMessages: 'Mensajes nuevos', reportTypingIndicator: { isTyping: 'está escribiendo...', areTyping: 'están escribiendo...', @@ -1680,7 +1681,6 @@ export default { listOfChats: 'lista de charlas', workspaceName: 'Nombre del espacio de trabajo', chatUserDisplayNames: 'Nombres para mostrar de los usuarios de chat', - newMessages: 'Mensajes nuevos', scrollToNewestMessages: 'Desplácese a los mensajes más recientes', }, }; From d74dd97128655e99192c690e9377209b259615eb Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Mon, 27 Mar 2023 20:23:52 +0530 Subject: [PATCH 12/14] update spanish translations as per review Signed-off-by: Prince Mendiratta --- src/languages/es.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/languages/es.js b/src/languages/es.js index edae957a2a51..6f6210b89f41 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -1670,17 +1670,17 @@ export default { ZW: 'Zimbabue', }, accessibilityHints: { - navigateToChatsList: 'Navegar de regreso a la lista de chats', - listOfChatMessages: 'Lista de mensajes de chat', + navigateToChatsList: 'Vuelve a la lista de chats', + listOfChatMessages: 'Lista de mensajes del chat', chatWelcomeMessage: 'Mensaje de bienvenida al chat', navigatesToChat: 'Navega a un chat', newMessageLineIndicator: 'Indicador de nueva línea de mensaje', chatMessage: 'mensaje de chat', - lastChatMessagePreview: 'Vista previa del último mensaje de chat', + lastChatMessagePreview: 'Vista previa del último mensaje del chat', loginForm: 'Formulario de inicio de sesión', - listOfChats: 'lista de charlas', + listOfChats: 'lista de chats', workspaceName: 'Nombre del espacio de trabajo', - chatUserDisplayNames: 'Nombres para mostrar de los usuarios de chat', - scrollToNewestMessages: 'Desplácese a los mensajes más recientes', + chatUserDisplayNames: 'Nombres de los usuarios del chat', + scrollToNewestMessages: 'Desplázate a los mensajes más recientes', }, }; From ddabb59c093bfd1e8c151d370dc90047d2cff4eb Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Tue, 28 Mar 2023 00:16:59 +0530 Subject: [PATCH 13/14] remove accessibilityHint from Icon and use testId Signed-off-by: Prince Mendiratta --- src/components/Icon/index.js | 4 ++-- tests/unit/SidebarOrderTest.js | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/Icon/index.js b/src/components/Icon/index.js index c65030afc407..269f642d8ed5 100644 --- a/src/components/Icon/index.js +++ b/src/components/Icon/index.js @@ -52,7 +52,7 @@ class Icon extends PureComponent { if (this.props.inline) { return ( @@ -68,7 +68,7 @@ class Icon extends PureComponent { return ( { // Then there should be a pencil icon and report one should be the first one because putting a draft on the active report should change its location // in the ordered list .then(() => { - const pencilIcon = screen.getAllByAccessibilityHint('Pencil Icon'); + const pencilIcon = screen.queryAllByTestId('Pencil Icon'); expect(pencilIcon).toHaveLength(1); const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); @@ -263,7 +263,7 @@ describe('Sidebar', () => { // Then there should be a pencil icon showing .then(() => { - expect(screen.getAllByAccessibilityHint('Pencil Icon')).toHaveLength(1); + expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(1); }) // When the draft is removed @@ -271,7 +271,7 @@ describe('Sidebar', () => { // Then the pencil icon goes away .then(() => { - expect(screen.queryAllByAccessibilityHint('Pencil Icon')).toHaveLength(0); + expect(screen.queryAllByTestId('Pencil Icon')).toHaveLength(0); }); }); @@ -296,7 +296,7 @@ describe('Sidebar', () => { // Then there should be a pencil icon showing .then(() => { - expect(screen.getAllByAccessibilityHint('Pin Icon')).toHaveLength(1); + expect(screen.queryAllByTestId('Pin Icon')).toHaveLength(1); }) // When the draft is removed @@ -304,7 +304,7 @@ describe('Sidebar', () => { // Then the pencil icon goes away .then(() => { - expect(screen.queryAllByAccessibilityHint('Pin Icon')).toHaveLength(0); + expect(screen.queryAllByTestId('Pin Icon')).toHaveLength(0); }); }); @@ -361,8 +361,8 @@ describe('Sidebar', () => { const hintText = Localize.translateLocal('accessibilityHints.chatUserDisplayNames'); const displayNames = screen.queryAllByLabelText(hintText); expect(displayNames).toHaveLength(3); - expect(screen.getAllByAccessibilityHint('Pin Icon')).toHaveLength(1); - expect(screen.getAllByAccessibilityHint('Pencil Icon')).toHaveLength(1); + 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('Five, Six'); expect(lodashGet(displayNames, [2, 'props', 'children'])).toBe('Three, Four'); From f8f848e84f0d9dfb2c52f6ec6fe24f52e69ed6ca Mon Sep 17 00:00:00 2001 From: Prince Mendiratta Date: Tue, 28 Mar 2023 00:24:40 +0530 Subject: [PATCH 14/14] reorganize accessibility translation keys Signed-off-by: Prince Mendiratta --- src/languages/en.js | 6 +++--- src/languages/es.js | 6 +++--- src/pages/home/report/ReportActionsList.js | 2 +- src/pages/home/sidebar/SidebarLinks.js | 2 +- src/pages/signin/LoginForm.js | 2 +- tests/ui/UnreadIndicatorsTest.js | 8 ++++---- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index c2bf5fe6b4ae..6bed9dd108fb 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -276,6 +276,8 @@ export default { fabNewChat: 'New chat (Floating action)', chatPinned: 'Chat pinned', draftedMessage: 'Drafted message', + listOfChatMessages: 'List of chat messages', + listOfChats: 'List of chats', }, iou: { amount: 'Amount', @@ -608,6 +610,7 @@ export default { invalidFormatEmailLogin: 'The email entered is invalid. Please fix the format and try again.', }, cannotGetAccountDetails: 'Couldn\'t retrieve account details, please try to sign in again.', + loginForm: 'Login form', }, personalDetails: { error: { @@ -1205,14 +1208,11 @@ export default { allCountries: CONST.ALL_COUNTRIES, accessibilityHints: { navigateToChatsList: 'Navigate back to chats list', - listOfChatMessages: 'List of chat messages', chatWelcomeMessage: 'Chat welcome message', navigatesToChat: 'Navigates to a chat', newMessageLineIndicator: 'New message line indicator', chatMessage: 'Chat message', lastChatMessagePreview: 'Last chat message preview', - loginForm: 'Login form', - listOfChats: 'List of chats', workspaceName: 'Workspace name', chatUserDisplayNames: 'Chat user display names', scrollToNewestMessages: 'Scroll to newest messages', diff --git a/src/languages/es.js b/src/languages/es.js index 6f6210b89f41..f8173c43aee7 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -275,6 +275,8 @@ export default { fabNewChat: 'Nuevo chat', chatPinned: 'Chat fijado', draftedMessage: 'Mensaje borrador', + listOfChatMessages: 'Lista de mensajes del chat', + listOfChats: 'lista de chats', }, iou: { amount: 'Importe', @@ -607,6 +609,7 @@ export default { invalidFormatEmailLogin: 'El email introducido no es válido. Corrígelo e inténtalo de nuevo.', }, cannotGetAccountDetails: 'No se pudieron cargar los detalles de tu cuenta, por favor intenta iniciar sesión de nuevo.', + loginForm: 'Formulario de inicio de sesión', }, personalDetails: { error: { @@ -1671,14 +1674,11 @@ export default { }, accessibilityHints: { navigateToChatsList: 'Vuelve a la lista de chats', - listOfChatMessages: 'Lista de mensajes del chat', chatWelcomeMessage: 'Mensaje de bienvenida al chat', navigatesToChat: 'Navega a un chat', newMessageLineIndicator: 'Indicador de nueva línea de mensaje', chatMessage: 'mensaje de chat', lastChatMessagePreview: 'Vista previa del último mensaje del chat', - loginForm: 'Formulario de inicio de sesión', - listOfChats: 'lista de chats', workspaceName: 'Nombre del espacio de trabajo', chatUserDisplayNames: 'Nombres de los usuarios del chat', scrollToNewestMessages: 'Desplázate a los mensajes más recientes', diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 5a96f36de4a7..2e02a794ed03 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -151,7 +151,7 @@ class ReportActionsList extends React.Component { return ( - + this.input = el} label={this.props.translate('loginForm.phoneOrEmail')} diff --git a/tests/ui/UnreadIndicatorsTest.js b/tests/ui/UnreadIndicatorsTest.js index 6b8430f952b7..ad2d622a4315 100644 --- a/tests/ui/UnreadIndicatorsTest.js +++ b/tests/ui/UnreadIndicatorsTest.js @@ -52,7 +52,7 @@ beforeAll(() => { }); function scrollUpToRevealNewMessagesBadge() { - const hintText = Localize.translateLocal('accessibilityHints.listOfChatMessages'); + const hintText = Localize.translateLocal('sidebarScreen.listOfChatMessages'); fireEvent.scroll(screen.queryByLabelText(hintText), { nativeEvent: { contentOffset: { @@ -106,7 +106,7 @@ function navigateToSidebarOption(index) { * @return {Boolean} */ function isDrawerOpen() { - const hintText = Localize.translateLocal('accessibilityHints.listOfChats'); + const hintText = Localize.translateLocal('sidebarScreen.listOfChats'); const sidebarLinks = screen.queryAllByLabelText(hintText); return !lodashGet(sidebarLinks, [0, 'props', 'accessibilityElementsHidden']); } @@ -132,7 +132,7 @@ function signInAndGetAppWithUnreadChat() { render(); return waitForPromisesToResolveWithAct() .then(() => { - const hintText = Localize.translateLocal('accessibilityHints.loginForm'); + const hintText = Localize.translateLocal('loginForm.loginForm'); const loginForm = screen.queryAllByLabelText(hintText); expect(loginForm).toHaveLength(1); @@ -208,7 +208,7 @@ describe('Unread Indicators', () => { expect(LocalNotification.showCommentNotification.mock.calls).toHaveLength(0); // Verify the sidebar links are rendered - const sidebarLinksHintText = Localize.translateLocal('accessibilityHints.listOfChats'); + const sidebarLinksHintText = Localize.translateLocal('sidebarScreen.listOfChats'); const sidebarLinks = screen.queryAllByLabelText(sidebarLinksHintText); expect(sidebarLinks).toHaveLength(1); expect(isDrawerOpen()).toBe(true);