iOS Dev 31: Getting Started with UI Testing | Swift 5, XCode 12

[Music] hey guys welcome back to my channel for those of you who are new my name is manuel and today we're going to be learning about ui testing if you're completely new to testing in general then maybe consider watching my previous video talking about unique testing right and i'm going to leave a link in the description and the card right at the top okay and if you're new to the channel then maybe consider subscribing because we learn some amazing concepts every week right at least we try to all right okay so um moving to today's video uh we're actually gonna get started from a um sort of like a starter project okay so uh basically we have a simple noise makers list and basically what this does is whenever someone makes noise in your class then you can just go ahead and write their name down and submit so when the teacher comes in they get punished okay so um i'm just going to quickly run this application just to show you what it looks like and actually the starter project is in a link in my github i'm going to leave a link directly to that so you can just go ahead and download the project so you can get started right from here but if you want to if you feel like maybe developing your own application then that's even better right so um yeah if you want to download the project just check the description so basically this is what we have um so i want to add a list of noisemakers just click on this icon right here to add a new list and we're presented with an alert dialog okay so we have um a title subtitle and then a text field with two buttons so it says what's the name of the noise maker we have a placeholder shaggy always make a noise so anyhow you can just write the name of the person that's making noise we can just say for example eric cartman all right then we click on add and you see that it adds a new person to the list we click again we want to add a new person we say um let's say peter griffin and we click add it adds another one let's add one more the above them all shaggy so yeah it adds the new list then we can also do something we can swipe and then click on delete which also deletes someone so let's say uh the person just begs and says please please don't report me and then just remove the person's name from the list so this is a very simple application that we currently have and again if you want to download the starter project just you know go over to the github link here and download it okay so i'm just going to give a very quick run-through of the code base currently so you can see over here in our main.storyboard we simply have a single view controller that's embedded in the navigation controller we have a button here that's going to be used to add a new one or basically the button that presents the dialogue okay so uh moving into our view controller we have a couple of things so um just simple table view setup and actually if you don't if you've never worked with or you don't really understand how table views work i actually have a video explaining that so maybe also consider checking that out i'm going to leave a link to that as well and to the card and the card at the top okay so um yeah so basically what we have whenever you click on the add button we present an alert and the alert has like the title the message and um it also has a text field right here with a placeholder okay then apart from that we also added two actions the first action is our add button and the second one is the cancel so when you click on the cancel it just dismisses the alert but if you click on add then um we're going to check a couple of things make sure that there's a text field make sure that there's a user text and that user text is not empty then we just insert that particular name to our data source and then we add a new row to our table view so that's basically what is happening over here then um yeah the usual table view setup uh the number of rows we have the cells then um at this point we basically set up the swipe to delete so when you try to delete to remove um the name from the data source and then we also delete the row from the table view very simple very basic right so what we're going to be doing in this video is to add testing to our application so um just like in our last video if you want to add tests to your application you just head over to well if it is a new project while creating the project you have an option to just check um whether or not you want to include testing right but if it is an existing application then you can just click on your target and right here just click on the plus icon and here since we're going to be doing ui testing you just search for ui and you can see ui testing bundle so just click on that click on next and we can just go ahead and choose the default values um and then every other thing looks good just click on finish good and this is going to create a new um target for us and if you look over here you can see that now we have um our test uh class or our test target or bundle whatever you want to call it okay so um what i'm going to be doing i'm actually just going to get rid of all of these things so that we can start at um or start with a clean slate all right so we're gonna be writing very uh basic tests and actually in this video i'm gonna test two main functionalities all right the first thing i want to test is that when you uh click on the add button like the add button then it presents a dialog and you enter a name when you enter the name and click click add then it should add that value or that name to our table view that's the first test we're going to do test to make sure that um what's it called a name is added to the list okay then the second test we're going to do is to make sure that a name is deleted when you click on the delete button all right so these are two basic tests that we're going to be writing in this video so uh make sure to stick to the end okay so what we're going to do is we're going to first of all create a function we're going to say test um [Music] add noise maker all right wonderful so now this test is basically going to allow us to test that um a name is added all right so for us to write test the first thing we want to do is we want to basically record our um processes all right so i'm just going to show you what that means so what we're going to do is we're going to click on this um record button right at the bottom and now you're going to notice that it's going to launch our application okay so basically what we're going to try to simulate over here is how to use the app to perform the particular feature that we want to test so we want to test that when you add a new name it adds it to the table view so the first thing you want to do is click on this plus icon so when we click on that and you're going to notice that it is actually generating some code for us all right don't worry just we're going to see what that does or why we need that later on so um now we can see that it has launched the um our input dialog the next thing you want to do is before you start typing you want to click on this field right so you want to make sure that this guy is active so we've done that and um just to bring up the keyboard command k just to make sure that our keyboard is there if you want to bring that up so um now we know our input field is active the next thing we want to do is let's say emmanuel is making noise can just write a manual and when we're done we click on add and when we click on add we see that it's been added so the last thing we're going to do is we're going to click on the field just so we get a reference to this particular item in the table view all right so these are the various steps that we want to do to make sure basically to test that a name is properly added to the list all right so now that we're done we can just go ahead and click on the stop um record button while the same button just click on it again and it's just going to stop recording so now looking over here we have a couple of um generated code and don't worry i have a few errors and i believe this is probably because i had run this before just to make sure some things were working so uh basically you should have the correct one but if you don't what we want to do is want to replace this with um xc ui um application then we're gonna say app.launch okay so basically what this is doing is it's going to create our app and then it's going to launch the app all right so um then apart from that every other thing looks good and don't worry we're going to change all of these things well we don't want to use app2 we just want to use a single app so i'm just going to very quickly change those all right so um yeah this yours should look something like this all right now the next thing we're going to do is we're going to clean up this particular function just so that we can follow sort of like the order we had in the last video where we have um given when and then right so given certain input um when something happens then we expect certain output all right so what we're going to do so first of all we know that we want to launch our application right then apart from that we want to basically get reference to the different views that we have or the different views that are going to be part of our test case okay so um looking over here the first one we have over here is our add button so we want to um basically get reference to our add button or you could call it add new name well whatever you want to call it so um that's just saying let's um or let's just call it new button a new name new name button be equal to this all right so this is going to be a reference to our add button or the button that brings up the input dialog all right good now the next thing we're going to do is looking over here we can see that um this excuse me this is our text field so we want to get reference to that as well so i'm just going to click on this and highlight this particular guy and right here i'm going to say um name field be equal to this okay so this is going to give us a reference to our text field all right then um now that we have that the next thing we need reference to is our add button so the button that actually adds it to the table view which is this bad boy over here so i'm just gonna cut that out and here we're gonna say add button be equal to this you can see that's actually pretty pretty simple right so um finally we're going to select this guy which is what we're going to be testing to make sure that this because this is a cell that has been added to our table view so we want to make sure that this exists because if this does not exist it means that that name was not added right so i'm just going to cut that out and finally we're going to say um let uh what do we call this added cell be equal to this wonderful so now we have access to all of the views that are basically going to be used within our test case so um next thing we need to do is to specify the actions all right so um thinking about the flow again when your app is launched what's the next thing we want to do we want to basically click on the new name button right the plus button at the top right corner of the screen so how do we do that we're just going to say new name button dot tab all right good so now that we've tapped that you could actually even test to make sure that the dialog is presented so let's say for example you even had like a custom view or something where you accept input you could write a test case to make sure that that particular view is on the screen okay but for now we're just testing that it's added right so when it's presented the next thing we want to do is we want to tap on our name field okay just to make sure that that guy is active so we're going to say name field dot tab sweet so now we have tapped on the name field the next thing we need to do is to add some text to our name field so how do we do that we're just going to say name field dot type and type text so what text we want to add i'm just going to say emanuel okay so um now that we've added that it's going to add this particular text emanuel to the list and when we're done the next thing we want to do is click on the add button right so and while you're even doing this you could actually do certain assertions so for example we could say um that at the point where we've typed some text to the table view the table view shouldn't have um a manual set in but i'm going to show you what that is in just a slight bit right so we don't get confused so let's continue um so now we've typed the name emmanuel the last thing we need to do or the last action we need to do is click on the add button so how do we do that we just have add button dot tab so the idea is at this point the moment you click on tab then the name emanuel should be added to the list so what do we do we want to assert that this cell exists basically that's basically what we want to do so how do we do that assertion you just write xc test assert and it's actually very similar to what we had in the last video so but this time we're going to be asserting true so basically we want to assert that a particular condition results true and what is the condition we want to check want to check that added cell dot exists that's it that's all that we want to do so what we're going to do right now is let's actually test our test to make sure that it passes because it should so we click on display icon again just like the last video when you click on that it's going to build our application and it's going to run the application like that automatically so you can see i'm not typing anything my hands out here and you notice that it actually ran the app and um it basically simulated what we currently specified over here right simple enough so um let's actually test some things that fail so let's say that for example we go to our view controller and um in our add button we don't modify our table view all right so we just do this like this so now let's go back to our test ooh what error do i have oh no errors so go back to our unit ui test and i click on this play and this should actually fail because um it didn't add um the new name to our table view so let me just run it again so you can see it being um animated or like animated over there so it launches our application it clicks on the plus button it writes in the manual it clicks on ads but nothing happened so it said oh the test failed so yeah this didn't exist here that's why this particular test failed so you can see how like ui testing is very important so rather than having to uh manually run your app and then you're clicking to make sure that nothing has changed and you're basically just going through the application one step at a time this basically automates everything for you so you can just run the test and the system is just going to be performing all these actions like that so what we're going to do is we're going to head over to the view controller and we're going to you know set the correct code back because i want to show you what i was referring to by asserting while you are performing an action right so um here this is the final result you want to make sure that when you click on the add button the cell is added to the table view that's good let's run it again to get rid of all the reds right so um this works it works very well but um another thing we can do is to add different assertions while we are performing our operation so basically what i'm saying is um if you look over here when you when you write in type emmanuel it is possible for um us to basically add because imagine if in our view controller we weren't adding the name when you click on the add button but we were adding the name while you type um on so maybe as a delegate in your text field so as you're typing it's adding it to the table view that's not the desired action that we want so in that case you want to make sure that your test as well also only adds a name to the table view when the add button is clicked so the add button is clicked at this point so what we want to do is just before the add button is clicked we want to assert that this added cell does not exist all right that's what we want to make sure we want to make sure that before the add button is tapped the manual does not exist in the table view okay so how do we do that very similar to what we currently have just going to say xc t assert and this time my spelling we're going to be asserting false so we want to make sure that it is not in the table view right so that's why we're doing false so basically we're going to be asserting the same thing so we're asserting that added cell exists not so make sure that the added cell does not exist precisely so it's going to assert this here and when it is done doing this then it is going to um uh add the i'm sorry tap the add button and then it's going to check again so meaning that this particular action actually was the action that added it to the table view so now we can still go ahead and run the application and we should still get the same output the test should still pass but the difference now is if for any reason your table view is updated before the um what's it called before the add button is clicked then it's going to fail so let's even try and simulate that let's go over to the view controller and in our view controller what we're going to do here is the moment you add you click on the add button we are going to manually add a manual to the field all right so let's do that let's just say and actually let me just copy this and so here i'm just going to pass in a manual all right so basically uh so yeah now we can go ahead and run this test again awesome and you can see that i actually failed over here so um oh shoot i should have actually run it and show you so let's look at this so um i'm running the application and the moment the plus button is clicked it already added a manual before so when he added a manual it then clicked on um before it clicked on the add button it did detach this one right here and it saw that it was already added and it just failed so yeah this is uh one of the things that is actually helpful to note um while you are performing different actions you could actually do assertions through your processes to make sure that certain actions are not happening when they should not be happening all right so i'm just going to go back here and i'm going to get rid of this guy again so this card and let's go back to our ui testing and we can click the play button again to make sure that everything is working smoothly okay plus button clicked manual add perfect greens good now the next thing we're going to do is we're going to basically do the same thing all right but um this time we want to test that when you swipe to delete then a um like the value is actually removed from the table view all right that's what we're gonna be testing now so what we're gonna do is and actually the processes are quite similar to this so um you're gonna see me copying some code but don't worry um you could go ahead and click on the play in fact i think we should do that so um yeah here we're going to create a new test and here we want to test um delete uh noisemaker okay good so um on this function we're gonna basically delete um a what's it called a noisemaker as i said so how do we do that again you just go ahead click on the record button so basically what this does is it allows us to be able to record activities on your screen or your simulator and basically generates code that references the actions and the views that are on your um app okay so again let's try to simulate the um delete so we click on the plus icon again this guy is up we click on our name make sure that we are active there then we just go ahead and let's this time let's write victor another very dangerous noisemaker with shaggy so um we write his name over there and then we click on add good so now we have um victor added to the list what we actually want to do in this test case is we want to swipe like this right so you can notice that swipe has been implemented over here and then we want to delete okay so this is the action we're gonna perform and the result is that the table view shouldn't have um uh what's it called shouldn't have shaggy um sorry victor on the list so you can click on this just to get reference to the table view so um now we're done we've generated our code we can go ahead and click on our stop record button and now it's time to clean things up i'm actually not sure why this guy is generating app 2 like this or anyhow we know how to fix that just write x c um ui application and then we just say app.launch good so these um is the first thing we want to do launch our application okay cool now the next thing we're gonna do is we basically again want to get reference to the different views and um uh basically the different views and controls that we're going to be using in the application all right so uh let's go ahead and do that or we could just copy this since this basically the same thing that we have right here so um just go ahead and paste this but we can confirm so this is our add button you can see noise makers and ads so this one is gotten for our new name um then the next one is the add noise maker scroll element and this is getting like the text fields as we have over here so this is the name field we can get rid of that um then um right here we have like the add button tapped cool we have that over here already you can just remove that then um over here we have access to our table so here i'm just going to say app.tables so this is basically our tables our table so um yeah we could actually just leave this guy so we're going to take this to the top like this cool then um here this is an action that's being performed so we're just gonna take this guy down um yeah this these are basically the actions that are gonna be performed on our table view so this is as you see like we did over here the second so these are the actions these are the second category of our test case okay so what actions do we want to perform we basically want to perform the same actions that we did right here okay so uh but let's go ahead and type them so we're not just lazy so the first thing again remember want to click on the plus button at the top so what's the plus button that's new name button and we're just going to call the tab so let me click on the plus button next thing you want to click on our text field so just say name field dot tab cool then now we want to um set the text of the name field so i'm just going to say name field dot um type so we're gonna be typing this time let's add uh victor and uh cool so now we've added victor to the list now we wanna click on the add button so name field not that i want to click on add button so add button the tab so this flow is basically going to add um the name victor to the table view okay so um now now that we've added the name what we want to do is we want to delete right we want to delete victor from the list so how do we do that we have access to our table view right and this is our access to the vector itself so we could actually just remove this or well you can see a mistake that we would have made because here we're adding victor so this should be victor not emanuel so this is our added cell so we can simply replace this with our added cell dot swipe left so this is again remember this creates a reference to the cell that was just created so here we're saying that cell that was just created swipe it left so when you swipe it left we should see the delete button right so now that we have the delete button we want to tap on the delete right so when we tap on the delete then we're going to um remove it from the list so then again we can actually move this guy into a variable right here so we can say let's delete button be equal to this okay so um yeah okay this is table queries so it's needed so we're just gonna move this guy down so like from the table view right so uh that's good so again now we have swiped and don't worry i'm going to go through this again so i i hope not a lot is going on very quickly but don't worry i'm going to go over it again so uh here where we've swiped the cell next we want to say delete button dot tab so this is going to basically tap the delete button for that particular cell that we just created so when this is tapped what we want to do is we want to basically assert that victor which is this guy the added sale does not exist all right so um we actually don't need this anymore so what we're going to do here is we're going to say xct assert could you guess how we will do that false awesome so we're going to assert that the added cell dots exist okay so this is going to check that um added cell which is victor does not exist in our table view and if it does exist then something is wrong but if it doesn't exist then yeah we've done the right thing so now we can go ahead and click on this plus button and run this specific test case so let's see what this is going to look like so the app is launched the plus button is clicked victor is added in the list click swipe delete delete everything passed awesome so now just to make sure that the test is actually working just trying to test our test let's go over to the delete functionality and here let's say we remove this and we don't remove it i don't even know it's going to cause crash [Music] or anyhow let's just say we oh let's say we add this to the name but we don't like remove it from the table view so let's go to our um test again and we're gonna click on the play button and i see what we have so plus button clicked vector add picture delete so we swiped but it deleted it from the data source but it didn't update the ui so let's say for example someone forgot to do maybe table view the reload or delete so yeah you can see that the test actually caught that and it sees that this still exists in the view so hey man check your code so yeah this is good and uh you can see how like very helpful that writing test can be and it basically just automates your work you don't have to can't constantly test different features of your application i've actually even had an experience where a particular feature was unconsciously changed while working on the project so this would have been a very solid um solution or preventive measure to that particular issue so yeah just play around with tests play around with different things you could actually test the cancel button so when you click on cancel you want to make sure that that dialog was actually dismissed so we don't want the cancel button to not do anything so these are tests that you can do just make sure that your ui is responding appropriately so i hate seeing the reds so what we're going to do is we're going to click on the overall play button so it runs both of the tests and let's just watch it do the magic so the first test is going to test to add click on the add button write my name at good now the second one goes over it says um add victor add swipe delete all right it went awesome so all tests passed voila good so um yeah if you enjoyed this video then again go ahead click on the subscribe button and i try as much as possible to release videos every week so you know turn it turning on your notification can be really helpful to you um so you get notified immediately i release a new video also look out for our next video where we're going to be learning about snapshot testing alright so that's like you're going to compare different snapshots so anyhow just uh stay tuned if you have questions go ahead and leave it in the comment section i definitely should as possible to respond as soon as possible all right and until then have an amazing week bye guys

Channel: Emmanuel Okwara

Views: 597

Keywords:

Id: 64EwwjWw1kc

Length: 31min 57sec (1917 seconds)

Published: Sat Oct 23 2021