#8596 improve definition diffing (#8778)

* Improve mod definition snapshot diffing

Switching to using textual diffing for easier and more concise
visual comparisons

* fiezes

end-to-end-tests/fixtures/modDefinitions.ts

@@ -18,8 +18,8 @@
 import { expect } from "@playwright/test";
 import { test as pageContextFixture } from "./pageContext";
 import { WorkshopPage } from "../pageObjects/extensionConsole/workshop/workshopPage";
-import diff from "deep-diff";
-import { loadBrickYaml } from "@/runtime/brickYaml";
+import { createPatch } from "diff";
+import { dumpBrickYaml, loadBrickYaml } from "@/runtime/brickYaml";
 
 // The mod definitions are a map of mod names to their test metadata
 type ModDefinitions = Record<
@@ -141,14 +141,27 @@ export const test = pageContextFixture.extend<{
           currentModDefinitionYaml,
         );
         const parsedLastModDefinitionYaml = loadBrickYaml(lastModDefinition);
-        const yamlDiff =
-          diff(parsedLastModDefinitionYaml, parsedCurrentModDefinitionYaml) ||
-          [];
-
-        expect(JSON.stringify(yamlDiff, undefined, 2) + "\n").toMatchSnapshot(
-          snapshotName + ".json",
+        const yamlDiff = createPatch(
+          snapshotName,
+          normalizeUUIDs(
+            dumpBrickYaml(parsedLastModDefinitionYaml, {
+              indent: 2,
+              sortKeys: true,
+            }),
+          ),
+          normalizeUUIDs(
+            dumpBrickYaml(parsedCurrentModDefinitionYaml, {
+              indent: 2,
+              sortKeys: true,
+            }),
+          ),
+          undefined,
+          undefined,
+          { context: 40 },
         );
 
+        expect(yamlDiff).toMatchSnapshot(snapshotName + ".diff");
+
         // Update the mod definition to the last known state
         modDefinitionsMap[modDefinitionName] = {
           id: modId,

end-to-end-tests/tests/workshop/createMod.spec.ts-snapshots/can-create-a-new-mod-from-a-yaml-definition-and-update-it/description-change.diff

@@ -0,0 +1,58 @@
+Index: description-change
+===================================================================
+--- description-change
++++ description-change
+@@ -23,52 +23,52 @@
+       body:
+         - config:
+             body:
+               - children:
+                   - children:
+                       - children:
+                           - config:
+                               heading: h1
+                               title: !nunjucks Simple Sidebar Panel
+                             type: header
+                         config: {}
+                         type: column
+                     config: {}
+                     type: row
+                   - children:
+                       - children:
+                           - config:
+                               enableMarkdown: true
+                               text: !nunjucks >-
+                                 Simple sidebar panel for testing sidepanel
+                                 open/close behavior
+                             type: text
+                         config: {}
+                         type: column
+                     config: {}
+                     type: row
+                 config: {}
+                 type: container
+           id: '@pixiebrix/document'
+           root: null
+           rootMode: document
+       heading: Simple Sidebar Panel
+     id: extensionPoint
+     label: Simple Sidebar Panel
+     permissions:
+       origins: []
+       permissions: []
+     services: {}
+ kind: recipe
+ metadata:
+-  description: Created with the PixieBrix Page Editor
++  description: Created in end to end tests
+   id: >-
+     @extension-e2e-test-unaffiliated/simple-sidebar-panel-00000000-0000-0000-0000-000000000000
+   name: Simple Sidebar Panel
+   version: 1.0.0
+ options:
+   schema:
+     properties: {}
+     type: object
+   uiSchema:
+     ui:order:
+       - '*'

end-to-end-tests/tests/workshop/createMod.spec.ts-snapshots/can-create-a-new-mod-from-a-yaml-definition-and-update-it/heading-change.diff

@@ -0,0 +1,67 @@
+Index: heading-change
+===================================================================
+--- heading-change
++++ heading-change
+@@ -14,61 +14,61 @@
+         urlPatterns: []
+       reader:
+         - '@pixiebrix/document-metadata'
+         - '@pixiebrix/document-context'
+       trigger: load
+       type: actionPanel
+     kind: extensionPoint
+ extensionPoints:
+   - config:
+       body:
+         - config:
+             body:
+               - children:
+                   - children:
+                       - children:
+                           - config:
+                               heading: h1
+                               title: !nunjucks Simple Sidebar Panel
+                             type: header
+                         config: {}
+                         type: column
+                     config: {}
+                     type: row
+                   - children:
+                       - children:
+                           - config:
+                               enableMarkdown: true
+                               text: !nunjucks >-
+                                 Simple sidebar panel for testing sidepanel
+                                 open/close behavior
+                             type: text
+                         config: {}
+                         type: column
+                     config: {}
+                     type: row
+                 config: {}
+                 type: container
+           id: '@pixiebrix/document'
+           root: null
+           rootMode: document
+-      heading: Simple Sidebar Panel
++      heading: Simple Sidebar Panel -- Updated
+     id: extensionPoint
+     label: Simple Sidebar Panel
+     permissions:
+       origins: []
+       permissions: []
+     services: {}
+ kind: recipe
+ metadata:
+   description: Created in end to end tests
+   id: >-
+     @extension-e2e-test-unaffiliated/simple-sidebar-panel-00000000-0000-0000-0000-000000000000
+   name: Simple Sidebar Panel
+   version: 1.0.0
+ options:
+   schema:
+     properties: {}
+     type: object
+   uiSchema:
+     ui:order:
+       - '*'

end-to-end-tests/tests/workshop/createMod.spec.ts-snapshots/can-create-a-new-mod-from-a-yaml-definition-and-update-it/no-changes.diff

@@ -0,0 +1,4 @@
+Index: no-changes
+===================================================================
+--- no-changes
++++ no-changes

package.json

@@ -202,7 +202,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/chrome": "^0.0.268",
-    "@types/deep-diff": "^1.0.5",
+    "@types/diff": "^5.2.1",
     "@types/dom-navigation": "^1.0.3",
     "@types/dompurify": "^3.0.5",
     "@types/downloadjs": "^1.4.6",
@@ -258,7 +258,7 @@
     "csp-parse": "0.0.2",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^7.0.0",
-    "deep-diff": "^1.0.2",
+    "diff": "^5.2.0",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
     "eslint-config-pixiebrix": "^0.39.0",