Scenario: I should be able to search for a doc
    # An AJAX Search Happens Here
    When I type "recommended" into the "Search Input" in the "Header"
    Then I should see "Recommended Cypress Setup" in the "Search Result" in the "Header"
    
    # A redirect happens here
    When I click the "Search Result" in the "Header" containing "Recommended Cypress Setup"
    Then I should be redirected to "Recommended Cypress Setup"

// That's all you need to do to stub an endpoint!
cy.route('GET', '/users/*', {
  id: 1,
  name: 'toli'
});


// or put it in a file
cy.route('GET', '/users/*', 'users.json');

When I open "Some Page"
When I click "Some Element" inside "Some Container"
When I type "some text" into "Some Field"
When I scroll to the bottom of the page
When I drag "Some Element" above "Some Other Element"
When I take a snapshot named "Cheese"

Then I should be redirected to "the Home Page"
Then I should see 2 "Elements" containing "hello!"
Then I should see an "Element" in the "Container"
Then I should see a "red" background on the "Button"
Then I should see a "blue" border on the "Button"

{
  "Account Container": {
    "default": ".AccountSelection"
    "Title": ".Title"
    "Message": ".Message"
    "Accounts Select": ".AccountsSelect",
    "Next Button": "input:contains('Next')"
  },
  "Account Confirmation Modal": {
     "default": ".AccountConfirmationModal"
  }
}

Scenario: I select an account from the account modal

    When I select "PICKLE FARM" from the 
         "Account Select" in the "Account Modal"
    And  I click the "Next Button" in 
         the "Account Modal"

    Then I should see an 
         "Account Confirmation Modal"

{
  "Account Container": {
    "default": ".AccountSelection"
    "Title": ".Title"
    "Message": ".Message"
    "Accounts Select": ".AccountsSelect",
    "Next Button": "input:contains('Next')"
  },
  "Account Confirmation Modal": {
     "default": ".AccountConfirmationModal"
  }
}

{
  "Home": "/",
  "Users": "/users",
  "Sign Up": "/sign-up",
  "Messages": "/messages",
  "External Link": "http://extenal.link"
}

{
    "Account Selection Container": {
        "default": ".AccountSelection"
        "Title": ".Title"
        "Message": ".Message"
        "Accounts Select": ".AccountsSelect",
        "Next Button": "input:contains('Next')"
    }
}

When I click the "Button"

When I click on the "Submit"

When('I login', () => {
   const username = 'toli';

   setState('username', username);

   cy.get('.loginInput').type(username);
});

Then('The username should match in the header', () => {
   cy.get('.header .username').should('contain', STATE['username']);
});