Building Large Scale Apps Swiftui | AzamSharp

• Modular Architecture

• Understanding the MV Pattern

• Screens vs Views

• Multiple Aggregate Models

• View Specific Logic

• Validation

• Navigation

• Grouping View Events

• Testing

Modular Architecture

Understanding the MV Pattern

function App() {
    return (
        <div>
            <h1>Hello World</h1>
            <button>Save</button>
        </div>
    )
}

class StoreModel: ObservableObject {

    private var storeHTTPClient: StoreHTTPClient

    init(storeHTTPClient: StoreHTTPClient) {
        self.storeHTTPClient = storeHTTPClient
    }

    @Published var products: [Product] = []
    @Published var categories: [Category] = []

    func addProduct(_ product: Product) async throws {
         try await storeHTTPClient.addProduct(product)
    }

    func populateProducts() async throws {
        self.products = try await storeHTTPClient.loadProducts()
    }
}

@main
struct StoreAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(StoreModel(client: StoreHTTPClient()))

        }
    }
}

struct ContentView: View {

    @EnvironmentObject private var model: StoreModel

    var body: some View {
        ProductListView(products: model.products)
            .task {
                do {
                    try await model.populateProducts()
                } catch {
                    print(error.localizedDescription)
                }
            }
    }
}

Multiple Aggregate Models

• Product

• Category

• Brand

• Review

• Order

• OrderLineItem

• OrderStatus

• ShippingMethod

• Discount

struct Product: Codable {
    let productId: Int
    let name: String
    let category: Category
    let price: Double
    let description: String
    let reviews: [Review]?
}

@MainActor
class Catalog: ObservableObject {

    // designated or generic HTTP client
    let storeHTTPClient: StoreHTTPClient

    @Published var products: [Product]
    @Published var categories: [Category]

    init(storeHTTPClient: StoreHTTPClient) {
        self.storeHTTPClient = storeHTTPClient
    }

    func loadProducts() {
         products = storeHTTPClient.loadProducts
    }

    func getProductById(_ productId: Int) -> Product? {
        // fetch product by id
    }

    func getProductsByCategory(_ categoryId: Int) -> [Product] {
       // get products by category
    }

    func getCategories() -> [Category] {
        categories = storeHTTPClient.loadCategories()
    }
}

@main
struct StoreApp: App {

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(Catalog(client: CatalogHTTPClient()))
                .environmentObject(Ordering(client: OrderingHTTPClient()))

        }
    }
}

struct CatalogListScreen: View {

    @EnvironmentObject private var catalog: Catalog

    var body: some View {
        List(catalog.products) { product in
            Text(product.name)
        }.task {
            do {
                try await catalog.loadProducts()
            } catch {
                print(error.localizedDescription)
            }
        }
    }
}

struct AdminDashboardScreen: View {

    @EnvironmentObject private var catalog: Catalog
    @EnvironmentObject private var ordering: Ordering

    var body: some View {
        VStack {
            List(catalog.products) { product in
                Text(product.name)
            }
            List(ordering.allOrders) { order in
                Text(order.status)
            }
        }.task {
            do {
                try await catalog.loadProducts()
                try await ordering.loadOrders()
            } catch {
                print(error.localizedDescription)
            }
        }
    }
}

• Permission has been granted from the original author of the image to use it in this article.

• This image has been updated and the permission has been granted from the original author of the image to use it in this article.

View Specific Logic

struct ContentView: View {

    let httpClient: HTTPClientProtocol
    @State private var products: [Product] = []
    @State private var min: Double?
    @State private var max: Double?
    @State private var filteredProducts: [Product] = []

    private func filterProducts() {

        guard let min = min,
              let max = max else { return }

        filteredProducts = products.filter {
            $0.price >= min && $0.price <= max
        }
    }

    private var isFormValid: Bool {

        guard let min = min,
              let max = max else { return false }

        return min < max
    }

