Contributing to Local Opensource Projects
Tags: opensource, javascript, webdev
Published: 2021-11-30 03:57:16

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](https://github.com/Seneca-CDOT/telescope)! 

## 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](https://github.com/notifirehq/notifire). Eventually I ended up choosing a [Telescope](https://github.com/Seneca-CDOT/telescope/issues/2504) issue and [issue](https://github.com/redxzeta/Awesome-Adoption/issues/231) for a small opensource project. 

### Telescope Issue
The [telescope issue](https://github.com/Seneca-CDOT/telescope/issues/2504) 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](https://github.com/Seneca-CDOT/telescope/pull/2512) 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](https://github.com/redxzeta/Awesome-Adoption/issues/231) 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](https://testing-library.com/docs/ecosystem-user-event). 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](https://github.com/redxzeta/Awesome-Adoption/pull/237) 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](https://github.com/Seneca-CDOT/telescope/pull/2199#discussion_r757564395) 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](https://github.com/Seneca-CDOT/telescope/pull/2531/files/f00486c971e8806fb1abea37029b6e05385e1862) 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!