New Console: Maps support complex keys (#7598)

replayio · Aug 23, 2022 · 5de15c6 · 5de15c6 · vercel · Aug 23, 2022
1 parent 0599093
commit 5de15c6
Show file tree

Hide file tree

Showing 53 changed files with 47 additions and 34 deletions.
diff --git a/packages/bvaughn-architecture-demo/components/inspector/values/MapRenderer.tsx b/packages/bvaughn-architecture-demo/components/inspector/values/MapRenderer.tsx
@@ -5,6 +5,7 @@ import ValueRenderer from "../ValueRenderer";
 
 import styles from "./shared.module.css";
 import { ObjectPreviewRendererProps } from "./types";
+import KeyValueRenderer from "../KeyValueRenderer";
 
 const MAX_PROPERTIES_TO_PREVIEW = 5;
 
@@ -25,37 +26,26 @@ export default function MapRenderer({ object, pauseId }: ObjectPreviewRendererPr
   } else {
     let propertiesList: ReactNode[] | null = null;
     if (!isWithinPreview) {
-      propertiesList = slice.map(({ key, value }, index) => {
-        let keyToDisplay = "";
-        if (key != null && key.hasOwnProperty("value") != null) {
-          switch (key.value) {
-            case false:
-              keyToDisplay = "false";
-              break;
-            case null:
-              keyToDisplay = "null";
-              break;
-            case undefined:
-              keyToDisplay = "undefined";
-              break;
-            default:
-              keyToDisplay = key.value;
-              break;
-          }
-        }
-        return (
-          <span key={index} className={styles.Value}>
-            {keyToDisplay !== "" && (
-              <>
-                <span className={styles.MapKey}>{keyToDisplay}</span>
-                <span className={styles.Separator}> → </span>
-              </>
-            )}
-            <ValueRenderer isNested={true} pauseId={pauseId} protocolValue={value} />
-            {index < slice.length - 1 && <span className={styles.Separator}>, </span>}
-          </span>
-        );
-      });
+      propertiesList = slice.map(({ key, value }, index) => (
+        <span key={index} className={styles.Value}>
+          {key != null && (
+            <>
+              <span className={styles.MapKey}>
+                <KeyValueRenderer
+                  enableInspection={false}
+                  isNested={true}
+                  layout="horizontal"
+                  pauseId={pauseId}
+                  protocolValue={key}
+                />
+              </span>
+              <span className={styles.Separator}> → </span>
+            </>
+          )}
+          <ValueRenderer isNested={true} pauseId={pauseId} protocolValue={value} />
+          {index < slice.length - 1 && <span className={styles.Separator}>, </span>}
+        </span>
+      ));
 
       if (showOverflowMarker) {
         propertiesList.push(

diff --git a/packages/bvaughn-architecture-demo/pages/tests/object-inspector.tsx b/packages/bvaughn-architecture-demo/pages/tests/object-inspector.tsx
diff --git a/packages/bvaughn-architecture-demo/playwright/fixtures/object-inspector-values.html b/packages/bvaughn-architecture-demo/playwright/fixtures/object-inspector-values.html
@@ -182,6 +182,18 @@
         [false, "false"],
         [0, "zero"],
       ]);
+      const mapWithComplexKeys = new Map([
+        [{ foo: "bar" }, "object"],
+        [[1, 2, 3], "array"],
+        [new Set([1, 2, 3]), "Set"],
+        [
+          new Map([
+            ["one", 123],
+            ["two", true],
+          ]),
+          "map",
+        ],
+      ]);
       const weakMap = new WeakMap([
         [regex, "abc"],
         [map, 123],
@@ -267,6 +279,7 @@
         weakMap,
         overflowingMap,
         mapWithFalsyKeys,
+        mapWithComplexKeys,
         emptySet,
         simpleSet: set,
         weakSet,

diff --git a/packages/bvaughn-architecture-demo/playwright/playwright.config.ts b/packages/bvaughn-architecture-demo/playwright/playwright.config.ts
@@ -6,7 +6,7 @@ const config = {
   use: {
     browserName: "chromium",
     launchOptions: {
-      slowMo: process.env.VISUAL_DEBUG ? 500 : 5,
+      slowMo: process.env.VISUAL_DEBUG ? 500 : 50,
     },
     trace: "on-first-retry",
     video: process.env.RECORD_VIDEO ? "on" : "off",

diff --git a/...demo/playwright/snapshots/tests/nested.ts-snapshots/dark/message-list-linux.png b/...demo/playwright/snapshots/tests/nested.ts-snapshots/dark/message-list-linux.png
diff --git a/...ywright/snapshots/tests/nested.ts-snapshots/dark/nested-resursive-map-linux.png b/...ywright/snapshots/tests/nested.ts-snapshots/dark/nested-resursive-map-linux.png
diff --git a/...emo/playwright/snapshots/tests/nested.ts-snapshots/light/message-list-linux.png b/...emo/playwright/snapshots/tests/nested.ts-snapshots/light/message-list-linux.png
diff --git a/...wright/snapshots/tests/nested.ts-snapshots/light/nested-resursive-map-linux.png b/...wright/snapshots/tests/nested.ts-snapshots/light/nested-resursive-map-linux.png
diff --git a/...shots/tests/object-inspector.ts-snapshots/dark/render-and-inspect-map-linux.png b/...shots/tests/object-inspector.ts-snapshots/dark/render-and-inspect-map-linux.png
diff --git a/...-inspector.ts-snapshots/dark/render-and-inspect-map-with-complex-keys-linux.png b/...-inspector.ts-snapshots/dark/render-and-inspect-map-with-complex-keys-linux.png
diff --git a/...ct-inspector.ts-snapshots/dark/render-and-inspect-map-with-falsy-keys-linux.png b/...ct-inspector.ts-snapshots/dark/render-and-inspect-map-with-falsy-keys-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-arrays-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-arrays-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-bigInt-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-bigInt-linux.png
diff --git a/...right/snapshots/tests/object-inspector.ts-snapshots/dark/render-dates-linux.png b/...right/snapshots/tests/object-inspector.ts-snapshots/dark/render-dates-linux.png
diff --git a/.../snapshots/tests/object-inspector.ts-snapshots/dark/render-empty-maps-linux.png b/.../snapshots/tests/object-inspector.ts-snapshots/dark/render-empty-maps-linux.png
diff --git a/...apshots/tests/object-inspector.ts-snapshots/dark/render-empty-objects-linux.png b/...apshots/tests/object-inspector.ts-snapshots/dark/render-empty-objects-linux.png
diff --git a/.../snapshots/tests/object-inspector.ts-snapshots/dark/render-empty-sets-linux.png b/.../snapshots/tests/object-inspector.ts-snapshots/dark/render-empty-sets-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-errors-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-errors-linux.png
diff --git a/...right/snapshots/tests/object-inspector.ts-snapshots/dark/render-false-linux.png b/...right/snapshots/tests/object-inspector.ts-snapshots/dark/render-false-linux.png
diff --git a/...t/snapshots/tests/object-inspector.ts-snapshots/dark/render-functions-linux.png b/...t/snapshots/tests/object-inspector.ts-snapshots/dark/render-functions-linux.png
diff --git a/...sts/object-inspector.ts-snapshots/dark/render-html-elements-and-texts-linux.png b/...sts/object-inspector.ts-snapshots/dark/render-html-elements-and-texts-linux.png
diff --git a/...ht/snapshots/tests/object-inspector.ts-snapshots/dark/render-infinity-linux.png b/...ht/snapshots/tests/object-inspector.ts-snapshots/dark/render-infinity-linux.png
diff --git a/...ywright/snapshots/tests/object-inspector.ts-snapshots/dark/render-nan-linux.png b/...ywright/snapshots/tests/object-inspector.ts-snapshots/dark/render-nan-linux.png
diff --git a/...wright/snapshots/tests/object-inspector.ts-snapshots/dark/render-null-linux.png b/...wright/snapshots/tests/object-inspector.ts-snapshots/dark/render-null-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-number-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-number-linux.png
diff --git a/...s/tests/object-inspector.ts-snapshots/dark/render-regular-expressions-linux.png b/...s/tests/object-inspector.ts-snapshots/dark/render-regular-expressions-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-string-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-string-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-symbol-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/dark/render-symbol-linux.png
diff --git a/...wright/snapshots/tests/object-inspector.ts-snapshots/dark/render-true-linux.png b/...wright/snapshots/tests/object-inspector.ts-snapshots/dark/render-true-linux.png
diff --git a/...t/snapshots/tests/object-inspector.ts-snapshots/dark/render-undefined-linux.png b/...t/snapshots/tests/object-inspector.ts-snapshots/dark/render-undefined-linux.png
diff --git a/...hots/tests/object-inspector.ts-snapshots/light/render-and-inspect-map-linux.png b/...hots/tests/object-inspector.ts-snapshots/light/render-and-inspect-map-linux.png
diff --git a/...inspector.ts-snapshots/light/render-and-inspect-map-with-complex-keys-linux.png b/...inspector.ts-snapshots/light/render-and-inspect-map-with-complex-keys-linux.png
diff --git a/...t-inspector.ts-snapshots/light/render-and-inspect-map-with-falsy-keys-linux.png b/...t-inspector.ts-snapshots/light/render-and-inspect-map-with-falsy-keys-linux.png
diff --git a/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-arrays-linux.png b/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-arrays-linux.png
diff --git a/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-bigInt-linux.png b/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-bigInt-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/light/render-dates-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/light/render-dates-linux.png
diff --git a/...snapshots/tests/object-inspector.ts-snapshots/light/render-empty-maps-linux.png b/...snapshots/tests/object-inspector.ts-snapshots/light/render-empty-maps-linux.png
diff --git a/...pshots/tests/object-inspector.ts-snapshots/light/render-empty-objects-linux.png b/...pshots/tests/object-inspector.ts-snapshots/light/render-empty-objects-linux.png
diff --git a/...snapshots/tests/object-inspector.ts-snapshots/light/render-empty-sets-linux.png b/...snapshots/tests/object-inspector.ts-snapshots/light/render-empty-sets-linux.png
diff --git a/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-errors-linux.png b/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-errors-linux.png
diff --git a/...ight/snapshots/tests/object-inspector.ts-snapshots/light/render-false-linux.png b/...ight/snapshots/tests/object-inspector.ts-snapshots/light/render-false-linux.png
diff --git a/.../snapshots/tests/object-inspector.ts-snapshots/light/render-functions-linux.png b/.../snapshots/tests/object-inspector.ts-snapshots/light/render-functions-linux.png
diff --git a/...ts/object-inspector.ts-snapshots/light/render-html-elements-and-texts-linux.png b/...ts/object-inspector.ts-snapshots/light/render-html-elements-and-texts-linux.png
diff --git a/...t/snapshots/tests/object-inspector.ts-snapshots/light/render-infinity-linux.png b/...t/snapshots/tests/object-inspector.ts-snapshots/light/render-infinity-linux.png
diff --git a/...wright/snapshots/tests/object-inspector.ts-snapshots/light/render-nan-linux.png b/...wright/snapshots/tests/object-inspector.ts-snapshots/light/render-nan-linux.png
diff --git a/...right/snapshots/tests/object-inspector.ts-snapshots/light/render-null-linux.png b/...right/snapshots/tests/object-inspector.ts-snapshots/light/render-null-linux.png
diff --git a/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-number-linux.png b/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-number-linux.png
diff --git a/.../tests/object-inspector.ts-snapshots/light/render-regular-expressions-linux.png b/.../tests/object-inspector.ts-snapshots/light/render-regular-expressions-linux.png
diff --git a/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-string-linux.png b/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-string-linux.png
diff --git a/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-symbol-linux.png b/...ght/snapshots/tests/object-inspector.ts-snapshots/light/render-symbol-linux.png
diff --git a/...right/snapshots/tests/object-inspector.ts-snapshots/light/render-true-linux.png b/...right/snapshots/tests/object-inspector.ts-snapshots/light/render-true-linux.png
diff --git a/.../snapshots/tests/object-inspector.ts-snapshots/light/render-undefined-linux.png b/.../snapshots/tests/object-inspector.ts-snapshots/light/render-undefined-linux.png
diff --git a/packages/bvaughn-architecture-demo/playwright/tests/object-inspector.ts b/packages/bvaughn-architecture-demo/playwright/tests/object-inspector.ts
@@ -54,6 +54,11 @@ testSetup(async function regeneratorFunction({ page }) {
     "mapWithFalsyKeys",
     "render-and-inspect-map-with-falsy-keys"
   );
+  await inspectAndTakeScreenshotOf(
+    page,
+    "mapWithComplexKeys",
+    "render-and-inspect-map-with-complex-keys"
+  );
 });
 
 test("should render simple values", async ({ page }) => {
@@ -135,6 +140,11 @@ test("should render and inspect maps", async ({ page }) => {
     "mapWithFalsyKeys",
     "render-and-inspect-map-with-falsy-keys"
   );
+  await inspectAndTakeScreenshotOf(
+    page,
+    "mapWithComplexKeys",
+    "render-and-inspect-map-with-complex-keys"
+  );
 });
 
 test("should render and inspect regular expressions", async ({ page }) => {