Set up Cypress Test for Search page

[ElliotForWater]

We would like to start using End to End tests to ensure our application doesn't have unseen bugs.
We thought about Cypress since some of us have a good experience with it.

Before starting it, we would like to do a trial, create a MVP for the testing suits, to see how well it integrate with our system.
The idea would be to set up Cypress and have one or two test running.
And see what challenge we could face with it.

A good first test could be on the search page.

[ShubhamPalriwala]

Writing structural tests for our landing page would be a great way to start in my opinion.
This can be followed by functional testing of the search bar too!
I'd like to work on this issue, let me know if I can proceed further.

[gsambrotta]

Hey @ShubhamPalriwala Happy to see you are interested in this.
Would be very helpful for us.
I think it would make more sense to make a prototype of how we can set up Cypress.

The top priority to test is the search bar.
We would you start with structural test on the homepage? What would you like to test there?

[ShubhamPalriwala]

So, I recently wrote a test suite on the merriam-websiter website wherein I tested their searchBox which can be found here. Let me know if we can proceed with this for now.

[ShubhamPalriwala]

@gsambrotta Should I proceed with it with something similar to what I've mentioned above?

Awaiting your feedback

[gsambrotta]

@ShubhamPalriwala that test looks very similar to what can fit for us.
Yes please, feel free to proceed with the task.

I would be happy if you can share early PR, like a draft of your work in progress so we are sure you don't work for long time on something that might not be the best solution for Elliot for Water.

[ShubhamPalriwala]

Hey @gsambrotta, Can you mail me these 3 environment variables so that I start the development server as without them I cannot view the search results:

NEXT_PUBLIC_CONTENTFUL_GRAPHQL_URL=
NEXT_PUBLIC_CONTENTFUL_SPACE_ID=
NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN=

[gsambrotta]

@ShubhamPalriwala sorry for some reason I don't get notifications from issues. I will try to keep acloser eye on this issue.
I created a sandbox environment for contributors without Contentful access.
Now you can simply create a MOCK_CONTENTFUL=TRUE var in your .env file as we do here:
https://github.com/ElliotForWater/elliotforwater.com/blob/develop/.env.development.example#L16