تبدیل نماهای کاتلین به تابع حالت – از صفر تا صد

1class ExampleView : RelativeLayout {
2
3    // Inflate layout, initialise subviews, etc 
4
5    fun updateContact() {
6        val contact = viewModel.getContact()
7
8        nameTextView.text = contact.name
9        phoneTextView.text = contact.phoneNumber
10
11        followButton.isSelected = contact.isFollowed
12        followButton.text = if (followButton.isSelected) "UNFOLLOW" else "FOLLOW"
13
14        Glide.with(context).load(Uri.parse(contact.icon)).into(iconImageView)
15    }
16
17    fun addContactToFavourites(view: View) {
18        if (followButton.isSelected) {
19            viewModel.removeFromFavourites()
20        } else {
21            viewModel.addToFavourites()
22        }
23
24        followButton.isSelected = !followButton.isSelected
25        followButton.text = if (followButton.isSelected) "UNFOLLOW" else "FOLLOW"
26    }
27}

1followButton.isSelected = contact.isFollowed
2
3// etc ... 
4
5if (followButton.isSelected) {
6  viewModel.removeFromFavourites()
7} else {
8  viewModel.addToFavourites()
9}
10
11// etc ...
12
13followButton.isSelected = !followButton.isSelected

1class ContactView
2@JvmOverloads
3constructor(context: Context?, attrs: AttributeSet? = null) : RelativeLayout(context, attrs) {
4
5    val nameTextView by lazy { findViewById<TextView>(R.id.contact_user_name) }
6
7    val phoneTextView by lazy { findViewById<TextView>(R.id.contact_phone_number) }
8
9    val iconImageView by lazy { findViewById<ImageView>(R.id.contact_image_icon) }
10
11    val followButton by lazy { findViewById<Button>(R.id.contact_follow_button) }
12
13    init {
14        LayoutInflater.from(context).inflate(R.layout.view_contact, this, true)
15    }
16}

1val newState = reducer(action, oldState)

1class ContactView {
2  
3  // etc ...
4  
5  interface ViewState {
6        val nameText: String
7        val phoneNumberText: String
8        val iconUri: Uri?
9        val isFollowButtonSelected: Boolean
10        val followButtonTitle: String
11    }
12}

1class ContactView {
2   
3   // etc ...
4  
5   fun redraw(viewState: ViewState) = with(viewState) {
6        nameTextView.text = nameText
7        phoneTextView.text = phoneNumberText
8        followButton.isSelected = isFollowButtonSelected
9        followButton.text = followButtonTitle
10        Glide.with(context).load(iconUri).into(iconImageView)
11   }
12}

1@Test
2fun contactViewIsRedrawnCorrectly() {
3  // given
4  val view = ContactView(....)
5  val state = ContactViewStateImpl(
6    nameText = "John Doe",
7    phoneNumberText = "+00 123 45 67890",
8    iconUri = "https://mock.api/image.png",
9    isFollowButtonSelected = true,
10    followButtonText = "UNFOLLOW")
11  
12  // when
13  view.redraw(viewState = state)
14  
15  // then
16  onView(withId(R.id.contact_user_name)).check(matches(withText("John Doe")))
17  onView(withId(R.id.contact_phone_number)).check(matches(withText("+00 123 45 67890")))
18  onView(withId(R.id.contact_image_icon)).check(matches(isDisplayed()))
19  onView(withId(R.id.contact_follow_button)).check(matches(isSelected())).check(matches(withText("UNFOLLOW")))                                            
20}

1class ContactView {
2  
3  var interactor: Interactor? = null
4  
5  // etc
6  
7  interface Interactor {
8    fun initialDataLoad()
9    fun addOrRemoveFromFavourites()
10  }
11}

1 class ContactView {
2   
3   var interactor: Interactor? = null
4    set(value) {
5      field = value
6      interactor?.initialDataLoad()
7    }
8   
9   // etc ...
10   
11   val followButton by lazy {
12    findViewById<Button>(R.id.contact_follow_button).apply {
13      setOnClickListener { interactor?.addOrRemoveFromFavourites() }
14    }
15   }
16   
17   // etc ...
18 }

1@Test
2fun interactionsWithContactViewToWorkAsExpected() {
3  // given
4  val view = ContactView(....)
5  val interactor = Mockito.mock(ExampleView.Interactor)
6  view.interactor = interactor
7  
8  // when
9  onView(withId(R.id.contact_follow_button)).perform(click())
10  
11  // then
12  Mockito.verify(interactor).initialDataLoad()
13  Mockito.verify(interactor).addOrRemoveFromFavourites()
14}

1class ContactView
2@JvmOverloads
3constructor(context: Context?, attrs: AttributeSet? = null) : RelativeLayout(context, attrs) {
4
5    var interactor: Interactor? = null
6        set(value) {
7            field = value
8            interactor?.initialDataLoad()
9        }
10
11    val nameTextView by lazy { findViewById<TextView>(R.id.contact_user_name) }
12
13    val phoneTextView by lazy { findViewById<TextView>(R.id.contact_phone_number) }
14
15    val iconImageView by lazy { findViewById<ImageView>(R.id.contact_image_icon) }
16
17    val followButton by lazy {
18        findViewById<Button>(R.id.contact_follow_button).apply {
19            setOnClickListener { interactor?.addOrRemoveFromFavourites() }
20        }
21    }
22
23    init {
24        LayoutInflater.from(context).inflate(R.layout.view_contact, this, true)
25    }
26
27    fun redraw(viewState: ViewState) = with(viewState) {
28        nameTextView.text = nameText
29        phoneTextView.text = phoneNumberText
30        followButton.isSelected = isFollowButtonSelected
31        followButton.text = followButtonTitle
32        Glide.with(context).load(iconUri).into(iconImageView)
33    }
34
35    interface ViewState {
36        val nameText: String
37        val phoneNumberText: String
38        val iconUri: Uri?
39        val isFollowButtonSelected: Boolean
40        val followButtonTitle: String
41    }
42
43    interface Interactor {
44        fun initialDataLoad()
45        fun addOrRemoveFromFavourites()
46    }
47}