Continuing the direction of the first article, this one too is about line markers, but this time to access various test resources.
Continuing the direction of the first article, this one too is about line markers, but this time to access various…
Screenshots
The first example is from when I was on a project that incorporated visual testing and comparison of screenshots in various browsers. There, we had Gherkin steps like this:
Then the [component] should look like "[screenshot name]"
In our case the specified name was the image’s name without the browser postfix (_ie, _firefox, _chrome, etc.) and the file extension.
Now, we want to be able to navigate to the screenshots, and a straightforward way would be to create a so-called reference, and simply Ctrl+click on the “city_footer” part. However, since the whole step already has such a reference to navigate to the step definition method, we are going to use a line marker instead.
First, let’s choose an icon. The IntelliJ Platform offers great many different icons, and I chose the generic image icon.
Next, when we click on the line marker, we want to show the list of available image files, so we can open the one we select. Of course, a crucial part of this is to implement a logic that can identify and collect the image files relevant to the given Gherkin step. From here, selecting an image will open it in a new editor tab.
To provide extra convenience, and to handle special cases, we can do things like these:
- When there is only one relevant image file, instead of showing a popup menu, and having to select that single image, we can open the file immediately when clicking on the line marker.
- When there is no relevant image file, we can
- either not show the line marker at all,
- show the line marker with an altered or different icon that signals the absence of images,
- show the line marker, but the opening popup menu would display a no-op item like this:
We can go even further, and also handle the presence of diff screenshots after test executions. Here too, we have multiple options how to display the line marker, and the options in its popup menu.
For one, we can have a separate line marker when there is at least one diff screenshot, and display actions in its popup menu to open the diff images.
Or, we can use the same line marker as before, but alter the icon based on the presence/absence of diff images. Also, in the popup menu, we can display actions to navigate to the reference and diff screenshots too, but it may be useful to separate them into two groups by a separator line.
If we want to have more distinction between the groups, we can even set a title under the separator like this:
Dynamic icons
If you are working with test resources that may be stored in different types of files, you might want to customize the line marker according to the file type, so that it helps visually to know the type of the referenced file.
I actually do this in my plugin called WireMocha, with HTTP response body files. The example below shows that mocking GET requests to different API endpoints returns responses with bodies read from different types of files: JSON, XML and HTML in this case.
When working with dynamic icons, it is a good addition to have a fallback icon if the file type is not recognized for whatever reason, e.g. no language support plugin is installed for that file type.
Line markers without behaviour
Line markers don’t necessarily have to do anything when clicked. This way, they can be useful in cases when you have big test classes, test data files, etc., and sifting through them to find some elements is cumbersome and slow.
In such cases the line marker acts as a visual cue to guide your eye. So, instead of reading through the text, or using text search, you simply have to look for specific line markers.
If you use line markers for such visual aid, make sure that it doesn’t clutter the gutter area with too many occurrences. Use it at select, more important locations, otherwise it can lose its purpose and can become counter-intuitive.
Closing thoughts
I’m sure there are many other cases and customization options I didn’t think of in this article. If more comes to mind or I get some suggestions, I’ll cover them in future posts.