recipes-app-vegan-toggle.test.js

// ./cypress/integration/recipes-page.test.js

describe('Recipes page', () => {
  before(() => {
    cy.loadRecipesPage();
    // Save selector as shortcuts, usefull if they will be used repetitively 
    cy.get('[data-cy=recipes-vegan-toggle] input').as('toggle');
    cy.get('[data-cy=recipes-vegan-toggle] label').as('toggleLabel');

    cy.get('[data-cy=recipe-card]').as('recipeCards');
    cy.get('[data-cy=recipe-card-vegan-badge]').as('veganBadge');
  });

  it('checks vegan-only toggle', () => {
    // confirm that vegan toggle is unchecked by default
    cy.get('@toggle').should('not.be.checked');

    // not every recipe has vegan badge
    cy.get('@recipeCards')
      .its('length')
      .then(numOfRecipes => {
        cy.get('@veganBadge')
          .its('length')
          .should('be.lt', numOfRecipes);
      });

    // check toggle 
    cy.get('@toggleLabel').click();
    cy.get('@toggle').should('be.checked');

    // now only vegan recipes are loaded
    cy.get('@recipeCards')
      .its('length')
      .then(numOfRecipes => {
        cy.get('@veganBadge').should('have.length', numOfRecipes);
      });
      
    // change in sdtate of toggle should be reflected in page url
    cy.url().should('include', 'vegan=true');
    
  });
});