// // Copyright 2025 Element Creations Ltd. // Copyright 2023-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. // @testable import ElementX import SwiftUI import Testing struct CollapsibleFlowLayoutTests { @Test func flowLayoutWithExpandAndCollapse() { let containerSize = CGSize(width: 250, height: 400) var flowLayout = CollapsibleReactionLayout(itemSpacing: 5, rowSpacing: 5, rowsBeforeCollapsible: 2) var placedViews: [CGRect] = [] let placedViewsCallback = { rect in placedViews.append(rect) } let subviews = createReactionLayoutSubviews(with: Array(repeating: CGSize(width: 100, height: 50), count: 6), placedPositionCallback: placedViewsCallback) let subviewsMock = LayoutSubviewsMock(subviews: subviews) var a: () = () var size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) // Collapsed target layout has 2 rows of 2 items, so just 1 spacing between items hence 205, 105 #expect(size == CGSize(width: 205, height: 105)) flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) // 4 items are hidden in the collapsed state (put in the centre with zero size) var targetPlacements: [CGRect] = [ CGRect(x: 0, y: 25, width: 100, height: 50), CGRect(x: 105, y: 25, width: 100, height: 50), CGRect(x: 0, y: 80, width: 100, height: 50), CGRect(x: 105, y: 80, width: 100, height: 50), CGRect(x: -10000, y: -10000, width: 0, height: 0), CGRect(x: -10000, y: -10000, width: 0, height: 0), CGRect(x: -10000, y: -10000, width: 0, height: 0), CGRect(x: -10000, y: -10000, width: 0, height: 0) ] #expect(placedViews == targetPlacements) flowLayout.collapsed = false placedViews = [] size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) // Expanded target layout has 4 rows and no more than 2 items per row #expect(size == CGSize(width: 205, height: 215)) flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) targetPlacements = [ CGRect(x: 0, y: 25, width: 100, height: 50), CGRect(x: 105, y: 25, width: 100, height: 50), CGRect(x: 0, y: 80, width: 100, height: 50), CGRect(x: 105, y: 80, width: 100, height: 50), CGRect(x: 0, y: 135, width: 100, height: 50), CGRect(x: 105, y: 135, width: 100, height: 50), CGRect(x: 0, y: 190, width: 100, height: 50), CGRect(x: 105.0, y: 190, width: 100, height: 50) ] #expect(placedViews == targetPlacements) } @Test func flowLayoutWithExpandButtonAndAddMoreIsHidden() { let containerSize = CGSize(width: 250, height: 400) let flowLayout = CollapsibleReactionLayout(itemSpacing: 5, rowSpacing: 5, rowsBeforeCollapsible: 2) var placedViews: [CGRect] = [] let placedViewsCallback = { rect in placedViews.append(rect) } let subviews = createReactionLayoutSubviews(with: Array(repeating: CGSize(width: 100, height: 50), count: 3), placedPositionCallback: placedViewsCallback) let subviewsMock = LayoutSubviewsMock(subviews: subviews) var a: () = () let size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) #expect(size == CGSize(width: 205, height: 105)) flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) let targetPlacements: [CGRect] = [ CGRect(x: 0, y: 25, width: 100, height: 50), CGRect(x: 105, y: 25, width: 100, height: 50), CGRect(x: 0, y: 80, width: 100, height: 50), // Add more button CGRect(x: 105.0, y: 80, width: 100, height: 50), // Expand/Collapse button is hidden CGRect(x: -10000, y: -10000, width: 0, height: 0) ] #expect(placedViews == targetPlacements) } @Test func heightIsCorrectGivenASmallerAddButton() { let containerSize = CGSize(width: 250, height: 400) let flowLayout = CollapsibleReactionLayout(itemSpacing: 5, rowSpacing: 5, rowsBeforeCollapsible: 2) var placedViews: [CGRect] = [] let placedViewsCallback = { rect in placedViews.append(rect) } // Add more button with smaller initial height let subviews = createReactionLayoutSubviews(with: Array(repeating: CGSize(width: 100, height: 50), count: 2), addMoreSize: CGSize(width: 100, height: 20), placedPositionCallback: placedViewsCallback) let subviewsMock = LayoutSubviewsMock(subviews: subviews) var a: () = () let size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) #expect(size == CGSize(width: 205, height: 105)) flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) let targetPlacements: [CGRect] = [ CGRect(x: 0, y: 25, width: 100, height: 50), CGRect(x: 105, y: 25, width: 100, height: 50), // Add more button with matching height CGRect(x: 0, y: 80, width: 100, height: 50), // Expand/Collapse button is hidden CGRect(x: -10000, y: -10000, width: 0, height: 0) ] #expect(placedViews == targetPlacements) } @Test func flowLayoutEmptyState() { let containerSize = CGSize(width: 250, height: 400) let flowLayout = CollapsibleReactionLayout(itemSpacing: 5, rowSpacing: 5, rowsBeforeCollapsible: 2) var placedViews: [CGRect] = [] let placedViewsCallback = { rect in placedViews.append(rect) } let subviews = createReactionLayoutSubviews(with: [], placedPositionCallback: placedViewsCallback) let subviewsMock = LayoutSubviewsMock(subviews: subviews) var a: () = () let size = flowLayout.sizeThatFits(proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) #expect(size == CGSize(width: 0, height: 0)) flowLayout.placeSubviews(in: CGRect(origin: .zero, size: size), proposal: ProposedViewSize(containerSize), subviews: subviewsMock, cache: &a) let targetPlacements: [CGRect] = [ // both buttons are not displayed CGRect(x: -10000, y: -10000, width: 0, height: 0), CGRect(x: -10000, y: -10000, width: 0, height: 0) ] #expect(placedViews == targetPlacements) } func createReactionLayoutSubviews(with sizes: [CGSize], expandCollapseSize: CGSize = CGSize(width: 100, height: 50), addMoreSize: CGSize = CGSize(width: 100, height: 50), placedPositionCallback: @escaping (CGRect) -> Void) -> [LayoutSubviewMock] { sizes.map { size in LayoutSubviewMock(size: size, layoutValues: [String(describing: ReactionLayoutItemType.self): ReactionLayoutItem.reaction], placedPositionCallback: placedPositionCallback) } + [ LayoutSubviewMock(size: expandCollapseSize, layoutValues: [String(describing: ReactionLayoutItemType.self): ReactionLayoutItem.expandCollapse], placedPositionCallback: placedPositionCallback), LayoutSubviewMock(size: addMoreSize, layoutValues: [String(describing: ReactionLayoutItemType.self): ReactionLayoutItem.addMore], placedPositionCallback: placedPositionCallback) ] } }