Exploring Testing

Hi there, hope you have a nice day. For the past week, I have been working on doing some changes for my test case. Focusing on do a little changes and add some new methods to make the test case passed without errors.

First and foremost, during last week I been doing some changes in the test case. I learned a lot of new things, methods and also a function. For example, the difference between mockClear and mockReset. MockClear does and also removes any mocked return values or implementations. Often this is useful when you want to clean up a mock usage data between two assertions. Beware that this method will replace the function, not just calls and also instances. You should therefore avoid assigning to other variables, temporary or not, to make sure it do not access stale data. Meanwhile, mockReset will reset all information stored in the mock, including any initial implementation and mock name given. This is useful when you want to completely restore a mock back to its initial state.

Furthermore, I also add a new test for another view. I been explore several files that related with the test and try to know and understand the component that are correlate with the test. In conclusion, I want to thank Peter for his suggestions and the chance to learn more about writing test cases. Even though I occasionally find it difficult, I am eager to keep developing and expanding my knowledge.

Mock Implementation in Testing

Hello there, hope you have a nice day. It is time for my weekly task update. For the past week, I have been working on to implement mock for the test cases.

First and foremost, what is mock? Mock in software testing is an object that mimics the behavior of a real object in a controlled way. Next, mock also is a process used in testing when the unit being tested has external dependencies. In addition, the implementation of mock used to test the interaction between objects and simulate certain conditions that might be difficult or impossible to reproduce in a real-world environment. Mock functions used to test the links between code by erasing the actual implementation of a function. Next, it use to capturing calls to the function. Other than that, capturing instances of constructor function when instantiated with new.

Next, for the first mock implementation, I tried to implement mock in focus. For this test case, the purpose is to mock the focus method of the element and triggers a focus event on it. Then, for the next test case, I tried to implement mock for React Navigation. For this mock implementation, I have been using spread syntax to replace the navigation method. The spread syntax is a syntax for copying the properties of an object into a new object. This is crucial in testing to make sure the original item has not been altered.

Overall, I want to thank Peter for his advice and the opportunity to learn more about the use of mock tests in testing. Despite the fact that it can be challenging for me at times, I am eager to keep growing and learning new things.

Test Case Problems

Hi there, hope you have a nice day. For the past week, I have been working on doing some changes for my test case. Focusing on do a little changes and add some new methods to make the test case passed without errors.

Firstly, for my first test case which is test on scanning of correct code should navigate back to the list view. For example, when the user enter the correct code it will automatically navigate back to the list view. Apart from that, Peter help me to mock the test suite globally. There are times where we need to mock functions like fetch for example, etc., globally instead of mocking individually in each file. Node Package Manager (NPM) modules like jest-fetch-mock, etc., are there for rescue to mock these globally. With this approach, we can mock any API globally that we need to.

Next, for my second test case which is test on scanning of incorrect code should prompt error box and navigate back. For example, when the user enter the incorrect code, the prompt error box will pop-up and show invalid. At first for this test case, I get an error on test id. The error cause from my silly mistake which is I get the test id from another file which is the incorrect one. After that, Peter showed me the correct file which is I should take the test id. I am grateful and thanks to Peter for helping me to solve the problems.

Overall I am thankful to Peter and also to learn more about writing a test case. I am keen to keep improving and learning new things, even though it can be difficult for me at times.

Tough in handling a test case

Hello everyone, I hope you are doing well out there. It is time for my weekly task update. It is continue for my last week task which is writing a Test Suite. For this week, I have been focusing on make a correction for scanning of correct code should navigate back to list view.

Firstly, like I mention before this I have been handling with the scanning a correct location code should navigate back to the list view. For this test case it is not that quite challenging but throughout writing and make a correction for this test case I have been deal with several issues and errors. Like the past week, for this test case I have been dealing with the function or method issue. But after few tries and error, I managed to solve the issue by mock it. I use jest function to mock it and the issue is resolved after the mock implementation in the test case.

Furthermore, I run and debug the test case to make sure there is no other issues and errors. New issues are pop up after the running and debugging the test case. For this issue it involved the sound library. This issue really make me feel blank because I have been explore and also refer another file to solve it. After several try and error the issue did not resolve. After that I ask Peter for some help and code review. At first we also take some time to solve the sound issue. It is because the value in the test id is null. We also tried several method in order to make the input element editable. But in the end the value is still null after debugging it.

