Merge pull request #80 from cashapp/entin/scale-tiles

Respect original safe area insets when tiling and stitching snapshot

Author: NickEntin

Example/Podfile.lock

@@ -45,4 +45,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 9d965121b60425a32e1b4c884c4c6b7aff62fa52
 
-COCOAPODS: 1.9.1
+COCOAPODS: 1.11.0.rc.1

Example/SnapshotTests/AccessibilityPropertiesTests.swift

@@ -85,22 +85,10 @@ final class AccessibilitySnapshotTests: SnapshotTestCase {
 
     // This test is currently disabled due to a bug in iOSSnapshotTestCase. See cashapp/AccessibilitySnapshot#75.
     func testLargeViewThatRequiresTiling() throws {
-        let view = UIView(frame: CGRect(x: 0, y: 0, width: 3000, height: 3000))
-
-        let gradientLayer = CAGradientLayer()
-        gradientLayer.colors = [UIColor.blue.cgColor, UIColor.white.cgColor]
-        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
-        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
-        view.layer.addSublayer(gradientLayer)
-        gradientLayer.frame = view.bounds
-
-        let label = UILabel()
-        label.text = "Hello world"
-        label.textColor = .red
-        view.addSubview(label)
-
-        label.sizeToFit()
-        label.center = view.point(at: .center)
+        let view = GradientBackgroundView(
+            frame: CGRect(x: 0, y: 0, width: 3000, height: 3000),
+            showSafeAreaInsets: true
+        )
 
         usingDrawViewHierarchyInRect {
             SnapshotVerifyAccessibility(view, useMonochromeSnapshot: false)
@@ -158,24 +146,13 @@ final class AccessibilitySnapshotTests: SnapshotTestCase {
 
     // This test is currently disabled due to a bug in iOSSnapshotTestCase. See cashapp/AccessibilitySnapshot#75.
     func testLargeViewInViewControllerThatRequiresTiling() {
-        let view = UIView(frame: CGRect(x: 0, y: 0, width: 3000, height: 3000))
-
-        let gradientLayer = CAGradientLayer()
-        gradientLayer.colors = [UIColor.blue.cgColor, UIColor.white.cgColor]
-        gradientLayer.startPoint = CGPoint(x: 0, y: 0)
-        gradientLayer.endPoint = CGPoint(x: 1, y: 1)
-        view.layer.addSublayer(gradientLayer)
-        gradientLayer.frame = view.bounds
-
-        let label = UILabel()
-        label.text = "Hello world"
-        label.textColor = .red
-        view.addSubview(label)
-
-        label.sizeToFit()
-        label.center = view.point(at: .center)
+        let view = GradientBackgroundView(
+            frame: CGRect(x: 0, y: 0, width: 3000, height: 3000),
+            showSafeAreaInsets: true
+        )
 
         let viewController = UIViewController()
+        viewController.additionalSafeAreaInsets = .init(top: 600, left: 1000, bottom: 300, right: 100)
         viewController.view = view
 
         let parent = UIViewController()
@@ -196,4 +173,68 @@ final class AccessibilitySnapshotTests: SnapshotTestCase {
         usesDrawViewHierarchyInRect = oldValue
     }
 
+    // MARK: - Private Types
+
+    private final class GradientBackgroundView: UIView {
+
+        // MARK: - Life Cycle
+
+        init(frame: CGRect, showSafeAreaInsets: Bool) {
+            super.init(frame: frame)
+
+            gradientLayer.colors = [UIColor.blue.cgColor, UIColor.white.cgColor]
+            gradientLayer.startPoint = CGPoint(x: 0, y: 0)
+            gradientLayer.endPoint = CGPoint(x: 1, y: 1)
+            layer.addSublayer(gradientLayer)
+
+            label.text = "Hello world"
+            label.textColor = .red
+            label.backgroundColor = .black
+            addSubview(label)
+
+            safeAreaView.layer.borderColor = UIColor.red.cgColor
+            safeAreaView.layer.borderWidth = 1
+            safeAreaView.isHidden = !showSafeAreaInsets
+            addSubview(safeAreaView)
+
+            layoutMargins = .init(top: 8, left: 8, bottom: 8, right: 8)
+            insetsLayoutMarginsFromSafeArea = true
+
+            layoutMarginsView.layer.borderColor = UIColor.green.cgColor
+            layoutMarginsView.layer.borderWidth = 0.5
+            layoutMarginsView.isHidden = !showSafeAreaInsets
+            addSubview(layoutMarginsView)
+        }
+
+        @available(*, unavailable)
+        required init?(coder: NSCoder) {
+            fatalError("init(coder:) has not been implemented")
+        }
+
+        // MARK: - Private Properties
+
+        private let gradientLayer: CAGradientLayer = .init()
+
+        private let label: UILabel = .init()
+
+        private let safeAreaView: UIView = .init()
+
+        private let layoutMarginsView: UIView = .init()
+
+        // MARK: - UIView
+
+        override func layoutSubviews() {
+            gradientLayer.frame = bounds
+
+            let insetBounds = bounds.inset(by: safeAreaInsets)
+
+            label.sizeToFit()
+            label.center = CGPoint(x: insetBounds.midX, y: insetBounds.midY)
+
+            safeAreaView.frame = insetBounds
+            layoutMarginsView.frame = bounds.inset(by: layoutMargins)
+        }
+
+    }
+
 }

Example/SnapshotTests/ReferenceImages/_64/SnapshotTests.AccessibilitySnapshotTests/testLargeViewInViewControllerThatRequiresTiling_12_4_375x812@3x.png

@@ -129,8 +129,8 @@ public final class AccessibilitySnapshotView: UIView {
         let viewController = containedView.next as? UIViewController
         let originalParent = viewController?.parent
         let originalSuperviewAndIndex = containedView.superviewWithSubviewIndex()
-        viewController?.removeFromParent()
 
+        viewController?.removeFromParent()
         addSubview(containedView)
 
         defer {
@@ -156,6 +156,10 @@ public final class AccessibilitySnapshotView: UIView {
         )
         snapshotView.bounds.size = containedView.bounds.size
 
+        // Complete the layout pass after the view is restored to this container, in case it was modified during the
+        // rendering process (i.e. when the rendering is tiled and stitched).
+        containedView.layoutIfNeeded()
+
         let parser = AccessibilityHierarchyParser()
         let markers = parser.parseAccessibilityElements(in: containedView)
 
@@ -832,13 +836,44 @@ private extension UIView {
             return
         }
 
+        let originalSafeArea = bounds.inset(by: safeAreaInsets)
+
         let originalSuperview = superview
+        let originalOrigin = frame.origin
+        let originalAutoresizingMask = autoresizingMask
         defer {
             originalSuperview?.addSubview(self)
+            frame.origin = originalOrigin
+            autoresizingMask = originalAutoresizingMask
         }
 
-        let frameView = UIView()
-        frameView.addSubview(self)
+        let frameView = UIView(frame: frame)
+        originalSuperview?.addSubview(frameView)
+        defer {
+            frameView.removeFromSuperview()
+        }
+
+        autoresizingMask = []
+        frame.origin = .zero
+
+        let containerViewController = UIViewController()
+        let containerView = containerViewController.view!
+        containerView.frame = frame
+        containerView.autoresizingMask = []
+        containerView.addSubview(self)
+        frameView.addSubview(containerView)
+
+        // Run the run loop for one cycle so that the safe area changes caused by restructuring the view hierarhcy are
+        // propogated. Then calculate the required additional safe area insets to create the equivalent original safe
+        // area. This new change will be propogated automatically when we draw the hierarchy for the first time.
+        RunLoop.current.run(until: Date())
+        let currentSafeArea = containerView.convert(bounds.inset(by: safeAreaInsets), from: self)
+        containerViewController.additionalSafeAreaInsets = UIEdgeInsets(
+            top: originalSafeArea.minY - currentSafeArea.minY,
+            left: originalSafeArea.minX - currentSafeArea.minX,
+            bottom: currentSafeArea.maxY - originalSafeArea.maxY,
+            right: currentSafeArea.maxX - originalSafeArea.maxX
+        )
 
         let bounds = self.bounds
         var tileRect: CGRect = .zero
@@ -849,9 +884,13 @@ private extension UIView {
 
             while tileRect.minX < bounds.maxX {
                 tileRect.size.width = min(tileRect.minX + UIView.tileSideLength, bounds.maxX) - tileRect.minX
-
                 frameView.frame.size = tileRect.size
-                frame.origin = CGPoint(x: -tileRect.minX, y: -tileRect.minY)
+
+                // Move the origin of the `frameView` and `containerView` such that the frame is over the right area of
+                // the snapshotted view, but the snapshotted view stays fixed relative to the `frameView`'s superview
+                // (so the view's position on screen doesn't change).
+                frameView.frame.origin = CGPoint(x: tileRect.minX, y: tileRect.minY)
+                containerView.frame.origin = CGPoint(x: -tileRect.minX, y: -tileRect.minY)
 
                 UIGraphicsImageRenderer(bounds: frameView.bounds)
                     .image { _ in

Example/SnapshotTests/ReferenceImages/_64/SnapshotTests.AccessibilitySnapshotTests/testLargeViewThatRequiresTilingAndReturnError__12_4_375x812@3x.png

@@ -25,6 +25,10 @@ extension FBSnapshotTestCase {
     /// When `recordMode` is true, records a snapshot of the view. When `recordMode` is false, performs a comparison
     /// with the existing snapshot.
     ///
+    /// - Note: This method will modify the view hierarchy in order to snapshot the view. It will attempt to restore the
+    /// hierarchy to its original state as much as possible, but is not guaranteed to be without side effects (for
+    /// example if something observes changes in the view hierarchy).
+    ///
     /// - parameter view: The view that will be snapshotted.
     /// - parameter identifier: An optional identifier included in the snapshot name, for use when there are multiple
     /// snapshot tests in a given test method. Defaults to no identifier.
@@ -34,8 +38,10 @@ extension FBSnapshotTestCase {
     /// - parameter useMonochromeSnapshot: Whether or not the snapshot of the `view` should be monochrome. Using a
     /// monochrome snapshot makes it more clear where the highlighted elements are, but may make it difficult to
     /// read certain views. Defaults to `true`.
-    /// - parameter suffixes: NSOrderedSet object containing strings that are appended to the reference images directory.
-    /// Defaults to `FBSnapshotTestCaseDefaultSuffixes()`.
+    /// - parameter markerColors: An array of colors to use for the highlighted regions. These colors will be used in
+    /// order, repeating through the array as necessary.
+    /// - parameter suffixes: NSOrderedSet object containing strings that are appended to the reference images
+    /// directory. Defaults to `FBSnapshotTestCaseDefaultSuffixes()`.
     /// - parameter file: The file in which the test result should be attributed.
     /// - parameter line: The line in which the test result should be attributed.
     public func SnapshotVerifyAccessibility(