    var body: some View {
        VStack {
            HStack {
                TextField("Min", value: $min, format: .number)
                    .textFieldStyle(.roundedBorder)
                TextField("Max", value: $max, format: .number)
                    .textFieldStyle(.roundedBorder)
            }
            Text("Max must be larger than min.")
                .frame(maxWidth: .infinity, alignment: .leading)
                .font(.caption)
                .padding([.bottom], 20)

            Button("Apply") {
                filterProducts()
            }

            .disabled(!isFormValid)

            List(filteredProducts.isEmpty ? products: filteredProducts) { product in
                HStack {
                    Text(product.title)
                    Spacer()
                    Text(product.price, format: .currency(code: "USD"))
                }
            }
            .task {
                do {
                    products = try await httpClient.loadProducts()
                } catch {
                    print(error)
                }
        }
        }.padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView(httpClient: HTTPClientStub())
    }
}

struct ProductFilterForm {

    var min: Double?
    var max: Double?

    func filterProducts(_ products: [Product]) -> [Product] {

        guard let min = min,
              let max = max else { return [] }

        return products.filter {
            $0.price >= min && $0.price <= max
        }
    }
}

func test_user_can_filter_products_by_price() throws {

        self.continueAfterFailure = false

        let products = [
            Product(id: 1, title: "Product 1", price: 10),
            Product(id: 2, title: "Product 2", price: 100),
            Product(id: 3, title: "Product 3", price: 200),
            Product(id: 4, title: "Product 4", price: 500)
        ]

        let expectedFilteredProducts = [
            Product(id: 2, title: "Product 2", price: 100),
            Product(id: 3, title: "Product 3", price: 200),
            Product(id: 4, title: "Product 4", price: 500)
        ]

        let productFilterForm = ProductFilterForm(min: 100, max: 500)
        let filteredProducts = productFilterForm.filterProducts(products)

        for expectedProduct in expectedFilteredProducts {

            let product = filteredProducts.first { $0.id == expectedProduct.id }

            XCTAssertNotNil(product)
            XCTAssertEqual(product!.title, expectedProduct.title)
            XCTAssertEqual(product!.price, expectedProduct.price)
        }

    }

  func test_user_can_filter_products_based_on_price() {

        let app = XCUIApplication()
        app.launchEnvironment = ["ENV": "TEST"]
        app.launch()

        app.textFields["minTextField"].tap()
        app.textFields["minTextField"].typeText("100")

        app.textFields["maxTextField"].tap()
        app.textFields["maxTextField"].typeText("500")

        app.buttons["applyButton"].tap()

        // assert that the count is correct
        XCTAssertEqual(3, app.collectionViews["productList"].cells.count)
        // assert that the items are correct
        XCTAssertEqual("Product 2", app.collectionViews["productList"].staticTexts["Product 2"].label)
        XCTAssertEqual("Product 3", app.collectionViews["productList"].staticTexts["Product 3"].label)
        XCTAssertEqual("Product 4", app.collectionViews["productList"].staticTexts["Product 4"].label)
    }

Screens vs Views

• MovieDetailScreen

• HomeScreen

• LoginScreen

• RegisterScreen

• SettingsScreen

• RatingsView

• MessageView

• ReminderListView

• ReminderCellView

Validation

struct LoginScreen: View {

    @State private var username: String = ""
    @State private var password: String = ""

    private var isFormValid: Bool {
        !username.isEmptyOrWhiteSpace && !password.isEmptyOrWhiteSpace
    }

    var body: some View {
        Form {
            TextField("Username", text: $username)
            TextField("Password", text: $password)
            Button("Login") {

            }.disabled(!isFormValid)
        }
    }
}

struct LoginFormConfig {

    var username: String = ""
    var password: String = ""

    var isFormValid: Bool {
        !username.isEmptyOrWhiteSpace && !password.isEmptyOrWhiteSpace
    }
}

struct LoginScreen: View {

    @State private var loginFormConfig: LoginFormConfig = LoginFormConfig()

    var body: some View {
        Form {
            TextField("Username", text: $loginFormConfig.username)
            TextField("Password", text: $loginFormConfig.password)
            Button("Login") {

            }.disabled(!loginFormConfig.isFormValid)
        }
    }
}

final class LearnTests: XCTestCase {

