Merge pull request #1890 from DataDog/mariedm/feat/RUM-4151

RUM-4151 [SR] Support background color for Tab Bars

DatadogSessionReplay/SRSnapshotTests/SRFixtures/Sources/SRFixtures/Fixtures.swift

@@ -42,6 +42,9 @@ public enum Fixture: CaseIterable {
     case navigationBarDefaultNonTranslucentBarTint
     case navigationBarDefaultTranslucentBackground
     case navigationBarDefaultNonTranslucentBackground
+    case tabbar
+    case embeddedTabbar
+    case embeddedTabbarUnselectedTintColor
 
     public func instantiateViewController() -> UIViewController {
         switch self {
@@ -108,6 +111,12 @@ public enum Fixture: CaseIterable {
             return vc
         case .navigationBarDefaultNonTranslucentBackground:
             return UIStoryboard.navigationBars.instantiateViewController(withIdentifier: "Default_Non_Translucent_Background_Navbar")
+        case .tabbar:
+            return UIStoryboard.tabbars.instantiateViewController(withIdentifier: "Tabbars")
+        case .embeddedTabbar:
+            return UIStoryboard.tabbars.instantiateViewController(withIdentifier: "EmbeddedTabbar")
+        case .embeddedTabbarUnselectedTintColor:
+            return UIStoryboard.tabbars.instantiateViewController(withIdentifier: "EmbeddedTabbarUnselectedTintColor")
         }
     }
 }
@@ -119,4 +128,5 @@ internal extension UIStoryboard {
     static var images: UIStoryboard { UIStoryboard(name: "Images", bundle: .module) }
     static var unsupportedViews: UIStoryboard { UIStoryboard(name: "UnsupportedViews", bundle: .module) }
     static var navigationBars: UIStoryboard { UIStoryboard(name: "NavigationBars", bundle: .module) }
+    static var tabbars: UIStoryboard { UIStoryboard(name: "Tabbars", bundle: .module) }
 }

DatadogSessionReplay/SRSnapshotTests/SRFixtures/Sources/SRFixtures/ViewControllers/TabbarControllers.swift

@@ -0,0 +1,32 @@
+/*
+ * Unless explicitly stated otherwise all files in this repository are licensed under the Apache License Version 2.0.
+ * This product includes software developed at Datadog (https://www.datadoghq.com/).
+ * Copyright 2019-Present Datadog, Inc.
+ */
+
+import UIKit
+
+public class TabbarViewControllers: UIViewController {
+
+    @IBOutlet var tabbars: [UITabBar]!
+
+    public override func viewDidLoad() {
+        for tabbar in tabbars {
+            // Select the first tabbar's item
+            // so we can see both a selected and unselected item
+            tabbar.selectedItem = tabbar.items?.first
+        }
+    }
+}
+
+public class EmbeddedTabbarController: UITabBarController {
+    public override func viewDidLoad() {
+        tabBar.unselectedItemTintColor = nil
+    }
+}
+
+public class EmbeddedTabbarUnselectedTintColorController: UITabBarController {
+    public override func viewDidLoad() {
+        tabBar.unselectedItemTintColor = UIColor.green
+    }
+}

DatadogSessionReplay/SRSnapshotTests/SRHost/MenuViewController.swift

@@ -64,8 +64,18 @@ internal extension Fixture {
             return "Embedded Navigation Bar Default + Translucent + Background color"
         case .navigationBarDefaultNonTranslucentBackground:
             return "Embedded Navigation Bar Default + Non Translucent + Background color"
+        case .tabbar:
+            return "Tab Bars"
+        case .embeddedTabbar:
+            return "Embedded Tab Bar"
+        case .embeddedTabbarUnselectedTintColor:
+            return "Embedded Tab Bar Unselected Tint Color"
         }
     }
