Test Story Viewer

Please note that Wallaby’s Test Story Viewer feature is not available for your selected editor.

Test Story Viewer is available for VS Code and JetBrains editors.

Wallaby’s Test Story Viewer provides a unique and highly efficient way of debugging your code and inspecting what code your test is executing in a single logical view.

Note

The content of this page is adjusted based on your editor of choice. Your editor selection can be changed using the dropdown in the top right corner of the page.

View Test Story

Every executed test has a story that it can tell. To view a test story in Wallaby for VS Code, you may simply run the Open Test Story command for any line of your code or test.

Every executed test has a story that it can tell. To view a test story in Wallaby for JetBrains IDE, you may simply run the Open Test Story command for any line of your code or test.

When you open a test story from a line other than the start of your test, the opened test story view automatically reveals that line. If you open a test story from a line of code that is covered by multiple tests, you will be prompted to select which test you want to view.

The Open Test Story Beside command opens the Test Story View beside your active code editor. When this mode is used, any debugger navigation will be reflected both in the test story and in the original files. This view may be useful if you are planning to edit your code/test at the same time as you are reading/checking its story.

You may also open a test story beside your code. When this mode is used, any debugger navigation will be reflected both in the test story and in the original files.

The opened test story view shows the full execution history of the selected test. Executed lines of code are highlighted while lines that are displayed only to provide context are faded out. Whenever the execution jumps to a new file, the file name is displayed. When the execution jumps within the file, ”…” is displayed.

Initially, the line that you ran the Open Test Story command on will be highlighted, and you are free to scroll to the very end of the story to see the test error/last executed statement, or to the beginning of the story where test dependencies are imported. You may also search within the test story view to find a point of interest and start from there.

Time Travel Debugger and Runtime Values

Wallaby’s Time Travel Debugger is also fully available when a Test Story is displayed. This means that you can:

Step in/out/over back and forth, or run to a specific code line.

Select any expression in the executed code to inspect its value. All you need to do is select the object, object property, parameter, expression or variable that you want to view. When you do this, Wallaby will display the value that you selected. In addition to displaying selected expression values beside your code, selected expressions are also available in the Overview Log and Side Panel Log in an easy-to-navigate, real-time tree view. Nested properties can be expanded to any depth, and values/paths may be copied to the clipboard.

Wallaby’s Time Travel Debugger is also fully available when a Test Story is displayed. This means that you can:

Step in/out/over back and forth, or run to a specific code line.

Select any expression in the executed code to inspect its value. All you need to do is select the object, object property, parameter, expression or variable that you want to view. When you do this, Wallaby will display the value that you selected. In addition to displaying selected expression values beside your code, selected expressions are also available in the Overview Log and Side Panel Log in an easy-to-navigate, real-time tree view. Nested properties can be expanded to any depth, and values/paths may be copied to the clipboard.

Opening original code

At any time you may use VS Code’s built-in Go To Definition or Peek Definition commands to open or view the original source code.

At any time you may use Wallaby’s Jump to original code intention action to open the original source code.

Hiding repeated executed code fragments

Oftentimes when debugging or viewing a test story, you may want to quickly skip over certain repeated pieces of code, for example:

• various utility functions often called from different places, such as loggers,
• pieces of code in one or multiple files that are executed within a loop, such as for/while or recursion,
• repeatedly executed functions that are callbacks, such as array’s .filter, .map, .reduce, etc., or frequently called event handlers.

Wallaby Test Story viewer allows you to quickly identify and hide the repeated sequences of executed code pieces to let you focus on the important parts of the executed code.

At any time you may use the Hide repeated entries like this code lens to hide the repeated pieces of executed code.

At any time you may use Wallaby’s Hide repeated entries like this intention action to hide the repeated pieces of executed code.

Note that once the repeated pieces of executed code are hidden from the test story, Wallaby’s Time Travel Debugger will also not step into the hidden pieces when moving forward and backwards through your code.

Detaching test story file from the debugger and source code

At any time you may detach test story file from Wallaby debugger and source code to get a readonly snapshot view of your test execution path using the Detach Test Story File from Debugger and Code command/button. The view will not change with your source code changes and will not follow the debugger unless you attach it back with the Attach Test Story File to Debugger and Code command/button).