    func test_login_form_validates_successfully() {

        let expectedOutputs: [[String: Any]] = [
            ["username": "johndoe", "password": "password", "isFormValid": true],
            ["username": "", "password": "password", "isFormValid": false],
            ["username": "johndoe", "password": " ", "isFormValid": false],
            ["username": "", "password": " ", "isFormValid": false],
            ["username": "   ", "password": "password", "isFormValid": false],
            ["username": " johndoe", "password": " password", "isFormValid": true]
        ]

        for expectedOutput in expectedOutputs {
            let username = expectedOutput["username"] as! String
            let password = expectedOutput["password"] as! String
            let isFormValid = expectedOutput["isFormValid"] as! Bool

            let loginFormConfig = LoginFormConfig(username: username, password: password)
            XCTAssertEqual(loginFormConfig.isFormValid, isFormValid)
        }
    }
}

Displaying Errors

struct ErrorWrapper: Identifiable {
    let id = UUID()
    let error: Error
    let guidance: String
}

struct ErrorView: View {

    let errorWrapper: ErrorWrapper

    var body: some View {
        VStack {
            Text("Error has occured in the application.")
                .font(.headline)
                .padding([.bottom], 10)
            Text(errorWrapper.error.localizedDescription)
            Text(errorWrapper.guidance)
                .font(.caption)
        }.padding()
    }
}

class ErrorState: ObservableObject {
    @Published var errorWrapper: ErrorWrapper?
}

@main
struct StoreApp: App {

    @StateObject private var errorState = ErrorState()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(errorState)
                .sheet(item: $errorState.errorWrapper) { errorWrapper in
                    ErrorView(errorWrapper: errorWrapper)
                }
        }
    }
}

Grouping View Events

struct ReminderCellView: View {

    let index: Int
    let onChecked: (Int) -> Void
    let onDelete: (Int) -> Void

    var body: some View {
        HStack {
            Image(systemName: "square")
                .onTapGesture {
                    onChecked(index)
                }
            Text("ReminderCellView \(index)")
            Spacer()
            Image(systemName: "trash")
                .onTapGesture {
                    onDelete(index)
                }
        }
    }
}

struct ContentView: View {

    var body: some View {
        List(1...20, id: \.self) { index in
            ReminderCellView(index: index, onChecked: { index in
                // do something
            }, onDelete: { index in
                // do something
            })
        }
    }
}

enum ReminderCellEvents {
    case onChecked(Int)
    case onDelete(Int)
}

struct ReminderCellView: View {

    let index: Int
    let onEvent: (ReminderCellEvents) -> Void

    var body: some View {
        HStack {
            Image(systemName: "square")
                .onTapGesture {
                    onEvent(.onChecked(index))
                }
            Text("ReminderCellView \(index)")
            Spacer()
            Image(systemName: "trash")
                .onTapGesture {
                    onEvent(.onDelete(index))
                }
        }
    }
}

struct ContentView: View {

    var body: some View {
        List(1...20, id: \.self) { index in
            ReminderCellView(index: index) { event in
                switch event {
                    case .onChecked(let index):
                        print(index)
                    case .onDelete(let index):
                        print(index)
                }
            }
        }
    }
}

Navigation

enum Routes: Hashable {
    case catalog(CatalogRoutes)
    case inventory(InventoryRoutes)

    enum CatalogRoutes: Hashable {
        case home
        case detail(Category)

    }

    enum InventoryRoutes: Hashable {
        case home
        case detail(Product)
    }
}

class NavigationState: ObservableObject {
    @Published var routes: [Routes] = []
}

@main
struct LearnApp: App {

    @StateObject private var navigationState = NavigationState()

    var body: some Scene {
        WindowGroup {
            NavigationStack(path: $navigationState.routes) {
                ContentView()
                    .navigationDestination(for: Routes.self) { route in
                        switch route {
                            case .catalog(let catalogRoutes):
                                switch catalogRoutes {
                                    case .home:
                                        Text("Home View")
                                    case .detail(let category):
                                        // show category detail view
                                        Text(category.name)
                                }
                            case .inventory(let inventoryRoutes):
                                switch inventoryRoutes {
                                    case .home:
                                        // show home view
                                        Text("Home View")
                                    case .detail(let product):
                                        // show product details View
                                        Text(product.name)
                                }
                        }
                    }
            }.environmentObject(navigationState)
        }
    }
}