+
+    var slug: String {
+        self.menuItemTitle.lowercased().replacingOccurrences(of: " ", with: "")
+    }
 }
 
 internal class MenuViewController: UITableViewController {

DatadogSessionReplay/SRSnapshotTests/SRSnapshotTests/SRSnapshotTests.swift

@@ -296,7 +296,7 @@ final class SRSnapshotTests: SnapshotTestCase {
 
             try forPrivacyModes([.allow, .mask]) { privacyMode in
                 let image = try takeSnapshot(with: privacyMode)
-                let fileNamePrefix = fixture.menuItemTitle.lowercased().replacingOccurrences(of: " ", with: "")
+                let fileNamePrefix = fixture.slug
                 DDAssertSnapshotTest(
                     newImage: image,
                     snapshotLocation: .folder(named: snapshotsFolderPath, fileNameSuffix: "-\(fileNamePrefix)-\(privacyMode)-privacy"),
@@ -306,4 +306,45 @@ final class SRSnapshotTests: SnapshotTestCase {
         }
     }
 
+    func testTabBars() throws {
+
+        // - Static Tab Bars
+        show(fixture: .tabbar)
+
+        try forPrivacyModes([.allow, .mask]) { privacyMode in
+            let image = try takeSnapshot(with: privacyMode)
+            DDAssertSnapshotTest(
+                newImage: image,
+                snapshotLocation: .folder(named: snapshotsFolderPath, fileNameSuffix: "-\(privacyMode)-privacy"),
+                record: recordingMode
+            )
+        }
+
+        // - Embedded Tab Bar
+        show(fixture: .embeddedTabbar)
+
+        try forPrivacyModes([.allow, .mask]) { privacyMode in
+            let image = try takeSnapshot(with: privacyMode)
+            let fileNamePrefix = Fixture.embeddedTabbar.slug
+            DDAssertSnapshotTest(
+                newImage: image,
+                snapshotLocation: .folder(named: snapshotsFolderPath, fileNameSuffix: "-\(fileNamePrefix)-\(privacyMode)-privacy"),
+                record: recordingMode
+            )
+        }
+
+        // - Embedded Tab Bar, with unselected item tint color
+        show(fixture: .embeddedTabbarUnselectedTintColor)
+
+        try forPrivacyModes([.allow, .mask]) { privacyMode in
+            let image = try takeSnapshot(with: privacyMode)
+            let fileNamePrefix = Fixture.embeddedTabbarUnselectedTintColor.slug
+            DDAssertSnapshotTest(
+                newImage: image,
+                snapshotLocation: .folder(named: snapshotsFolderPath, fileNameSuffix: "-\(fileNamePrefix)-\(privacyMode)-privacy"),
+                record: recordingMode
+            )
+        }
+    }
+
 }

DatadogSessionReplay/SRSnapshotTests/SRSnapshotTests/_snapshots_/pointers/testTabBars()-allow-privacy.png.json

@@ -0,0 +1 @@
+{"hash":"c8db9a89ac040c3733ec239bf92a2bfd6253dee4"}

DatadogSessionReplay/SRSnapshotTests/SRSnapshotTests/_snapshots_/pointers/testTabBars()-embeddedtabbar-allow-privacy.png.json

@@ -0,0 +1 @@
+{"hash":"72d50780fb4df2e058dad0e8953e439097fd3eaa"}

DatadogSessionReplay/SRSnapshotTests/SRSnapshotTests/_snapshots_/pointers/testTabBars()-embeddedtabbar-mask-privacy.png.json

@@ -0,0 +1 @@
+{"hash":"a15b968196c3fd0a268bd3e82a37fef10b31009f"}

DatadogSessionReplay/SRSnapshotTests/SRSnapshotTests/_snapshots_/pointers/testTabBars()-embeddedtabbarunselectedtintcolor-allow-privacy.png.json

@@ -0,0 +1 @@
+{"hash":"a0cf5709cf5cb508728fd1d2ad74f6afd2153a27"}

DatadogSessionReplay/SRSnapshotTests/SRSnapshotTests/_snapshots_/pointers/testTabBars()-embeddedtabbarunselectedtintcolor-mask-privacy.png.json

@@ -0,0 +1 @@
+{"hash":"dccf7efc3a8379f8cf0d1ee4d63e00a30206bc04"}

DatadogSessionReplay/SRSnapshotTests/SRSnapshotTests/_snapshots_/pointers/testTabBars()-mask-privacy.png.json

@@ -0,0 +1 @@
+{"hash":"ace6b7b1f9db81e24d7d19d3fa3652e7b6f290dc"}

DatadogSessionReplay/Sources/Recorder/ViewTreeSnapshotProducer/ViewTreeSnapshot/NodeRecorders/UITabBarRecorder.swift

@@ -25,7 +25,6 @@ internal struct UITabBarRecorder: NodeRecorder {
     }
 
     private func inferOccupiedFrame(of tabBar: UITabBar, in context: ViewTreeRecordingContext) -> CGRect {
-        // TODO: RUMM-2791 Enhance appearance of `UITabBar` and `UINavigationBar` in SR
         var occupiedFrame = tabBar.frame
         for subview in tabBar.subviews {
             let subviewFrame = subview.convert(subview.bounds, to: context.coordinateSpace)
@@ -35,7 +34,10 @@ internal struct UITabBarRecorder: NodeRecorder {
     }
 
     private func inferColor(of tabBar: UITabBar) -> CGColor {
-        // TODO: RUMM-2791 Enhance appearance of `UITabBar` and `UINavigationBar` in SR
+        if let color = tabBar.backgroundColor {
+            return color.cgColor
+        }
+
         if #available(iOS 13.0, *) {
             switch UITraitCollection.current.userInterfaceStyle {
             case .light: