Port URL Preview components to MVVM (#32525)

* Port over linkifyJS to shared-components. * Drop rubbish * update lock * quickfix test * drop group id * Modernize tests * Remove stories that aren't in use. * Complete working version * Add copyright * tidy up * update lock * Update snaps * update snap * undo change * remove unused * More test updates * fix typo * fix margin on preview * move margin block * snapupdate * prettier * Port url preview logic to a view model. * More fiddling with VM logic * Note to self * Refactor away into a shared component. * Even more lovely lovely code that makes it look prettier * translation cleanup * Even more stuff that I need to fix yay * Remove .last-run.json * Update snaps * Ensure we set showUrlPreview * Cleanup tests * lint + add png support * Add a label * Cleanup * Add snaps * Update snaps * update playwright * Refactors * update snap * Add missing snap * Remove editing code (we check this in a better way in componentDidUpdate) * Add README * fix the one unused import * Style shuffling * Update vis tests * Finally fix the tooltip * Remove unused prop * Add some padding * fix lint issue * Design improvements * new screens * Update snaps * Fix CSS specificity * Remove stale screenshot * Rename function to match reality * Port viewmodel tests to snapshots * finish documenting types * Stop being dangerous * Use Linkify+decode for description * Remove ability for VM to do linkifying. * Port over linkifyJS to shared-components. * Drop rubbish * update lock * quickfix test * drop group id * Modernize tests * Remove stories that aren't in use. * Complete working version * Add copyright * tidy up * update lock * Update snaps * update snap * undo change * remove unused * More test updates * fix typo * fix margin on preview * move margin block * snapupdate * prettier * cleanup a test mistake * Fixup sonar issues * Don't expose linkifyjs to applications, just provide helper functions. * Add story for documentation. * remove $ * Use a const * typo * cleanup var name * remove console line * Changes checkpoint * Convert to context * Revert unrelated change. * more cleanup * Add a test to cover ignoring incoming data elements * Make tests happy * Update tests for LinkedText * Underlines! * fix lock * remove unused linkify packages * import move * Remove mod to remove underline * undo * fix snap * another snapshot fix * More cleanup * Tidy up based on review. * fix story * Pass in args * update snap * cleanup * use source image * oops * remove client peg * Remove unused state * tidy up code * Ensure we update the preview when the event content may have changed. * s/global/globalThis/ * Ensure we don't stretch images * Update screenshots * Cleanup
2026-11-07 23:18:21 +00:00 · 2026-03-16 10:05:34 +00:00
parent b54e4e3b98
commit 3b4027846d
43 changed files with 2244 additions and 500 deletions
@@ -0,0 +1,203 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:description': 'A description',\\n  'og:title': ''\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "A description",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:site_name': 'Site name',\\n  'og:title': ''\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "Site name",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Basic title'\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "Basic title",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Cool blog',\\n  'og:site_name': 'Cool site'\\n} 1`] = `
+{
+  "description": undefined,
+  "image": undefined,
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": "Cool site",
+  "title": "Cool blog",
+}
+`;
+
+exports[`UrlPreviewViewModel handles different kinds of opengraph responses {\\n  'og:url': 'https://example.org',\\n  'og:type': 'document',\\n  'og:title': 'Media test',\\n  'og:image:height': '500',\\n  'og:image:width': 500,\\n  'matrix:image:size': 1024,\\n  'og:image': 'mxc://example.org/abc'\\n} 1`] = `
+{
+  "description": undefined,
+  "image": {
+    "fileSize": 1024,
+    "height": 100,
+    "imageFull": "https://example.org/image/src",
+    "imageThumb": "https://example.org/image/thumb",
+    "width": 100,
+  },
+  "link": "https://example.org",
+  "showTooltipOnLink": undefined,
+  "siteName": undefined,
+  "title": "Media test",
+}
+`;
+
+exports[`UrlPreviewViewModel should deduplicate multiple versions of the same URL 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": "This is a description",
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": "Example.org",
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should handle being hidden and shown by the user 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should handle being hidden and shown by the user 2`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": "This is a description",
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": "Example.org",
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should hide preview when invisible 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should ignore failed previews 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should ignore media when mediaVisible is false 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": undefined,
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": undefined,
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should preview a URL with media 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": undefined,
+      "image": {
+        "fileSize": 10000,
+        "height": 100,
+        "imageFull": "https://example.org/image/src",
+        "imageThumb": "https://example.org/image/thumb",
+        "width": 100,
+      },
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": undefined,
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should preview a single valid URL 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [
+    {
+      "description": "This is a description",
+      "image": undefined,
+      "link": "https://example.org",
+      "showTooltipOnLink": undefined,
+      "siteName": "Example.org",
+      "title": "This is an example!",
+    },
+  ],
+  "previewsLimited": true,
+  "totalPreviewCount": 1,
+}
+`;
+
+exports[`UrlPreviewViewModel should return no previews by default 1`] = `
+{
+  "compactLayout": false,
+  "overPreviewLimit": false,
+  "previews": [],
+  "previewsLimited": true,
+  "totalPreviewCount": 0,
+}
+`;