This workshop will be retired on May 31, 2020.
KIF Testing22:49 with Josh Timonen
In this workshop we will learn the basics of KIF. Setup UI elements properly so KIF can see them, test whether a view is on screen, tap a tappable view like a button, and fill in a text field programmatically.
[SOUND] KIF is a UI testing framework 0:00 that stands for Keep It Functional. 0:04 While unit tests are great for testing the internals of your app, 0:09 a UI testing framework like KIF is great for iOS apps, 0:12 allowing you to test UI elements and navigation paths through your app. 0:15 In this workshop we'll learn the basics of KIF. 0:19 We'll set up UI elements properly so KIF can see them. 0:22 We'll test whether a view is on the screen, 0:26 tap a tappable view like a button, and fill in a text field programmatically. 0:28 So let's get started. 0:34 The first thing we'll do is set up KIF with CocoaPods, 0:35 which is really the easiest way to do it. 0:38 If you're unfamiliar with the CocoaPods, 0:41 see the Treehouse course that contains an introduction named iOS Tools. 0:43 We'll move pretty fast through the set up here. 0:47 First, we'll create a basic single view project, called Basic KIF Demo. 0:49 Xcode automatically generates a basic KIF demo test's target for 1:02 unit testing, but we won't be doing unit testing here. 1:06 We'll instead use it for our KIF tests. 1:10 If your project has unit tests running on this target, 1:13 you could instead add a new target in your project for KIF tests. 1:15 Now let's close out a Xcode, 1:19 as we'll be opening the work space file from now on after installing our pods. 1:21 In terminal, we'll go to our project folder and run pod in it. 1:26 [SOUND]. 1:29 Then in finder, we'll open the pod file and 1:38 text edit that was just generated in our project folder. 1:40 If we go to gethub.com/kif-framerwork/kif, 1:59 and scroll a little ways down the page, 2:04 to where it gives us CocoaPods info, 2:09 we can find the line to add the KIF pod to our podfile. 2:13 Alternatively, you can also go to cocoapods.org and search for 2:18 KIF to find the same information. 2:22 Back in our Podfile, in the tests target block, we'll paste in the Pod KIF line. 2:36 You'll also see they suggest adding exclusive true right before do on the test 2:53 target line to prevent some double linking issues. 2:58 So we'll add that here. 3:01 Don't forget the comma after your target name. 3:03 Next, we'll go back to the terminal and in our project folder we'll run Pod Install. 3:12 When that's complete, we'll go back to Xcode and 3:29 open the workspace file generated by Cocoapods. 3:32 We'll see we have our empty project along with the pods project, 3:35 which includes the KIF pod. 3:39 Under our BasicKifDemo project, in the BasicKifDemoTests folder, 3:49 let's right-click and create a new file. 3:54 We'll select Cocoa Touch Class, 4:02 then name it KifTests, subclassing KifTestCase. 4:06 Click Next, then see that we're adding this to our tests target. 4:14 Then hit Create. 4:17 In the header of KifTestCase, lets change the import 4:21 statement from KifTestCase.h to import KIF/KIF.h. 4:26 This is an important detail in the KIF setup notes. 4:32 This import gives us access to the KIF tester and methods we'll use shortly. 4:35 Before we start writing KIF tests, 4:40 let's build out some basic views that we can test. 4:42 In ViewController.m, inside viewDidLoad, let's create a button named loginButton. 4:45 We'll give it a basic frame. 5:06 X 30, Y 30, width 100 and height 40. 5:14 We'll set its title to login. 5:20 [SOUND] Set title, login for state, 5:22 UI control state, normal. 5:28 Set it's background color to blue. 5:32 Background color equals UI color blue color. 5:38 Set it's title color to white, 5:43 addTarget self with the selector loginButton pressed. 5:53 [SOUND] AddTarget:self action 5:56 selector loginButtonPressed 6:02 forControlEvents. 6:08 UIControlEventTouchUpInside. 6:12 And next, we'll set an accessibility label for the button. 6:18 In their normal use, accessibility labels are used by iOS to identify UI 6:21 elements to VoiceOver users, generally, to assist people with visually impairments. 6:26 KIF uses the accessibility label property to identify UI elements it 6:31 can interact with. 6:34 Without an accessibility label, KIF won't be able to observe or interact with it. 6:36 So, we'll set the accessibility label to log in button. 6:42 The string format here isn't really important to KIF, but 6:45 I'd suggest you keep the strings in a human readable format, so 6:48 it also has the benefit of actually being useful as an accessibility label. 6:51 Finally, we add the button as a sub view 7:03 of self.view addSubview loginButton. 7:08 Next, we'll create the loginButtonPressed method. 7:14 We'll have it launch a modal view controller with a basic login form. 7:29 So let's right click under basic KIF demo, and select new file. 7:34 Then select Cocoa touch class, and we'll name the file login view controller and 7:37 it will be a subclass of UI view controller. 7:42 Click Next, then double-check that it's adding the file to our app target, and 8:04 click Create. 8:09 In LoginViewController.m, inside its viewDidLoad, 8:14 we'll first set its background color to a slight gray using colorWithWhite 8:19 0.85 alpha 1 just to give it a little visual separation. 8:24 Next we'll create a username field with a basic frame. 8:34 This says, x to 20, y to 30, 8:53 width 300, and height 40. 8:57 We'll give it a placeholder string so we can visually identify it, just username. 9:01 [SOUND] We'll set its accessibility 9:07 label to username field. 9:12 Then, we'll set its background color to white. 9:21 Then, we'll add it as a sub-view of self.view. 9:30 [SOUND] Add subview, username field. 9:33 Then, we'll create a password field, 9:39 setting its frame to be a bit below the username field. 9:42 [SOUND]. 9:45 20, 90, 340. 9:54 We'll set it's placeholder to password. 10:04 Set secureTextEntry to yes since it's a password field. 10:12 Set its accessibility label to password field. 10:21 Set its background color to white. 10:32 Then, add it as a subview of self.view. 10:39 Then, we'll create a submit button. 10:46 We'll set its frame to just below the password field. 11:00 20, 150, 150, 40. 11:08 Then we'll set it's title to submit. 11:14 We'll set it's accessibility label to submit button. 11:24 We'll add target self with action selector submit button pressed. 11:36 Add target, self. 11:44 Selector, submit button pressed. 11:47 Then set its background color to red. 11:54 And we'll set its title color to white. 12:02 Then we'll add it as a sub view of self dot view. 12:13 Next we'll add our submit button pressed method. 12:20 Inside it, we'll simply dismiss this modal view controller. 12:32 We'll call self dismissViewControllerAnimated, yes. 12:37 Completion nil. 12:41 Great. 12:44 So that's it for our basic modal. 12:45 Next we need to go back to ViewController.m. 12:47 We'll import our new LoginViewController. 12:52 Inside loginButtonPressed, let's create this modal. 12:58 We'll present it as a modal 13:12 If we launch our app in the simulator, 13:22 we can see our blue submit button on the main view controller's view. 13:24 And if we tap it, we see our log in form with user name and password fields and 13:27 a submit button. 13:32 We can type in text to the username and password fields. 13:34 And we can hit submit which dismisses the modal and takes us back to our main view. 13:37 Great, so now let's go to a KIF tests implementation file and write our tests. 13:42 We'll simply write a new method named testLogin. 13:48 As soon as we create it, you'll see the diamond shape to its left. 13:56 This identifies this method as a test that will be run. 14:01 If you type in a method name that doesn't start with the word test, 14:04 maybe other method, you'll see that it does not add the diamond. 14:07 And this method will not be run as a test. 14:11 This is true of writing unit tests as well and it's something to remember. 14:20 So, if you want it to be a test that is run, 14:24 simply begin your method name with the word test. 14:27 Then, if you need to, you can write other methods in this class starting with 14:30 other words such as methods you might want to then call inside your test. 14:34 The three most common things you'll do with Kif are, tap a view, 14:38 enter text into a view, and wait for a view to appear. 14:42 The first thing we'll do is wait for our login button to appear on our main view. 14:46 To do this, 14:51 we call a method on tester called waitForTappableViewWithAccessibilityLabel, 14:52 passing in the accessibility label string we set for that view. 14:57 We also could have called waitForTappableViewWithAccessibilityLabel, 15:01 which can be used to wait for any kind of view to appear, not just tappable views. 15:05 But the tappable view method is nice because it only moves beyond this check, 15:09 once the button is able to be tapped. 15:14 So if you have a button that is disabled, it will wait for 15:16 the button to be enabled before proceeding through the test. 15:18 If you command click on tester you'll see that it's a define 15:22 that cause KIDFActorwithClass KIFUITestActor. 15:26 If you scroll down the class a bit you can see the KIFUITestActor interface with all 15:30 of its available methods And other documentation. 15:35 This actor is basically what is going to act through the motions 15:39 we give it in our app. 15:42 Back in our test, we'll next call TapViewWithAccessibilityLabel 15:46 passing in our string, login button. 15:51 This is going to tap our button just as we do while using the app. 15:59 It's going to then trigger the login button pressed method we wrote and 16:03 launch our login view. 16:07 Next, we need to wait for that login view to be presented. 16:09 Here we can choose any visible element in our login view that has 16:13 an accessibility label. 16:17 But we just need to tell the tester to wait until one of them has appeared. 16:18 We'll wait for the username field by calling wait for 16:22 view with accessibility label passing in the string user name field. 16:25 Let's go ahead and run the test. 16:32 The easiest way to run the tests is to hit CMD+U. 16:35 Or you can go to the play button in Xcode, hold it down for a second, 16:38 and we'll get the drop-down menu where you can hit test. 16:42 It's also available under the Product menu, where you can select Test. 16:50 We'll see the Kif test launches our app in the simulator and 17:00 launches our modal view as expected. 17:03 In Xcode, we can also see that it fills all of our diamonds in the left column 17:06 with green and white checks and tells us that the test succeeded. 17:10 Great. 17:14 So now that we have our tests up to where the login screen is visible, 17:18 let's simulate entering in some login information. 17:22 In our test login method, after what we've already written, we'll call tester, 17:25 enter text, passing in a string for what we want it to type. 17:30 We'll just say myusername. 17:33 IntoViewWithAccessibiltyLabel. 17:40 And we'll pass in Username Field, which what we set for 17:43 this text field's accessibility label. 17:46 So tester, enterText, myusername, 17:49 intoViewWithAccessibiltyLabel, Username Field. 17:52 We'll do the same thing next for the password field. 17:56 We'll call tester enterText, passing in mypassword for the password field text, 18:00 intoViewWithAccessibilityLabel Password Field. 18:05 So if this was a more fully functioning app, one that actually had usernames and 18:09 passwords that we know worked or 18:13 didn't work, we could have several test cases that tested various scenarios. 18:15 Next, we'll call tester TapViewWithAccessibilityLabel, 18:20 Submit Button to trigger our simulated sign-in action. 18:24 So tester, TapViewWithAccessibilityLabel, Submit Button. 18:28 And finally we want to call tester 18:34 WaitForViewWithAccessibilityLabel Login Button, which tells us that the sign in 18:36 form has successfully closed and we are back on the main view again. 18:41 Again, if this was a more complicated app and the login action had to go 18:48 to a server to login, that wouldn't be a problem with our test code. 18:52 After pressing the submit button on the login view, 18:56 the test simply waits until the main view is present again. 18:59 If we hit CMD+U and 19:02 run our tests again, we'll see the tester run through the actions we specified. 19:03 It launches the login. 19:09 Fills out the form. 19:13 Hit submit and closes the model. 19:16 And again, we can see that our tests have run successfully. 19:20 But what if we made a mistake, 19:24 like entering the wrong accessibility label for our first 19:26 waitForTappableViewWithAccessibilityLabel line? 19:29 Let's change that to start button. 19:32 Then let's hit CMD+U to run the tests. 19:39 You'll see it launches the simulator, then hangs for 19:49 ten seconds before realizing that it isn't going to find this view we specified. 19:51 The test fails, and specifies what line failed. 19:56 As mentioned earlier, we can create other helper methods for this test file that 20:00 aren't run as test themselves but might help organize our test code. 20:04 For example, we can create a navigate to login method. 20:08 First, we'll change this back to login button. 20:12 Inside to navigate to log in. 20:26 We can put our first three lines from testLog in 20:27 Then we can call this method at the top of testLogin. 20:43 If you hit CMD+U and run the tests again, you'll see it runs the same as expected. 20:55 There are also two handy methods you can add to your Kif test case classes, 21:10 named beforeEach and afterEach. 21:15 These do what you'd expect. 21:22 They're methods you can use to set up and tear down the environment before and 21:24 after each test is run. 21:27 So let's say we have another test in here called test sign out. 21:30 If we were to run the tests now, 21:39 the sequence of things would be before each is called. 21:40 Then testLogin. 21:44 Then after each. 21:46 Then before each is called again. 21:48 Then test sign out. 21:50 Then after each is called. 21:52 You'll probably find these methods useful once your tests and 21:53 apps become more complicated. 21:56 If you select the test navigator in the left side column, 21:58 you'll see it shows your lists of tests and you can click the arrow to the right 22:02 of an individual test if you want to just run that one. 22:06 Or all the tests, or a subgroup. 22:09 You can also click the diamonds on the left side bar to run individual tests, or 22:19 the whole group. 22:24 I hope this workshop has shown you the power of UI testing with KIF. 22:33 With it, you can programmatically run through a huge number of 22:37 UI scenarios in your app. 22:40 And helps give you some high level assurance that all the navigable paths in 22:42 your app are functioning as expected. 22:45 Thanks for watching. 22:48
You need to sign up for Treehouse in order to download course files.Sign up