To quickly show and focus the panel you may use the Focus Tests View wallaby command ( Ctrl/Cmd + 0), or, if you’d like just to show it without focusing, press Ctrl/Cmd +. Some bits of the displayed information are hyperlinks so you can navigate (with Enter or Cmd/Ctrl + Shift + double click) to different places, for example to the exact error line, or a line where something is logged to console. Wallaby.js Tests View displays all tests that are currently failing along with the error stacks and registered console.log calls. Pink squares mean that the source line is on the execution path of a failing test.Red squares mean that the source line is the source of an error or failed expectation, or is in the stack of an error.Yellow squares mean that the source line is only partially covered by some of your tests.Green squares mean that the source line is covered by at least one of your tests.Gray squares mean that the source line is not covered by any of your tests.Here is what these coverage indicators mean: Let’s have a look at the editor gutter where you may see some indicators. We also recommend reading about some more powerful ways to log things and measure code performance with wallaby.js. ![]() Think how cool it is - your code editor is your console with all the required context. This is a great way to quickly inspect any objects without having to leave your editor, without switching to any other console. The code coverage and messages are automatically updated, just as you type.Īlso, try editing some console.log arguments or just console.log any object you like. Right after the change wallaby.js automatically runs your tests and displays the result inline and in the status bar. Try jumping to any of the passing tests and break it, for example try changing the 2 plus 2 expectation result to 5 in the should add numbers test, or try breaking the code covered by the test. As you can see, there are various colored squares displayed for each line of your source code. When wallaby.js is running, you can see the code coverage in opened source files (specified in wallaby configuration file). Now, let’s open the sample calculator project spec ( test/calculatorSpec.js). If you have multipleĬonfiguration files, use a different naming convention or have the config file outside the root folder, you may select the config fileįrom your editor Side Bar and use the Select as Wallaby.js Config context menu item. In your project root and will automatically select it, valid names are: wallaby.js,. ![]() ![]() If your project does not support automatic configuration then Wallaby will automatically search for a configuration file You may use the Select for Wallaby.js Automatic Configuration context menu item for the project folder. If you have a mono-repo and only want to run for one project, ![]() Wallaby will remember that you are using automatic configuration. After that you may use the Wallaby Start command and Menu item for your project folder in the project’s file tree. If you are using a technology that is supported byĪutomatic configuration, then you may use the Select for Wallaby.js Automatic Configuration context Wallaby for Sublime Text needs to know what configuration is required to run your tests. Once you have the source code locally, open the project folder in Sublime Text. You mayĭownload a zip file with the source code or else clone the repo using: git clone Note that when you start wallaby.js package for the very first time, it will take a minute to install required dependencies.įor this tutorial we will use our sample calculator project. First you need to install wallaby.js package for Sublime Text, if you haven’t done it yet.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |