Testing Approach

Purpose

Automated tests help team find out issues with less manual work involved. It also builds team confidence to make changes, and help with long term maintanance of the application.

Testing Level

Unit Test

Unit test focus on single function and single component.

• For testing a single function, we want to check:
  • by given an input, if we could get the expected output
  • how the function handle the error case
• For testing a single component, we want to check:
  • if the component can be rendered correctly
  • if the component can display expected element and text
  • if the component can receive properties correctly (if has)
  • if the component can receive functions correctly (if has)
  • if the event in this component can be triggered correctly. For example, for a button component, if the on click event can run the callback function as expected

Integration Test

Integration test focus on multiple components, more on a single page level, or a section level. For example in FAM, the login page, or the left side bar on the main page, or the profile section, or the grant access piece. Basically we test the components that are grouped in a specific section. And we want to check:

• if the component (this will be the section or page component, for example in FAM, it will be HOME.vue, GrantAccess.vue) can be renderend correctly
• if all the child components/elements can be displayed as expected, if the text content can be displayed as expected
• if there is any function, follow the unit test scenario for testing a function
• if there is any event, check if can be triggered correctly and get the expected result. For example, click on a checkbox to show a hidden input box

End to End Test

This is the highest test level, which will mimic a human work. It will simulate a user journey, run through the whole user flow in the application. This can reduce a lot of human work in the testing, and give us more confidence for making changes. But this test also takes a lot of time, both writing the tests and running the tests. It needs backend and test database. If we want to test the behaviour in different browsers, it will take more time to run. When we reach this level, we could always start with the most basic user flow. And add little by little.

Testing Approach for FAM

We can start by adding the integration tests. Most of the time, good integration tests can cover some unit test cases. So for example for FAM, we could start with these following sections.

Plese note: this is just a rough idea based on our UI mockup, the real testing content needs to adjusted based on how we code the each section.

Landing page

• if display the expected text
• if display the expected button, icon, image element
• check the event after click on each login button, if get the redirect

Header

• if display the expected text and icon
• if click on the user profile icon could open the panel
• if click on the close button on the panel can close/hide the panel

User profile

• if display the expected text and icon
• check the event after click on the logout button, if get the redirect

Navigation bar on the main page

• if the navigation bar displays correctly, title, image and icon
• if get all the expected navigation buttons
• check the click event for each one

Dashboard on the main page

• if display the expected elements
• if select an application from the dropdown can show the user/role table

Reference Reading

There are some good documentation for testing VUE application in the VUE official documentation site. It also has some recommended testing library and example we could follow.