Hey everybody Caleb Stoltze here with Dev slopes dot com and in this video we're going to see a basic
example of unit testing.
I'm going to show you a sample application that I already built.
It's very very simple it's nothing special but we're going to be able to use it to actually test our
UI and make sure that the interactions are happening the way that we expect.
Now here's the app.
Like I said nothing amazing but there is a simple UI view here and a button that when we click change
color it presents a label as a sub view and it changes the color of the square just randomly assigns
and generates a color based on some R.G. B values.
And what we're going to do is we're going to go ahead and minimize that and pull open the project.
Now if you do not yet have this project you can go ahead and download the source code by clicking on
the little folder icon with the download arrow and it'll download this little sample project called
button masher and literally all that it is is it's a little application.
Like I said with a button and a view there's a function that generates a random color based on our G-B
values.
And when you tap the button we change the background color of the view.
We instantiate a label here and then we add it as a subcu and I'm doing that intentionally because we're
actually going to test to verify that that was presented on the screen where we wanted it to be.
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
to the menu bar and select file new target.
OK.
So click that and we're going to scroll down until we find iOS UI testing bundle.
Click on that then click next.
And of course it's going to auto name it button masher UI test.
That's fine for now.
And you don't need to change anything else actually.
So click Finish.
And of course it adds a target there.
But if we open it you'll see that it gives us a default test file.
And what we're going to do is we're going to first get rid of our example test here because that's sort
of like the did receive memory warning code in a controller.
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.
And I'm also going to get rid of these comments here.
You can read those if you want but I already did and I know that it's not anything super duper necessary
that you absolutely need to know.
So here we go.
What we're going to do is we're first going to create a variable called app.
OK.
So go ahead and type var app and it's going to be of type X C UI application.
So X-C UI application and put an exclamation mark there cause we are going to instantiate it within
our setup function.
Now if you're brand new to UI testing setup is basically a function that's called at the beginning of
every test and this is where you will set up initial values like you might instantiate an instance of
your app for instance.
Tear Down is called after the invocation of each test.
And basically you use this to reset everything that you're testing so we want to start with a fresh
instance of our application for every test.
And so we would actually set our app to be nil so that on the next test set up is called and we get
a new instance of our app.
Now continue after failure is a boolean value indicating whether the test case should continue running
after a failure occurs.
There's no point for it to keep running so we're going to say false meaning if our test fails all of
the tests will just stop that that goes with one of our best practices of all test pass.
So this is helpful.
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
our application here by typing app equals x c UI application and use parentheses there to create an
instance of it then we're going to call app launch.
And the reason I'm doing this differently we already had X-C UI application.
But what we're doing is we're essentially creating an instance that we can then later set to be nil.
So in the tear down function type app equals nil.
And that will then set it to be nilla soon as our test is finished running.
Now if you're new to you eye testing that's fine but all you need to know is to write a test.
You need to write a function so we can write func and in order for X code to understand that this is
a test.
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.
So I'm going to say test change color button.
That's what I'm testing then I do an underscore and I type D condition or I guess what is being tested.
So change color button when tapped should show label.
And of course our test we're testing to see whether or not the label is shown.
And if you look at the very beginning there is no label here.
In our view controller when I tap the button we instantiate it at a certain frame I add text text color
I align it in the center and then I add the subcu.
So this test is going to verify that our button actually does that.
Now check it out.
What we're going to do is we're going to go ahead and call app dot and inside here there is a crazy
amount of things we can check we can check cells we can check buttons we can check collection views
we can check date pickers we can check decrement arrows we can check dialogue's we can check all kinds
of things in our app but we want to check our button so we can type buttons and the cool thing is that
what we can do is on buttons we can pass in the name of our button title.
So in our story board our button title is change color.
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
because I'm passing in the name which I'm assuming is the key.
So I change color.
You know what.
Actually I want to find out let's look into this and UI element queery.
Oh and as object and element queery provider can we go into that interesting.
OK so it's a procol cool.
Moving on.
So basically we're going into all the buttons in our app and we're looking for the one with the title
change color and then check this out.
I can call DOT tap and what it does is it sends a tap event to a hittable point computed for the element.
So it's going to tap our button which is really amazing.
So now what we're going to do is we are basically going to check to see if our our label is there when
we tap it.
It should be instantiated it should be added as a subcu so I can use what is called an assertion.
Now this is another really important thing for UI testing and if you know you and if you know unit testing
you're familiar with ex-city assert what I can do is I can call ex-city assert and there are lots of
different options.
This is where we assert what a certain value should be and if that's not the case then the test will
fail.
So we have ex-city assert nil.
We should say hey this is nil.
Otherwise the test will pass LCT assert true.
We can verify that something comes back as true or false or equal to another thing.
There's a lot of other options like no throw throw less then greater than et cetera et cetera.
But we're just going to go ahead and say ex-city assert.
True.
OK.
And what we're going to we're going to check is to verify that our label that says Now that's colorful
if you remember in our simulator that is what it does.
Let me show you when we tap on it it creates a label that says Now that's colorful.
And so what we can do is we can say static texts.
Whoops sorry.
App.
First we got to go into our app then we have to access what is called static text and this is the way
that you access your labels.
So static texts then we can go ahead and pass in whatever our label says.
Now that's whoops.
Now that's colorful and of course when you're dealing with strings you've got to be careful these labels
should probably be stored in some type of Constans file.
But anyway so we are all going into all of our static texts all of our labels we're checking to see
if Now that's colorful is available and we can actually type dot exists and check it out.
It determines if this element exists and it returns a boolean.
So if it exists it should stay true when we tap our button.
It should exist.
And now what I can do is I can click this diamond it registered that it was a test because of the word
test.
I can click this diamond and it's going to go ahead and run my test and then tell us whether or not
it passed or failed.
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
going to build our app.
If you actually watch the simulator it's going to basically launch it and it looks like it crashes but
then launches it again and it runs the test it's basically doing everything that we want it to do.
And did you see that the color changed now that colorful showed up.
And our test passed now that's really cool.
But I want to make sure that this test actually works.
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
elves you know a typo.
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
the way that it's supposed to k.
And of course this is what I'm doing here is better for unit testing that's something that you'd really
do with unit testing.
But of course our test is going to fail because our label is no longer saying the same thing.
Now a great thing for you eye testing is remember you're testing the UI what a user actually sees.
And we're testing to see if the label is shown.
So if I go into my UI test here that's what I'm checking.
And if I go into the view controller I'm going to go ahead and comment this out.
So the label is never added.
Let's say I accidentally delete this or I added on the storyboard or I think you know that it's already
been added.
If I run my test now we'll see if it passes or fails because it's checking to see if our label exists
on the screen.
And so it's running it's testing and it's going to go ahead and attach and we should get a test failure.
Now if you pull open the console here we should see some results from our test.
Let's go ahead and let's actually run all the tests here so that we can see what prints out on the console
running test continuing to run opening the app and the cool thing is you can actually see in real time
you know what's going on and what it's actually doing.
Whoops.
Looks like the test failed there.
Oh interesting.
Let's see debugger output target output ha that's where it looks like our console information disappeared.
Well that's not very helpful.
But anyway you could see that the test failed but we should be a little more descriptive about why it's
failing so let's go ahead and put a comma and then in quotes we can add a string here describing what
should happen.
So you assert.
True.
It should assert true when label should show on screen.
OK that's what should happen.
So if I run my test one more time by the way I just pushed command you that runs all tests OK.
So it's going it's going to fail of course because we did not yet fix our code and there we go test
failed and look at this we get a little more information now.
Labels should show on screen.
So this is telling me hey your label it's not showing on your screen so go back to your code go fix
this and then go run your test again let's go see how we did test is running.
We are checking how we did do.
Lu Lou
test passed all right cool.
So it is showing on the screen.
It's working the way we want.
This is a basic example of UI testing but guys it really doesn't get that much more complicated after
this.
There are lots of examples we're going to show you how to test certain things and how to just go a little
deeper with you.
Testing But this is it guys basic UI testing example in swift with X code.
Let's head over to the next video now.