DEV Community

Jovani Brasil
Jovani Brasil

Posted on

Visual Gherkin Manager - devlog#2

I have been working in this project since the last post, and today I will show you a first result.

The first feature implemented was the canvas to model the test flow using a visual diagram that seems like an activity diagram. In the last post I was thinking something like the following:

desired-model-diagram

After a lot of effort, using React with TypeScript and the library react-diagrams the following result was achieved:

achievied-model-diagram

I was a long time without writing some frontend code with React and most of the effort was remember the necessary structure and concepts.

The library react-diagrams is very extensive, allowing easy customization of all necessary components styles and behaviors. For example, It were necessary to create custom node and label components to contemplate the desired needs.

simple-components-explanation

A important point is the lack of diagram validations. I am mapping possible rules that are required to avoid unexpected errors/behaviors and maintain some level of consistency. All the rules will be implemented soon.

I am working in the test case generation (Gherkin format), that is the second main part of the project. In the next post I will share with you the results.


The application was deployed on Netlify, you can visit here to evaluate.

Top comments (0)