[NT-2010] Enable nested personalizations in react native

.github/workflows/main-pipeline.yaml

@@ -322,6 +322,11 @@ jobs:
           sudo udevadm control --reload-rules
           sudo udevadm trigger --name-match=kvm
 
+      - name: Install PulseAudio compatibility for emulator
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libpulse0
+
       - uses: pnpm/action-setup@v4
 
       - uses: actions/setup-node@v6
@@ -408,15 +413,20 @@ jobs:
           force-avd-creation: true
           emulator-options:
             -no-window -no-audio -no-boot-anim -gpu swiftshader_indirect -no-snapshot-save
+            -dns-server 8.8.8.8
           disable-animations: true
           emulator-boot-timeout: 300
           disk-size: 6G
           script: |
             echo "Verifying JAVA_HOME: $JAVA_HOME"
             java -version
+            echo "Clearing any proxy settings..."
+            adb shell settings put global http_proxy :0 || true
             echo "Setting up adb reverse port forwarding..."
             adb reverse tcp:8000 tcp:8000
             adb reverse tcp:8081 tcp:8081
+            echo "Verifying adb reverse is set up..."
+            adb reverse --list
             echo "Building Android app..."
             pnpm --filter @implementation/react-native test:e2e:android:build
             echo "Running E2E tests..."

implementations/react-native/.detoxrc.js