struct CatalogRouter {

    let routes: CatalogRoutes

    @ViewBuilder
    func configure() -> some View {
        switch routes {
            case .detail(let category):
                return Text(category.name)
        }
    }
}

struct InventoryRouter {
    let routes: InventoryRoutes

    // view builder
    @ViewBuilder
    func configure() -> some View {
        switch routes {
            case .detail(let product):
                Text(product.name)
            case .home:
                Text("Home")
        }
    }
}

@main
struct LearnApp: App {

    @StateObject private var navigationState = NavigationState()

    var body: some Scene {
        WindowGroup {
            NavigationStack(path: $navigationState.routes) {
                ContentView()
                    .navigationDestination(for: Routes.self) { route in
                        switch route {
                            case .catalog(let routes):
                                CatalogRouter(routes: routes).configure()
                            case .inventory(let routes):
                                InventoryRouter(routes: routes).configure()
                        }
                    }
            }.environmentObject(navigationState)
        }
    }
}

struct ContentView: View {

    @EnvironmentObject private var navigationState: NavigationState

    var body: some View {

        VStack {

            Button("Go to Catalog") {
                navigationState.routes.append(.catalog(.detail(Category(name: "Category 1"))))
            }

            Button("Go to Inventory") {
                navigationState.routes.append(.inventory(.detail(Product(name: "Product 1"))))
            }

        } .padding()
    }
}

Testing

Not all tests are created equal

Test behavior not implementation

1. When a customer withdraw amount and has insufficient funds then charge an overdraft fee.

2. The number of stocks specified by customer are submitted for trade at a specified price, once the limit has reached.

class Webservice {

    func fetchProducts() async throws -> [Product] {
        // ignore the hard-coded URL. We can inject the URL from using test configuration.
        let url = URL(string: "https://test.store.com/api/v1/products")!
        let (data, _) = try await URLSession.shared.data(from: url)
        return try JSONDecoder().decode([Product].self, from: data)
    }

}

class ProductListViewModel: ObservableObject {

    @Published var products: [ProductViewModel] = []

    func populateProducts() async {
        do {
            let products = try await Webservice().fetchProducts()
            self.products = products.map(ProductViewModel.init)
        } catch {
            print(error)
        }
    }

}

struct ProductViewModel: Identifiable {

    private let product: Product

    init(product: Product) {
        self.product = product
    }

    var id: Int {
        product.id
    }

    var title: String {
        product.title
    }
}


struct ProductListScreen: View {

    @StateObject private var vm = ProductListViewModel()

    var body: some View {
        List(vm.products) { product in
            Text(product.title)
        }.task {
            await vm.populateProducts()
        }
    }
}

protocol WebserviceProtocol {
    func fetchProducts() async throws -> [Product]
}

class Webservice: WebserviceProtocol {

    func fetchProducts() async throws -> [Product] {

        let url = URL(string: "https://test.store.com/api/v1/products")!
        let (data, _) = try await URLSession.shared.data(from: url)
        return try JSONDecoder().decode([Product].self, from: data)
    }
}

class MockedWebService: WebserviceProtocol {
    func fetchProducts() async throws -> [Product] {
        return [Product(id: 1, title: "Product 1"), Product(id: 2, title: "Product 2")]
    }
}

class ProductListViewModel: ObservableObject {

    private let webservice: WebserviceProtocol
    @Published var products: [ProductViewModel] = []

    init(webservice: WebserviceProtocol) {
        self.webservice = webservice
    }

    func populateProducts() async {
        do {
            let products = try await Webservice().fetchProducts()
            self.products = products.map(ProductViewModel.init)
        } catch {
            print(error)
        }
    }

}

struct ProductListScreen: View {

    @StateObject private var vm = ProductListViewModel(webservice: WebserviceFactory.create())

    var body: some View {
        List(vm.products) { product in
            Text(product.title)
        }.task {
            await vm.populateProducts()
        }
    }
}

final class ProductsTests: XCTestCase {

