Join Kyle Sherman for an in-depth discussion in this video Out-of-bounds views, part of Learning LayoutTest for iOS Development.
- [Presenter] Now let's look at the errors that are left from the previous video. The first error says the X location of UI label is less than zero. That means that it's outside of our superview. We see the error below says just that. It extends past the superview. Let's see what's going on. In this case, it can be useful to look at snapshots. So let's do that. In order to find the snapshots, if I haven't set it properly in the scheme, as we went over in the installation video, which I have not, then, I can look in the console.
Command+Shift+Y. We look through here, and it should tell us the location. As you see, snapshots of failing tests can be found in this location. What I can do is, I can select this, just up to the folder. Let's do test images, so you can see how it's laid out. We can copy this, Command+C, and in this case, we can go to the finder, we can open up a new tab here, and I'm going to show you a little shortcut.
You can do Command+Shift+G to go to a specific folder. From here, I can paste in the location I want, hit go, and now I'm there. Now I can double click on this, and we can click the index.html to see all of the different errors and what they look like. You see the label's text is one long line that extends past the edges. So let's fix this. We need to ensure that the label doesn't extend past the edges, so let's go back to the code. We're going to come back to the main.storyboard and take a look at what's going on.
We need to add some constraints to make sure that the label doesn't go past the edges. To do this, we click on the label, and there are a couple different ways to do this. It depends on how I'm feeling that day which way I do it. Either you can right click, or Control click, to the left or right edges, to set different constraints, or you can use this button here, to have a little pop up. So we're going to go with this way for now. We're going to constrain to margins, so we're just going to set this to zero on the left, and zero on the right.
Constrain to margins is checked here, so we add these to constraints. And now we see there are auto layout errors. Let's click on the auto layout errors here, and see what the problem is. Conflicting constraints between the center, the leading, and the trailing. Well, now that we have our leading and trailing, we don't need the center anymore. So let's just double click this, and we'll see in the inspector here that it's selected, and we'll delete it. Now the issues go away.
But, you'll see the text is not centered anymore. So, let's take that and hit center alignment. And this of course is in the attributes inspector. Now, let's change it to zero lines, so that it'll extend as long as it needs to be. And we'll run the tests again, Command+U. Okay, progress, we're down to two errors instead of four now. So, let's take a look at what's going on here. Go back to this tab, click on this build, the most recent, and logs, and we see the failed Y location is less than zero for the label.
So that sounds similar to the one we just fixed, but now this is for the Y location. Let's verify it by looking at the snapshots again. If you just come here and refresh, you'll see the new snapshots. As you see, it extends past the top edge in both cases. Okay, we can fix that very similarly. Let's go back to the code. And this time, we just need to add a token string. Let's take a look at the constraints we already have. Let's click on the label here, click on the inspector.
Now we see we have this one strange constraint that's at the bottom space of the background image view to something, and it's negative 112. Let's double click to see more info. So it's going from the background image view's top to the title label's bottom. And a negative 112. So instead of that, we'd like to go from the top of the image view to the top of the label. So, let's just change this to top, and we'll pick a value of, let's say 12.
Now you'll see that the 12 makes it go outside the bounds. So that means we need to reverse either the negative sign on the constant, or we can reverse the two things. Let's reverse the first and second item. And now, our 12 makes sense. Let's save this, and run again, Command+U. Success, they all work.
That's great. You might think it's a little strange that we're testing very long strings for the title of some type of welcome view. However, this would be important if you are localizing your app to other languages. Some languages are much more verbose. German, for instance, is known as being very verbose. Now we know that any string that'll be there will be valid.
- 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