Tor Project: Developing Unit, Integration and E2E tests for OONI Probe Desktop apps

Tor Project: Developing Unit, Integration and E2E tests for OONI Probe Desktop apps

About Me

Hello! I am Shivam Shekhar Pathak. I am a pre-final year student of Mathematics and Computing from India.

About My Project

My project involves writing a comprehensive suite of tests for the OONI Probe Desktop applications and automating these tests when a PR is opened to make sure the proposed contributions to the codebase are non-breaking.

My Time Zone

Indian Standard Time (UTC +5:30)

Getting in Touch

GitHub: @eddges
Twitter: @shehges

1 Like

Week 1 and Week 2 (Community Bonding Period)

  • Joined the gsoc-2021 slack channel at OONI.
  • Was warmly welcomed into the OONI community along with another student. Learned about the bi-weekly sprint structure at OONI.
  • Discussed the project plans and the timeline with mentors.
  • Familiarised myself with the libraries and tools required to accomplish the goals of my project.
  • Read about various APIs exposed by Jest and react-testing-library so as to understand possible assertion types.
  • Set up a feedback cycle with my primary mentor @sarath_ms

Some demo tests I wrote during these initial weeks can be found in the repository:

1 Like

Week 3 (May 31 to June 6)

After reading about and understanding the tools and libraries required to work on my project, my goal for this week was to familiarize myself with the current code-base and make configuration changes to facilitate writing unit tests.

During this week, I

  • had a meeting with my mentor where we planned out the roadmap for the current week.
  • modified the babel and jest configurations to enable ES6 support in the root directory.
  • received helpful pointers from my mentor in setting up testing for visual correctness
  • wrote dummy tests in the repository
  • created a Pull Request for review

Link for the PR

My goal for the upcoming week will be to:

  1. Work on the suggested configuration changes
  2. Successfully complete Week 1 goals as mentioned in my proposal timeline
  3. Set up an external blog website
1 Like

Week 4 (June 7 to June 13)

The first goal of this week was to get new configuration settings merged into the repository. These new settings would facilitate writing React component tests using jest and @testing-library/react. The new babel settings would facilitate translation of ES6 syntax to CommonJS. With some great pointers provided by my primary mentor @sarath_ms, I was able to achieve this in the first couple of days.

The next challenge was actually writing some component tests. I had planned on covering the ‘Onboarding’ user story in the first week of this coding phase. This began with laying out a blueprint of the nodes I wanted to assert and the user interactions emulating which made the most sense. I was able to design this blueprint after taking hints from the unit and integration tests written for OONI’s other repositories.

By the end of this week, I was able to write unit tests for three NextJS components, Sections.js, QuizSteps.js and Stepper.js.

All the three components posed different challenges. Sections.js was perhaps the most straightforward, but setting up the component rendering system required writing a Higher Order JSX Component which could provide react-intl translations and a theme provider which could pass on the calculated CSS theme data upon compilation of the JSX code. Mr. Sarath provided a big hint in the form of an already existing ThemeProvider component and what prop was to be passed down with it. I was able to get tests working for Sections.js.

Stepper.js was a very visual component with no text. Writing snapshot tests for its various stages seemed like the right idea. Mr. Sarath, my primary mentor approved of this idea.

QuizSteps.js is an animation-heavy component. Animations are displayed at various stages which in turn trigger callbacks. I resorted to writing tests with timers which I figured mustn’t have been the best way to go about in dealing with animations. Mr. Sarath encouraged me to try out some APIs and I was ultimately able to figure out a better way to write tests for this particular component.

My first coding week saw some ups and downs. I’m extremely grateful to Mr. Sarath who provided frequent pointers and feedback and played a key role in solving much of my issues.

Week 5 (June 14 to June 20)

The goal for this week was to write tests for Dashboard and Settings components. ​This involved covering Sidebar.js, DashboardHeader.js and RunTestCard.js. The original timeline involved writing tests for View Results screen as well, but I figured it’d be best to defer it to later, after the network tests are covered.

The second week of the coding phase began with identifying the components that needed to be covered for unit testing. Although I could identify a few more components which could be covered with the tests, writing the tests for them would have meant testing implementation details, which was opposed to the principles of @testing-library/react. Figuring out a way to test these couple of components will come under backlog, to be taken up in the 3rd or 4th weeks, or towards the end of the program.

Some of these tests posed multiple challenges. But I feel I was able to work around these challenges and I’m confident in these unit tests. They are fairly generic and should withstand good degree of code changes.

Apart from writing tests, I:

  • Properly set up eslint and adjusted the formatting issues with last week’s as well as this week’s PRs
  • Wrote mocks for some electron functions
  • Split up the jest configs for unit and integration tests into separate files

The PR sent for this week: