1
00:00:06,090 --> 00:00:11,030
Hey everybody Caleb Stoltze here with Dev slopes dot com and in this video we're going to see a basic

2
00:00:11,030 --> 00:00:12,930
example of unit testing.

3
00:00:13,070 --> 00:00:15,900
I'm going to show you a sample application that I already built.

4
00:00:15,900 --> 00:00:20,540
It's very very simple it's nothing special but we're going to be able to use it to actually test our

5
00:00:20,540 --> 00:00:24,200
UI and make sure that the interactions are happening the way that we expect.

6
00:00:24,200 --> 00:00:25,050
Now here's the app.

7
00:00:25,100 --> 00:00:30,710
Like I said nothing amazing but there is a simple UI view here and a button that when we click change

8
00:00:30,710 --> 00:00:37,280
color it presents a label as a sub view and it changes the color of the square just randomly assigns

9
00:00:37,280 --> 00:00:40,870
and generates a color based on some R.G. B values.

10
00:00:41,090 --> 00:00:45,780
And what we're going to do is we're going to go ahead and minimize that and pull open the project.

11
00:00:45,770 --> 00:00:50,210
Now if you do not yet have this project you can go ahead and download the source code by clicking on

12
00:00:50,210 --> 00:00:55,910
the little folder icon with the download arrow and it'll download this little sample project called

13
00:00:55,970 --> 00:01:00,800
button masher and literally all that it is is it's a little application.

14
00:01:00,800 --> 00:01:07,520
Like I said with a button and a view there's a function that generates a random color based on our G-B

15
00:01:07,520 --> 00:01:08,250
values.

16
00:01:08,300 --> 00:01:11,780
And when you tap the button we change the background color of the view.

17
00:01:11,960 --> 00:01:18,050
We instantiate a label here and then we add it as a subcu and I'm doing that intentionally because we're

18
00:01:18,050 --> 00:01:23,540
actually going to test to verify that that was presented on the screen where we wanted it to be.

19
00:01:23,540 --> 00:01:28,520
So what we're going to do now is we're going to go ahead and on the project here we're going to go up

20
00:01:28,520 --> 00:01:33,070
to the menu bar and select file new target.

21
00:01:33,230 --> 00:01:33,500
OK.

22
00:01:33,500 --> 00:01:40,660
So click that and we're going to scroll down until we find iOS UI testing bundle.

23
00:01:40,670 --> 00:01:42,810
Click on that then click next.

24
00:01:42,950 --> 00:01:46,540
And of course it's going to auto name it button masher UI test.

25
00:01:46,550 --> 00:01:48,250
That's fine for now.

26
00:01:48,530 --> 00:01:50,930
And you don't need to change anything else actually.

27
00:01:51,320 --> 00:01:52,700
So click Finish.

28
00:01:52,700 --> 00:01:54,340
And of course it adds a target there.

29
00:01:54,350 --> 00:01:58,440
But if we open it you'll see that it gives us a default test file.

30
00:01:58,820 --> 00:02:03,650
And what we're going to do is we're going to first get rid of our example test here because that's sort

31
00:02:03,650 --> 00:02:07,250
of like the did receive memory warning code in a controller.

32
00:02:07,250 --> 00:02:11,810
When you create it we're not going to use it it's there and it's given to us but we don't need it.

33
00:02:12,140 --> 00:02:14,830
And I'm also going to get rid of these comments here.

34
00:02:14,840 --> 00:02:20,270
You can read those if you want but I already did and I know that it's not anything super duper necessary

35
00:02:21,020 --> 00:02:23,340
that you absolutely need to know.

36
00:02:23,690 --> 00:02:24,960
So here we go.

37
00:02:25,040 --> 00:02:29,020
What we're going to do is we're first going to create a variable called app.

38
00:02:29,150 --> 00:02:29,480
OK.

39
00:02:29,480 --> 00:02:35,580
So go ahead and type var app and it's going to be of type X C UI application.

40
00:02:35,720 --> 00:02:44,030
So X-C UI application and put an exclamation mark there cause we are going to instantiate it within

41
00:02:44,060 --> 00:02:45,490
our setup function.

42
00:02:45,500 --> 00:02:50,240
Now if you're brand new to UI testing setup is basically a function that's called at the beginning of

43
00:02:50,240 --> 00:02:55,940
every test and this is where you will set up initial values like you might instantiate an instance of

44
00:02:55,940 --> 00:02:57,290
your app for instance.

45
00:02:57,500 --> 00:03:00,820
Tear Down is called after the invocation of each test.

46
00:03:00,860 --> 00:03:08,630
And basically you use this to reset everything that you're testing so we want to start with a fresh

