chore(test): add stack lifecycle events screen test with scenario

apps/src/tests/single-feature-tests/stack-v5/index.ts

@@ -4,6 +4,7 @@ import type { ScenarioGroup } from '@apps/tests/shared/helpers';
 // scenario group consumed by the selection menu.
 import TestStackPreventNativeDismissSingleStack from './prevent-native-dismiss-single-stack';
 import TestStackPreventNativeDismissNestedStack from './prevent-native-dismiss-nested-stack';
+import TestStackLifecycleEvents from './test-stack-lifecycle-events';
 import TestStackAnimationAndroid from './test-animation-android';
 import TestStackSimpleNav from './test-stack-simple-nav';
 import TestStackSubviewsAndroid from './test-stack-subviews-android';
@@ -24,6 +25,7 @@ import TestStackHeaderSelectiveUpdates from './test-stack-header-selective-updat
 // under a name for direct rendering (e.g. from App.tsx or e2e harnesses).
 export { default as TestStackPreventNativeDismissSingleStack } from './prevent-native-dismiss-single-stack';
 export { default as TestStackPreventNativeDismissNestedStack } from './prevent-native-dismiss-nested-stack';
+export { default as TestStackLifecycleEvents } from './test-stack-lifecycle-events';
 export { default as TestStackAnimationAndroid } from './test-animation-android';
 export { default as TestStackSimpleNav } from './test-stack-simple-nav';
 export { default as TestStackSubviewsAndroid } from './test-stack-subviews-android';
@@ -41,6 +43,7 @@ export { default as TestStackToolbarNestedMenu } from './test-stack-toolbar-nest
 const scenarios = {
   TestStackPreventNativeDismissSingleStack,
   TestStackPreventNativeDismissNestedStack,
+  TestStackLifecycleEvents,
   TestStackAnimationAndroid,
   TestStackSimpleNav,
   TestStackSubviewsAndroid,

apps/src/tests/single-feature-tests/stack-v5/test-stack-lifecycle-events/index.tsx

@@ -0,0 +1,179 @@
+import React, { useCallback } from 'react';
+import { scenarioDescription } from './scenario-description';
+import { createScenario } from '@apps/tests/shared/helpers';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  StackContainer,
+  useStackNavigationContext,
+} from '@apps/shared/gamma/containers/stack';
+import { CenteredLayoutView } from '@apps/shared/CenteredLayoutView';
+import { Colors } from '@apps/shared/styling';
+import { ToastProvider, useToast } from '@apps/shared';
+import { StackNavigationButtons } from '@apps/tests/shared/components/stack-v5/StackNavigationButtons';
+
+function TestStackLifecycleEvents() {
+  return (
+    <ToastProvider>
+      <StackSetup />
+    </ToastProvider>
+  );
+}
+
+function useMakeLifecycleCallbacks() {
+  const toast = useToast();
+
+  return useCallback(
+    (screenName: string) => ({
+      onWillAppear: () =>
+        toast.push({
+          message: `${screenName}: onWillAppear`,
+          backgroundColor: Colors.GreenLight60,
+        }),
+      onDidAppear: () =>
+        toast.push({
+          message: `${screenName}: onDidAppear`,
+          backgroundColor: Colors.BlueLight100,
+        }),
+      onWillDisappear: () =>
+        toast.push({
+          message: `${screenName}: onWillDisappear`,
+          backgroundColor: Colors.NavyLight60,
+        }),
+      onDidDisappear: () =>
+        toast.push({
+          message: `${screenName}: onDidDisappear`,
+          backgroundColor: Colors.NavyLight100,
+        }),
+    }),
+    [toast],
+  );
+}
+
+function StackSetup() {
+  const makeCallbacks = useMakeLifecycleCallbacks();
+
+  return (
+    <StackContainer
+      routeConfigs={[
+        {
+          name: 'Home',
+          Component: HomeScreen,
+          options: {
+            ...makeCallbacks('Home'),
+          },
+        },
+        {
+          name: 'A',
+          Component: AScreen,
+          options: {
+            ...makeCallbacks('A'),
+            headerConfig: {
+              title: 'A',
+            },
+          },
+        },
+        {
+          name: 'NestedStack',
+          Component: NestedStackScreen,
+          options: {
+            ...makeCallbacks('NestedStack'),
+            headerConfig: {
+              title: 'NestedStack',
+            },
+          },
+        },
+      ]}
+    />
+  );
+}
+
+function HomeScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.BlueLight40 }}>
+      <RouteInformation routeName="Home" />
+      <StackNavigationButtons
+        isPopEnabled={false}
+        routeNames={['A', 'NestedStack']}
+      />
+    </CenteredLayoutView>
+  );
+}
+
+function AScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.YellowLight40 }}>
+      <RouteInformation routeName="A" />
+      <StackNavigationButtons isPopEnabled routeNames={['A', 'NestedStack']} />
+    </CenteredLayoutView>
+  );
+}
+
+function NestedStackScreen() {
+  const makeCallbacks = useMakeLifecycleCallbacks();
+
+  return (
+    <StackContainer
+      routeConfigs={[
+        {
+          name: 'NestedHome',
+          Component: NestedHomeScreen,
+          options: {
+            ...makeCallbacks('NestedHome'),
+          },
+        },
+        {
+          name: 'NestedA',
+          Component: NestedAScreen,
+          options: {
+            ...makeCallbacks('NestedA'),
+            headerConfig: {
+              title: 'NestedA',
+            },
+          },
+        },
+      ]}
+    />
+  );
+}
+
+function NestedHomeScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.BlueLight40 }}>
+      <RouteInformation routeName="NestedHome" />
+      <StackNavigationButtons isPopEnabled routeNames={['NestedA']} />
+    </CenteredLayoutView>
+  );
+}
+
+function NestedAScreen() {
+  return (
+    <CenteredLayoutView style={{ backgroundColor: Colors.BlueLight40 }}>
+      <RouteInformation routeName="NestedA" />
+      <StackNavigationButtons isPopEnabled routeNames={['NestedA']} />
+    </CenteredLayoutView>
+  );
+}
+
+function RouteInformation(props: { routeName: string }) {
+  const routeKey = useStackNavigationContext().routeKey;
+
+  return (
+    <View>
+      <Text style={styles.routeInformation}>Name: {props.routeName}</Text>
+      <Text style={styles.routeInformation}>Key: {routeKey}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  routeInformation: {
+    color: 'black',
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+});
+
+export default createScenario(
+  TestStackLifecycleEvents,
+  scenarioDescription,
+);

apps/src/tests/single-feature-tests/stack-v5/test-stack-lifecycle-events/scenario-description.ts

@@ -0,0 +1,10 @@
+import type { ScenarioDescription } from '@apps/tests/shared/helpers';
+
+export const scenarioDescription: ScenarioDescription = {
+  name: 'Stack lifecycle events',
+  key: 'test-stack-lifecycle-events',
+  details: 'Verify lifecycle events (onWillAppear, etc.) fire on stack navigation',
+  platforms: ['android', 'ios'],
+  e2eCoverage: 'tbd',
+  smokeTest: false,
+};