Improve unit tests for Leaderboard component

[jayeclark]

Are you learning or practicing how to write unit tests for React components, looking to get some portfolio PRs for your job search, or just a wiz at testing who likes to help out Open Source projects? Please consider helping to improve the testing coverage for this project!

Description

Some basic unit tests have been written for the Leaderboard component, but they need to be fleshed out in order to be able to catch errors introduced into the code in future refactors and enhancements. As you'll see, testing is very light across the entire project right now, but hopefully focusing on doing unit tests 'right' for a handful of components can help provide an easy template for future contributors to apply on the rest of the project.

Expected Behavior

The Leaderboard is a simple component that takes four props: an array of users that are participating in a particular sprint competition, a number of users to display per page, the current user, and the current user's router history.

On initial render, it shows a table of users sorted in descending order by score. The page that is visible initially is whichever page the current user is on, and the row with the current user is highlighted. (So, if I'm in last place on a leaderboard where there are 3 pages of users, the third page would be displayed first.)

It also shows a podium with the top three scorers on it. (The podium only appears if at least one person in the competition has a score > 0 ... if no one has any scores yet, there is no leader.)

Finding the Component in the App

1. Fork the repository and follow contributing guidelines to get your local dev environment set up
2. Log in to Pareto, navigate to the arena, and create a sprint starting this past Monday, with yourself and several other test users
3. Once you've created the sprint, view the sprint, click on the 'compete' page, and record that you've completed a few daily achievements (you may need to use the time travel options if you create the spring
4. When you navigate to the Leaderboard tab, you should see a leaderboard & podium, with yourself in first place.

Suggested Tests

Currently there are only a few basic tests written - whether the leaderboard table appears with the right number of rows, whether the podium appears, and whether the page that initially shows is the one that the current user is on. Lots of room for improvement!

Some possible tests:

LEADERBOARD TABLE

• "correctly increments and decrements pages"
• "initially displays the leaderboard table in descending score order"
• "reacts to a click on the "name" column header by sorting the initial state leaderboard table by descending name order"
• "reacts to a click on "score" column header by sorting the initial state leaderboard table by ascending score order"
• "reacts to a click on the "rank" column header by sorting the initial state leaderboard by ascending score order"
• "reacts intelligently to new sortby properties. if descending score order is also descending name order, clicking the 'name'
• "correctly filters the user array based on a given filter phrase."
• "filters according to a combination of first name plus the first letter of last name. ('John S.' would fit the filter 's'.)"

LEADERBOARD PODIUM

• "displays 3 different podiums of varying heights"
• "displays the number 1 scoring user on the tallest podium"
• "displays the number 3 scoring user on the shorted podium"
• "does not display the podiums no user has a score greater than 0

[neilgebhard]

Hi there! Would I be able to work on this? I'm new to open source, but I'm excited to start contributing. I have experience with React and React Testing Library so I'm confident that I can tackle this issue.

[jayeclark]

Hi @neilgebhard and welcome! I was new to open source myself back in October - it has been a fantastic learning experience! We'd very much appreciate the help on this one, assigning it to you now! Let me know if you have any questions or run into any issues.

[neilgebhard]

Thank you @jayeclark! I'll give it my best shot

[neilgebhard]

Hi @jayeclark, I seem to have some trouble getting set up. I made an account and logged in successfully.

However, I can't create a sprint. When I navigate to "Start a Sprint", "Choose Your Sprint Template" and "Choose Your Competitors" are both disabled. Also, the button on that page is stuck on "Saving..." with a loading spinner.

I tried creating a Sprint Template in the Sprint Template page, but it doesn't seem to create one for me.

I'm also getting a ton of errors in the console.

Am I doing something wrong? I was able to make some tests by examining the code but it would be nice for me to make an actual leaderboard table and interact with the UI.

Also, there are many times when I get stuck on this loading screen while logging into the app. I'd have to clear my browser storage and refresh the page to fix it.

[jayeclark]

Thanks for reporting this! I’ll make a fresh account & try to see if I can replicate. Almost certainly you aren’t doing anything wrong, the project just had a major bug addressed (there was a problem where thousands of active sessions were being created every time someone made a sprint) and I’m guessing fixing that might have exposed another issue.

Just to be sure, you could try double checking that your fork isn’t behind the upstream (the bug fix I mentioned affects the back end, so it could definitely lead to the error you’re seeing if it’s not yet incorporated into your fork.)

If your fork is up to date with the upstream repo & you’re still having this issue, if you reach out to me at jay@jayeclark.dev I can send you the credentials for a test account that is already set up & should allow you to immediately get past these errors while I troubleshoot!

[neilgebhard]

Yes, I believe I'm up to date.

I'll send you an email to connect.

[mikhael28]

Hehe yeah, we had a major bug. Should be good now!

[mikhael28]

Closing! Great work @neilgebhard