Snapshot testing in iOS Swift - Mini App: Build & Ship

Build: Profile Screen

Build a simple profile screen that shows a user avatar, name, and a short bio. This screen will be used for snapshot testing to verify UI consistency.

Target UI

-------------------------
|       Profile         |
|-----------------------|
|  [Avatar Image]       |
|                       |
|  Name: John Appleseed |
|  Bio: iOS Developer   |
|                       |
|-----------------------|

Display a circular avatar image at the top center

Show the user's name below the avatar in bold

Show a short bio below the name in regular font

Use UIKit and Swift for implementation

Prepare the view for snapshot testing with fixed sizes

Starter Code

iOS Swift

import UIKit

class ProfileViewController: UIViewController {
    private let avatarImageView = UIImageView()
    private let nameLabel = UILabel()
    private let bioLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupViews()
    }

    private func setupViews() {
        // TODO: Add avatarImageView setup
        // TODO: Add nameLabel setup
        // TODO: Add bioLabel setup
        // TODO: Add layout constraints
    }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

iOS Swift

import UIKit

class ProfileViewController: UIViewController {
    private let avatarImageView = UIImageView()
    private let nameLabel = UILabel()
    private let bioLabel = UILabel()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setupViews()
    }

    private func setupViews() {
        avatarImageView.translatesAutoresizingMaskIntoConstraints = false
        avatarImageView.image = UIImage(systemName: "person.circle.fill")
        avatarImageView.tintColor = .systemBlue
        avatarImageView.contentMode = .scaleAspectFill
        avatarImageView.clipsToBounds = true
        avatarImageView.layer.cornerRadius = 50

        nameLabel.translatesAutoresizingMaskIntoConstraints = false
        nameLabel.text = "John Appleseed"
        nameLabel.font = UIFont.boldSystemFont(ofSize: 24)
        nameLabel.textAlignment = .center

        bioLabel.translatesAutoresizingMaskIntoConstraints = false
        bioLabel.text = "iOS Developer"
        bioLabel.font = UIFont.systemFont(ofSize: 16)
        bioLabel.textAlignment = .center
        bioLabel.textColor = .darkGray

        view.addSubview(avatarImageView)
        view.addSubview(nameLabel)
        view.addSubview(bioLabel)

        NSLayoutConstraint.activate([
            avatarImageView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            avatarImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            avatarImageView.widthAnchor.constraint(equalToConstant: 100),
            avatarImageView.heightAnchor.constraint(equalToConstant: 100),

            nameLabel.topAnchor.constraint(equalTo: avatarImageView.bottomAnchor, constant: 20),
            nameLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            nameLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),

            bioLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 8),
            bioLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            bioLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}

This solution creates a simple profile screen using UIKit. The avatarImageView uses a system image and is made circular by setting layer.cornerRadius to half its width and enabling clipsToBounds. The nameLabel is bold and centered, and the bioLabel is regular font with a dark gray color. All views use Auto Layout constraints to position them vertically centered horizontally with spacing. This setup is perfect for snapshot testing because the layout is fixed and consistent.

Final Result

Completed Screen

-------------------------
|       Profile         |
|-----------------------|
|   (person.circle.fill) |
|                       |
|  John Appleseed       |
|  iOS Developer        |
|                       |
|-----------------------|

No interactive elements on this screen

Screen is static for snapshot testing

Stretch Goal

Add a dark mode appearance to the profile screen

💡 Hint

Use traitCollectionDidChange to update colors or use system colors that adapt automatically