How to use Cypress datatables to loop through multiple test scenarios?

Question

I am trying to use datatables to test one input field in my Cypress scenario below

 Scenario: The one where the user enters a value to calculate the factorial
     Given the user navigates to the Factoriall calculator screen
     When the user enters a value into the input box
         | value    |
         | 12       |
         | 34.56    |

     And the user clicks the Calculate button
     Then a message is displayed to the user
         | message                           |
         | The factorial of 12 is: 479001600 |
         | Please enter an integer           |

Here is the current testing behaviour:

1. 12 is entered into the input box.
2. 34.56 is entered into the input box.
3. The Calculate button is clicked.
4. The message is validated ("Please enter an integer" is displayed) as the input reads 1234.56.

This is how I want the test to behave:

1. 12 is entered into the input box.
2. The Calculate button is clicked.
3. The factorial value is displayed.
4. The input box is cleared.
5. 34.56 is entered into the input box.
6. The Calculate button is clicked.
7. The error message is displayed.

I understand there's an issue with my current logic in that it's entering all the text at the beginning before clicking the button, but can someone please tell me what updates are required so I can get this test working as expected?

Here are my Step Definitions:

When('the user enters a value into the input box', (userInputs) => {
    userInputs.hashes().forEach((userInput) => {
        myValue = userInput.value
        factoriall.getInputBox().type(myValue)
    });
});

When('the user clicks the Calculate button', () => {
    factoriall.getBtnCalculate().click();
});

Then('a message is displayed to the user', (expectedMessages) => {
    expectedMessages.hashes().forEach((expectedMessage) => {
        factoriall.getInputBox().clear();
        myMessage = expectedMessage.message
        factoriall.getResultParagraph().should('have.text', myMessage)
    });
});

Answer 1

It would be best to use a Scenario Outline.
Using this, your entire scenario will be executed 2 times (or the # of rows you add in your table under Examples) and each time, the words with angle brackets <value> and <message> will be replaced by their corresponding value from the Examples: table.

Scenario Outline: The one where the user enters value <value> to calculate the factorial
     Given  the user navigates to the Factoriall calculator screen
     When   the user enters value <value> into the input box
     And    the user clicks the Calculate button
     Then   this message is displayed to the user: <message>
     Examples:
         | value | message                           |
         | 12    | The factorial of 12 is: 479001600 |
         | 34.56 | Please enter an integer           |

To use the values <value> and <message>, your need to call your step like this:

When(/^the user enters value (.+) into the input box$/, (value) => {
    ...
});

Then(/^this message is displayed to the user: (.+)$/, (message) => {
    ...
});

In my example above, I use regular expressions to capture my variables. There are other ways, but I prefer this one.