47
00:03:08,630 --> 00:03:11,050
instance of our application for every test.

48
00:03:11,210 --> 00:03:17,660
And so we would actually set our app to be nil so that on the next test set up is called and we get

49
00:03:17,660 --> 00:03:19,060
a new instance of our app.

50
00:03:19,400 --> 00:03:25,010
Now continue after failure is a boolean value indicating whether the test case should continue running

51
00:03:25,010 --> 00:03:26,870
after a failure occurs.

52
00:03:26,870 --> 00:03:31,570
There's no point for it to keep running so we're going to say false meaning if our test fails all of

53
00:03:31,580 --> 00:03:36,840
the tests will just stop that that goes with one of our best practices of all test pass.

54
00:03:36,840 --> 00:03:38,410
So this is helpful.

55
00:03:38,450 --> 00:03:43,280
Now this is given to us but we're going to actually get rid of it and we're going to go ahead and instantiate

56
00:03:43,280 --> 00:03:51,380
our application here by typing app equals x c UI application and use parentheses there to create an

57
00:03:51,380 --> 00:03:55,670
instance of it then we're going to call app launch.

58
00:03:55,730 --> 00:04:00,260
And the reason I'm doing this differently we already had X-C UI application.

59
00:04:00,500 --> 00:04:05,090
But what we're doing is we're essentially creating an instance that we can then later set to be nil.

60
00:04:05,090 --> 00:04:08,850
So in the tear down function type app equals nil.

61
00:04:08,990 --> 00:04:13,200
And that will then set it to be nilla soon as our test is finished running.

62
00:04:13,280 --> 00:04:19,680
Now if you're new to you eye testing that's fine but all you need to know is to write a test.

63
00:04:19,760 --> 00:04:26,090
You need to write a function so we can write func and in order for X code to understand that this is

64
00:04:26,090 --> 00:04:26,850
a test.

65
00:04:26,870 --> 00:04:34,160
What we're going to have to do is type phunk test and then like I said I like to tell what I am testing.

66
00:04:34,370 --> 00:04:39,600
So I'm going to say test change color button.

67
00:04:39,620 --> 00:04:45,260
That's what I'm testing then I do an underscore and I type D condition or I guess what is being tested.

68
00:04:45,260 --> 00:04:54,270
So change color button when tapped should show label.

69
00:04:54,560 --> 00:05:00,520
And of course our test we're testing to see whether or not the label is shown.

70
00:05:00,710 --> 00:05:04,760
And if you look at the very beginning there is no label here.

71
00:05:05,000 --> 00:05:11,930
In our view controller when I tap the button we instantiate it at a certain frame I add text text color

72
00:05:11,930 --> 00:05:14,450
I align it in the center and then I add the subcu.

73
00:05:14,450 --> 00:05:18,290
So this test is going to verify that our button actually does that.

74
00:05:18,320 --> 00:05:19,270
Now check it out.

75
00:05:19,550 --> 00:05:26,450
What we're going to do is we're going to go ahead and call app dot and inside here there is a crazy

76
00:05:26,510 --> 00:05:31,820
amount of things we can check we can check cells we can check buttons we can check collection views

77
00:05:31,820 --> 00:05:38,300
we can check date pickers we can check decrement arrows we can check dialogue's we can check all kinds

78
00:05:38,300 --> 00:05:45,440
of things in our app but we want to check our button so we can type buttons and the cool thing is that

79
00:05:45,440 --> 00:05:51,140
what we can do is on buttons we can pass in the name of our button title.

80
00:05:51,140 --> 00:05:54,650
So in our story board our button title is change color.

81
00:05:54,650 --> 00:06:00,530
So what I can do is I can go ahead and put an array here past in our I guess it's probably a dictionary

82
00:06:00,530 --> 00:06:03,950
because I'm passing in the name which I'm assuming is the key.

83
00:06:03,950 --> 00:06:06,580
So I change color.

84
00:06:06,590 --> 00:06:06,950
You know what.

85
00:06:06,960 --> 00:06:11,700
Actually I want to find out let's look into this and UI element queery.

86
00:06:11,720 --> 00:06:18,880
Oh and as object and element queery provider can we go into that interesting.

87
00:06:18,910 --> 00:06:21,000
OK so it's a procol cool.

88
00:06:21,050 --> 00:06:21,860
Moving on.

89
00:06:21,860 --> 00:06:27,440
So basically we're going into all the buttons in our app and we're looking for the one with the title

90
00:06:27,470 --> 00:06:29,600
change color and then check this out.

91
00:06:29,600 --> 00:06:36,660
I can call DOT tap and what it does is it sends a tap event to a hittable point computed for the element.

