Author: Fadi Abdulrab

At the beginning of this week, the main goals was to fix the bug that caused Views to render multiple times. And changing the style of the whole application by putting all of the styles into a single style file and using it on every page.

I followed the previous work to use the correct UseEffects and the render problem got addressed. I next went on to the pagination issue, where the list of items was inconsistent. And page pagination did not function at all. The bug was at the pagination function, so after I altered the function by using UseInterval solution, the problem is fixed. In addition, I started performing Async tests on the UseInterval function to have a better understanding.

After that I started to work on the styling because the application. The point of the style wasn’t the style itself, but rather to make it easier for me to make changes or style a component. The previous style was somewhat random, and each component was styled independently, which made the code more complicated. Therefore, the main purpose here was to clean the code and make the style easy to edit.

Next, I styled the main page and the primary background, in addition to all other components in the main pages. The result for me is great, now I can change any component style in only one place for all pages.

While Mr. Peter was testing the application before to this version’s upgrade, we discovered a bug again in the keyboard toggle. It took us some time to solve this problem, but after we did, Mr. Peter showed me how to make it a reusable component for our app, which was wonderful and helpful.

To conclude, the keyboard toggle were functioning properly with no bugs. However, it was not as we expected it to be, so we postponed the upgrade until the following week, when I will fix the issue.

Following what I did last week, I spent this week learning how to debug the code, using breakpoints more in the debugging. I tried to solve the fake-timers issue I had last week, by reading the react native docs. I dived more into testing asynchronous code, and learnt several ways to make the test effective. So I used async/await correctly to pass that.

The flatList component of react native was a major time-consuming task that I needed to test. Unfortunately, I spent a lot of time trying to solve the problem and I failed to resolve it. The error message given was always related to the testing configuration, which already set up and working successfully last week. Therefore, I considered changing the code and replacing the FlatList components with SectionList to avoid all of this, but it was not the perfect option.

Finally, in order to solve the aforementioned problem, I had to mock the FlatList at the end. it seemed quite impossible to test or to get an element form a FlatList unless it is mocked.

This week, I began resolving dependency issues in order to rerun all test files and create new tests. There were several conflicts, so I reinstalled all jest and babel dependencies to address them. And this resulted in another failure to render the application due to Babel’s configuration and plugins.

The Error message was unclear, the code was difficult to follow.  This caused me to have greater difficulty troubleshooting the problem and discovering the bug, and it took me a significant amount of time to find a solution. I eventually had to separate the babel configurations for the application and the test files.

After that, I began to examine the test files and ensure that they ran properly. Numerous issues relating to Fake-timers and Mocks have appeared; I must solve them, ensure that existing tests are functional, and create new tests with no dependency conflicts or incorrect configurations.

After I had been familiar with the React Native and Typescript that we use in the current project. Mr. Peter helped me with installing and configuring the environment and the project on the computer. And it took some time because there were so many dependencies involved in the beginning.

Following that, I needed to look into the project files specially the testing  files and understand how that operates in order to carry on the testing later. Therefore, in order to begin learning how to test, you need to have an understanding of the concept of the AAA pattern. And That is how we structure a unit test by dividing each test into three sections — Arrange, Act, and Assert — with each section serving as a prerequisite for the next. The arrange phase puts up the input values for the test. The act phase initiates the primary tested function. And finally, the assert step ensures that the function’s output matches expectations.

After that, I got introduced to react testing library that we can implement a test using jets. Which is a test runner that identifies tests, executes them, and evaluates whether or not they passed or failed. I spent most of my time reading and gaining knowledge about testing, as well as putting several tests into practice.

My first week at the company was mainly focused on learning the technologies that I’ll be working on during my training. I spent the first day learning and refreshing my knowledge of Git. I learnt how to use Git by commands, creating repository, branches, committing, and how to deal with conflicts if occur.

Next, I dived into react native and react hooks. I managed to install the environment on my computer and I’ve solved few examples presented in the courses I followed.

Finally, I learned about TypeScript which I only heard of before, I learned the basic fundamentals about the programming language and I was introduced by my supervisor about the current project under development and the testing environment adopted to test the efficiency of the software.