Testing

How and when we test.

Unit tests

Unit tests, as the name may indicate, test one selected functionality of the application. Most often it is one function/method/single module. Such tests take place in a completely isolated environment, which means that no other factors affect the code we test. By other factors, I mean e.g. writing to the database, network query, downloading data from the API, etc. If such operations are required by our function, we replace them with the so-called mocks, i.e. fully predictable implementations of real operations.

During unit tests, we provide the initial state of the test that we know (e.g. arguments for the function) and provide the result we expect after executing the test - if the produced result agrees with the one provided by us, then we can consider that the tested fragment has passed the tests, i.e. it works in accordance with assumptions.

Unit tests are also often referred to as "developer tests". Such tests act as instant feedback during development.

Most often, such tests are run in the console and run automatically after each file save, ensuring real-time testing - this approach to unit testing implies several requirements:

• they must be very fast;
• very easy to understand;
• in case of errors, provide clear information about which test returned us errors and why.

Otherwise, no one will ever use them.

Examples of places where we can use unit tests are formatting strings, sorting arrays, checking the correctness of entered data, etc.

For testing we use:

• Vitest

WARNING

The test file should be in the component folder and named according to the rule ComponentName.test.ts.

Cover with unit tests

We strive to cover 100% of the code with tests. In practice, remember that this is often redundant, so a unit test coverage policy should always take into account what we need to test.

Performance tests

Performance related tests are described in the Vue User Guide as part of the [performance] best practices(https://vuejs.org/guide/best-practices/performance.html). While working, a developer should always remember to apply correct practices in the area of:

• correct implementation of lifecycle methods and functions;
• reactivity in components and communication between components;
• element rendering;
• animation of elements and components;
• garbage collection;

The Chrome browser has Dev Tools thanks to which we can check indicators related to the performance of components and the entire application. On the Chrome Dev Tools website you will find all the information you need on this topic.