Contributing to Local Opensource Projects

Hello! During this blog post I will be discussing the two issues I decided to take for this release, the two pull requests that closed the issues and the two small code reviews I did in the Telescope Project!

To kill Two Birds with Two Stones

Picking two issues that challenged me more than my Hacktoberfest issues was not an easy process. The last challenge I left off on from Hacktoberfest was contributing a new provider to Notifire. Eventually I ended up choosing a Telescope issue and issue for a small opensource project.

Telescope Issue

The telescope issue was switching telescope from using body-parser to express.json(). This issue was not as difficult as I thought it was but, it taught me something really cool! Before this issue I would always use body-parser but after researching I learned that you could just use express. Once I understood that it was built in to express, implementing the solution for the PR was easy!

Awesome-Adoption

Awesome-Adoption the second project I worked on for this project. Awesome-Adoption is a opensource project that allows people to adopted pets. The issue I worked on required me to write tests that tested the donate page of the website. The main checks were:

• Test for filtering
• Drop down
• Expecting the elements from the list

This was very intimidating for me as I am still pretty new to writing tests but, the challenge was on! I first was trying to test the donate page with render test and Jest. I had a lot of problems trying to simulate drop downs so I had to turn to the community for help. One of the members of the community guided me to user-event | Testing Library. This really helped me start to form the tests by writing.

test("Test for filtering", () => {
  render(<Donate />);

  userEvent.selectOptions(
    screen.getByTestId("dropdown"),
    screen.getByTestId("donate-test-selection-united-states", {
      name: "united states",
    })
  );

Above was one of the first tests I wrote using the userEvent tool. To grab elements in React, I used a testID to grab the elements. Although this worked and the tests were running, there was a better way to do this. A code review recommended me to use the getByRole option. This option allowed us to:

• Get the option element without tags.
• Send it the value we wanted selected.
• Get the amount of options available.
• Get the currently selected option.

userEvent.selectOptions(
    screen.getByTestId("dropdown"),
    screen.getByRole("option", {
      name: "united states",
    })
  );

 expect(
    screen.getByRole("option", {
      name: "united states",
    }).selected
  ).toBeTruthy();

expect(screen.getAllByRole("option").length).toBe(10);

This was so powerful and allowed code to be more readable. I also found a tool that allowed me to query the text in the document screen.queryAllByText. This allowed me to check and make sure that after I selected an option, the correct data could display. This pull request taught me a lot of neat tricks for writing tests and I recommend you go take a look and see it for yourself!

Code Reviews

I found that the two code reviews were very difficult for me. I felt that looking through the code and trying to improve it was very hard at first. The code looked good and if there was a problem it was very small. Eventually I found things that could help pull requests and improve the code!

First Review

My first review was a very small review. I found that in the pull request, the programmer was using the color : 'black' instead of #000000. This may be a bit picky but the style of css uses hexacode to define colors.

Second Review

My second review wasn't much bigger but taught me a ESLint rule. To start I found style mix matches with the margin in css using pixels or em. So I recommended sticking to one so there isn't a mix in units. The second comment was an ESLint error caused by unary operators. ESLint doesn't allow for unary operators causing the error in the code. To fix this I reccomended using variable += 1 instead of variable++.

Conclusion

This release was a very difficult challenge but taught me a lot about collaborating with new projects and that you never stop learning. Now that I am moving from this, I will be working on my final project of the semester. A difficult issue that will take me 3 weeks. See you next time!