recipes-app-loadRecipesPage-command.js

// ./cypress/support/commands.js

Cypress.Commands.add('loadRecipesPage', () => {
  // One command can call another, just like plain functions
  cy.mockOktaLoggedState();

  // When UI requests recipes, Cypress, not the actual server, will return response
  cy.route('GET', '/api/recipes', 'fixture:recipes.json').as('recipes');

  // I can do manipulation on a fixture before serving it
  // And I can reuse fixture as response for different urls
  cy.fixture('recipes').then(recipesResponse => {
    cy.route('GET', '/api/recipes', recipesResponse).as('veganRecipes');

    // In real application I select subset of recepes from Database, but for test, such filtering is enough
    const veganRecipes = recipesResponse.data.filter(recipe => recipe.isVegan === true);
    cy.route('GET', '/api/recipes?vegan=true', {...recipesResponse, ...{data: veganRecipes}}).as('veganRecipes');
  });

  cy.visit('/recipes');

  // wait() means that Cypress will wait for this requests to happen, before proceed to the next step
  // So I am waiting for request to user profile (which I stubbed with cy.route() in mockOktaLoggedState command to happen
  cy.wait(['@oktaUserProfile']);
});