Overall, this week is not easy for me. I hope next week I manage to make the test suite pass. I also thankful for the opportunity to learn from Peter and helping me throughout on writing this test suite.

Exploring Test case (Part 2)

Hello there, I hope all is okay with you. As part of my task last week, I worked on writing a test case for the “Name Display” feature during the login process. Here is a brief summary of what I accomplished. After I already get helped from Peter, Peter show me to write test script well written without any errors.

Next, continue with this week task. For this week, I continue to explore on the test script. About the task, Peter showed me on how to use test timer with beforeEach and afterEach. By using describe function used to group together related test cases with a common name which is “Test Timer”. The beforeEach function is a Jest lifecycle hook that specifies setup step that should be executed before each test case in the test suite. For this case, it is using “jest.useFakeTimers” with the “advanceTimers” option set to true. This will allow Jest to replace the real timers in the environment with fake timers that can be controlled programmatically in the test cases. It also calls “jest.resetModules()” to reset any modules that may have been cached by Jest, ensuring a clean state before each test.

Furthermore, for the first test which is “Display user name if not logged in”. It renders component with props.navigation and props.route as props. It then uses the “getByTestId” function to get the component is equal to the expected string. Second test which is “Display correct user name when logged in”. It renders component with props.navigation and props.route as props using the render function. It then calls jest.advanceTimersByTime to advance the timers. It asserts that the props.children of the retrieve component is equal to the expected string “Welcome, ${displayName} !”.

Exploring Test case (Part 1)

Hey there, I hope you are doing well. It is time for my weekly work update, highlighting the progress I made during past week. As part of my tasks last week, I worked on writing a test case for the “Name Display” feature during the login process. Here is a brief summary of what I do: For the test case task, Peter told me to write a test case to verify that after logging in, going back to the home screen, reopening the app, and pressing login without retyping login credentials, the correct name displayed. There also several test case file for the references.

At first I try to figure out what to write, after I refer to the another test file, it open my eyes on how to write the test script. After I already finished write the test script, then I try to run the test. At first the result for the test is fail, then I try to look back on what that make it is failed. It is cause from the “testID” that make the test script keep failed. I try to figure out on how to solve the error by Google and explore the other file that have the test script. After several tries and it still keep showing the test script is fail and not pass.

About the Application

Last week, Peter introduced to me an application that we use in Tong Hin. Briefly describe about the code that used in this application, It is use a React Native component that implements a login view for an app using the OAuth 2.0 authorization framework. It allows users to log in with a provider, in this case, obtains an access token and an ID token that can be used to authenticate the user’s identity and access protected resources on behalf of the user.

It’s imports libraries such as AsyncStorage, react-native-paper, and react-native-app-auth to implement functionalities such as token storage, UI components, and OAuth 2.0 authorization. The AppContext is used to share data between components, and screens in the app.

Next, it’s also defines the configuration for the authorization provider that will be used for the OAuth 2.0 authorization. The provider’s issuer, client ID, redirect URL, and etc are specified, as well as the scopes that the app requires access to.

Finally, defines the default state of the authentication, which includes information such as whether the user has logged in, which provider was used, and the tokens obtained from the authorization process.

Glimpse on React

On the second week of my internship, I begin to dwell deeper into the concept like core components and native components. React Native has many Core Components for everything from controls to activity indicators. The examples of React Native Core Components is <View>, <Text>, <Image>, and <ScrollView>.

React Native runs on React, a popular open source library for building user interfaces with JavaScript. The core concepts behind react is components, JSX, props, and state. We can think of components as blueprints. Whatever a function component returns is rendered as a React Element. Next is JSX, a syntax that lets you write elements inside JavaScript. Props is a short for “properties”. Props lets you customize React Components. Lastly, state. State is like a component’s personal data storage. State is useful for handling data that changes over time.

First Week of Internship at Tong Hin

For the first week at Tong Hin, I spent my first week at the company mostly concentrating on understanding the technology that would be used the following week. I started out by learning how to utilise git. I learned how to create repositories, commit changes, merge repositories, and push any changes made in the repositories using the git command.

Next, Peter also provides me with some courses that would get me more prepared before the real work as Front-end. Peter’s provide me of how to use Microsoft Visual Studio Code IDE, TypeScript, React Fundamentals, React Hooks, and React Native Fundamentals. There are also exercises files available for me to download and experiment it during free time.

Lastly, I would like to thanks to Peter for guiding me through this first week of internship at Tong Hin.