    func test_populate_products() async throws {

        let mockedWebService = MockedWebService()
        let productListVM = ProductListViewModel(webservice: mockedWebService)

        await productListVM.populateProducts()

        // This line is verifying the implementation detail.
        // Implementation details can change
        // fetchProducts can change to getProducts and the test will fail.
        verify(mockedWebService.fetchProducts()).wasCalled()

        XCTAssertEqual(2, productListVM.products.count)
    }
}

verify(mockedWebService.fetchProducts()).wasCalled()

End to End Testing

final class ProductTests: XCTestCase {

    private var webservice: Webservice!
    // products
    let products = [Product(id: 1, title: "Handmade Fresh Table"),Product(id: 2, title: "Durable Water Bottle")]

    override func setUp() {
        // make sure the Webservice is using the TEST server endpoints and not PRODUCTION
        webservice = Webservice()

        // add few products // seeding the database
        for product in products {
            await webservice.addProduct(product: product)
        }
    }

    func test_display_list_of_all_products() async {

        let app = XCUIApplication()
        app.launch()

        let productList = app.tables["productList"]

        // check if the item numbers is correct
        XCTAssertEqual(productList.tables.cells.count, 2)

        // check if the correct items are displayed
        for(index, product) in products.enumerated() {
            let cell = productList.cells.element(boundBy: index)
            XCTAssertEqual(cell.staticTexts["productTitle"].label, product.title)
        }

    }

    override func tearDown() async throws {
        // make sure to delete ALL records from the database so future test results are not influenced
        await webservice.deleteProductById(productId: 1)
        await webservice.deleteProductById(productId: 2)
    }

}

What about Integration Testing

// This test is generated by ChatGPT AI
import XCTest

class IntegrationTests: XCTestCase {
    func testLogin() {
        // Set up the URL for the login endpoint
        let url = URL(string: "https://api.example.com/login")!

        // Create a URL request
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")

        // Set the body of the request to a JSON object with the login credentials
        let body = ["username": "user123", "password": "password"]
        request.httpBody = try! JSONSerialization.data(withJSONObject: body)

        // Create a URLSession and send the request
        let session = URLSession.shared
        let task = session.dataTask(with: request) { data, response, error in
            // Make sure there is no error
            XCTAssertNil(error)

            // Check the response status code
            let httpResponse = response as! HTTPURLResponse
            XCTAssertEqual(httpResponse.statusCode, 200)

            // Check the response data
            XCTAssertNotNil(data)
            let responseBody = try! JSONSerialization.jsonObject(with: data!, options: []) as! [String: Any]
            XCTAssertEqual(responseBody["status"], "success")
        }
        task.resume()
    }
}

Code Coverage

class BankAccount {

    private(set) var balance: Double

    init(balance: Double) {
        self.balance = balance
    }

    func deposit(_ amount: Double) {
        self.balance += amount
    }

    func withdraw(_ amount: Double) {
        self.balance -= amount
    }

}

final class BankAccountTests: XCTestCase {

    func test_deposit_amount() {

        let bankAccount = BankAccount(balance: 0)
        bankAccount.deposit(100)
        XCTAssertEqual(100, bankAccount.balance)

    }
}

Unit Testing, Data Access and File Access

storeDescription.type = NSInMemoryStoreType

• No removal of test data

• Run faster

• Can be initialized before each test run

Testing View Model Does NOT Validate the User Interface

class CounterViewModel: ObservableObject {

    @Published var count: Int = 0

    func increment() {
        count += 1
    }
}

struct ContentView: View {

    @StateObject private var counterVM = CounterViewModel()

    var body: some View {
        VStack {
            Text("\(counterVM.count)")
            Button("Increment") {
                counterVM.increment()
            }
        }
    }
}

import XCTest
@testable import Learn

final class LearnTests: XCTestCase {

    func test_user_updated_count() {
        let vm = CounterViewModel()
        vm.increment()
        XCTAssertEqual(1, vm.count)
    }

}

final class LearnUITests: XCTestCase {

    func testExample() throws {
        // UI tests must launch the application that they test.
        let app = XCUIApplication()
        app.launch()

        app.buttons["incrementButton"].tap()
        XCTAssertEqual("1", app.staticTexts["countLabel"].label)
    }
}

The Ideal test

Conclusion