From 4c529347ab3090380ae5d8dc23c30153ab40cd5c Mon Sep 17 00:00:00 2001
From: Yousif Ahmed <yousif@bugsnag.com>
Date: Thu, 2 Jan 2025 13:27:58 +0000
Subject: [PATCH] test(react-native): add rendering metrics e2e test

---
 .../scenarios/RenderingMetricsScenario.js     | 53 +++++++++++++++++++
 .../features/rendering-metrics.feature        | 15 ++++++
 2 files changed, 68 insertions(+)
 create mode 100644 test/react-native/features/fixtures/scenario-launcher/scenarios/RenderingMetricsScenario.js
 create mode 100644 test/react-native/features/rendering-metrics.feature

diff --git a/test/react-native/features/fixtures/scenario-launcher/scenarios/RenderingMetricsScenario.js b/test/react-native/features/fixtures/scenario-launcher/scenarios/RenderingMetricsScenario.js
new file mode 100644
index 000000000..cf6809937
--- /dev/null
+++ b/test/react-native/features/fixtures/scenario-launcher/scenarios/RenderingMetricsScenario.js
@@ -0,0 +1,53 @@
+import React, { useEffect } 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: 10000 }, (_, 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 })
+}
+
+export const App = () => {
+  let nativeSpan = BugsnagPerformance.startSpan('RenderingMetricsScenario', { isFirstClass: true })
+
+  const renderItem = (item, index) => {
+    return (
+      <View>
+        <Text>{item.name}</Text>
+      </View>
+    )
+  }
+
+  useEffect(() => {
+    nativeSpan.end()
+  }, [])
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.scenario}>
+        <Text>Rendering Metrics Scenario</Text>
+        <FlatList data={listData} renderItem={({ item, index }) => renderItem(item, index)} />
+      </View>
+    </SafeAreaView>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  scenario: {
+    flex: 1
+  }
+})
diff --git a/test/react-native/features/rendering-metrics.feature b/test/react-native/features/rendering-metrics.feature
new file mode 100644
index 000000000..ec81649c6
--- /dev/null
+++ b/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"