test(replay): Cleanup TestStubs.ReplayReaderParams (#45548)

`TestStubs.ReplayReaderParams` was inflexible and replaced by
`TestStubs.ReplayRecord` in most cases.

Follow up to https://github.com/getsentry/sentry/pull/45444

fixtures/js-stubs/replayReaderParams.js

@@ -1,124 +0,0 @@
-import {duration} from 'moment';
-
-const defaultRRWebEvents = [
-  {
-    type: 0,
-    data: {},
-    timestamp: 1663865919000,
-    delay: -198487,
-  },
-  {
-    type: 1,
-    data: {},
-    timestamp: 1663865920587,
-    delay: -135199,
-  },
-  {
-    type: 4,
-    data: {
-      href: 'http://localhost:3000/',
-      width: 1536,
-      height: 722,
-    },
-    timestamp: 1663865920587,
-    delay: -135199,
-  },
-];
-
-const defaultBreadcrumbs = [
-  {
-    timestamp: 1663865920851,
-    type: 5,
-    data: {
-      payload: {
-        timestamp: 1663865920.851,
-        type: 'default',
-        level: 'info',
-        category: 'ui.focus',
-      },
-    },
-  },
-  {
-    timestamp: 1663865922024,
-    type: 5,
-    data: {
-      payload: {
-        timestamp: 1663865922.024,
-        type: 'default',
-        level: 'info',
-        category: 'ui.click',
-        message:
-          'input.form-control[type="text"][name="url"][title="Fully qualified URL prefixed with http or https"]',
-        data: {
-          nodeId: 37,
-        },
-      },
-    },
-  },
-];
-
-export function ReplayReaderParams({
-  attachments = [...defaultRRWebEvents, ...defaultBreadcrumbs],
-  replayRecord = {},
-  errors = [],
-} = {}) {
-  return {
-    replayRecord: {
-      activity: 0,
-      browser: {
-        name: 'Other',
-        version: '',
-      },
-      count_errors: 1,
-      count_segments: 14,
-      count_urls: 1,
-      device: {
-        name: '',
-        brand: '',
-        model_id: '',
-        family: 'Other',
-      },
-      dist: '',
-      duration: duration(84000),
-      environment: 'demo',
-      error_ids: ['5c83aaccfffb4a708ae893bad9be3a1c'],
-      finished_at: new Date('Sep 22, 2022 5:00:03 PM UTC'),
-      id: '761104e184c64d439ee1014b72b4d83b',
-      longest_transaction: 0,
-      os: {
-        name: 'Other',
-        version: '',
-      },
-      platform: 'javascript',
-      project_id: '6273278',
-      releases: ['1.0.0', '2.0.0'],
-      sdk: {
-        name: 'sentry.javascript.browser',
-        version: '7.1.1',
-      },
-      started_at: new Date('Sep 22, 2022 4:58:39 PM UTC'),
-      tags: {
-        'browser.name': ['Other'],
-        'device.family': ['Other'],
-        'os.name': ['Other'],
-        platform: ['javascript'],
-        releases: ['1.0.0', '2.0.0'],
-        'sdk.name': ['sentry.javascript.browser'],
-        'sdk.version': ['7.1.1'],
-        'user.ip': ['127.0.0.1'],
-      },
-      trace_ids: [],
-      urls: ['http://localhost:3000/'],
-      user: {
-        id: '',
-        name: '',
-        email: '',
-        ip: '127.0.0.1',
-        display_name: '127.0.0.1',
-      },
-      ...replayRecord,
-    },
-    attachments,
-    errors,
-  };
-}

fixtures/js-stubs/replayRecord.ts

@@ -37,16 +37,7 @@ export function ReplayRecord(replayRecord: Partial<TReplayRecord> = {}): TReplay
       version: '7.1.1',
     },
     started_at: new Date('Sep 22, 2022 4:58:39 PM UTC'),
-    tags: {
-      'browser.name': ['Other'],
-      'device.family': ['Other'],
-      'os.name': ['Other'],
-      platform: ['javascript'],
-      releases: ['1.0.0', '2.0.0'],
-      'sdk.name': ['sentry.javascript.browser'],
-      'sdk.version': ['7.1.1'],
-      'user.ip': ['127.0.0.1'],
-    },
+
     trace_ids: [],
     urls: ['http://localhost:3000/'],
     user: {
@@ -57,5 +48,16 @@ export function ReplayRecord(replayRecord: Partial<TReplayRecord> = {}): TReplay
       display_name: '127.0.0.1',
     },
     ...replayRecord,
+    tags: {
+      ...replayRecord.tags,
+      'browser.name': [replayRecord.browser?.name ?? 'Other'],
+      'device.family': [replayRecord.device?.family ?? 'Other'],
+      'os.name': [replayRecord.os?.name ?? 'Other'],
+      platform: [replayRecord.platform ?? 'javascript'],
+      releases: replayRecord.releases ?? ['1.0.0', '2.0.0'],
+      'sdk.name': [replayRecord.sdk?.name ?? 'sentry.javascript.browser'],
+      'sdk.version': [replayRecord.sdk?.version ?? '7.1.1'],
+      'user.ip': [replayRecord.user?.ip ?? '127.0.0.1'],
+    },
   };
 }

