In-App Testing With Spearmint

Max Weisenberger
3 min readMay 13, 2021

What is Spearmint?

Spearmint is an all-in-one testing solution that is built by developers, for developers. This open source tool makes the monotonous task of writing tests more efficient and effective. By design Spearmint provides a user experience that helps the developer make better choices when writing tests. Within the application there are tools available for almost every test case. Simply input the relative testing criteria for the component or file being tested and receive an executable Accessibility, React, Redux, Hooks, Endpoint and Puppeteer test-code.

What’s new?

The latest release of Spearmint includes a user interface refresh, in-app testing capability, an additional tool for accessibility testing along with major upgrades under the hood.

In-App Testing

Run generated test code within Spearmint

Spearmint does a great job at generating syntactically correct test-code. However, switching back and forth between the code editor and Spearmint can be tedious and slows down development. To eliminate this window swapping nightmare our team has developed a fully functional in-app terminal. Coupled together with the newly designed modal, in-app testing is a breeze. Click the ‘Run Test’ button, follow the guide and click what kind of test you would like to perform. The testing options include, a standard Jest test command, a verbose Jest command and finally a Jest coverage command to show just how much of the codebase has tests.

Accessibility Lens

Ensure your app is accessible to everyone with Accessibility Lens

Accessibility Lens (shown above), is inspired by the previous generation of Spearmint. Their goal was to add an accessibility testing suite to Spearmint and we wanted to continue expanding the accessibility testing scope. This new tool allows developers to load their applications and change the way they interact with them. By simulating user mismatches, the developer is better equipped to design and test their application with accessibility in mind. Simply load an application within Spearmint’s browser view and toggle the different attributes to find out if the application is truly accessible to anyone.

User Interface Refresh

Run Test Modal and Test Terminal

When designing the latest user interface our focus was on utilizing window space in a smart way. The new tabbed view makes use of the right panel of the application. The tabs dynamically change based on what the user is trying to achieve. For example if the user is clicking on code in the file tree, the tabbed view automatically switches to Code View.

Another addition to the user interface is the Run Test modal. When the user clicks ‘Run Test’ the tabbed view is instantly switched to the Test Terminal and a modal appears. In this modal there is an easy-to-follow guide that will assist with navigating the terminal to the relevant directory, install appropriate dependencies, specify test file and executing the test.

Together these improvements result in a more streamlined work flow reducing user friction and mitigating “testing fatigue”.

Thank you

All of us from the Spearmint team would like to thank you for taking the time to read about our latest release. We hope that you find Spearmint useful and please do not hesitate to reach out with any feedback.

Download our Product

SpearmintJS — Website hosting the production build.
Github — Please, star us on Github! Also, check out the source code and contribute towards the development of Spearmint.

The Team

- Dieu Huynh // linkedIn // https://github.com/dieunity
- Justin Baik // linkedIn // https://github.com/JIB3377
- Mahmoud (Mo) Hmaidi // linkedIn // https://github.com/mhmaidi789
- Max Weisenberger // linkedIn // https://github.com/MaxWeisen

--

--