From 0a008601e33b17f34b2882c7aac6a1654d1d2680 Mon Sep 17 00:00:00 2001 From: Doug <6060466+pixlwave@users.noreply.github.com> Date: Wed, 9 Jul 2025 11:24:14 +0100 Subject: [PATCH] Update Compound and add some new snapshot tests. (#4311) * Update Compound. * Add some snapshot tests for PillView on a bubble background. Version 5.0.0 of compound-design-tokens changed the pill colour but all our snapshots are on white so we didn't notice the difference in contrast. This doesn't fix anything, it purely adds the snapshots. --- ElementX.xcodeproj/project.pbxproj | 6 ++- .../xcshareddata/swiftpm/Package.resolved | 6 +-- .../Pills/PillViewOnBubblePreviews.swift | 53 +++++++++++++++++++ .../Sources/GeneratedPreviewTests.swift | 6 +++ .../pillViewOnBubble.iPad-en-GB-0.png | 3 ++ .../pillViewOnBubble.iPad-pseudo-0.png | 3 ++ .../pillViewOnBubble.iPhone-16-en-GB-0.png | 3 ++ .../pillViewOnBubble.iPhone-16-pseudo-0.png | 3 ++ project.yml | 2 +- 9 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 ElementX/Sources/Other/Pills/PillViewOnBubblePreviews.swift create mode 100644 PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-en-GB-0.png create mode 100644 PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-pseudo-0.png create mode 100644 PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-en-GB-0.png create mode 100644 PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-pseudo-0.png diff --git a/ElementX.xcodeproj/project.pbxproj b/ElementX.xcodeproj/project.pbxproj index a5012aa98..52fd1bed5 100644 --- a/ElementX.xcodeproj/project.pbxproj +++ b/ElementX.xcodeproj/project.pbxproj @@ -314,6 +314,7 @@ 3B0F9B57D25B07E66F15762A /* MediaUploadPreviewScreenModels.swift in Sources */ = {isa = PBXBuildFile; fileRef = B2E7C987AE5DC9087BB19F7D /* MediaUploadPreviewScreenModels.swift */; }; 3B277D9538090766DA6C4566 /* StateRoomTimelineView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B2AF1828A5B76B7C371240FE /* StateRoomTimelineView.swift */; }; 3B28408450BCAED911283AA2 /* UserPreference.swift in Sources */ = {isa = PBXBuildFile; fileRef = 35FA991289149D31F4286747 /* UserPreference.swift */; }; + 3B5AB5CF8D8163599C5BF19B /* PillViewOnBubblePreviews.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2005B4AD70A792340E2694F1 /* PillViewOnBubblePreviews.swift */; }; 3B98049F56025726FB646ABD /* SwipeToReplyView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 0B0E0B55E2EE75AF67029924 /* SwipeToReplyView.swift */; }; 3BEBDCB42BABFA3B456FECA7 /* MapTilerURLBuilderTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 1D262A26713C18BB70C82CA5 /* MapTilerURLBuilderTests.swift */; }; 3C312A3AEDE58BB1C9BBB07C /* preview_avatar_room.jpg in Resources */ = {isa = PBXBuildFile; fileRef = 12FD5280AF55AB7F50F8E47D /* preview_avatar_room.jpg */; }; @@ -1550,6 +1551,7 @@ 1FAF8C2226A57B9AB7446B31 /* AppLockSetupPINScreenCoordinator.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppLockSetupPINScreenCoordinator.swift; sourceTree = ""; }; 1FD51B4D5173F7FC886F5360 /* NoticeRoomTimelineItemContent.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NoticeRoomTimelineItemContent.swift; sourceTree = ""; }; 1FF584D757E768EA7776A532 /* ImageMediaEventsTimelineView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ImageMediaEventsTimelineView.swift; sourceTree = ""; }; + 2005B4AD70A792340E2694F1 /* PillViewOnBubblePreviews.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PillViewOnBubblePreviews.swift; sourceTree = ""; }; 200626E8353AB2729444F991 /* preview_image.jpg */ = {isa = PBXFileReference; lastKnownFileType = image.jpeg; path = preview_image.jpg; sourceTree = ""; }; 201305507D7DFD16E544563A /* EmojiLoaderProtocol.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EmojiLoaderProtocol.swift; sourceTree = ""; }; 203D1ACC20287F8986C959D3 /* target.yml */ = {isa = PBXFileReference; lastKnownFileType = text.yaml; path = target.yml; sourceTree = ""; }; @@ -5047,6 +5049,7 @@ 913C8E13B8B602C7B6C0C4AE /* PillTextAttachmentData.swift */, C537DE821FED94D23467B6C4 /* PillUtilities.swift */, 7773CBFDBD458E0B7E270507 /* PillView.swift */, + 2005B4AD70A792340E2694F1 /* PillViewOnBubblePreviews.swift */, 8AE78FA0011E07920AE83135 /* PlainMentionBuilder.swift */, ); path = Pills; @@ -7469,6 +7472,7 @@ 8C050A8012E6078BEAEF5BC8 /* PillTextAttachmentData.swift in Sources */, 11D2FDD22DDF34F8323489B9 /* PillUtilities.swift in Sources */, 7E2BB42805C59DB57E95610F /* PillView.swift in Sources */, + 3B5AB5CF8D8163599C5BF19B /* PillViewOnBubblePreviews.swift in Sources */, 9CBB04365408F9D6F46BA3A7 /* PinnedEventsTimelineFlowCoordinator.swift in Sources */, 5D52925FEB1B780C65B0529F /* PinnedEventsTimelineScreen.swift in Sources */, E184FFAD32342D3D6E2F89AA /* PinnedEventsTimelineScreenCoordinator.swift in Sources */, @@ -8895,7 +8899,7 @@ repositoryURL = "https://github.com/element-hq/compound-ios"; requirement = { kind = revision; - revision = 4cadcbcf1d4102e9a8114842c4def62cd8989de3; + revision = a32db8bc30f534fd4f189c10cb99afd4abc0f6ea; }; }; F76A08D0EA29A07A54F4EB4D /* XCRemoteSwiftPackageReference "swift-collections" */ = { diff --git a/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved b/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved index 22d3351c4..ba8b8ad16 100644 --- a/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved +++ b/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved @@ -6,8 +6,8 @@ "kind" : "remoteSourceControl", "location" : "https://github.com/element-hq/compound-design-tokens", "state" : { - "revision" : "00a392cf3e907fb2ebc49a9590f7a0a97c175c0f", - "version" : "5.0.0" + "revision" : "b0addc0775526685ad96fd9ef9c04b2de4456314", + "version" : "5.0.1" } }, { @@ -15,7 +15,7 @@ "kind" : "remoteSourceControl", "location" : "https://github.com/element-hq/compound-ios", "state" : { - "revision" : "4cadcbcf1d4102e9a8114842c4def62cd8989de3" + "revision" : "a32db8bc30f534fd4f189c10cb99afd4abc0f6ea" } }, { diff --git a/ElementX/Sources/Other/Pills/PillViewOnBubblePreviews.swift b/ElementX/Sources/Other/Pills/PillViewOnBubblePreviews.swift new file mode 100644 index 000000000..b19a247d0 --- /dev/null +++ b/ElementX/Sources/Other/Pills/PillViewOnBubblePreviews.swift @@ -0,0 +1,53 @@ +// +// Copyright 2025 New Vector Ltd. +// +// SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial +// Please see LICENSE files in the repository root for full details. +// + +import Compound +import SwiftUI + +/// A very simple mock layout of some pills within messages bubbles and the composer. +struct PillViewOnBubble_Previews: PreviewProvider, TestablePreview { + static let mockMediaProvider = MediaProviderMock(configuration: .init()) + static let mentionContext = PillContext.mock(viewState: makeViewState(isOwnMention: false)) + static let ownMentionContext = PillContext.mock(viewState: makeViewState(isOwnMention: true)) + + static var previews: some View { + VStack(spacing: 16) { + mockMessage + .bubbleBackground(isOutgoing: false, color: .compound._bgBubbleIncoming) + .frame(maxWidth: .infinity, alignment: .leading) + + mockMessage + .bubbleBackground(isOutgoing: true, color: .compound._bgBubbleOutgoing) + .frame(maxWidth: .infinity, alignment: .trailing) + + HStack(spacing: 8) { + mockMessage + .offset(y: -1) + .frame(maxWidth: .infinity, alignment: .leading) + .messageComposerStyle(isEncrypted: false) + + SendButton { } + } + .padding(.top) + } + .padding(16) + } + + static var mockMessage: some View { + HStack(spacing: 4) { + Text("Hello").foregroundStyle(.compound.textPrimary) + PillView(mediaProvider: mockMediaProvider, context: mentionContext) { } + PillView(mediaProvider: mockMediaProvider, context: ownMentionContext) { } + } + } + + static func makeViewState(isOwnMention: Bool) -> PillViewState { + .mention(isOwnMention: isOwnMention, + displayText: PillUtilities.userPillDisplayText(username: isOwnMention ? "Alice" : "Bob", + userID: isOwnMention ? "@alice:matrix.org" : "@bob:matrix.org")) + } +} diff --git a/PreviewTests/Sources/GeneratedPreviewTests.swift b/PreviewTests/Sources/GeneratedPreviewTests.swift index 428caa210..6915c70c3 100644 --- a/PreviewTests/Sources/GeneratedPreviewTests.swift +++ b/PreviewTests/Sources/GeneratedPreviewTests.swift @@ -503,6 +503,12 @@ extension PreviewTests { } } + func testPillViewOnBubble() async throws { + for (index, preview) in PillViewOnBubble_Previews._allPreviews.enumerated() { + try await assertSnapshots(matching: preview, step: index) + } + } + func testPillView() async throws { for (index, preview) in PillView_Previews._allPreviews.enumerated() { try await assertSnapshots(matching: preview, step: index) diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-en-GB-0.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-en-GB-0.png new file mode 100644 index 000000000..cf5235c01 --- /dev/null +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-en-GB-0.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:790d31b26a37fc7b689546846351db4ab184c51cc9127252088c02baf085c2c8 +size 105951 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-pseudo-0.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-pseudo-0.png new file mode 100644 index 000000000..a497c34c3 --- /dev/null +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPad-pseudo-0.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f1ef025245c2bf40209cc4735bfc37872a05940da81343e6b7bdeb20779d9bcf +size 107152 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-en-GB-0.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-en-GB-0.png new file mode 100644 index 000000000..8fe2c970a --- /dev/null +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-en-GB-0.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:437de638c1d6c99e884794a390fef3f99a3e1a8de8ddc2d2f487d709514a74ed +size 60989 diff --git a/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-pseudo-0.png b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-pseudo-0.png new file mode 100644 index 000000000..722c727f8 --- /dev/null +++ b/PreviewTests/Sources/__Snapshots__/PreviewTests/pillViewOnBubble.iPhone-16-pseudo-0.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:13a72535670cc7d76c050fd6710710bcf7e5fc677c3e14154062cf68e557f431 +size 64035 diff --git a/project.yml b/project.yml index 0f113543b..cf8e595ea 100644 --- a/project.yml +++ b/project.yml @@ -69,7 +69,7 @@ packages: # path: ../matrix-rust-sdk Compound: url: https://github.com/element-hq/compound-ios - revision: 4cadcbcf1d4102e9a8114842c4def62cd8989de3 + revision: a32db8bc30f534fd4f189c10cb99afd4abc0f6ea # path: ../compound-ios AnalyticsEvents: url: https://github.com/matrix-org/matrix-analytics-events