Add Front End Tests

[c3ho]

What would you like to be added:
Add frontend tests, I think this should be broken up into multiple parts.

Why would you like this to be added:
We're using jest, created by facebook (creators of react) in the backend, let's leverage that for front-end testing as well

Components

• Spinner: @tonyvugithub
• SnackBar
• SearchBar
• ScrollToTop
• LoadMoreButton
• AdminButtons
• DeleteFeedDialogButton
• LogoIcon: @chrispinkney
• LoggedIn
• LoggedOut
• Footer
• DynamicBackgroundContainer

[chrispinkney]

I can give this one a shot, however I know next to nothing about testing (front end or otherwise) and my knowledge of react is pretty lacking. That being said I'm always interested in learning new technologies, and especially learning how telescope works under the hood (on the front end side at least.)

[manekenpix]

@chrispinkney sure, I'll assign it to you. I'd also like to give this one a go since I've never done front-end testing. We can both work on it, just targeting different areas of the code (or we can collaborate).

[c3ho]

This is going to be a big piece of work spanning multiple PRs, should we create project for it?

[manekenpix]

I think we can create a project for tests, not only for front-end testing. What do you think?

[c3ho]

Sounds great, we need to increase our test coverage for backend as well.

[cindyorangis]

Not sure if I have the time to participate in writing test code but this is definitely something I'll be following closely. :)

[chrispinkney]

@manekenpix sure I'd love to collaborate, either way I'll definitely need someone to bounce ideas off of haha.

[manekenpix]

Resource for this issue: https://create-react-app.dev/docs/running-tests/#option-2-react-testing-library

[chrispinkney]

BTW @tonyvugithub also expressed interest in this issue

[tonyvugithub]

Thanks @chrispinkney . Let's do it guy!

[tonyvugithub]

@manekenpix @chrispinkney : Do we have a guide how we should approach this in term of dividing the workload? Also @manekenpix mentioned that we could look at testing option from Gastby docs

[tonyvugithub]

I talked to @chrispinkney a bit and agreed that we should discuss about which components each person should be taking care of.

[humphd]

The key to doing something like this is to split it up into lots of smaller PRs.

I would suggest you have one "meta" bug with a checklist, and people can claim an individual file to write tests for. This would then happen in a PR-per-file, and the meta bug can keep track of what is and isn't done, and who has claimed what.

At the top of this bug, you can do a Markdown checklist of all the parts to be tested and update it.

[tonyvugithub]

@humphd :I agreed with all you mentioned. How do we create a "meta" bug? like we create an issue?

[c3ho]

This could be the metabug and we mention all the front end test issues here

[tonyvugithub]

@c3ho : So I guess one of the maintainers will create the checklist here. And either myself, or Josue or Chris will pick a component, write tests on it then create PR separately from this "meta". This meta then keep track of what have been done and approved. Do I understand it correctly?

[c3ho]

Yeah I can update this with the files issues so they can all be mentioned. Feel free to file a issue for the component you’re creating the test for and just mention this specific issue

[tonyvugithub]

Hi all,
After talking to @manekenpix , we think we need a list of components for easy tracking. I made one myself. Please let me know if this is something we could use.
componentList.pdf

[humphd]

No to an external file. Let's do it in the issue please.

[tonyvugithub]

@humphd yes, I understand that as you have mentioned above. I just provide the list so the owner of the issue can use it as a reference to write up the md file here. Also, to consult everyone's opinions if my categorization of components makes sense. I should have been clearer when sharing the file. My bad.