fixtures/js-stubs/types.tsx

@@ -102,7 +102,6 @@ type TestStubFixtures = {
   ReplayError: OverridableStub;
   ReplayRRWebDivHelloWorld: OverridableStub;
   ReplayRRWebNode: OverridableStub;
-  ReplayReaderParams: OverridableStub;
   ReplayRecord: OverridableStub<ReplayRecord>;
   ReplaySegmentBreadcrumb: OverridableStub;
   ReplaySegmentConsole: OverridableStub;

static/app/components/events/eventReplay/replayPreview.spec.tsx

@@ -30,8 +30,18 @@ jest.mock('screenfull', () => ({
 }));
 
 // Get replay data with the mocked replay reader params
-const replayReaderParams = TestStubs.ReplayReaderParams({});
-const mockReplay = ReplayReader.factory(replayReaderParams);
+const mockReplay = ReplayReader.factory({
+  replayRecord: TestStubs.ReplayRecord({
+    browser: {
+      name: 'Chrome',
+      version: '110.0.0',
+    },
+  }),
+  errors: [],
+  attachments: TestStubs.ReplaySegmentInit({
+    timestamp: new Date('Sep 22, 2022 4:58:39 PM UTC'),
+  }),
+});
 
 // Mock useReplayData hook to return the mocked replay data
 jest.mock('sentry/utils/replays/hooks/useReplayData', () => {

static/app/components/events/interfaces/breadcrumbs/breadcrumbs.spec.tsx

@@ -11,7 +11,11 @@ import {
 } from 'sentry/utils/replays/hooks/useReplayOnboarding';
 import ReplayReader from 'sentry/utils/replays/replayReader';
 
-const mockReplay = ReplayReader.factory(TestStubs.ReplayReaderParams());
+const mockReplay = ReplayReader.factory({
+  replayRecord: TestStubs.ReplayRecord({}),
+  errors: [],
+  attachments: TestStubs.ReplaySegmentInit({}),
+});
 
 jest.mock('sentry/utils/replays/hooks/useReplayOnboarding');
 

static/app/components/replays/walker/urlWalker.spec.tsx

@@ -28,7 +28,7 @@ describe('UrlWalker', () => {
   });
 
   describe('CrumbWalker', () => {
-    const {replayRecord} = TestStubs.ReplayReaderParams();
+    const replayRecord = TestStubs.ReplayRecord({});
 
     const PAGELOAD_CRUMB = TestStubs.Breadcrumb({
       id: 4,

static/app/views/replays/detail/tagPanel/index.spec.tsx

@@ -4,20 +4,21 @@ import {Provider as ReplayContextProvider} from 'sentry/components/replays/repla
 import ReplayReader from 'sentry/utils/replays/replayReader';
 import TagPanel from 'sentry/views/replays/detail/tagPanel';
 
-// Get replay data with the mocked replay reader params
-const replayReaderParams = TestStubs.ReplayReaderParams({
-  replayRecord: {
+const mockReplay = ReplayReader.factory({
+  replayRecord: TestStubs.ReplayRecord({
+    browser: {
+      name: 'Chrome',
+      version: '110.0.0',
+    },
     tags: {
-      'browser.name': ['Chrome'],
-      'sdk.version': ['7.13.0', '7.13.2'],
-      foo: ['bar'],
+      foo: ['bar', 'baz'],
       'my custom tag': ['a wordy value'],
     },
-  },
+  }),
+  errors: [],
+  attachments: [],
 });
 
-const mockReplay = ReplayReader.factory(replayReaderParams);
-
 const renderComponent = (replay: ReplayReader | null) => {
   return render(
     <ReplayContextProvider isFetching={false} replay={replay}>
@@ -51,9 +52,9 @@ describe('TagPanel', () => {
   it('should show the tags correctly inside ReplayTagsTableRow component with multiple items array', () => {
     renderComponent(mockReplay);
 
-    expect(screen.getByText('sdk.version')).toBeInTheDocument();
-    expect(screen.getByText('7.13.0')).toBeInTheDocument();
-    expect(screen.getByText('7.13.2')).toBeInTheDocument();
+    expect(screen.getByText('foo')).toBeInTheDocument();
+    expect(screen.getByText('bar')).toBeInTheDocument();
+    expect(screen.getByText('baz')).toBeInTheDocument();
   });
 
   it('should link known tags to their proper field names', () => {
@@ -63,6 +64,10 @@ describe('TagPanel', () => {
       'href',
       '/organizations/org-slug/replays/?query=tags%5B%22foo%22%5D%3A%22bar%22'
     );
+    expect(screen.getByText('baz').closest('a')).toHaveAttribute(
+      'href',
+      '/organizations/org-slug/replays/?query=tags%5B%22foo%22%5D%3A%22baz%22'
+    );
   });
 
   it('should link user-submitted tags with the tags[] syntax', () => {