From 17f88fe3d0368e136df6642de6022a78245913c2 Mon Sep 17 00:00:00 2001 From: Andrew Goldis Date: Sat, 5 Oct 2024 01:01:23 -0700 Subject: [PATCH] chore: example of an embedded player --- apps/web/cypress.config.js | 2 +- apps/web/index.html | 4 +++ apps/web/package.json | 2 +- apps/web/src/components/PayloadHandler.tsx | 33 ++++++++++++++++------ package-lock.json | 10 +++---- 5 files changed, 36 insertions(+), 15 deletions(-) diff --git a/apps/web/cypress.config.js b/apps/web/cypress.config.js index 2d0b450..9b00fbb 100644 --- a/apps/web/cypress.config.js +++ b/apps/web/cypress.config.js @@ -3,7 +3,7 @@ const { debuggerPlugin } = require('cypress-debugger'); module.exports = defineConfig({ e2e: { - baseUrl: 'https://todomvc.com/examples/backbone', + baseUrl: 'https://todomvc.com/examples/backbone/dist/', specPattern: 'cypress/e2e/*.spec.js', supportFile: 'cypress/support/e2e.ts', setupNodeEvents(on, config) { diff --git a/apps/web/index.html b/apps/web/index.html index 79fd9fa..762e3b7 100644 --- a/apps/web/index.html +++ b/apps/web/index.html @@ -5,6 +5,10 @@ Cypress Debugger +
diff --git a/apps/web/package.json b/apps/web/package.json index 7461e2c..4284c2b 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -17,7 +17,7 @@ "@radix-ui/react-tooltip": "^1.0.5", "class-variance-authority": "^0.5.2", "clsx": "^1.2.1", - "cypress": "^12.8.1", + "cypress": "^12.17.4", "cypress-debugger": "*", "lodash": "^4.17.21", "lucide-react": "^0.162.0", diff --git a/apps/web/src/components/PayloadHandler.tsx b/apps/web/src/components/PayloadHandler.tsx index 578cdc9..0a5363b 100644 --- a/apps/web/src/components/PayloadHandler.tsx +++ b/apps/web/src/components/PayloadHandler.tsx @@ -1,6 +1,6 @@ import { TestExecutionResult } from 'cypress-debugger'; import { Loader2 } from 'lucide-react'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useCypressEventsContext } from '../context/cypressEvents'; import { useHttpArchiveContext } from '../context/httpArchiveEntries'; import { useReplayerContext } from '../context/replayer'; @@ -26,13 +26,16 @@ function PayloadHandler() { ) ); - const handleDataChange = (payload: TestExecutionResult | null) => { - setEvents(payload?.cy || []); - setReplayerData(payload?.rr || []); - setHttpArchiveLog(payload?.har || null); - setMeta(payload?.meta ?? null); - setBrowserLogs(payload?.browserLogs || null); - }; + const handleDataChange = useCallback( + (payload: TestExecutionResult | null) => { + setEvents(payload?.cy || []); + setReplayerData(payload?.rr || []); + setHttpArchiveLog(payload?.har || null); + setMeta(payload?.meta ?? null); + setBrowserLogs(payload?.browserLogs || null); + }, + [setEvents, setReplayerData, setHttpArchiveLog, setMeta, setBrowserLogs] + ); const handleFileChange = ({ filename, @@ -71,6 +74,20 @@ function PayloadHandler() { } }, [queryParam]); // eslint-disable-line + useEffect(() => { + if (typeof window === 'undefined') return; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if ((window as any).trace) { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + // handleDataChange((window as any).trace); + // parse base64 + const str = (window as any).trace; + const payload = JSON.parse(str); + handleDataChange(payload); + setOrigin('trace'); + } + }, []); + if (loading) { return (
diff --git a/package-lock.json b/package-lock.json index 0583828..7a5ee81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,7 +41,7 @@ "@radix-ui/react-tooltip": "^1.0.5", "class-variance-authority": "^0.5.2", "clsx": "^1.2.1", - "cypress": "^12.8.1", + "cypress": "^12.17.4", "cypress-debugger": "*", "lodash": "^4.17.21", "lucide-react": "^0.162.0", @@ -11991,7 +11991,7 @@ } }, "packages/cypress-debugger": { - "version": "1.0.7", + "version": "1.0.9", "license": "GPL-3.0-or-later", "dependencies": { "@currents/cypress-debugger-plugin": "*", @@ -12043,7 +12043,7 @@ }, "packages/plugin": { "name": "@currents/cypress-debugger-plugin", - "version": "1.0.7", + "version": "1.0.9", "license": "GPL-3.0-or-later", "dependencies": { "@currents/cypress-debugger-support": "*", @@ -12061,7 +12061,7 @@ }, "packages/support": { "name": "@currents/cypress-debugger-support", - "version": "1.0.7", + "version": "1.0.9", "license": "GPL-3.0-or-later", "dependencies": { "@lukeed/uuid": "^2.0.0", @@ -19422,7 +19422,7 @@ "@vitejs/plugin-react": "^3.1.0", "class-variance-authority": "^0.5.2", "clsx": "^1.2.1", - "cypress": "^12.8.1", + "cypress": "^12.17.4", "cypress-debugger": "*", "eslint": "^8.36.0", "eslint-config-custom": "*",