DEV Community: Jovani Brasil

Visual Gherkin Manager - devlog#3

Jovani Brasil — Tue, 13 Dec 2022 01:54:50 +0000

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:

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.

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.

Visual Gherkin Manager - devlog#2

Jovani Brasil — Sun, 27 Nov 2022 23:54:33 +0000

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:

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

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.

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.

Visual Gherkin Manager - devlog#1

Jovani Brasil — Sun, 20 Nov 2022 14:47:39 +0000

In this project, the idea is to provide a tool to visually help Gherkin tests management. It will be developed a tool that allows you to model Gherkin test flows using activity diagrams and it will be able to convert this flows to tests specifications.

For this, the first step is to think about how to convert the diagrams to test specification. At first it might be something simple, maybe using a graph representation and an algorithm to traverse the graph to find all possible graph combinations.

The second step is create an React SPA (Simple Page Application) with the basic necessary features. Some components for the first project version

A canvas to model the flows: This "modeler" will be implemented using the Storm React Diagrame that allows to create beautiful and consistent diagrams. It must be possible to generate a diagram like this:
A text output: I am looking for some already existent solution, one that I really liked was React Gherkin Editor that supports Gherkin style. The ext output must be something like this:

I will work in this project and for the next post, I hope to have at least some results to show.