Month: September 2022

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.

It’s been 25 weeks since I published my first blog.

In the past six months, I’ve learned a lot. I started up knowing nothing about test automation or react native, but after 25 weeks, I can confidently state that I’ve at least grasped the fundamentals of how they function, as well as why TypeScript is significant.

I completed adding decimal text input to the system last week, and I also fixed a fault that prevented an immediate updating of the onChange text. We initially attempted using throttle to resolve the problem, but it didn’t work, so we eventually fixed it by avoiding setting inside the onChange text.

In order to ensure that the decimal text input doesn’t contain any bugs, I also created a test script for it and tried to cover all possible scenarios by creating about 9 different scenarios.

Additionally, I created a test script for the general alert and tested it using a variety of circumstances. It performed flawlessly and without any bugs.

I appreciate Ms. Peter and Tong Hin giving me the chance.
The environment at Tong Hin helps anyone boost their knowledge and has helped me improve myself in many different fields.

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.

On the past week, I tried to create a component text input that accept only number or characters that belong to numbers.

The limitation on text input for amount entering was mentioned by Ms. Peter the previous week. Users occasionally misread the characters and digits in the quantity input area.

The issue here is the time wasted on that procedure, not the fact that it will undoubtedly throw an error after publishing the request.

In order to retain the text just including numeric letters, we use regex to filter the input and delete everything that does not belong to numbers. Everything is now fine after creating the component and using regex, but we discovered another issue with the user interface, in which characters that don’t belong to numbers appear on changing text and then are removed. We need to find a solution where the regex function is called back before on changing text, but we haven’t yet defined that issue. I tried some suggestions, like onPressKey, but I still couldn’t figure out how to use it in my situation.

During the previous week, we discovered a flaw in the alert library we use, Awesome Alert.

The user discovered last week that when he locks the device while the alert is promoting and unlocks it again, the alert abruptly vanishes. and that creates a significant issue because the user won’t be able to move on to next function where he must press the approve button because it has a callback function.

After numerous attempts, we determined that the issue is with the library itself, so I tried using a different library, but the same issue was discovered when locking and unlocking the device. As a result, we were unable to find a solution unless we used the default React Native Alert, which has a poor user interface.

I created a new component and attempted to create my own alert using features from the react native paper, such as modal, since the issue was with the react native model. Initially, I created an alert called “Okay” that only had one callback when the user clicked “Okay”, but later, I changed it to a library so that the developer could choose which alert he wanted to use, such as “Confirm” and “Cancel” or “Yes or No”, with their respective callback functions.