Noticed that previews do not work when I use a viewModel in a composable. How do you get around this...

# compose

[Jeff]

Noticed that previews do not work when I use a viewModel in a composable. How do you get around this?

[Albert Chang]

https://kotlinlang.slack.com/archives/CJLTWPH7S/p1618598956479500?thread_ts=1618598414.479200&cid=CJLTWPH7S

[Bryan Herbst]

I’m generally creating two composables- one that uses the view model (either as a parameter or via the viewModels() extension function) and one that only takes in the state I need. E.g.:

@Composable
fun AccountScreen(
  viewModel: AccountViewModel
) {
  AccountScreen(viewModel.screenState)
}

@Composable
private fun AccountScreen(
  state: AccountScreenState
) {
  // ...
}

// Now you can actually write a preview
@Preview
@Composable
private fun LoggedInAccountPreview() {
  AccountScreen(AccountScreenState.LoggedIn)
}

[Ian Lake]

Check out the previous thread about this same question: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1623969480386600?thread_ts=1623969480.386600&cid=CJLTWPH7S

[brandonmcansh]

preview the one taking in state and populate it with dummy data, as mentioned

[Jeff]

What if the composable takes in a viewmodel to make a call like viewModel.login()

[brandonmcansh]

hoist that up back to the parent composable via a lambda

[brandonmcansh]

actioner: (Event) -> Unit

[Jeff]

Now you are talking.

[Jeff]

So practically there is no way to preview a screen with many composables if I'm using the viewModel?

[Ian Lake]

Did you read the thread I linked and the answer provided there? https://kotlinlang.slack.com/archives/CJLTWPH7S/p1623779342232600?thread_ts=1623778752.232300&cid=CJLTWPH7S

[Jeff]

Yeah @Ian Lake

When I pass it in as a parameter, and include a default value for the ViewModel that pulls from Koin, the composable does not display. I get the message Koin cannot be initialized.

[Ian Lake]

The whole point of passing it in is so that your preview code can override the default value and provide a proper test/fake for your preview to use

[Jeff]

Okay. How do I provide a test/fake for a ViewModel

[Ian Lake]

What does your preview need to function? You might look at any of the many mocking libraries out there or you might want to just call your ViewModel's constructor directly, passing in mocks for any other dependencies it has. If you're unfamiliar with the terms mocks and fakes, there are quite a few blog posts out there

[Jeff]

Thanks. I'll try a mocking library.