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
@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,
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
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.