Research Cypress for testing and demo

[yalla-coop]

Research Cypress for testing and demo

[MohammedYehia]

@thejoefriel @othman-shamla @susanX @wright1 @mr-bagglesworth
This is the demo repo for cypress if you all happy with how cypress works then we can add it to this repo
https://github.com/MohammedYehia/cypress-e2e-example

[martinbagshaw]

@MohammedYehia I think a bit more info might be required here. Assuming, this is a full testing suite that can do unit tests, as well as integration tests...

More render test examples (such as the one render test in app.test.js) might be useful to see. In the context of our app, if a user gets a certain search result, what text, and what correlating colours do we expect the ui to display?

Also, is the main bulk of the testing performed in app.spec.js? I can see you are hitting a route in the app, then testing a classname (i.e. .App). Do you know how this might work with styled components? Given our stack choice, class names won't be as semantic. Might be worth looking into this a bit.

Lastly, a couple more examples of unit tests with plain javascript functions tests might be useful to see, especially as we are going to have a variety of filter functions to process search results.

It feels like smaller unit tests should be the bread and butter, though integration testing is definitely something cool to learn, for me at least!

[MohammedYehia]

@mr-bagglesworth for the file app.test.js this is from React testing library and I guess we won't be using it

with the styled component, the cypress best practice is to add a custom data attribute like this data-*

<S.comp data-cy="123" />

and then we can use

cy.get("[data-cy=123]").click()

also, you should go with this pattern even if you have classes or ids
with this link, you will find a list full of cypress examples
https://docs.cypress.io/examples/examples/recipes.html

and you can split the tests into multiple files but this is just a demo