[Developer Experience]: Add Cypress Test for Header Component

[chadstewart]

Developer Experience Issue

Please describe your Developer Experience Issue. A clear and concise description of what the problem is. Ex. I have an issue when [...]

A Cypress Test should be added to test the header in both Desktop and Mobile.

Describe the solution you'd like A clear and concise description of what you want to happen. Add any considered drawbacks.

A Cypress test suite should be written that:

• Test that the components in header render properly in both Desktop and Mobile.
• Test that the navigation in each works. It doesn't have to check exactly where it's being navigated to.
• Tests that the TechIsHiring logo navigates back to Home on '/'.

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

n/a

Teachability, Documentation, Adoption, Migration Strategy If you can, explain how users will be able to use this and possibly write out a version in the docs. Maybe a screenshot or design?

n/a

[jackz070]

Hey!

I'd like to take this issue to get some practice with writing Cypress tests, but I think I will take a couple of days to finish off some other stuff I have going, familiarise myself with the codebase, the relevant PR #140 and get to work on it.

If that's okay please assign me.

Btw, I think it would be nice to mention that PR in all the testing/Cypress related issues because atm it's basically the projects documentation on those things.

[chadstewart]

Hey!

I'd like to take this issue to get some practice with writing Cypress tests, but I think I will take a couple of days to finish off some other stuff I have going, familiarise myself with the codebase, the relevant PR #140 and get to work on it.

If that's okay please assign me.

Btw, I think it would be nice to mention that PR in all the testing/Cypress related issues because atm it's basically the projects documentation on those things.

Sure, no problem. Feel free to work on this.

Yeah, I'll add #140 to the other Cypress issues just so that there's reference for other contributors coming in.

Thanks so much!

[jackz070]

I guess I will need some help on this one.

Apparently the Header component includes the main-nav component which uses useRouter hook to get the current pathname. With latest NextJS update the RouterProvider component is gone and having searched for answers a lot I don't know how to either:

• render the component wrapped with true or mocked router context provider OR
• mock the useRouter hook so that the context provider won't be needed

Without one of those I don't think it's possible to render the component at all. Or am I missing something?

Any input will be appreciated!