From eac462dc821e709a5f88c8585d1d6634b6f460e0 Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Wed, 13 Sep 2023 22:15:11 +0100
Subject: [PATCH] chore: less flappy recordings stories hopefully

---
 ...ionsRecordings-player-success.stories.tsx} | 12 ++---
 ...onsRecordings-playlist-listing.stories.tsx | 48 +++++++++++++++++++
 .../__mocks__/recording_events.json           |  4 +-
 3 files changed, 53 insertions(+), 11 deletions(-)
 rename frontend/src/scenes/session-recordings/{SessionsRecordings.stories.tsx => SessionsRecordings-player-success.stories.tsx} (95%)
 create mode 100644 frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx

diff --git a/frontend/src/scenes/session-recordings/SessionsRecordings.stories.tsx b/frontend/src/scenes/session-recordings/SessionsRecordings-player-success.stories.tsx
similarity index 95%
rename from frontend/src/scenes/session-recordings/SessionsRecordings.stories.tsx
rename to frontend/src/scenes/session-recordings/SessionsRecordings-player-success.stories.tsx
index 1ac9395728811..32608ee051ea5 100644
--- a/frontend/src/scenes/session-recordings/SessionsRecordings.stories.tsx
+++ b/frontend/src/scenes/session-recordings/SessionsRecordings-player-success.stories.tsx
@@ -9,7 +9,6 @@ import recordingSnapshotsJson from 'scenes/session-recordings/__mocks__/recordin
 import recordingMetaJson from 'scenes/session-recordings/__mocks__/recording_meta.json'
 import recordingEventsJson from 'scenes/session-recordings/__mocks__/recording_events_query'
 import recording_playlists from './__mocks__/recording_playlists.json'
-import { ReplayTabs } from '~/types'
 
 const meta: Meta = {
     title: 'Scenes-App/Recordings',
@@ -17,6 +16,7 @@ const meta: Meta = {
         layout: 'fullscreen',
         viewMode: 'story',
         mockDate: '2023-02-01',
+        waitForSelector: '.PlayerFrameOverlay__content[aria-busy="false"]',
     },
     decorators: [
         mswDecorator({
@@ -97,16 +97,10 @@ const meta: Meta = {
     ],
 }
 export default meta
-export function RecordingsList(): JSX.Element {
-    useEffect(() => {
-        router.actions.push(urls.replay())
-    }, [])
-    return <App />
-}
 
-export function RecordingsPlayLists(): JSX.Element {
+export function RecentRecordings(): JSX.Element {
     useEffect(() => {
-        router.actions.push(urls.replay(ReplayTabs.Playlists))
+        router.actions.push(urls.replay())
     }, [])
     return <App />
 }
diff --git a/frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx b/frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx
new file mode 100644
index 0000000000000..657fbccf4bc29
--- /dev/null
+++ b/frontend/src/scenes/session-recordings/SessionsRecordings-playlist-listing.stories.tsx
@@ -0,0 +1,48 @@
+import { Meta } from '@storybook/react'
+import { useEffect } from 'react'
+import { mswDecorator } from '~/mocks/browser'
+import { router } from 'kea-router'
+import { urls } from 'scenes/urls'
+import { App } from 'scenes/App'
+import recording_playlists from './__mocks__/recording_playlists.json'
+import { ReplayTabs } from '~/types'
+import recordings from 'scenes/session-recordings/__mocks__/recordings.json'
+import recordingEventsJson from 'scenes/session-recordings/__mocks__/recording_events_query'
+
+const meta: Meta = {
+    title: 'Scenes-App/Recordings',
+    parameters: {
+        layout: 'fullscreen',
+        viewMode: 'story',
+        mockDate: '2023-02-01',
+    },
+    decorators: [
+        mswDecorator({
+            get: {
+                '/api/projects/:team_id/session_recording_playlists': recording_playlists,
+                '/api/projects/:team_id/session_recordings': (req) => {
+                    const version = req.url.searchParams.get('version')
+                    return [
+                        200,
+                        {
+                            has_next: false,
+                            results: recordings,
+                            version,
+                        },
+                    ]
+                },
+            },
+            post: {
+                '/api/projects/:team/query': recordingEventsJson,
+            },
+        }),
+    ],
+}
+export default meta
+
+export function RecordingsPlayLists(): JSX.Element {
+    useEffect(() => {
+        router.actions.push(urls.replay(ReplayTabs.Playlists))
+    }, [])
+    return <App />
+}
diff --git a/frontend/src/scenes/session-recordings/__mocks__/recording_events.json b/frontend/src/scenes/session-recordings/__mocks__/recording_events.json
index f2db148045646..0afa00a98d244 100644
--- a/frontend/src/scenes/session-recordings/__mocks__/recording_events.json
+++ b/frontend/src/scenes/session-recordings/__mocks__/recording_events.json
@@ -1,6 +1,6 @@
 [
     {
-        "id": "$pageview",
+        "id": "$pageview1",
         "event": "$pageview",
         "name": "$event_before_recording_starts",
         "type": "events",
@@ -14,7 +14,7 @@
         "elements_hash": ""
     },
     {
-        "id": "$pageview",
+        "id": "$pageview2",
         "name": "$pageview",
         "event": "$pageview",
         "type": "events",