test(react-native): add rendering metrics e2e test

test/react-native/features/fixtures/scenario-launcher/scenarios/RenderingMetricsScenario.js

@@ -0,0 +1,84 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { SafeAreaView, View, Text, StyleSheet, FlatList } from 'react-native'
+import { NativeScenarioLauncher } from '../lib/native'
+import BugsnagPerformance from '@bugsnag/react-native-performance'
+
+export const doNotStartBugsnagPerformance = true
+
+const listData = Array.from({ length: 1000 }, (_, index) => {  return { name: `Item ${index + 1}` } })
+
+export const initialise = async (config) => {
+  const nativeConfig = {
+    apiKey: config.apiKey,
+    endpoint: config.endpoint
+  }
+
+  await NativeScenarioLauncher.startNativePerformance(nativeConfig)
+
+  BugsnagPerformance.attach({ maximumBatchSize: 1, autoInstrumentAppStarts: false, autoInstrumentNetworkRequests: false })
+}
+
+const Item = ({title}) => {
+  const [shouldRender, setShouldRender] = useState(false)
+
+  useEffect(() => {
+    setTimeout(() => {
+      setShouldRender(true)
+    }, 250)
+  }, [])
+
+  if (!shouldRender) {
+    return null
+  }
+
+  return (
+    <View style={styles.item}>
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  )
+}
+
+export const App = () => {
+  let nativeSpan = BugsnagPerformance.startSpan('RenderingMetricsScenario', { isFirstClass: true })
+
+  const renderItem = (item, index) => {
+    if (nativeSpan && index === listData.length - 1) {
+      nativeSpan.end()
+      nativeSpan = null
+    }
+
+    return <Item title={item.name} />
+  }
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.scenario}>
+        <Text>Rendering Metrics Scenario</Text>
+        <FlatList
+          ref={(ref) => { this.flatListRef = ref }} 
+          onContentSizeChange={()=> this.flatListRef.scrollToEnd()} 
+          data={listData} 
+          renderItem={({ item, index }) => renderItem(item, index)}
+        />
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  scenario: {
+    flex: 1
+  },
+  item: {
+    backgroundColor: '#f9c2ff',
+    padding: 20,
+    marginVertical: 8,
+    marginHorizontal: 16,
+  },
+  title: {
+    fontSize: 32
+  }
+})

test/react-native/features/fixtures/scenario-launcher/scenarios/index.js

@@ -20,4 +20,5 @@ export * as ReactNativeNavigationScenario from './ReactNativeNavigationScenario'
 export * as ReactNavigationScenario from './ReactNavigationScenario'
 
 // Native Integration Scenarios
-export * as NativeIntegrationScenario from './NativeIntegrationScenario'
+export * as NativeIntegrationScenario from './NativeIntegrationScenario'
+export * as RenderingMetricsScenario from './RenderingMetricsScenario'

test/react-native/features/rendering-metrics.feature

@@ -0,0 +1,15 @@
+@native_integration
+Feature: Rendering Metrics
+
+  Scenario: Rendering metrics are reported
+    When I run 'RenderingMetricsScenario'
+    And I wait to receive a sampling request
+    And I wait to receive 1 traces
+
+    # Native trace
+    Then the trace payload field "resourceSpans.0.resource" string attribute "service.name" equals "com.bugsnag.fixtures.reactnative.performance"
+    And the trace payload field "resourceSpans.0.resource" string attribute "telemetry.sdk.name" equals the platform-dependent string:
+        | ios     | bugsnag.performance.cocoa   |
+        | android | bugsnag.performance.android |
+
+    And a span name equals "RenderingMetricsScenario"