92
00:06:36,680 --> 00:06:39,820
So it's going to tap our button which is really amazing.

93
00:06:40,070 --> 00:06:47,420
So now what we're going to do is we are basically going to check to see if our our label is there when

94
00:06:47,420 --> 00:06:48,090
we tap it.

95
00:06:48,110 --> 00:06:53,600
It should be instantiated it should be added as a subcu so I can use what is called an assertion.

96
00:06:53,600 --> 00:07:00,560
Now this is another really important thing for UI testing and if you know you and if you know unit testing

97
00:07:00,590 --> 00:07:07,520
you're familiar with ex-city assert what I can do is I can call ex-city assert and there are lots of

98
00:07:07,520 --> 00:07:08,640
different options.

99
00:07:08,660 --> 00:07:14,210
This is where we assert what a certain value should be and if that's not the case then the test will

100
00:07:14,210 --> 00:07:14,540
fail.

101
00:07:14,540 --> 00:07:17,870
So we have ex-city assert nil.

102
00:07:17,870 --> 00:07:19,330
We should say hey this is nil.

103
00:07:19,340 --> 00:07:22,280
Otherwise the test will pass LCT assert true.

104
00:07:22,280 --> 00:07:27,380
We can verify that something comes back as true or false or equal to another thing.

105
00:07:27,380 --> 00:07:31,980
There's a lot of other options like no throw throw less then greater than et cetera et cetera.

106
00:07:32,120 --> 00:07:35,250
But we're just going to go ahead and say ex-city assert.

107
00:07:35,480 --> 00:07:36,270
True.

108
00:07:36,570 --> 00:07:37,100
OK.

109
00:07:37,370 --> 00:07:43,820
And what we're going to we're going to check is to verify that our label that says Now that's colorful

110
00:07:44,090 --> 00:07:46,850
if you remember in our simulator that is what it does.

111
00:07:46,850 --> 00:07:52,430
Let me show you when we tap on it it creates a label that says Now that's colorful.

112
00:07:52,640 --> 00:07:56,850
And so what we can do is we can say static texts.

113
00:07:57,070 --> 00:07:57,660
Whoops sorry.

114
00:07:57,660 --> 00:07:58,100
App.

115
00:07:58,100 --> 00:08:03,710
First we got to go into our app then we have to access what is called static text and this is the way

116
00:08:03,710 --> 00:08:05,750
that you access your labels.

117
00:08:05,780 --> 00:08:11,660
So static texts then we can go ahead and pass in whatever our label says.

118
00:08:11,660 --> 00:08:13,620
Now that's whoops.

119
00:08:13,640 --> 00:08:20,620
Now that's colorful and of course when you're dealing with strings you've got to be careful these labels

120
00:08:20,620 --> 00:08:25,200
should probably be stored in some type of Constans file.

121
00:08:25,210 --> 00:08:30,940
But anyway so we are all going into all of our static texts all of our labels we're checking to see

122
00:08:30,940 --> 00:08:37,140
if Now that's colorful is available and we can actually type dot exists and check it out.

123
00:08:37,150 --> 00:08:40,300
It determines if this element exists and it returns a boolean.

124
00:08:40,300 --> 00:08:44,600
So if it exists it should stay true when we tap our button.

125
00:08:44,620 --> 00:08:45,490
It should exist.

126
00:08:45,490 --> 00:08:50,740
And now what I can do is I can click this diamond it registered that it was a test because of the word

127
00:08:50,740 --> 00:08:51,440
test.

128
00:08:51,580 --> 00:08:56,410
I can click this diamond and it's going to go ahead and run my test and then tell us whether or not

129
00:08:56,620 --> 00:08:57,720
it passed or failed.

130
00:08:57,730 --> 00:09:02,650
So let's go ahead and let's run it by clicking on the diamond and what it's going to do is it's basically

131
00:09:02,650 --> 00:09:04,080
going to build our app.

132
00:09:04,240 --> 00:09:08,680
If you actually watch the simulator it's going to basically launch it and it looks like it crashes but

133
00:09:08,680 --> 00:09:13,390
then launches it again and it runs the test it's basically doing everything that we want it to do.

134
00:09:13,390 --> 00:09:17,230
And did you see that the color changed now that colorful showed up.

135
00:09:17,440 --> 00:09:20,910
And our test passed now that's really cool.

136
00:09:20,980 --> 00:09:24,270
But I want to make sure that this test actually works.

137
00:09:24,490 --> 00:09:30,940
So what I can do is if I were to go in and change you know a character now that's color full with two

138
00:09:30,940 --> 00:09:32,710
elves you know a typo.

