Chapter 8: Building a Simple Detail View

Often in iOS development, table views or collection views just give a brief summary of the presented items. To figure out all the details of the shown items, the user has to select an item so that they can be redirected to the details. In the details view, the user can often interact with the shown item.

For example, in a mail app, the summary only shows the sender, the subject, and the first few lines of the mail. To read the complete mail and to answer it, the user has to open it in the details view.

In this chapter, we will build the details view for our to-do items. The chapter is structured as follows:

• Adding labels, a button, and a map
• Filling in the data
• Checking the to-do item

We start by adding the user interface elements to the view.

Technical requirements

The source code for this chapter is available here: 

https://github.com/PacktPublishing/Test-Driven-iOS-Development-with-Swift-Fourth-Edition/tree/main/chapter08

Adding labels, a button, and a map

We have done this so often already that you might guess what we have to do first. That's right, we need a test case class for our tests. Select the ToDoTests group in the project navigator in Xcode and add a new Unit Test Case Class called ToDoItemDetailsViewControllerTests. Make sure that it is added to the unit test target:

Figure 8.1 – The test case needs to be added to the unit test target

Remove the two template tests in the created test case class and add @testable import ToDo below the existing import statement:

// ToDoItemDetailsViewControllerTests.swift
import XCTest
@testable import ToDo 
class ToDoItemDetailsViewControllerTests: XCTestCase { 
  override func setUpWithError() throws {
  } 
  override func tearDownWithError() throws {
  }
}

The details view needs some labels to show the information of the to-do item. Let's start with the label for the...

Filling in the data

Follow these steps to update the user interface with the data from the to-do item:

1. We start with a new test. Add the following test method to ToDoItemDetailsViewControllerTests:

   // TodoItemDetailsViewControllerTests.swift
   func test_settingToDoItem_shouldUpdateTitleLabel() {
     let title = "dummy title"
     let toDoItem = ToDoItem(title: title)
     sut.toDoItem = toDoItem
   }

At this point, we get an error from Xcode that Value of type 'ToDoItemDetailsViewController' has no member 'toDoItem'.

2. Go to ToDoItemDetailsViewController and add the toDoItem property:

   // ToDoItemDetailsViewController.swift
   class ToDoItemDetailsViewController: UIViewController {
     @IBOutlet var titleLabel: UILabel!
     @IBOutlet var dateLabel: UILabel!
     @IBOutlet var locationLabel: UILabel!
     @IBOutlet var descriptionLabel: UILabel!
     @IBOutlet var mapView: MKMapView!
   ...

Checking the to-do item

When the user of the app taps the Done button, our app has to tell the to-do item store to change the item's status to Done. Follow these steps to implement that feature:

1. Add the following test method to ToDoItemDetailsViewControllerTests:

   // ToDoItemDetailsViewControllerTest.swift
   func test_sendingButtonAction_shouldCheckItem() {
     let toDoItem = ToDoItem(title: "dummy title")
     sut.toDoItem = toDoItem
     let storeMock = ToDoItemStoreProtocolMock()
     sut.toDoItemStore = storeMock
   }

ToDoItemDetailsViewController doesn't have a property for toDoItemStore. This means we have to pause writing this test and add this property first.

2. Go to ToDoItemDetailsViewController and add the toDoItemStore property:

   // ToDoItemDetailsViewController.swift
   var toDoItemStore: ToDoItemStoreProtocol?

3. Now we can finish the test:

   // ToDoItemDetailsViewControllerTests.swift
   func test_sendingButtonAction_shouldCheckItem...

Summary

In this chapter, we built a simple detail view controller following test-driven development. We learned how to test a view controller that is set up using a storyboard. And finally, we figured out what we have to do to test the action of a button.

The skills you gained in this chapter will help you in writing tests for all kinds of user interfaces, even those that are more complicated. You are now able to test the presence and the interaction of user interface elements with the rest of the code.

In the next chapter, we will write tests for a view that is created using SwiftUI. For that task, we will have to add a third-party library from GitHub to our test target.

Exercises

1. When the user selects the Done button to show the task as finished, the Done button should be disabled to show the user that this action was successful. Implement this feature.
2. Change the code so that the map view is hidden when no coordinate is set in the to-do item.