Cypress - terminate function if condition fails

Question

In the screenshot above, there are 4 products. Each unpicked product will have a Pick button. To the right of the Pick button is the quantity. If the user clicks the Pick button, the product will be listed under PICKED ITEMS. If the user clicks the Pick button for Product #1 3x, it will be removed from the UNPICKED ITEMS list, and will be moved to the PICKED ITEMS list.

Now I want to write a Cypress e2e test that will click the Pick buttons X times, where X is the total quantity of all the products under UNPICKED ITEMS. In the screenshot below, the total should be 10, because the other 2 are already picked.

Here's what I've tried

But it continues to run even after all buttons have been clicked

Answer 1

Technically the function keeps calling itself because you are not waiting for the click() events to process.

But there are other problems, for example res will never equal 0.

If that condition were true, the preceding query cy.contains('Unpicked items')... would not find any elements and the test would fail.

Instead use .each() to click every button.

There not enough detail to give you a proper answer, but this is a rough approximation based on this answer
Testing removing items from a React controlled list

Cypress.Commands.add('unpickedItems', () => {
  cy.contains('Unpicked items')
    .parent().find('Pick')
    .filter(':visible')
})

cy.unpickedItems().then(intialItems => {

  let initialCount = intialItems.length

  cy.unpickedItems()
    .each((item,index) => {

      // remove an item
      cy.unpickedItems().first().click()

      // verify there is one less item
      cy.unpickedItems().should('have.length', intialCount - index -1)
    })
})

cy.unpickedItems().should('not.exist')