139
00:09:32,710 --> 00:09:40,630
Now I can go back to my test and I can run it OK I can run it here and make sure that this is working

140
00:09:40,630 --> 00:09:43,460
the way that it's supposed to k.

141
00:09:43,750 --> 00:09:47,980
And of course this is what I'm doing here is better for unit testing that's something that you'd really

142
00:09:47,980 --> 00:09:48,930
do with unit testing.

143
00:09:48,940 --> 00:09:55,840
But of course our test is going to fail because our label is no longer saying the same thing.

144
00:09:56,270 --> 00:10:03,370
Now a great thing for you eye testing is remember you're testing the UI what a user actually sees.

145
00:10:03,430 --> 00:10:06,390
And we're testing to see if the label is shown.

146
00:10:06,400 --> 00:10:10,270
So if I go into my UI test here that's what I'm checking.

147
00:10:10,270 --> 00:10:13,840
And if I go into the view controller I'm going to go ahead and comment this out.

148
00:10:13,840 --> 00:10:15,430
So the label is never added.

149
00:10:15,430 --> 00:10:21,370
Let's say I accidentally delete this or I added on the storyboard or I think you know that it's already

150
00:10:21,370 --> 00:10:22,380
been added.

151
00:10:22,420 --> 00:10:28,480
If I run my test now we'll see if it passes or fails because it's checking to see if our label exists

152
00:10:28,570 --> 00:10:29,940
on the screen.

153
00:10:30,070 --> 00:10:40,000
And so it's running it's testing and it's going to go ahead and attach and we should get a test failure.

154
00:10:40,000 --> 00:10:46,750
Now if you pull open the console here we should see some results from our test.

155
00:10:46,780 --> 00:10:51,910
Let's go ahead and let's actually run all the tests here so that we can see what prints out on the console

156
00:10:53,420 --> 00:10:58,640
running test continuing to run opening the app and the cool thing is you can actually see in real time

157
00:10:59,390 --> 00:11:01,510
you know what's going on and what it's actually doing.

158
00:11:01,520 --> 00:11:02,120
Whoops.

159
00:11:02,120 --> 00:11:04,550
Looks like the test failed there.

160
00:11:04,940 --> 00:11:06,240
Oh interesting.

161
00:11:06,350 --> 00:11:14,800
Let's see debugger output target output ha that's where it looks like our console information disappeared.

162
00:11:14,840 --> 00:11:16,000
Well that's not very helpful.

163
00:11:16,010 --> 00:11:21,620
But anyway you could see that the test failed but we should be a little more descriptive about why it's

164
00:11:21,620 --> 00:11:27,710
failing so let's go ahead and put a comma and then in quotes we can add a string here describing what

165
00:11:27,770 --> 00:11:28,890
should happen.

166
00:11:28,910 --> 00:11:30,820
So you assert.

167
00:11:30,820 --> 00:11:31,580
True.

168
00:11:31,730 --> 00:11:37,990
It should assert true when label should show on screen.

169
00:11:38,030 --> 00:11:39,500
OK that's what should happen.

170
00:11:39,500 --> 00:11:46,030
So if I run my test one more time by the way I just pushed command you that runs all tests OK.

171
00:11:46,520 --> 00:11:54,290
So it's going it's going to fail of course because we did not yet fix our code and there we go test

172
00:11:54,290 --> 00:11:56,790
failed and look at this we get a little more information now.

173
00:11:56,870 --> 00:11:58,250
Labels should show on screen.

174
00:11:58,250 --> 00:12:04,490
So this is telling me hey your label it's not showing on your screen so go back to your code go fix

175
00:12:04,490 --> 00:12:10,520
this and then go run your test again let's go see how we did test is running.

176
00:12:10,520 --> 00:12:13,300
We are checking how we did do.

177
00:12:13,310 --> 00:12:14,180
Lu Lou

178
00:12:19,770 --> 00:12:21,140
test passed all right cool.

179
00:12:21,180 --> 00:12:22,850
So it is showing on the screen.

180
00:12:22,920 --> 00:12:24,660
It's working the way we want.

181
00:12:24,660 --> 00:12:29,520
This is a basic example of UI testing but guys it really doesn't get that much more complicated after

182
00:12:29,520 --> 00:12:30,120
this.

183
00:12:30,120 --> 00:12:35,670
There are lots of examples we're going to show you how to test certain things and how to just go a little

184
00:12:35,670 --> 00:12:36,390
deeper with you.

185
00:12:36,390 --> 00:12:41,410
Testing But this is it guys basic UI testing example in swift with X code.

186
00:12:41,430 --> 00:12:42,960
Let's head over to the next video now.