Snapshots provide you with a visual representation of your UIView so that you may visually inspect it for errors when a test fails. In this video, learn where to find this information when a test fails, and how to configure its output. Snapshots—and the report in which they are found—are the first things you should look to when you encounter an error in your test.
- [Instructor] In this video, we will learn how to use snapshots, which are a great debugging tool that LayoutTest gives you. Snapshots allow you to visually inspect a failing test in order to find issues quickly and easily. In order to see this feature, we need a test that fails. Let's open up the workspace for this video in 03_01. You'll see it's called UsingTestData, because we're working off our last video with this. Let's run these tests using Command U. Great, they pass.
Now, as I said, in order to see the snapshots feature, we need failing tests. So, we're going to use a little trick here. Let's go to the EntityRowViewLayoutTests file, and what we're going to do is we're going to make every test fail by simply adding XCTFail at the top of the test. Now, every single test will fail, and we will see a snapshot for everything. Let's hit Command U to make this happen. Now, to view our snapshots, we need to go to the directory where this is.
If we hit Command Shift Y to show the bottom console, we can scroll through here and find the directory, anywhere where it says snapshots can be found in this directory. Now, remember, in our setup video and the installation video, we actually made it the same directory as the source code. So, let's just go there. If we go to the Finder, we see in our same directory where we open this workspace, we now see a folder called LayoutTestImages. Let's click on that, and this will be separated per test.
EntityRowViewLayoutTests is here, and we see an index.html page. We can double click that and show it. We can scroll through and see every single different view here, with all different sizes, as well as different text, and types for the entity. Every single combination is here. Also, you'll see that it shows the error right next to it. Here, the errors just failed because I had no message. And it shows the image, and then the input data, so you can see specifically what data produced this error.
Now, you'll notice in this view that this doesn't really look right. This is kind of compressed and is the wrong aspect ratio. So, let's fix that problem. Back in our project, let's collapse this part here. Command Shift Y. We're going to leave the XCTFail so that we can see all of the cases once we're done. And what we're going to do is we're going to make it so that that view doesn't compress. In order to do this, we come to the EntityRowView.zip. We see the image here and the Share Button, and what we want to do is we want to make sure that we take this, and we don't want it to compress.
So, we go to the size inspector, and we're going to change the content compression resistance priority. So, this means that we want it to resist being compressed. So, we're going to increase the priority, both in the horizontal and the vertical. Now, let's try it again. A menu to run all our tests. It completed, and it failed, as we thought it would. Don't forget that. Now, we go to Safari again. We can just refresh the page and see what it looks like.
As you see, now, it looks correct. It's resisting being compressed. Now, we can check, and just do a little visual inspection, make sure anything doesn't get weird down here. Once we get smaller, there's potential for issues. Everything seems fine. So, I think we're ready to go. You'll notice that sometimes the titles are not there at all, and remember, that's because the property was not required in our string values, so it could be nil, which means there's no text at all.
So, this is correct. Snapshots will help you with debugging any issues with your view, which you will see in more detail in the What Common Errors Occur video. You also learned a quick trick to be able to visually see all of your view combinations by adding just one line of code, XCTFail.
- Installing the library
- Specifying test data
- Reviewing property-based testing
- Using test data and writing the LayoutTest test
- Testing views at different sizes
- Debugging with snapshots
- Dealing with common errors
- Advanced debugging tips
- Exploring catalog view