Author: Mohammedi Khalil

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.

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.

I had a wide variety of things last week that I’m going to talk about with you in this post.

So, we begin by fixing the bug in Swagger Codegen that prevents us from changing the parameter of type array to inspected format. Instead of fixing the problem, however, we simply stated that there isn’t one and that it needs to be fixed and changed through the backend because we discovered on Github that they haven’t fixed the bug yet.

Additionally, I had to test the desktop application since we made some changes to it, so before doing so, I updated the database by using some commands, and I then created numerous scenarios to further validate that the application functioned as intended.

The most challenging part is trying to identify the issue that leads to the bug when logging out of the project using ASP.NET. I made the button and intended to call the logout through it, but I still haven’t made it since I’m not too experienced with ASP.NET and Visual Studio, so I got confused trying to grasp how Mr. Peter created the identity server and how he is calling the function. I’m still researching that area, though.

I figured out how to pick a multi-warehouse last week.

The issue I’ve run into is that when I choose more than one warehouse, the parameter’s format changes to an unexpected format from the API. After much investigation, I’ve determined that this is a bug in Swagger, specifically an Axios bug because I tried to implement it the old way but still experienced the same problem. Although this problem has been raised, it has not yet been resolved. therefore I chose to replace the generator.

I have tested the Nswag generator while searching for a new generator and testing many of them. The Nswag Generator is an openapi generator that uses typescript fetch rather than Axios, unlike the previous generator (swagger Codegen)

I initially struggled to figure out how to use it, but after numerous attempts, I was able to get it to work. However, I had to make numerous changes to the generator itself, which is not recommended because the generator’s intended use is to assist developers in calling APIs. Even so, I was forced to make these changes. The type was originally void. I changed it to Response. It wasn’t returning on the 200 status. I changed it to text, and I changed it to JSON.

I had made a new screen the week before.

The user must choose the warehouse that he is currently in on the new screen, which appeared right after logging in.

So I created a checkbox for react native paper where the status should have been checked or unchecked on that screen. So, when I had located the warehouse’s data, I mapped a new feature to it called isChecked with type Boolean and set it to false.
Next, I created a function called handle function that accepts an id parameter and has a condition that, if true, changes the value of isChecked to the opposite value. Thus, alter it from true to false if it was true, and vice versa if it was false.

When I no longer needed to use that screen, I didn’t want to keep it on the navigator and be able to find it by pressing the back button, so I destroyed the screen. They will only be able to call again through the button to change, and then I destroyed it once more. I made all of that in order to use multi-selection; if it were single selection only, it wouldn’t be as complicated.

I also work on the docker registry, but I was unable to complete the assignment that Mr. Peter assigned me because I was still struggling with the SSL. I also generated a SalesApi using a different generator, but I was unable  to utilise it. I am still searching for examples of how to use that to resolve  the problem with the format of the array when submitting the warehouses.

I had a lot of new tasks last week. Configuring the Docker Registry is one of them.

I used my system in production last week, and as a result, I now know the limitations of the program and what has to be improved. One of the things that I identified is a bug that no one else caught but me. The pick-and-pack bug prevented appropriate item scanning, therefore I updated the app to fix it by eliminating the barcode’s leading number and comparing it to the item code. If the barcode is incorrect, the user will not be able to proceed.

The second task is setting up Docker and experimenting with the Docker Registry, so I install Docker Desktop on the device and attempt to push and pull, which was a bit confusing until Mr. Peter sent me a link where they explain how to use the Docker Registry, so I started to follow until I get the result so I was able to push the images and get them from the other computer through the IP address and the port of the device that I pushed with.

It was novel to experiment with Docker using only a console. We may now host our images utilising Docker Registry because Mr. Peter assured me that it will be very significant in the coming years.

Tong Hin switched from utilising the old system to the new system last week. To make that transfer, there were three primary screens.

The first and most important one is Movement Adjustment, where they can restore all of their items with the same status to captured locations without changing a single thing on the database. They can’t simply clear the data base or deal with two scenarios with location and without, so this screen forces them to do so.

The quantity of the items in stock at particular locations is updated on the second screen, which is called Stock Adjustment. The user may alter the location of objects with quantities and status on the third screen, which was called item Adjustment.

Therefore, those were the primary displays prior to moving to the new location, switching from the old system to the new system, and putting the app into production.

It was not possible to generate barcodes on third parties where the use device contained a printer because our warehousing system deals primarily with barcodes whether Items or location. Therefore, there were two ways to connect the printer’s hardware to the system.

The trickiest method of using that printer is to do it through Java, which is what Mr. Peter sent me as our backup option.

Alternately, use the react-native printer library. As per usual, I began by investigating the library. My first chore was to install and set it up, and the library documentation provided two options for linking it: manually or by using the command line. I tried both, but nobody wants to collaborate with me because the whole software won’t launch. After some research and searching, I discovered a person having the same issue as me, but with a different library. They offered him some solutions, one of which was to declare the library outside the Java manifest, allowing me to attempt anything without having to code it in Java.

I discovered that the printer accepts photos once I declared the library, so I’m just waiting for Mr. Peter to develop the backend to create the barcode of our item or location, which will lower the error rate compared to printing from a third party who might put it incorrectly.

Because the emulator’s size wasn’t the same as the device last week when I exhibited the system on a real device, there were numerous UI deformities. I thus spend some time resolving this UI issue.

After resolving the UI problem, I began testing the app with a real barcode and scan, where I discovered a number of issues. They were major issues that might cause the software to fail or have negative effects, but because they were display issues, we view them as minor issues.

I also spent some time fixing various issues, such as the focus issues, but the hardest was figuring out how to set the interval following a go-back navigation so I could restart the timer that I had stopped when moving to the next screen.

I came up with a plan to refresh the screens following go back navigation. The solution wasn’t very formal, but I was able to solve the issue by applying critical thinking. I did this by sending nonsense parameters to useDidMountEffect, which is similar to a use effect but doesn’t call on the initial render. I then used that hook that would be called once the parameters changed, and I placed the function that makes the request on it. Inside the function, I set the timer to true.