Is there a way to mock the viewmodels of an application that uses SwiftUI and Combine? I always find articles about mocking services used by the viewmodel but never mocking a viewmodel itself.
I tried to create protocols for each viewmodel. Problem: the #Published wrapper cannot be used in protocols. It seems like there are no solutions...
Thanks for your help
Using a protocol type as #ObservableObject or #StateObject would not work. Inheritance might be a solution (like Jake suggested), or you could go with a generic solution.
protocol ContentViewModel: ObservableObject {
var message: String { get set }
}
Your view model would be simple.
final class MyViewModel: ContentViewModel {
#Published var message: String
init(_ message: String = "MyViewModel") {
self.message = message
}
}
On the other hand, your views would be more complex using a constrained generic.
struct ContentView<Model>: View where Model: ContentViewModel {
#ObservedObject
var viewModel: Model
var body: some View {
VStack {
Text(viewModel.message)
Button("Change message") {
viewModel.message = "🥳"
}
}
}
}
The disadvantage is that you have to define the generic concrete type when using the view --- inheritance could avoid that.
// your mock implementation for testing
final class MockViewModel: ContentViewModel {
#Published var message: String = "Mock View Model"
}
let sut = ContentView<MockViewModel>(viewModel: MockViewModel())
If the view model is only a model, you should probably not mock that at all, instead you would mock the thing that modifies the view model. If your view model actually owns the functions and things that updates itself, then you would want to mock it directly. In which case you can use protocols to mock the view model. It would look a little like this.
protocol ViewModel {
var title: String { get set }
}
class MyViewModel: ViewModel {
#Published var title: String = "Page title"
}
class MockViewModel: ViewModel {
#Published var title: String = "MockPage title"
}
However, this is probably an instance where I would prefer inheriting a class instead of adhering to a protocol. Then I would override the functionality of the class for the mock.
open class ViewModel {
#Published var title: String
open fun getPageTitle() {
title = "This is the page title"
}
}
class MockViewModel: ViewModel {
override fun getPageTitle() {
title = "some other page title"
}
}
Either way would work really. The inheritance way is just less verbose in your test suite if your View Model has functionality too.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 months ago.
Improve this question
I have been been reading a lot of about SwiftUI architecture. I read about MVVM, TCA, MVC etc. I am writing an app, where I have to get data from the JSON API and display it on the screen. I am following Apple's code samples and here is what I am doing.
For that I created a NetworkModel.
class NetworkModel {
func getPosts() async throws -> [Post] {
let (data, _) = try await URLSession.shared.data(from: URL(string: "https://jsonplaceholder.typicode.com/posts")!)
let posts = try JSONDecoder().decode([Post].self, from: data)
return posts
}
}
Post.swift
struct Post: Decodable {
let id: Int
let title: String
let body: String
}
PostListView
struct PostListView: View {
#State private var posts: [Post] = []
let networkModel = NetworkModel()
var body: some View {
List(posts, id: \.id) { post in
Text(post.title)
}.task {
do {
await networkModel.getPosts()
} catch {
print(error)
}
}
}
}
Everything works. Is this the right approach? I come from React background so in React if there is a component that is using state and that state will only be used for that component then we simply use private/local state.
I did not create any View Models etc for this app. Are VM's going to benefit me in someway?
The following example code is how I would approach using a NetworkModel.
Caveat, without dealing with the errors.
It creates a NetworkModel as a ObservableObject, which will make it easier
to update the data and have the UI refreshed automatically. The code uses
only one source of truth, the #StateObject var networkModel = NetworkModel(),
and nothing else. This, I believe is important for an architecture.
Is this the right approach?, well that is up to you to determine, by understanding
the various info you read, and your own experience.
struct Post: Decodable, Identifiable {
let userId: Int
let id: Int
let title: String
let body: String
}
#MainActor
class NetworkModel: ObservableObject {
#Published var posts: [Post] = []
func getPosts() async throws {
guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else {return}
do {
let (data, _) = try await URLSession.shared.data(from: url)
self.posts = try JSONDecoder().decode([Post].self, from: data)
} catch {
print(error)
}
}
}
struct ContentView: View {
#StateObject var networkModel = NetworkModel()
var body: some View {
List (networkModel.posts) { post in
Text(post.title)
}
.task {
do {
try await networkModel.getPosts()
} catch {
print(error)
}
}
}
}
The info at the following link, gives some good explanations about how to manage data in your app and how SwiftUI has already a lot of structure/architecture built in to help you:
https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
SwiftUI is an architecture in itself, it's best to just learn it. E.g. learn the View struct, learn how body func is called if a let property or an #State or #Binding changes. It's really quite simple.
I have content that is loaded in the background.
Loading is a long running task and I want to show data as soon as it's available.
My view show loaded content and a ProgressView whenever there is more content to be expected.
struct MyListView : View
{
#MyContent
var content: [MyItem]
var body: some View
{
List
{
//...show content elements
if content.hasMoreData()
{
ProgressView().task
{
await _content.load(.end)
}
}
}
}
}
I use a custom propertyWrapper to load the data.
#propertyWrapper
struct MyContent<E> : DynamicProperty
{
final class Container<E> : ObservableObject
{
var wrappedValue : [E]
}
let container: Container<E>
var wrappedValue : [E] { container.wrappedValue }
func load() async
{
//...load more content
}
}
When the view loads, the ProgressView spins and the load function is called.
After more data has been loaded the view is refreshed. Unfortunately however the task on the ProgressView is not renewed. The load function is not called again.
I also tried wrapping the MyContent wrapper in an ObservableObject but with similar effects.
final class MyBox<E> : ObservableObject
{
#MyContent
var content: [MyItem]
func load() async
{
await _content.load(position)
await send()
}
#MainActor
private func send() async
{
objectWillChange.send()
}
}
If I look at FetchRequest which is a struct and which has a batchLimit, I think it should not be necessary to use MyBox or an ObservableObject' just to trigger and additional load` call.
How can I force the ProgressView to run the task again?
I am new to SwiftUI and programming in general. I am trying to pass data and create navigation between different views in my app.
For my data model, I am using MVVM format even though my data is entirely static right now. I have two data models that I am trying to connect via enumeration: CategoryModel and SubCategoryModel (see below).
CategoryModel:
import Foundation
import SwiftUI
enum Category: String, CaseIterable, Identifiable {
var id: String { self.rawValue }
case explicit = "Explicit"
case adventure = "Adventure"
case artists = "Artists"
case holidays = "Holidays"
case movies = "Movies"
case people = "People"
case tasks = "Tasks"
case feelings = "Feelings"
case lifestyle = "Lifesytle"
case party = "Party"
case sports = "Sports"
}
//Root data -> set up data structure
//make Identifiable for ForEach looping in other views
struct CategoryModel: Identifiable {
let id = UUID().uuidString
let category: Category
let categoryTitle: String
let description: String
let isPurchase: Bool
let categoryImage: Image
}
class CategoryViewModel: ObservableObject {
#Published var gameCategories: [CategoryModel] = CategoryModel.all
#Published var filteredPurchase: [CategoryModel] = []
init() {
filterByPurchase()
}
func filterByPurchase() {
filteredPurchase = gameCategories.filter({ $0.isPurchase })
}
}
extension CategoryModel {
static let all = [
CategoryModel(
category: .explicit,
categoryTitle: "Adults Only",
description: "For those spicy, intimate moments.",
isPurchase: true,
categoryImage: Image(uiImage: #imageLiteral(resourceName: "Explicit"))
),
CategoryModel(
category: .adventure,
categoryTitle: "Call of the Wild",
description: "[Insert description here]",
isPurchase: false,
categoryImage: Image(uiImage: #imageLiteral(resourceName: "Adventure"))
),
CategoryModel(
category: .artists,
categoryTitle: "By the Artist",
description: "[Insert description here]",
isPurchase: false,
categoryImage: Image(uiImage: #imageLiteral(resourceName: "Artists"))
),
]
}
SubCategoryModel:
import Foundation
import SwiftUI
//Root data -> set up data structure
//make Identifiable for ForEach looping in other views
struct SubCategoryModel: Identifiable {
let id = UUID().uuidString
let category: Category
let subcategory: String
let subtitle: String
let subdescription: String
let instruction: String
let cardImage: Image
}
class SubCategoryViewModel: ObservableObject {
#Published var gameSubCategories: [SubCategoryModel] = SubCategoryModel.allSubs
#Published var filteredCategory: [SubCategoryModel] = []
#Published var categoryType: Category = .explicit
init() {
filterByCategory()
}
func filterByCategory() {
DispatchQueue.global(qos: .userInteractive).async {
let results = self.gameSubCategories
.lazy
.filter { item in
return item.category == self.categoryType
}
DispatchQueue.main.async {
self.filteredCategory = results.compactMap({ item in
return item
})
}
}
}
}
extension SubCategoryModel {
static let allSubs = [
SubCategoryModel(
category: .explicit,
subcategory: "Significant Other",
subtitle: "Bedroom Eyes",
subdescription: "[Insert sub-description here]",
instruction: "Instructions:\n \n1) Each player pick a song\n2) Be funny, genuine, or a maverick\n3) Enjoy the trip down memory lane",
cardImage: Image(uiImage: #imageLiteral(resourceName: "Explicit"))
),
SubCategoryModel(
category: .explicit,
subcategory: "Dating",
subtitle: "First Date",
subdescription: "[Insert sub-description here]",
instruction: "Instructions:\n \n1) Each player pick a song\n2) Be funny, genuine, or a maverick\n3) Enjoy the trip down memory lane",
cardImage: Image(uiImage: #imageLiteral(resourceName: "Explicit"))
),
SubCategoryModel(
category: .adventure,
subcategory: "Hiking",
subtitle: "Bedroom Eyes",
subdescription: "[Insert sub-description here]",
instruction: "Instructions:\n \n1) Each player pick a song\n2) Be funny, genuine, or a maverick\n3) Enjoy the trip down memory lane",
cardImage: Image(uiImage: #imageLiteral(resourceName: "Adventure"))
),
]
}
My goal is to click on a card from the CategoryView screen and navigate to the SubCategoryView via a navigation link. I want the SubCategoryView to show a filtered list of subcategories based on the category selected on the CategoryView screen.
CategoryView to SubCategoryView GIF
CategoryLoop code snippet:
struct CategoryLoop: View {
let categories: [CategoryModel]
var body: some View {
ZStack {
ScrollView {
VStack {
LazyVGrid(columns: [GridItem(.adaptive(minimum: 150), spacing: 20)], spacing: 20) {
ForEach(categories) { item in
NavigationLink(destination: SubCategoryView()
.navigationTitle(item.category.rawValue)) {
CategoryCard(category: item)
}
}
}
Based on the code in my CategoryLoop file, what is the best/easiest way to pass my model data and filter the list on the SubCategoryView? I am having trouble figuring out how to use the enumeration. Is it possible to write a function that would update #Published var categoryType: Category = .explicit (see SubCategoryModel) based on the card clicked in the LazyVGrid? Also, if you have suggestion on how to better organise my data models, please let me know.
Trying to go from UIKit to SwiftUI I keep wondering how to apply a service layer properly and use observables to publish updates from the service layer all the way out through the view model and to the view.
I have a View that has a View model, which derives from ObservableObject and publishes a property, displayed in the view. Using #EnvironmentObject I can easily access the view model from the view.
struct SomeView: View {
#EnvironmentObject var someViewModel: SomeViewModel
var body: some View {
TextField("Write something here", text: $someViewModel.someUpdateableProperty)
}
}
class SomeViewModel: ObservableObject {
#Published var someUpdateableProperty: String = ""
var someService: SomeService
init(someService: SomeService) {
self.someService = someService
}
// HOW DO I UPDATE self.someUpdateableProperty WHEN someService.someProperty CHANGES?
// HOW DO I UPDATE someService.someProperty WHEN self.someUpdateableProperty CHANGES?
}
class SomeService {
var someProperty: String = ""
func fetchSomething() {
// fetching
someProperty = "Something was fetched"
}
func updateSomething(someUpdateableProperty: String) {
someProperty = someUpdateableProperty
}
}
In my head a simple way could be to forward the property i.e. using computed property
class SomeViewModel: ObservableObject {
#Published var someUpdateableProperty: String {
get {
return someService.someProperty
}
set {
someService.someProperty = value
}
}
var someService: SomeService
init(someService: SomeService) {
self.someService = someService
}
}
Another approach could be if it was possible to set the two published properties equal to each other:
class SomeService: ObservableObject {
#Published var someProperty: String = ""
func fetchSomething() {
// fetching
someProperty = "Something was fetched"
}
}
class SomeViewModel: ObservableObject {
#Published var someUpdateableProperty: String = ""
var someService: SomeService
init(someService: SomeService) {
self.someService = someService
someUpdateableProperty = someService.someProperty
}
}
What is the correct way to forward a publishable property directly through a view model?
In UIKit I would use delegates or closures to call from the service back to the view model and update the published property, but is that doable with the new observables in SwiftUI?
*I know keeping the state in the service is not a good practice, but for the example let's use it.
There are, of course, lots of ways to do this, so I can't speculate on the "correct" way. But one way to do this is to remember that ObservableObject only does one thing - it has an objectWillChange publisher, and that publisher sends automatically when any of the #Published properties changes.
In SwiftUI, that is taken advantage of by the #ObservedObject, #StateObject and #EnvironmentObject property wrappers, which schedule a re-rendering of the view whenever that publisher sends.
However, ObservableObject is actually defined within Combine, and you can build your own responses to the publisher.
If you make SomeService an ObservableObject as in your last code example, then you can observe for changes in SomeViewModel:
private var cancellables = Set<AnyCancellable>()
init(someService: SomeService) {
self.someService = someService
someService.objectWillChange
.sink { [weak self] _ in
self?.objectWillChange.send()
}
.store(in: &cancellables)
}
Now, any published change to the service will cascade through to observers of the view model.
It's important to note that this publisher is will change, not did change, so if you are surfacing any properties from the service in your view model, you should make them calculated variables. SwiftUI coalesces all of the will change messages, then schedules a single view update which takes place on the next run loop, by which point the new values will be in place. If you extract values from within the sink closure, they will still represent the old data.
I have the following view:
struct Menu: View {
let sctions:[TestSection] = [
TestSection(id: 0, name: "One", items: [
ListItem(id: 0, name: "1"),
ListItem(id: 1, name: "2"),
ListItem(id: 2, name: "3"),
ListItem(id: 3, name: "4")
]),
TestSection(id: 1, name: "Two", items: [
ListItem(id: 4, name: "4"),
ListItem(id: 5, name: "5"),
ListItem(id: 6, name: "6"),
ListItem(id: 7, name: "7")
]),
TestSection(id: 2, name: "Three", items: [
ListItem(id: 8, name: "8"),
ListItem(id: 9, name: "9"),
])
]
var body: some View {
NavigationView {
List {
ForEach(sctions) { section in
Section(header: Text(section.name)) {
ForEach(section.items) { item in
TestCell(item: item)
}
}
}
}
.listStyle(.plain)
.navigationBarTitle("Title")
}
}
}
struct TestCell: View {
#ObservedObject private var model:ItemModel
let item:ListItem
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id)
}
var body: some View {
Text("item: \(item.name)")
}
}
class ItemModel:ObservableObject {
#Published var someProperty:Int
let itemId:Int
init(itemId:Int) {
self.itemId = itemId
self.someProperty = 0
}
}
I am trying to decide how to handle child views in SwiftUI from a model layer point of view.
One option is #ObservedObject in the child view. The parent created the model and sets it on the child or the parent passes in a property on the child that then allows the child to init the model in its initializer:
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id). // <<---- HERE
}
Then looking at this, I wonder if this is less performant than using a #StateObject in the child view that would manage its model's lifecycle.
So then I tried this:
struct TestCell: View {
#StateObject var model = ItemModel() // <<-- error "Missing argument for parameter 'itemId' in call"
let item:ListItem
var body: some View {
Text("item: \(item.name)")
}
}
Which, obviously shows the error:
I am not sure how to initialize ItemModel in TestCell when using the #StateObject approach.
The question I have is:
in this type of scenario, where I want each cell to have its own model (to handle model related logic like making network calls, updating model layer etc...) should I be creating the model as I instantiate the cell within the parent during cell creation, and setting it on the cell (#ObservedObject)?
Or should a cell use #StateObject for its model, and if so, how would I have the model initialize itself properly when it needs parameters, like let itemId:Int for example?
Your first option is not recommended because
init(item:ListItem) {
self.item = item
self.model = ItemModel(itemId:item.id). // <<---- HERE
}
it’s unsafe to create an observed object inside a view
https://developer.apple.com/documentation/swiftui/managing-model-data-in-your-app
You will find many questions in SO that talk about Views being unreliable. You'll also find the ones that tell people to do it this way but you will see issues with it.
If you use #StateObject var model: ItemModel = ItemModel() which is the only exception according to Apple for creating an ObservableObject In a View
And switch
let itemId:Int
in your ItemModel to
var itemId:Int = 0
Then in TestCell add to the outermost View
.onAppear(){
model.itemId = item.id
}
Or depending on your ParentView and its ViewModel you can create the ObservableObjects in the class ViewModel and pass it as a parameter for
#ObservedObject private var model:ItemModel
The important thing is that the workaround takes into consideration that an ObservableObject should not be created in a View with the exception of #StateObject. SwiftUI reserves the right to re-create any View whenever it decides that it is necessary.