@@ -82,7 +82,7 @@ module.exports = {
       type: 'android.apk',
       binaryPath: path.join(__dirname, 'android/app/build/outputs/apk/debug/app-debug.apk'),
       build: `cd ${__dirname}/android && ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug`,
-      reversePorts: [8081],
+      reversePorts: [8081, 8000],
     },
     'android.release': {
       type: 'android.apk',

implementations/react-native/App.tsx

@@ -18,6 +18,7 @@ const ENTRY_IDS = [
   '5XHssysWUDECHzKLzoIsg1',
   '6zqoWXyiSrf0ja7I2WGtYj',
   '7pa5bOx8Z9NmNcr7mISvD',
+  ENV_CONFIG.entries.nested,
 ]
 
 function App(): React.JSX.Element {
@@ -75,20 +76,20 @@ function App(): React.JSX.Element {
 
   return (
     <OptimizationProvider instance={sdk}>
-      <SafeAreaView>
+      <SafeAreaView style={{ flex: 1 }}>
         <View style={{ padding: 10, flexDirection: 'row', gap: 10 }}>
           {!isIdentified ? (
             <Button testID="identify-button" title="Identify" onPress={handleIdentify} />
           ) : (
             <Button testID="reset-button" title="Reset" onPress={handleReset} />
           )}
         </View>
-        <ScrollView>
+        <ScrollView style={{ flex: 1 }}>
           {entries.map((entry) => (
             <ContentEntry key={entry.sys.id} entry={entry} sdk={sdk} />
           ))}
         </ScrollView>
-        <View>
+        <View style={{ padding: 10 }}>
           <AnalyticsEventDisplay sdk={sdk} />
         </View>
       </SafeAreaView>

implementations/react-native/e2e/00-connectivity.test.js

@@ -0,0 +1,43 @@
+/**
+ * Network Connectivity Test
+ *
+ * This test runs FIRST (due to alphabetical ordering) to verify that the
+ * mock server is reachable from the app. If this fails, all other tests
+ * will likely fail due to network issues.
+ */
+
+describe('network connectivity', () => {
+  beforeAll(async () => {
+    await device.launchApp({ newInstance: true })
+  })
+
+  it('should verify mock server is reachable', async () => {
+    // Wait for the app to start loading
+    // If the app can't reach the mock server, it will show "Loading..." indefinitely
+    // or show an error message
+
+    // First, wait for either the loading text or an error
+    await waitFor(element(by.text('Loading...')))
+      .toBeVisible()
+      .withTimeout(10000)
+
+    // Now wait for the loading to complete (identify button appears)
+    // This means the SDK initialized and fetched data from the mock server
+    await waitFor(element(by.id('identify-button')))
+      .toBeVisible()
+      .withTimeout(30000)
+
+    // If we get here, the network is working!
+    console.log('✅ Network connectivity verified - mock server is reachable')
+  })
+
+  it('should display content entries from mock server', async () => {
+    // Verify at least one content entry is displayed
+    // This confirms the Contentful mock is also working
+    await waitFor(element(by.id('entry-text-1MwiFl4z7gkwqGYdvCmr8c')))
+      .toBeVisible()
+      .withTimeout(30000)
+
+    console.log('✅ Content entries loaded from mock server')
+  })
+})

implementations/react-native/e2e/analytics.test.js

@@ -1,4 +1,4 @@
-const { clearProfileState } = require('./helpers')
+const { clearProfileState, ELEMENT_VISIBILITY_TIMEOUT } = require('./helpers')
 
 describe('Analytics Events', () => {
   beforeAll(async () => {
@@ -12,14 +12,14 @@ describe('Analytics Events', () => {
   it('should track component impression events for visible entries', async () => {
     // Wait for the app to load
     const analyticsTitle = element(by.text('Analytics Events'))
-    await waitFor(analyticsTitle).toBeVisible().withTimeout(10000)
+    await waitFor(analyticsTitle).toBeVisible().withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
     // Wait a bit for content to load and be visible
     await new Promise((resolve) => setTimeout(resolve, 3000))
 
     // Look for component events with entry IDs
     // The merge tag entry should trigger a component event
-    const componentEvent = element(by.text(/component - Component: 1MwiFl4z7gkwqGYdvCmr8c/i))
-    await waitFor(componentEvent).toBeVisible().withTimeout(15000)
+    const componentEvent = element(by.label('component - Component: 1MwiFl4z7gkwqGYdvCmr8c'))
+    await waitFor(componentEvent).toBeVisible().withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
   })
 })

implementations/react-native/e2e/displays-identified-user-variants.test.js

@@ -1,4 +1,4 @@
-const { clearProfileState } = require('./helpers')
+const { clearProfileState, ELEMENT_VISIBILITY_TIMEOUT } = require('./helpers')
 
 describe('identified user', () => {
   beforeAll(async () => {
@@ -10,7 +10,7 @@ describe('identified user', () => {
 
     await waitFor(element(by.id('identify-button')))
       .toBeVisible()
-      .withTimeout(10000)
+      .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
     await element(by.id('identify-button')).tap()
 
@@ -22,7 +22,7 @@ describe('identified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-1MwiFl4z7gkwqGYdvCmr8c')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Verify the element contains the merge tag text - check for key parts
       await expect(
@@ -38,7 +38,7 @@ describe('identified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-4ib0hsHWoSOnCVdDkizE8d')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -54,7 +54,7 @@ describe('identified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-xFwgG3oNaOcjzWiGe4vXo')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -71,7 +71,7 @@ describe('identified user', () => {
     it('should display variant for return visitors', async () => {
       await waitFor(element(by.id('entry-text-2Z2WLOx07InSewC3LUB3eX')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -85,7 +85,7 @@ describe('identified user', () => {
     it('should display variant B for A/B/C experiment', async () => {
       await waitFor(element(by.id('entry-text-5XHssysWUDECHzKLzoIsg1')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -99,7 +99,7 @@ describe('identified user', () => {
     it('should display variant for visitors with custom event', async () => {
       await waitFor(element(by.id('entry-text-6zqoWXyiSrf0ja7I2WGtYj')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -113,7 +113,7 @@ describe('identified user', () => {
     it('should display variant for identified users', async () => {
       await waitFor(element(by.id('entry-text-7pa5bOx8Z9NmNcr7mISvD')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -124,4 +124,42 @@ describe('identified user', () => {
       ).toBeVisible()
     })
   })
+
+  describe('nested personalization variants', () => {
+    it('should display level 0 nested variant for return visitors', async () => {
+      await waitFor(element(by.id('entry-text-2KIWllNZJT205BwOSkMINg')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 0 nested variant entry. [Entry: 2KIWllNZJT205BwOSkMINg]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 1 nested variant for return visitors', async () => {
+      await waitFor(element(by.id('entry-text-5a8ONfBdanJtlJ39WWnH1w')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 1 nested variant entry. [Entry: 5a8ONfBdanJtlJ39WWnH1w]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 2 nested variant for return visitors', async () => {
+      await waitFor(element(by.id('entry-text-4hDiXxYEFrXHXcQgmdL9Uv')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 2 nested variant entry. [Entry: 4hDiXxYEFrXHXcQgmdL9Uv]'),
+        ),
+      ).toBeVisible()
+    })
+  })
 })

implementations/react-native/e2e/displays-unidentified-user-variants.test.js

@@ -1,4 +1,4 @@
-const { clearProfileState } = require('./helpers')
+const { clearProfileState, ELEMENT_VISIBILITY_TIMEOUT } = require('./helpers')
 
 describe('unidentified user', () => {
   beforeAll(async () => {
@@ -14,7 +14,7 @@ describe('unidentified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-1MwiFl4z7gkwqGYdvCmr8c')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Verify the element contains the merge tag text - check for key parts
       await expect(
@@ -30,7 +30,7 @@ describe('unidentified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-4ib0hsHWoSOnCVdDkizE8d')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -46,7 +46,7 @@ describe('unidentified user', () => {
       // Wait for the entry text to appear
       await waitFor(element(by.id('entry-text-xFwgG3oNaOcjzWiGe4vXo')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       // Check for the variant text
       await expect(
@@ -63,7 +63,7 @@ describe('unidentified user', () => {
     it('should display variant for new visitors', async () => {
       await waitFor(element(by.id('entry-text-2Z2WLOx07InSewC3LUB3eX')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -77,7 +77,7 @@ describe('unidentified user', () => {
     it('should display variant B for A/B/C experiment', async () => {
       await waitFor(element(by.id('entry-text-5XHssysWUDECHzKLzoIsg1')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -91,7 +91,7 @@ describe('unidentified user', () => {
     it('should display baseline for visitors with or without custom event', async () => {
       await waitFor(element(by.id('entry-text-6zqoWXyiSrf0ja7I2WGtYj')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -105,7 +105,7 @@ describe('unidentified user', () => {
     it('should display baseline for all identified or unidentified users', async () => {
       await waitFor(element(by.id('entry-text-7pa5bOx8Z9NmNcr7mISvD')))
         .toBeVisible()
-        .withTimeout(10000)
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
 
       await expect(
         element(
@@ -116,4 +116,42 @@ describe('unidentified user', () => {
       ).toBeVisible()
     })
   })
+
+  describe('nested personalization baselines', () => {
+    it('should display level 0 nested baseline for new visitors', async () => {
+      await waitFor(element(by.id('entry-text-1JAU028vQ7v6nB2swl3NBo')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 0 nested baseline entry. [Entry: 1JAU028vQ7v6nB2swl3NBo]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 1 nested baseline for new visitors', async () => {
+      await waitFor(element(by.id('entry-text-5i4SdJXw9oDEY0vgO7CwF4')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 1 nested baseline entry. [Entry: 5i4SdJXw9oDEY0vgO7CwF4]'),
+        ),
+      ).toBeVisible()
+    })
+
+    it('should display level 2 nested baseline for new visitors', async () => {
+      await waitFor(element(by.id('entry-text-uaNY4YJ0HFPAX3gKXiRdX')))
+        .toBeVisible()
+        .withTimeout(ELEMENT_VISIBILITY_TIMEOUT)
+
+      await expect(
+        element(
+          by.label('This is a level 2 nested baseline entry. [Entry: uaNY4YJ0HFPAX3gKXiRdX]'),
+        ),
+      ).toBeVisible()
+    })
+  })
 })

implementations/react-native/e2e/helpers.js

@@ -1,3 +1,6 @@
+// Timeout value for waiting for elements to become visible (in milliseconds)
+const ELEMENT_VISIBILITY_TIMEOUT = 120000 // 120 seconds
+
 async function clearProfileState() {
   const platform = device.getPlatform()
 
@@ -7,4 +10,5 @@ async function clearProfileState() {
 
 module.exports = {
   clearProfileState,
+  ELEMENT_VISIBILITY_TIMEOUT,
 }