DEV Community

Jovani Brasil
Jovani Brasil

Posted on

Visual Gherkin Manager - devlog#3

In the last few weeks, I worked on the implementation of a simple test case/scenarios generation algorithm based on flow diagram containing test steps. The algorithm was integrated into the already-existent application and the result is shown below:

Visual Gherkin Manager main delivered features

Remember how it works: It is necessary to create a diagram with the test steps (test step is a diagram "component"), indicating the test connections (a test connection is a diagram "link") for each step. A flow/scenario/case is a sequence of test steps connected by links with the same label. Then the tool can generate Gherkin tests based on the created diagrams. The ideia is to provide the Gherkin tests view and management in a visual approach based on diagrams.

In the output implementation, was used the library React Gherkin Editor, as previously planned. The editor was encapsulated in a React Component, to manage editor configurations and some states (editor text content, for example).

For the generation of scenarios it was necessary to think a little more, basically was implemented a recursive depth traversal algorithm that maps the possible paths in the flow and generates a set of test scenarios. It is very important to note that the paths are built according to the transitions, which are the scenario identifiers. All this logic was implemented inside of a service that is called when you click on generate tests.

Visual Gherkin Manager with diagram paths

Today I started to work on the implementation of diagrams import, that personally I believe to be essential for the tool to be very helpful. For the next post, I will show the importing diagrams feature and present some backlog for the subsequent implementations.


You can visit the application here to evaluate. All feedback is welcome.

Top comments (0)