From e1812c64bcca412f501b8a87ad4fd19f4e98609f Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Fri, 27 Feb 2026 13:51:08 +0000 Subject: [PATCH] Port viewmodel tests to snapshots --- .../message-body/UrlPreviewViewModel-test.ts | 176 +++------------ .../UrlPreviewViewModel-test.ts.snap | 209 ++++++++++++++++++ 2 files changed, 234 insertions(+), 151 deletions(-) create mode 100644 apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewViewModel-test.ts.snap diff --git a/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts b/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts index be81ef5442..7b86057df2 100644 --- a/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts +++ b/apps/web/test/viewmodels/message-body/UrlPreviewViewModel-test.ts @@ -50,13 +50,7 @@ function getViewModel({ mediaVisible, visible } = { mediaVisible: true, visible: describe("UrlPreviewViewModel", () => { it("should return no previews by default", () => { - expect(getViewModel().vm.getSnapshot()).toEqual({ - compactLayout: false, - overPreviewLimit: false, - previews: [], - previewsLimited: true, - totalPreviewCount: 0, - }); + expect(getViewModel().vm.getSnapshot()).toMatchSnapshot(); }); it("should preview a single valid URL", async () => { const { vm, client } = getViewModel(); @@ -64,22 +58,7 @@ describe("UrlPreviewViewModel", () => { const msg = document.createElement("div"); msg.innerHTML = 'Test'; await vm.updateEventElement(msg); - expect(vm.getSnapshot()).toEqual({ - previews: [ - { - link: "https://example.org", - title: "This is an example!", - siteName: "Example.org", - showTooltipOnLink: undefined, - description: "This is a description", - image: undefined, - }, - ], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); }); it("should preview nested URLs but ignore some element types", async () => { const { vm, client } = getViewModel(); @@ -119,13 +98,7 @@ describe("UrlPreviewViewModel", () => { const msg = document.createElement("div"); msg.innerHTML = 'Test'; await vm.updateEventElement(msg); - expect(vm.getSnapshot()).toEqual({ - previews: [], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); expect(client.getUrlPreview).not.toHaveBeenCalled(); }); it("should preview a URL with media", async () => { @@ -150,28 +123,7 @@ describe("UrlPreviewViewModel", () => { const msg = document.createElement("div"); msg.innerHTML = 'Test'; await vm.updateEventElement(msg); - expect(vm.getSnapshot()).toEqual({ - previews: [ - { - link: "https://example.org", - title: "This is an example!", - siteName: undefined, - showTooltipOnLink: undefined, - description: undefined, - image: { - height: 100, - width: 100, - fileSize: 10000, - imageThumb: "https://example.org/image/thumb", - imageFull: "https://example.org/image/src", - }, - }, - ], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); }); it("should ignore media when mediaVisible is false", async () => { const { vm, client } = getViewModel({ mediaVisible: false, visible: true }); @@ -187,22 +139,7 @@ describe("UrlPreviewViewModel", () => { const msg = document.createElement("div"); msg.innerHTML = 'Test'; await vm.updateEventElement(msg); - expect(vm.getSnapshot()).toEqual({ - previews: [ - { - link: "https://example.org", - title: "This is an example!", - siteName: undefined, - showTooltipOnLink: undefined, - description: undefined, - image: undefined, - }, - ], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); // eslint-disable-next-line no-restricted-properties expect(client.mxcUrlToHttp).not.toHaveBeenCalled(); }); @@ -213,22 +150,7 @@ describe("UrlPreviewViewModel", () => { msg.innerHTML = 'TestTestTest'; await vm.updateEventElement(msg); - expect(vm.getSnapshot()).toEqual({ - previews: [ - { - link: "https://example.org", - title: "This is an example!", - siteName: "Example.org", - showTooltipOnLink: undefined, - description: "This is a description", - image: undefined, - }, - ], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); expect(client.getUrlPreview).toHaveBeenCalledTimes(1); }); it("should ignore failed previews", async () => { @@ -237,13 +159,7 @@ describe("UrlPreviewViewModel", () => { const msg = document.createElement("div"); msg.innerHTML = 'Test'; await vm.updateEventElement(msg); - expect(vm.getSnapshot()).toEqual({ - previews: [], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); }); it("should handle image clicks", async () => { const { vm, client, onImageClicked } = getViewModel(); @@ -278,31 +194,10 @@ describe("UrlPreviewViewModel", () => { msg.innerHTML = 'Test'; await vm.updateEventElement(msg); await vm.onHideClick(); - expect(vm.getSnapshot()).toEqual({ - previews: [], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); await vm.onShowClick(); - expect(vm.getSnapshot()).toEqual({ - previews: [ - { - link: "https://example.org", - title: "This is an example!", - siteName: "Example.org", - showTooltipOnLink: undefined, - description: "This is a description", - image: undefined, - }, - ], - compactLayout: false, - overPreviewLimit: false, - previewsLimited: true, - totalPreviewCount: 1, - }); + expect(vm.getSnapshot()).toMatchSnapshot(); }); it.each([ @@ -326,42 +221,21 @@ describe("UrlPreviewViewModel", () => { "og:type": "document", }; - it.each<[IPreviewUrlResponse, Omit]>([ - [{ ...baseOg, "og:title": "Basic title" }, { title: "Basic title" }], - [ - { ...baseOg, "og:site_name": "Site name", "og:title": "" }, - { title: "Site name", siteName: undefined }, - ], - [ - { ...baseOg, "og:description": "A description", "og:title": "" }, - { title: "A description", description: undefined }, - ], - [ - { ...baseOg, "og:title": "Cool blog", "og:site_name": "Cool site" }, - { title: "Cool blog", siteName: "Cool site" }, - ], - [ - { - ...baseOg, - "og:title": "Media test", - // API *may* return a string, so check we parse correctly. - "og:image:height": "500" as unknown as number, - "og:image:width": 500, - "matrix:image:size": 1024, - "og:image": IMAGE_MXC, - }, - { - title: "Media test", - image: { - imageThumb: "https://example.org/image/thumb", - imageFull: "https://example.org/image/src", - fileSize: 1024, - width: 100, - height: 100, - }, - }, - ], - ])("handles different kinds of opengraph responses %s", async (og, preview) => { + it.each([ + { ...baseOg, "og:title": "Basic title" }, + { ...baseOg, "og:site_name": "Site name", "og:title": "" }, + { ...baseOg, "og:description": "A description", "og:title": "" }, + { ...baseOg, "og:title": "Cool blog", "og:site_name": "Cool site" }, + { + ...baseOg, + "og:title": "Media test", + // API *may* return a string, so check we parse correctly. + "og:image:height": "500" as unknown as number, + "og:image:width": 500, + "matrix:image:size": 1024, + "og:image": IMAGE_MXC, + }, + ])("handles different kinds of opengraph responses %s", async (og) => { const { vm, client } = getViewModel(); // eslint-disable-next-line no-restricted-properties client.mxcUrlToHttp.mockImplementation((url, width) => { @@ -375,6 +249,6 @@ describe("UrlPreviewViewModel", () => { const msg = document.createElement("div"); msg.innerHTML = `test`; await vm.updateEventElement(msg); - expect(vm.getSnapshot().previews[0]).toMatchObject(preview); + expect(vm.getSnapshot().previews[0]).toMatchSnapshot(); }); }); diff --git a/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewViewModel-test.ts.snap b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewViewModel-test.ts.snap new file mode 100644 index 0000000000..cfab7c0b4c --- /dev/null +++ b/apps/web/test/viewmodels/message-body/__snapshots__/UrlPreviewViewModel-test.ts.snap @@ -0,0 +1,209 @@ +// 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, +} +`;