WIP: Playground redesign

.github/workflows/production_e2e.yml

@@ -56,7 +56,7 @@ jobs:
           retention-days: 30
   report-status:
     needs: e2e
-    if: ${{ needs.e2e.result == 'failure' }}
+    if: failure()
     uses: fingerprintjs/dx-team-toolkit/.github/workflows/report-workflow-status.yml@v1
     with:
       notification_title: 'Hey, <@U04GNKK5ZTQ>! Production e2e tests on demo.fingerprint.com have {status_message}'

e2e/playground.spec.ts

@@ -1,22 +1,34 @@
 import { Page, expect, test } from '@playwright/test';
-import { PLAYGROUND_TAG } from '../src/client/components/playground/playgroundTags';
-import { isAgentResponse, isServerResponse } from './zodUtils';
 import { blockGoogleTagManager } from './e2eTestUtils';
+import { TEST_IDS } from '../src/client/testIDs';
+
+const TEST_ID = TEST_IDS.playground;
 
 const getAgentResponse = async (page: Page) => {
   const agentResponse =
-    (await (await page.getByTestId(PLAYGROUND_TAG.agentResponseJSON)).textContent()) ?? 'Agent response not found';
-  return JSON.parse(agentResponse);
+    (await (await page.getByTestId(TEST_ID.agentResponseJSON)).textContent()) ?? 'Agent response not found';
+  return agentResponse;
 };
 
 const getServerResponse = async (page: Page) => {
   const serverResponse =
-    (await (await page.getByTestId(PLAYGROUND_TAG.serverResponseJSON)).textContent()) ?? 'Server response not found';
-  return JSON.parse(serverResponse);
+    (await (await page.getByTestId(TEST_ID.serverResponseJSON)).textContent()) ?? 'Server response not found';
+  return serverResponse;
 };
 
+function parseRequestId(inputString: string) {
+  const regex = /requestId:\s*"([^"]+)"/;
+  const match = inputString.match(regex);
+
+  if (match && match[1]) {
+    return match[1];
+  } else {
+    return null;
+  }
+}
+
 const clickPlaygroundRefreshButton = async (page: Page) => {
-  await page.getByTestId(PLAYGROUND_TAG.refreshButton).first().click();
+  await page.getByTestId(TEST_ID.refreshButton).first().click();
   // Artificial wait necessary to make sure you get the updated response every time
   await page.waitForTimeout(3000);
 };
@@ -29,8 +41,8 @@ test.beforeEach(async ({ page }) => {
 test.describe('Playground page', () => {
   test('Page renders basic skeleton elements', async ({ page }) => {
     await page.getByText('Fingerprint Pro Playground', { exact: true }).waitFor();
-    await page.getByText('Welcome, your visitor ID is').waitFor();
-    await page.getByTestId(PLAYGROUND_TAG.refreshButton).first().waitFor();
+    await page.getByText('Welcome, this is your visitor ID').waitFor();
+    await page.getByTestId(TEST_ID.refreshButton).first().waitFor();
 
     await page.getByText('Identification', { exact: true }).waitFor();
     await page.getByText('Smart signals', { exact: true }).waitFor();
@@ -41,7 +53,6 @@ test.describe('Playground page', () => {
   });
 
   test('Page renders signal tables', async ({ page }) => {
-    await page.getByText('Visitor ID', { exact: true }).waitFor();
     await page.getByText('Last seen', { exact: true }).waitFor();
     await page.getByText('Confidence Score', { exact: true }).waitFor();
 
@@ -54,28 +65,37 @@ test.describe('Playground page', () => {
 
   test('Page renders agent response', async ({ page }) => {
     const agentResponse = await getAgentResponse(page);
-    expect(isAgentResponse(agentResponse)).toBe(true);
+    expect(agentResponse).toContain('requestId');
+    expect(agentResponse).toContain('browserName');
+    expect(agentResponse).toContain('browserVersion');
+    expect(agentResponse).toContain('visitorId');
   });
 
   test('Page renders server response', async ({ page }) => {
     const serverResponse = await getServerResponse(page);
-    expect(isServerResponse(serverResponse)).toBe(true);
+
+    expect(serverResponse).toContain('requestId');
+    expect(serverResponse).toContain('visitorId');
+    expect(serverResponse).toContain('incognito');
+    expect(serverResponse).toContain('botd');
+    expect(serverResponse).toContain('vpn');
+    expect(serverResponse).toContain('privacySettings');
   });
 
   test('Reload button updates agent response', async ({ page }) => {
-    const { requestId: oldRequestId } = await getAgentResponse(page);
+    const oldRequestId = parseRequestId(await getAgentResponse(page));
     await clickPlaygroundRefreshButton(page);
-    const { requestId } = await getAgentResponse(page);
+    const requestId = parseRequestId(await getAgentResponse(page));
 
     expect(oldRequestId).toHaveLength(20);
     expect(requestId).toHaveLength(20);
     expect(requestId).not.toEqual(oldRequestId);
   });
 
   test('Reload button updates server response', async ({ page }) => {
-    const oldRequestId = (await getServerResponse(page)).products.botd.data.requestId;
+    const oldRequestId = parseRequestId(await getServerResponse(page));
     await clickPlaygroundRefreshButton(page);
-    const requestId = (await getServerResponse(page)).products.botd.data.requestId;
+    const requestId = parseRequestId(await getServerResponse(page));
 
     expect(oldRequestId).toHaveLength(20);
     expect(requestId).toHaveLength(20);

package.json

@@ -28,6 +28,8 @@
     "@fingerprintjs/fingerprintjs-pro-server-api": "^3.1.0",
     "@mui/icons-material": "^5.15.11",
     "@mui/material": "^5.15.11",
+    "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",
@@ -37,7 +39,7 @@
     "framer-motion": "^11.0.8",
     "is-ip": "^5.0.1",
     "leaflet": "^1.9.4",
-    "next": "^14.1.1",
+    "next": "^14.2.4",
     "next-usequerystate": "^1.17.0",
     "notistack": "^3.0.1",
     "prismjs": "^1.29.0",
@@ -47,6 +49,7 @@
     "react-query": "^3.39.3",
     "react-syntax-highlighter": "^15.5.0",
     "react-use": "^17.5.0",
+    "react18-json-view": "^0.2.9-canary.0",
     "sequelize": "^6.37.1",
     "sharp": "^0.33.2",
     "twilio": "^5.0.1"

src/app/appLayout.tsx

@@ -5,5 +5,5 @@ import { Layout } from '../Layout';
 
 export default function LayoutUiInsideApp({ children }: { children: React.ReactNode }) {
   const segments = useSelectedLayoutSegments();
-  return <Layout embed={segments.includes('embed')}>{children}</Layout>;
+  return <Layout embed={Boolean(segments?.includes('embed'))}>{children}</Layout>;
 }