iOS Dev 32: Getting Started with Snapshot Testing | Swift 5, XCode 13

[Music] hey guys welcome back to my channel for those of you who are new my name is emmanuel and i release ios videos quite often so if this is something you're interested in then maybe consider clicking the subscribe button also turn on um notifications so that you're aware whenever i release a new video right there's also a playlist that i think you're going to find very interesting so i teach ios development from scratch so i'm going to leave a link to the card right there right so today we're going to be learning about snapshot testing and if you don't have any idea what testing is in general then i'll also recommend that you check my previous videos on unit testing and ui testing so you're going to find that quite helpful okay so snapshot testing what exactly does that mean now imagine that you have um well i know many of us have friends that claim to be responsible but they're just i don't know just crazy right so a friend of yours comes to you and asks to borrow your car and you know that for sure this person is going to basically destroy your car and just make unnecessary changes now um you're a good person right so you want to give your car to your friend so but before you do that you say hold on let me take a couple of pictures of my car so that i know exactly how i left things so you take your camera you take pictures of the exterior the interior the tire the mirrors the seats everything take pictures right then you give the keys to your car and he drives away now when your friend comes back he definitely didn't disappoint and just messed up your car so what do you do you bring out your pictures so the pictures you took initially and you look at the new states of your car so you look at the tires you see that okay the tires are basically the same that's good test passed you go to the mirrors you see that you made changes to your mirror so it's no longer facing left it's not facing right for whatever reason so um that failed you check the seats you notice that he added maybe a letter um casing to your seat or whatever so you know different changes right now snapshot testing allows you just like we've explained to have a reference where you can compare the current state of a view or a ui or your application in general to the past state of that same application now we're going to be learning how to implement snapshot testing very simply in our application so the first thing we're going to do is we're going to open up xcode and we're going to create a new project and i'm just going to call this so go ahead click app and we're going to call this snapshot testing tutorial okay so everything remains the same just go ahead and click include tests so that we can have like our test case or if you want to know how to add tests to an existing application then you can also check like my last two videos i explain how to do that right so go ahead click on next and i'm just going to save this in desktop so go ahead and click on create and great now we have our application created so let me just go ahead and increase the font of this text okay sweet great so the first thing we're going to do is we're going to implement a very simple ui okay so we're going to go over to the main.storyboard and we're going to drag in a label to our viewcontroller right here so i'm just going to drag a label and we're going to put this right in the center of our view so hold down what i did here i just held down control click and drag then hold down shift click on center horizontally and center vertically then press enter all right so this is going to going to add the label to the center of the screen so i'm just going to go ahead and increase the font to maybe something like this cool and um okay so let's just finally just change the text to like hello world okay so this is a very simple application right now the next thing we're going to do is we're going to create a reference to this particular label so that we can change the property of the color because what i want to do is i want us to have different colors for the background and the text label um depending on whether or not we set it to be night mode or light mode right so we're going to go to or we can actually just do it directly from here so bring up the assistant editor and we're going to hold down control click and drag it right into our view right here i'm going to call this hello label just like that and now we have a reference great awesome now the next thing i want us to do is i want us to add or create a property here called is let's say is dark mode and this is going to be boolean all right now we're going to add a date set property here and basically whenever this property is set we want to modify the view or the the color of the background color and all those things of the review so actually what i'm going to do here i'm just going to set this to default to false all right so dark mode is false by default now so whenever the value of this dark mode is set we're going to say view dot background color should be equal to and if it is dark mode then the color is going to be black if it is light mode then it's going to be white right then the same way we want to set the text color of the label to be equal to so if it is dark mode again we're going to set it to white then if it is um light mode we're going to set it to black all right so yeah this looks pretty good so what we're going to do is we're just going to go ahead and run this application just to test and see that everything works very well finally well so this is our application hello world so let's go ahead and test the dark mode so let's say that by default is dark mode so we expect that the background color should be um oh no i should have done it like did set so in the view did load right here we're just going to say um is dark mode equals true okay so this is going to set the property and then trigger the did set property all right so you can see dark mode awesome now um we can see that the application works as expected so what we want to do now is want to take snapshots of both of these states to make sure that whenever the app is in light mode it looks like like white and when it is in dark mode it looks dark right so this is what we're gonna do now in order for us to implement snapshot testing we're actually gonna use a library called snapshot testing right great name so how do we use um or how do we add dependencies to our project we're going to be using cocoa pods so first they're going to have to open up terminal so um when you have your terminal open you're going to have to navigate to the project directory so we have ours on our desktop so we're going to do slash desktop snot slash um snapshot testing tutorial okay so now that we're there next thing we're going to need to do is write pod in it to initialize pods and that is going to create a new file so we're just going to go ahead and close this because not we're not going to need this any longer so close that out and this is our project snapshot testing so now we have our pod file over here we also have a new okay we don't have it yet because we haven't run pod install so we're gonna do is we're gonna open up pod file right here and then right in our this particular um snapshot testing tutorials test right here we're going to add a new pod pod and this part is going to be snap shot testing just like that alright so when you do that go ahead click on save and you can close that and now in your folder just run pod install okay so now this is going to install snapshot testing and because we have that installed we can now go ahead and open the workspace and not the project so we're going to open up the workspace like this and then we're all set so now we have snapshot testing installed in our project okay so if you look everything still remains the same you can go ahead and run the app to make sure that everything still works as expected so just hold down command and r to run and you should see hello world very shortly awesome so everything still works good now how do we implement snapshot testing so what we want to do is right in our um unit testing folder right so not the ui testing the unit testing is where we want to write this so right here we have like the um template class or the default class if you wanted you could do it over here but what i like to do i just like to create new test files for specific test cases or specific test modules as you will so we're going to create a unit test case like this and this time i'm going to call this we can just call it hello or since ours is called view control so just a few controller tests all right so if you control a test just click on next and by the way this name is terrible so maybe use something more descriptive so make sure this is highlighted we're adding it to this particular target so just click on create so now we have our view controller test so all of these tests are meant for our view controller okay so just like we've done in like the past videos the first thing we want to do is want to create our system under test or sut as you may call it so sut and this is going to be of type view controller because this is exactly what we want to test now if you noticed when i selected view controller it actually did this particular import because this particular class is only available within our main target so we are doing a testable import of our main uh product main target so that we have access to this particular class all right so um yeah we're going to be testing the view controller class here then um under our setup we can just simply initialize our sut which is going to be equal to view controller okay and in our tear down we can just go ahead and set sct to be equal to now all right simple enough now we can just go ahead and get rid of all of these stuff and okay this looks good so the first thing we want to do is we want to write tests for um basically just testing the default state of the app so we can just write tests or func test default states all right so wanna be want to test the default state of the application so we already have access to our system under test so what do we want to do since we're using um um snapshot testing we're going to come over to the top and just import snapshot testing like this and now that we have that we're going to be able to do a cert snapshot and then here we're simply going to be um specifying the um what we want to compare to our snapshots right so like the current state we want to pass the current state of the app right here and in our case the current state is simply sut right so that's that then the next thing we're going to do is how do we want to compare the snapshots now from our example about the person that took the car away we took pictures right so that's an image now if you click on if you just press dots you're going to see that there's actually a variety of um snapshot variety of things you can test or snapshot test so you can see we have image we have json we have dump we have plist we have just a whole lot of things and i'm actually going to show you the documentation later on just so that you can play around with it more extensively right but for the sake of this video we're simply going to be testing um image okay so we want to um assert that um our current system matches our previous snapshots and we're comparing this as an image and basically when you're comparing as image is going to compare like the individual pixels to make sure that everything matches exactly so even though you have um a slightly bigger dimension so if you have one as a 100 by 100 and it's the same design everything perfectly the same but you're testing with dimension 200 by 200 the test is going to fail right so that's something to be aware of if you have if you're testing in one dimension you have to test basically the same dimensions all right so i'm going to be using this to i'm going to be testing our system and um yeah we're going to be testing it as an image so now that we have this done it's as simple as this don't worry it doesn't get so much complicated so for for us to test we're just going to click on the play button and because we've not registered because we've not done the initial snapshot what happens is the um the snapshot testing is going to basically get the first picture and use that as the base for comparison now let's just see what the error says it says um no reference was found on disk automatically recorded snapshot so that's exactly what i'm saying because we've not done an initial snapshot we don't have a pass record to compare with the first time this test is run it simply just took the snapshot and then stored that as the new base okay then subsequently if you want to update your snapshot you're gonna have to specify a new parameter to be recording and i'm going to show you that in a little bit but let's let's continue so now if we run this one more time you're going to see that the test is going to pass because nothing has changed right we didn't change anything in the ui now let's go back to our main app okay and in our main project we're going to set the default state to be let's say orange right or what color is this oh yeah all right so now i have changed the color so i expect that the test should fail right but i'm going to click on play and let's see what happens seems like the test actually passed but that's wrong we shouldn't have and the reason is if you noticed we were creating our ui um using storyboard right so you know normally when you try to let's say for example you want to navigate to another view controller that you created with storyboard you have to instantiate that view controller from that particular storyboard so you cannot create an instance of the view controller by just using parameters now if you were doing this programmatically then yes this is going to work very well and let me show you why if you go over to our project and you head over to the yup the testing folder you're going to see that there is a new folder created over here called snapshots now if you open this you can see view controller test which is the um name of the class or the name of the testing scope if you will now if you open this you're gonna see that there's a snapshot over here but when we expand this we can see that it is completely empty so that's because the view didn't exactly load it's just empty we're trying to navigate to um what you may call an empty view controller so what's the solution rather than um initializing this view controller as like this we're going to need to instantiate this from a storyboard now what we can do essentially is we can say let storyboard be equal to ui storyboard and the name is going to be main the bundle we can set this to be nil and then we can just say storyboard dot instantiate view controller with identifier and here of course we're going to need to specify the identifier for now i'm just going to use view controller okay then um yeah so this we're going to instantiate as viewcontroller all right so this is going to be our sut so now we can go ahead and run this application one more time and we expect the test to fail now because the new image is going to be different okay so you can see right here oops oh yeah i forgot my bad so supposed to go to the main.storyboard and remember to set the identifier don't forget like me so now that we have that set we can go ahead and run this one more time and this should fail but not here anymore but here so let's look at the error what does it say it says that um snapshot does not match reference and this is because the new image that it has gotten is different now we know that the test has failed but how do we see what the difference is what we're going to do is we're going to go over to the report navigator over here so click on that and um you can just go ahead and click on this target or the test if you will now here when you expand this you're going to see that there's an attached failure difference and this basically contains the reference which is the initial test of the initial image you're comparing against and you're going to see the failure which is the new one so how that your friend came back with the car the state that the friend came back with the car so the first one this is before your friend took the car this one is after your friend came back with the car now this also shows you the difference so the difference basically because the first one is completely empty the difference is this all right so um basically this just gives you an idea of what has changed but in our case looking at this we actually want um how do i say this we want the new one this difference or the failure rather to be what am i pressing we want this failure to be the or well not the failure let's go ahead and set this back to white so i'm going to come back here and do this undo i'm doing listening to me good so we have white so let's go back to our tests and we're gonna run this one more time okay so now we can um where's that so go to the report click on the particular test and we can look at this again oh shoot i remove the identifier by mistake pardon me guys so we gotta put this back view controller so here we run the test one more time good good good good good good good so the report we look at this and good so now we can see the failure so the failure is this and we want this to be the new test so when we want to basically change our reference image right the base image to compare against or to compare with what we need to do is we need to go over to the test and here we're going to add a new argument that says record i'm going to pass a boolean true now when you do this this is going to run the test but it's going to take the new snapshot and set that as the reference all right so now that we've run this if you look at excuse me our um test so remember this is where we have all of our base snapshots where we compare against so when you look at this you can see that now the base image is the white one so now that that is the white one if we go ahead we can even remove the record now and then run the test one more time this is going to pass okay so this is just something you need to know if you wanna um basically update a design so let's say um the changes that your friend made were actually good to you so you just go ahead and run the test again but this time run is in the record mode and this is going to just store the new changes as the new defaults or the new correct image or snapshot all right great so now um there are a lot of things we can actually do here so one of the things we can do you can see that we're actually testing um with image you can go ahead and test with or test on a particular device so if you just say on and press dots you can see that now you can test um with let's say an iphone 8 or an ipad or whatever you can just do your test on a different device and when you do this like i said remember when i said that um it compares like the the dimension of the image matters great so now that we've changed the device if we run this remember that there were we didn't change anything in the ui but we changed the device and because we changed the device you're going to see that it doesn't match so you see the snapshot doesn't match so that's something that you need to be aware of if you're going to be testing on an iphone x or an iphone 8 or whatever you're going to need to make sure that you record the view or the image on that device and then you test subsequently on the same device all right so that's something worth knowing at the same time while you're testing on device you can actually test let's say use iphone 8 you can actually test the orientation so you can test on landscape you can test on portrait as you can see this is actually very powerful all right so this is good this is this is pretty good now another thing we're going to do is actually test dark mode so we're going to create a new function and uh you can actually go ahead and pause the video just try it out on your own and see how very simple the thing is so i'm going to say test dark mode okay so how do we test dark mode first we're going to need to trigger our app to go into the dark mode design and how do we do that we just simply say sgt dot is dark mode this is dark mode is the property that's in our view controller so we just go ahead and set this to be true and now that that is done we can just go ahead and insert the snapshot what did i just write search snapshot so we're going to be matching sut okay then we're going to be matching as an image as well all right so now because we don't have an initial test for this we can go ahead and just click play and initially it's going to automatically record this as the new base so you can see from the error message that no reference was found automatically recorded snapshot which is good so now that we've recorded that i can actually just go ahead and run both of them so that this red stuff goes away good so now you can see that both tests pass and if you go to our reference right here you can see that the first one is test default state which and this is our default state which is good the second one is testing the dark mode which is also good so you can see that it's correct now if you go to your app so if you go over to the view controller and right here we now change our dark mode color from black to like dark gray and then we go ahead and run our test one more time like this the test is actually going to fail because our dark mode doesn't match the reference and again if you want to see what the difference is you can just click on that and just go ahead and click on the test that failed expand this expand this and you see what the failure looks like oh so it's gray when it should be black then what's the difference somewhere in the middle all right so uh yeah you can see how very simple snapshot testing is and just as a little added bonus because um you may find yourself doing this a couple of times so what i usually do is i create an extension of a ui view controller and basically i use the extension to instantiate our view controller from a storyboard so what i'm going to do is i'm going to create a new file right here and i'm going to call this ui view controller extension okay and i want that inside this particular folder and here first i'm going to import ui kit then i'm going to say extension ui view controller then we're going to create a static var and we're going to call this identifier then this is going to be of type string okay then basically what this is going to do is it's going to return a string value so string describing and we're going to be describing self so this is basically going to um convert our class name to a string and return it all right that's the idea of this particular function property so um secondly we're going to create a static func and this is going to be called instantiate all right now this is going to return self so of the same type and here we're basically going to do the same thing we did in our test while trying to instantiate our storyboard so here we're just going to paste this and it's actually very important for you to know over here if you're going to be working or if you're working or trying to use this particular function in a larger project that has different storyboards then maybe you're going to want to pass in the name of the storyboard as an argument here okay so let's say you have like a profile storyboard a um i don't know whatever storyboarding as long as it's different but for our case we have just one storyboard which is called main so that's why i'm having this over here so um yeah you can just go ahead and do that then we can now go ahead and return so we're going to be returning storyboard.instantiate controller with identifier now this is going to be our identifier okay and as self that's all so this is going to be this is basically going to allow us or help us create instances of a particular view now one very important thing to note if you're gonna be using this method then the name of your identifier always has to match the name of the class all right so it's very important so for example in our main this one is called a view controller if you look over here this is called view controller so your storyboard id has to be view controller right that's the idea of using this right so now that we have that rather than doing this like this we can just go ahead and say sut equals the name of the class that we want to instantiate from storyboard and just say instantiate okay so this is basically going to create an instance of the class using the storyboard and then it's going to assign that to sut which is of type view controller now if you go ahead and run this so let's go back and remove the changes we made to the base did we okay no not based the dark mode good so now we've done that we can just go ahead and run test again and everything should pass because it's going to create an instance or a storyboard instance of the class and it's going to compare it with the snapshots that we already have which is basically the same so all tests pass you can see snapshot testing very simple um there's actually a whole lot more you can do just like i mentioned if you go over to this particular website you're going to see more in depth like the things you can do the different ways you can test or test your snapshots you can see mns image you can view controller you can see scenes you can see string ui image view whatever so you can just go through this document and see um ways that you can actually do more in-depth snapshots if you have questions feel free to ask in the comment section i'll try as much as possible to respond and um if you enjoyed this video i haven't found the tiniest bit of value in this then maybe consider clicking the like button thumbs up so that more people can know that it is helpful all right so um yeah that's it for snapchat testing um in our next video we're going to be talking about [Music] design patterns all right so um yeah if you are interested in that then subscribe turn on notifications so immediately the video is live you get notified all right so yeah that's it [Music] see you guys in the next video

Channel: Emmanuel Okwara

Views: 357

Keywords:

Id: fFW3SMWKMMg

Length: 30min 29sec (1829 seconds)

Published: Sat Nov 20 2021