E2E chat opening

src/CONST.ts

@@ -753,6 +753,7 @@ const CONST = {
     TIMING: {
         CALCULATE_MOST_RECENT_LAST_MODIFIED_ACTION: 'calc_most_recent_last_modified_action',
         SEARCH_RENDER: 'search_render',
+        CHAT_RENDER: 'chat_render',
         HOMEPAGE_INITIAL_RENDER: 'homepage_initial_render',
         REPORT_INITIAL_RENDER: 'report_initial_render',
         SWITCH_REPORT: 'switch_report',

src/libs/E2E/reactNativeLaunchingTest.ts

@@ -26,6 +26,7 @@ if (!Metrics.canCapturePerformanceMetrics()) {
 const tests: Tests = {
     [E2EConfig.TEST_NAMES.AppStartTime]: require('./tests/appStartTimeTest.e2e').default,
     [E2EConfig.TEST_NAMES.OpenSearchPage]: require('./tests/openSearchPageTest.e2e').default,
+    [E2EConfig.TEST_NAMES.ChatOpening]: require('./tests/chatOpeningTest.e2e').default,
     [E2EConfig.TEST_NAMES.ReportTyping]: require('./tests/reportTypingTest.e2e').default,
 };
 

src/libs/E2E/tests/chatOpeningTest.e2e.ts

@@ -0,0 +1,62 @@
+import E2ELogin from '@libs/E2E/actions/e2eLogin';
+import mockReport from '@libs/E2E/apiMocks/openReport';
+import E2EClient from '@libs/E2E/client';
+import Navigation from '@libs/Navigation/Navigation';
+import Performance from '@libs/Performance';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+
+type ReportValue = {
+    reportID: string;
+};
+
+type OnyxData = {
+    value: ReportValue;
+};
+
+type MockReportResponse = {
+    onyxData: OnyxData[];
+};
+
+const test = () => {
+    // check for login (if already logged in the action will simply resolve)
+    console.debug('[E2E] Logging in for chat opening');
+    const report = mockReport() as MockReportResponse;
+
+    const {reportID} = report.onyxData[0].value;
+
+    E2ELogin().then((neededLogin) => {
+        if (neededLogin) {
+            // we don't want to submit the first login to the results
+            return E2EClient.submitTestDone();
+        }
+
+        console.debug('[E2E] Logged in, getting chat opening metrics and submitting them…');
+        Performance.subscribeToMeasurements((entry) => {
+            if (entry.name === CONST.TIMING.SIDEBAR_LOADED) {
+                console.debug(`[E2E] Sidebar loaded, navigating report…`);
+                Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(reportID));
+                return;
+            }
+            console.debug(`[E2E] Entry: ${JSON.stringify(entry)}`);
+            if (entry.name !== CONST.TIMING.CHAT_RENDER) {
+                return;
+            }
+
+            console.debug(`[E2E] Submitting!`);
+            E2EClient.submitTestResults({
+                name: 'Chat opening',
+                duration: entry.duration,
+            })
+                .then(() => {
+                    console.debug('[E2E] Done with chat opening, exiting…');
+                    E2EClient.submitTestDone();
+                })
+                .catch((err) => {
+                    console.debug('[E2E] Error while submitting test results:', err);
+                });
+        });
+    });
+};
+
+export default test;

src/pages/home/ReportScreen.js

@@ -18,9 +18,11 @@ import withViewportOffsetTop from '@components/withViewportOffsetTop';
 import useLocalize from '@hooks/useLocalize';
 import usePrevious from '@hooks/usePrevious';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import Timing from '@libs/actions/Timing';
 import compose from '@libs/compose';
 import Navigation from '@libs/Navigation/Navigation';
 import reportWithoutHasDraftSelector from '@libs/OnyxSelectors/reportWithoutHasDraftSelector';
+import Performance from '@libs/Performance';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import personalDetailsPropType from '@pages/personalDetailsPropType';
@@ -159,6 +161,11 @@ function ReportScreen({
     const [isBannerVisible, setIsBannerVisible] = useState(true);
     const [listHeight, setListHeight] = useState(0);
 
+    if (firstRenderRef.current) {
+        Timing.start(CONST.TIMING.CHAT_RENDER);
+        Performance.markStart(CONST.TIMING.CHAT_RENDER);
+    }
+
     const reportID = getReportID(route);
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
     const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
@@ -275,6 +282,9 @@ function ReportScreen({
     );
 
     useEffect(() => {
+        Timing.end(CONST.TIMING.CHAT_RENDER);
+        Performance.markEnd(CONST.TIMING.CHAT_RENDER);
+
         fetchReportIfNeeded();
         ComposerActions.setShouldShowComposeInput(true);
         return () => {

tests/e2e/config.js

@@ -10,6 +10,7 @@ const TEST_NAMES = {
     AppStartTime: 'App start time',
     OpenSearchPage: 'Open search page TTI',
     ReportTyping: 'Report typing',
+    ChatOpening: 'Chat opening',
 };
 
 /**
@@ -78,5 +79,8 @@ module.exports = {
                 autoFocus: true,
             },
         },
+        [TEST_NAMES.ChatOpening]: {
+            name: TEST_NAMES.ChatOpening,
+        },
     },
 };