ref(replay): Update replay tests to use imported fixtures instead of `TestStubs.Replay*` (#58541)

fixtures/js-stubs/replay.ts

@@ -1,15 +0,0 @@
-import * as Error from 'sentry-fixture/replay/error';
-import * as Helpers from 'sentry-fixture/replay/helpers';
-import * as BreadcrumbFrameData from 'sentry-fixture/replay/replayBreadcrumbFrameData';
-import * as ReplayFrameEvents from 'sentry-fixture/replay/replayFrameEvents';
-import * as ReplaySpanFrameData from 'sentry-fixture/replay/replaySpanFrameData';
-import * as RRweb from 'sentry-fixture/replay/rrweb';
-
-export const Replay = {
-  ...BreadcrumbFrameData,
-  ...Error,
-  ...Helpers,
-  ...ReplayFrameEvents,
-  ...ReplaySpanFrameData,
-  ...RRweb,
-};

fixtures/js-stubs/replay/error.ts

@@ -1,10 +1,10 @@
-import type {RawReplayError as TRawReplayError} from 'sentry/utils/replays/types';
+import type {RawReplayError} from 'sentry/utils/replays/types';
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
 
-export function RawReplayError(
-  error: Overwrite<Partial<TRawReplayError>, {timestamp: Date}>
-): TRawReplayError {
+export function RawReplayErrorFixture(
+  error: Overwrite<Partial<RawReplayError>, {timestamp: Date}>
+): RawReplayError {
   return {
     'error.type': error['error.type'] ?? ([] as string[]),
     id: error.id ?? 'e123',

fixtures/js-stubs/replay/helpers.ts

@@ -1,14 +1,30 @@
-import * as BreadcrumbFrameData from 'sentry-fixture/replay/replayBreadcrumbFrameData';
-import * as ReplayFrameEvents from 'sentry-fixture/replay/replayFrameEvents';
-import * as ReplaySpanFrameData from 'sentry-fixture/replay/replaySpanFrameData';
+import {
+  ReplayClickFrameFixture,
+  ReplayConsoleFrameFixture,
+  ReplaySlowClickFrameFixture,
+} from 'sentry-fixture/replay/replayBreadcrumbFrameData';
+import {
+  ReplayBreadcrumbFrameEventFixture,
+  ReplaySpanFrameEventFixture,
+} from 'sentry-fixture/replay/replayFrameEvents';
+import {
+  ReplayMemoryFrameFixture,
+  ReplayNavigationFrameFixture,
+} from 'sentry-fixture/replay/replaySpanFrameData';
 
 import {SlowClickFrame} from 'sentry/utils/replays/types';
 
-export function ConsoleEvent({timestamp, message}: {timestamp: Date; message?: string}) {
-  return ReplayFrameEvents.BreadcrumbFrameEvent({
+export function ReplayConsoleEventFixture({
+  timestamp,
+  message,
+}: {
+  timestamp: Date;
+  message?: string;
+}) {
+  return ReplayBreadcrumbFrameEventFixture({
     timestamp,
     data: {
-      payload: BreadcrumbFrameData.ConsoleFrame({
+      payload: ReplayConsoleFrameFixture({
         timestamp,
         message: message ?? 'Hello World',
       }),
@@ -16,11 +32,11 @@ export function ConsoleEvent({timestamp, message}: {timestamp: Date; message?: s
   });
 }
 
-export function ClickEvent({timestamp}: {timestamp: Date}) {
-  return ReplayFrameEvents.BreadcrumbFrameEvent({
+export function ReplayClickEventFixture({timestamp}: {timestamp: Date}) {
+  return ReplayBreadcrumbFrameEventFixture({
     timestamp,
     data: {
-      payload: BreadcrumbFrameData.ClickFrame({
+      payload: ReplayClickFrameFixture({
         timestamp,
         message: 'nav[aria-label="Primary Navigation"] > div > a#sidebar-item-projects',
         data: {
@@ -31,11 +47,11 @@ export function ClickEvent({timestamp}: {timestamp: Date}) {
   });
 }
 
-export function DeadClickEvent({timestamp}: {timestamp: Date}) {
-  return ReplayFrameEvents.BreadcrumbFrameEvent({
+export function ReplayDeadClickEventFixture({timestamp}: {timestamp: Date}) {
+  return ReplayBreadcrumbFrameEventFixture({
     timestamp,
     data: {
-      payload: BreadcrumbFrameData.SlowClickFrame({
+      payload: ReplaySlowClickFrameFixture({
         timestamp,
         message: 'nav[aria-label="Primary Navigation"] > div > a#sidebar-item-projects',
         data: {
@@ -52,7 +68,7 @@ export function DeadClickEvent({timestamp}: {timestamp: Date}) {
   });
 }
 
-export function NavigateEvent({
+export function ReplayNavigateEventFixture({
   startTimestamp,
   endTimestamp,
 }: {
@@ -61,10 +77,10 @@ export function NavigateEvent({
 }) {
   const duration = endTimestamp.getTime() - startTimestamp.getTime(); // in MS
 
-  return ReplayFrameEvents.SpanFrameEvent({
+  return ReplaySpanFrameEventFixture({
     timestamp: startTimestamp,
     data: {
-      payload: ReplaySpanFrameData.NavigationFrame({
+      payload: ReplayNavigationFrameFixture({
         op: 'navigation.navigate',
         startTimestamp,
         endTimestamp,
@@ -87,17 +103,17 @@ export function NavigateEvent({
   });
 }
 
-export function MemoryEvent({
+export function ReplayMemoryEventFixture({
   startTimestamp,
   endTimestamp,
 }: {
   endTimestamp: Date;
   startTimestamp: Date;
 }) {
-  return ReplayFrameEvents.SpanFrameEvent({
+  return ReplaySpanFrameEventFixture({
     timestamp: startTimestamp,
     data: {
-      payload: ReplaySpanFrameData.MemoryFrame({
+      payload: ReplayMemoryFrameFixture({
         op: 'memory',
         startTimestamp,
         endTimestamp,

fixtures/js-stubs/replay/replayBreadcrumbFrameData.ts

@@ -1,19 +1,21 @@
 import {BreadcrumbType} from 'sentry/types/breadcrumbs';
-import {RawBreadcrumbFrame as TBreadcrumbFrame} from 'sentry/utils/replays/types';
+import {RawBreadcrumbFrame} from 'sentry/utils/replays/types';
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
 
-type TestableFrame<Cat extends TBreadcrumbFrame['category']> = Overwrite<
-  Partial<Extract<TBreadcrumbFrame, {category: Cat}>>,
+type TestableFrame<Cat extends RawBreadcrumbFrame['category']> = Overwrite<
+  Partial<Extract<RawBreadcrumbFrame, {category: Cat}>>,
   {timestamp: Date}
 >;
 
-type MockFrame<Cat extends TBreadcrumbFrame['category']> = Extract<
-  TBreadcrumbFrame,
+type MockFrame<Cat extends RawBreadcrumbFrame['category']> = Extract<
+  RawBreadcrumbFrame,
   {category: Cat}
 >;
 
-export function ConsoleFrame(fields: TestableFrame<'console'>): MockFrame<'console'> {
+export function ReplayConsoleFrameFixture(
+  fields: TestableFrame<'console'>
+): MockFrame<'console'> {
   return {
     category: 'console',
     data: fields.data ?? {
@@ -26,7 +28,9 @@ export function ConsoleFrame(fields: TestableFrame<'console'>): MockFrame<'conso
   };
 }
 
-export function ClickFrame(fields: TestableFrame<'ui.click'>): MockFrame<'ui.click'> {
+export function ReplayClickFrameFixture(
+  fields: TestableFrame<'ui.click'>
+): MockFrame<'ui.click'> {
   return {
     category: 'ui.click',
     data: fields.data ?? {},
@@ -36,7 +40,9 @@ export function ClickFrame(fields: TestableFrame<'ui.click'>): MockFrame<'ui.cli
   };
 }
 
-export function InputFrame(fields: TestableFrame<'ui.input'>): MockFrame<'ui.input'> {
+export function ReplayInputFrameFixture(
+  fields: TestableFrame<'ui.input'>
+): MockFrame<'ui.input'> {
   return {
     category: 'ui.input',
     message: fields.message ?? '',
@@ -45,7 +51,7 @@ export function InputFrame(fields: TestableFrame<'ui.input'>): MockFrame<'ui.inp
   };
 }
 
-export function KeyboardEventFrame(
+export function ReplayKeyboardEventFrameFixture(
   fields: TestableFrame<'ui.keyDown'>
 ): MockFrame<'ui.keyDown'> {
   return {
@@ -63,7 +69,9 @@ export function KeyboardEventFrame(
   };
 }
 
-export function BlurFrame(fields: TestableFrame<'ui.blur'>): MockFrame<'ui.blur'> {
+export function ReplayBlurFrameFixture(
+  fields: TestableFrame<'ui.blur'>
+): MockFrame<'ui.blur'> {
   return {
     category: 'ui.blur',
     message: fields.message,
@@ -72,7 +80,9 @@ export function BlurFrame(fields: TestableFrame<'ui.blur'>): MockFrame<'ui.blur'
   };
 }
 
-export function FocusFrame(fields: TestableFrame<'ui.focus'>): MockFrame<'ui.focus'> {
+export function ReplayFocusFrameFixture(
+  fields: TestableFrame<'ui.focus'>
+): MockFrame<'ui.focus'> {
   return {
     category: 'ui.focus',
     message: fields.message,
@@ -81,7 +91,7 @@ export function FocusFrame(fields: TestableFrame<'ui.focus'>): MockFrame<'ui.foc
   };
 }
 
-export function SlowClickFrame(
+export function ReplaySlowClickFrameFixture(
   fields: TestableFrame<'ui.slowClickDetected'>
 ): MockFrame<'ui.slowClickDetected'> {
   return {
@@ -98,7 +108,7 @@ export function SlowClickFrame(
   };
 }
 
-export function MutationFrame(
+export function ReplayMutationFrameFixture(
   fields: TestableFrame<'replay.mutations'>
 ): MockFrame<'replay.mutations'> {
   return {
@@ -113,7 +123,9 @@ export function MutationFrame(
   };
 }
 
-export function NavFrame(fields: TestableFrame<'navigation'>): MockFrame<'navigation'> {
+export function ReplayNavFrameFixture(
+  fields: TestableFrame<'navigation'>
+): MockFrame<'navigation'> {
   return {
     category: 'navigation',
     data: fields.data ?? {

fixtures/js-stubs/replay/replayFrameEvents.ts

@@ -1,14 +1,14 @@
 import type {
-  BreadcrumbFrameEvent as TBreadcrumbFrameEvent,
-  OptionFrameEvent as TOptionFrameEvent,
-  SpanFrameEvent as TSpanFrameEvent,
+  BreadcrumbFrameEvent,
+  OptionFrameEvent,
+  SpanFrameEvent,
 } from 'sentry/utils/replays/types';
 import {EventType} from 'sentry/utils/replays/types';
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
 
 type TestableFrameEvent<
-  FrameEvent extends TBreadcrumbFrameEvent | TSpanFrameEvent | TOptionFrameEvent
+  FrameEvent extends BreadcrumbFrameEvent | SpanFrameEvent | OptionFrameEvent,
 > = Overwrite<
   Omit<FrameEvent, 'type'>,
   {
@@ -29,9 +29,9 @@ type TestableFrameEvent<
  * });
  * ```
  */
-export function BreadcrumbFrameEvent(
-  fields: TestableFrameEvent<TBreadcrumbFrameEvent>
-): TBreadcrumbFrameEvent {
+export function ReplayBreadcrumbFrameEventFixture(
+  fields: TestableFrameEvent<BreadcrumbFrameEvent>
+): BreadcrumbFrameEvent {
   return {
     type: EventType.Custom,
     timestamp: fields.timestamp.getTime(), // frame timestamps are in ms
@@ -51,16 +51,16 @@ export function BreadcrumbFrameEvent(
  * SpanFrameEvent({
  *   timestamp,
  *   data: {
- *     payload: TestStubs.Replay.SpanFrame({
+ *     payload: ReplaySpanFrame({
  *      data: TestStubs.ReplaySpanFrameData.FOO({...})
  *     }),
  *   },
  * });
  * ```
  */
-export function SpanFrameEvent(
-  fields: TestableFrameEvent<TSpanFrameEvent>
-): TSpanFrameEvent {
+export function ReplaySpanFrameEventFixture(
+  fields: TestableFrameEvent<SpanFrameEvent>
+): SpanFrameEvent {
   return {
     type: EventType.Custom,
     timestamp: fields.timestamp.getTime(), // frame timestamps are in ms
@@ -71,9 +71,9 @@ export function SpanFrameEvent(
   };
 }
 
-export function OptionFrameEvent(
-  fields: TestableFrameEvent<TOptionFrameEvent>
-): TOptionFrameEvent {
+export function ReplayOptionFrameEventFixture(
+  fields: TestableFrameEvent<OptionFrameEvent>
+): OptionFrameEvent {
   return {
     type: EventType.Custom,
     timestamp: fields.timestamp.getTime(), // frame timestamps are in ms
@@ -84,9 +84,9 @@ export function OptionFrameEvent(
   };
 }
 
-export function OptionFrame(
-  fields: Partial<TOptionFrameEvent['data']['payload']>
-): TOptionFrameEvent['data']['payload'] {
+export function ReplayOptionFrameFixture(
+  fields: Partial<OptionFrameEvent['data']['payload']>
+): OptionFrameEvent['data']['payload'] {
   return {
     blockAllMedia: false,
     errorSampleRate: 0,

fixtures/js-stubs/replay/replaySpanFrameData.ts

@@ -1,15 +1,15 @@
-import {RawSpanFrame as TSpanFrame} from 'sentry/utils/replays/types';
+import {RawSpanFrame} from 'sentry/utils/replays/types';
 
 type Overwrite<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U;
 
-type TestableFrame<Op extends TSpanFrame['op']> = Overwrite<
-  Partial<Extract<TSpanFrame, {op: Op}>>,
+type TestableFrame<Op extends RawSpanFrame['op']> = Overwrite<
+  Partial<Extract<RawSpanFrame, {op: Op}>>,
   {endTimestamp: Date; startTimestamp: Date}
 >;
 
-type MockFrame<Op extends TSpanFrame['op']> = Extract<TSpanFrame, {op: Op}>;
+type MockFrame<Op extends RawSpanFrame['op']> = Extract<RawSpanFrame, {op: Op}>;
 
-function BaseFrame<T extends TSpanFrame['op']>(
+function BaseFrame<T extends RawSpanFrame['op']>(
   op: T,
   fields: TestableFrame<T>
 ): MockFrame<T> {
@@ -22,7 +22,7 @@ function BaseFrame<T extends TSpanFrame['op']>(
   } as MockFrame<T>;
 }
 
-export function LargestContentfulPaintFrame(
+export function ReplayLargestContentfulPaintFrameFixture(
   fields: TestableFrame<'largest-contentful-paint'>
 ): MockFrame<'largest-contentful-paint'> {
   return BaseFrame('largest-contentful-paint', {
@@ -35,7 +35,9 @@ export function LargestContentfulPaintFrame(
   });
 }
 
-export function MemoryFrame(fields: TestableFrame<'memory'>): MockFrame<'memory'> {
+export function ReplayMemoryFrameFixture(
+  fields: TestableFrame<'memory'>
+): MockFrame<'memory'> {
   return BaseFrame('memory', {
     ...fields,
     data: {
@@ -48,7 +50,7 @@ export function MemoryFrame(fields: TestableFrame<'memory'>): MockFrame<'memory'
   });
 }
 
-export function NavigationFrame(
+export function ReplayNavigationFrameFixture(
   fields: TestableFrame<
     'navigation.navigate' | 'navigation.reload' | 'navigation.back_forward'
   >
@@ -71,7 +73,7 @@ export function NavigationFrame(
   });
 }
 
-export function NavigationPushFrame(
+export function ReplayNavigationPushFrameFixture(
   fields: TestableFrame<'navigation.push'>
 ): MockFrame<'navigation.push'> {
   return BaseFrame('navigation.push', {
@@ -82,11 +84,13 @@ export function NavigationPushFrame(
   });
 }
 
-export function PaintFrame(fields: TestableFrame<'paint'>): MockFrame<'paint'> {
+export function ReplayPaintFrameFixture(
+  fields: TestableFrame<'paint'>
+): MockFrame<'paint'> {
   return BaseFrame('paint', fields);
 }
 
-export function RequestFrame(
+export function ReplayRequestFrameFixture(
   fields: TestableFrame<'resource.fetch' | 'resource.xhr'>
 ): MockFrame<'resource.fetch' | 'resource.xhr'> {
   return BaseFrame(fields.op ?? 'resource.xhr', {
@@ -102,7 +106,7 @@ export function RequestFrame(
   });
 }
 
-export function ResourceFrame(
+export function ReplayResourceFrameFixture(
   fields: TestableFrame<
     | 'resource.css'
     | 'resource.iframe'

fixtures/js-stubs/replayError.ts

@@ -1,8 +1,8 @@
-import type {ReplayError as TReplayError} from 'sentry/views/replays/types';
+import type {ReplayError} from 'sentry/views/replays/types';
 
-export function ReplayError(
-  error: Partial<TReplayError> & Pick<TReplayError, 'id' | 'issue' | 'timestamp'>
-): TReplayError {
+export function ReplayErrorFixture(
+  error: Partial<ReplayError> & Pick<ReplayError, 'id' | 'issue' | 'timestamp'>
+): ReplayError {
   return {
     'error.type': error['error.type'] ?? ([] as string[]),
     'error.value': error['error.value'] ?? ([] as string[]),

fixtures/js-stubs/replayRecord.ts

@@ -1,8 +1,10 @@
 import {duration} from 'moment';
 
-import type {ReplayRecord as TReplayRecord} from 'sentry/views/replays/types';
+import type {ReplayRecord} from 'sentry/views/replays/types';
 
-export function ReplayRecord(replayRecord: Partial<TReplayRecord> = {}): TReplayRecord {
+export function ReplayRecordFixture(
+  replayRecord: Partial<ReplayRecord> = {}
+): ReplayRecord {
   return {
     activity: 0,
     browser: {

fixtures/js-stubs/types.tsx

@@ -1,7 +1,4 @@
 import {EntryException} from 'sentry/types';
-import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
-
-import type {Replay} from './replay';
 
 type SimpleStub<T = any> = () => T;
 
@@ -47,9 +44,6 @@ type TestStubFixtures = {
   ProjectAlertRule: OverridableStub;
   ProjectKeys: OverridableStubList;
   Release: (params?: any, healthParams?: any) => any;
-  Replay: typeof Replay;
-  ReplayError: OverridableStub<ReplayError>;
-  ReplayRecord: OverridableStub<ReplayRecord>;
   Repository: OverridableStub;
   SentryApp: OverridableStub;
   SentryAppComponent: OverridableStub;

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

@@ -1,4 +1,6 @@
 import {Organization} from 'sentry-fixture/organization';
+import {RRWebInitFrameEvents} from 'sentry-fixture/replay/rrweb';
+import {ReplayRecordFixture} from 'sentry-fixture/replayRecord';
 
 import {render, screen} from 'sentry-test/reactTestingLibrary';
 
@@ -17,9 +19,9 @@ jest.mock('sentry/utils/useProjects');
 
 const now = new Date();
 const mockReplay = ReplayReader.factory({
-  replayRecord: TestStubs.ReplayRecord({started_at: now}),
+  replayRecord: ReplayRecordFixture({started_at: now}),
   errors: [],
-  attachments: TestStubs.Replay.RRWebInitFrameEvents({timestamp: now}),
+  attachments: RRWebInitFrameEvents({timestamp: now}),
 });
 
 jest.mocked(useReplayReader).mockImplementation(() => {
@@ -31,8 +33,8 @@ jest.mocked(useReplayReader).mockImplementation(() => {
     onRetry: jest.fn(),
     projectSlug: TestStubs.Project().slug,
     replay: mockReplay,
-    replayId: TestStubs.ReplayRecord({}).id,
-    replayRecord: TestStubs.ReplayRecord(),
+    replayId: ReplayRecordFixture({}).id,
+    replayRecord: ReplayRecordFixture(),
   };
 });