From 3be17e72dcaefc5b3fe94b6c3fe190748e16bd4b Mon Sep 17 00:00:00 2001
From: Michelle Zhang <56095982+michellewzhang@users.noreply.github.com>
Date: Fri, 3 May 2024 16:44:55 -0700
Subject: [PATCH] add test

---
 .../replays/getCurrentScreenName.spec.tsx     | 47 +++++++++++++++++++
 static/app/utils/replays/types.tsx            |  2 +-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 static/app/utils/replays/getCurrentScreenName.spec.tsx

diff --git a/static/app/utils/replays/getCurrentScreenName.spec.tsx b/static/app/utils/replays/getCurrentScreenName.spec.tsx
new file mode 100644
index 00000000000000..c0925b72f31631
--- /dev/null
+++ b/static/app/utils/replays/getCurrentScreenName.spec.tsx
@@ -0,0 +1,47 @@
+import {ReplayNavFrameFixture} from 'sentry-fixture/replay/replayBreadcrumbFrameData';
+import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
+
+import getCurrentScreenName from 'sentry/utils/replays/getCurrentScreenName';
+import hydrateBreadcrumbs, {
+  replayInitBreadcrumb,
+} from 'sentry/utils/replays/hydrateBreadcrumbs';
+
+const START_DATE = new Date('2022-06-15T00:40:00.111Z');
+const NAVIGATION_DATE_1 = new Date('2022-06-15T00:46:00.333Z');
+const NAVIGATION_DATE_2 = new Date('2022-06-15T00:48:00.444Z');
+const END_DATE = new Date('2022-06-15T00:50:00.555Z');
+
+const replayRecord = ReplayRecordFixture({
+  started_at: START_DATE,
+  finished_at: END_DATE,
+});
+
+const PAGELOAD_FRAME = replayInitBreadcrumb(replayRecord);
+
+const [NAV_FRAME_1, NAV_FRAME_2] = hydrateBreadcrumbs(
+  replayRecord,
+  [
+    ReplayNavFrameFixture({
+      data: {to: 'MainActivityScreen'},
+      timestamp: NAVIGATION_DATE_1,
+    }),
+    ReplayNavFrameFixture({
+      data: {to: 'ConfirmPayment'},
+      timestamp: NAVIGATION_DATE_2,
+    }),
+  ],
+  []
+);
+
+describe('getCurrentScreenName', () => {
+  it('should return the screen name based on the closest navigation crumb - 1', () => {
+    const frames = [PAGELOAD_FRAME, NAV_FRAME_1, NAV_FRAME_2];
+    const offsetMS = Number(NAVIGATION_DATE_1) - Number(START_DATE) + 3;
+    const screenName = getCurrentScreenName(frames, offsetMS);
+    expect(screenName).toBe('MainActivityScreen');
+
+    const offsetMS2 = Number(NAVIGATION_DATE_2) - Number(START_DATE) + 1;
+    const screenName2 = getCurrentScreenName(frames, offsetMS2);
+    expect(screenName2).toBe('ConfirmPayment');
+  });
+});
diff --git a/static/app/utils/replays/types.tsx b/static/app/utils/replays/types.tsx
index fa92aea491f0e1..865aef34aab942 100644
--- a/static/app/utils/replays/types.tsx
+++ b/static/app/utils/replays/types.tsx
@@ -57,8 +57,8 @@ type ExtraBreadcrumbTypes =
   | {
       category: 'navigation';
       data: {
-        from: string;
         to: string;
+        from?: string;
       };
       message: string;
       timestamp: number;