Scenario Outline is coming in vitest-cucumber
Tags: vitest, gherkin, typescript
Published: 2023-12-02 20:38:34

I'm still wording on my library vitest-cucumber. I presented it in this post : [Use Gherkin file in your unit tests with vitest](https://dev.to/amiceli/use-gherkin-file-in-your-unit-tests-with-vitest-58gd)

Step by step I add logic from Gherkin language, I worked with `Scenario Outline`.

Scenario Outline definition from Gherkin doc : *The Scenario Outline keyword can be used to run the same Scenario multiple times, with different combinations of values.*

We take this `Scenario Outline` as example : 

```
Feature: Detect image ratio from width and height

    Scenario Outline: Detect image ratio when upload image
        Given As a user in an awesome project
        When  I upload an image <width>px on <height>px
        Then  I see my image <ratio>

        Examples:
            | width | height | ratio |
            | 100   | 100    | 1     |
            | 100   | 200    | 2     |
```

With vitest-cucumber, now you can use it like this : 

```typescript
describeFeature(feature, ({ ScenarioOutline }) => {

    ScenarioOutline(`Detect image ratio when upload image`, ({ Given, When, Then }, variables) =>{
        Given(`As a user in an awesome project`, () => {})
        When(` I upload an image <width>px on <height>px`, () => {
            expect(variables.width[0]).toEqual(100)
            expect(variables.height[0]).toEqual(100)
            expect(variables.ratio[0]).toEqual(100)
        })
        Then(`I see my image <ratio>`, () => {
            expect(variables.ratio[1]).toEqual(
                variables.height[1] / variables.width[1]
            )
        })
    })
})
```

Variables is an array with values extracted from `Examples:` : 

```json
{
    "width": ["100", "100"],
    "height": ["100", "200"],
    "ratio": ["1", "2"]
}
```

But before publish a new version of vitest-cucumber I need your opinions ;)

For `Scenario Outline` I don't know what is best solution.

### 1) run scenario one time with variable values as arguments

Like my example, scenario is run one time and variable values is passed as arguments.
So inside `ScenarioOutline` callback we can use variables as an `array`.

### 2) run scenario *x* times for *x* variable values

In `Examples` we have two lines, so scenario is run two times. First run with 100, 100 and 1 values and second time with 100, 200 and 2 etc if we have more values.

### 3) run scenario one time with random value

Scenario is run one time but we don't know which values. With 100, 100 and 1 or 100, 200 and 2.

Let me know the solution that you prefer ;). After I will update vitest-cucumber and publish a new stable version 🍾🍾

---

## Update 10 / 12 / 23

I publish a new vitest-cucumber version [1.1.0](https://github.com/amiceli/vitest-cucumber/releases/tag/v1.1.0).

Now `ScenarioOutline` and `Examples` is included in my project.

Reading Gherkin docs I choose to run `ScenarioOutline` callback X times for X variables.

With the same `Examples` example, in `ScenarioOutline` callback, variables are : 

```json
{
    "width": 100, // 100 in second test
    "height": 100, // 200 in second test
    "ratio": 1 // 2 in second test
}
```

I hope you will like it ;).