Challenge: Testing a Budgeting Application in Vue 3

In this lab, you will be writing tests for an existing simple budgeting application using the Vue front-end framework. You will be writing tests for the BudgetForm component. The test file you will be working on can be ran using the command npm run test:unit run BudgetForm. This way you will have the freedom to run tests.

The app can be run at anytime by clicking the Run button at the bottom right of the terminal or by running the command npm run dev -- --host within the terminal. You can view the app webpage in the Web Browser tab and refreshing the page.

By the end of this lab, you should have a deeper understanding of how to test a Vue component and the objects used when doing so.

Throughout this lab, you will be testing the BudgetForm component. This component contains the form and input elements that allow the user to specify a total budget amount and the cost of each item.

Each instance of a component tracks its own state, or internal data, aptly stored within the data() function. This function returns an object containing the reactive (triggers an update when changed) state data.

The features we will be testing at this step include that the internal data state is initialized correctly. You will be implementing the correctly sets initial data spec found in src/components/__tests__/BudgetForm.spec.js.

If at any point, you would like to preview the solution, it can be found at soln/SolnBudgetComponentForm.spec.js.

The methods property of the component details all of the functions it is able to perform. For the BudgetForm component, it has submitBudgetAmountForm() and submitItemForm() methods which will be responsible for emitting the user input data to be displayed.

The feature we will be testing at this step is that calling BudgetForm's submitBudgetAmountForm emits the set-budget-amount event with the correct budgetAmount value.

You will be implementing the emits "set-budget-amount" event with correct payload when submitBudgetAmountForm method is called spec found in src/components/__tests__/BudgetForm.spec.js.

If at any point you would like to preview the solution, it can be found at soln/SolnBudgetComponentForm.spec.js

The methods property of the component details all of the functions it is able to perform. For the BudgetForm component, it has submitBudgetAmountForm() and submitItemForm() methods which will be responsible for emitting the user input data to be displayed.

The feature we will be testing at this step is that calling BudgetForm's submitItemForm emits the add-item event with the correct description and itemAmount values.

You will be implementing the emits "add-item" event with correct payload when submitItemForm method is called spec found in src/components/__tests__/BudgetForm.spec.js.

If at any point, you would like to preview the solution, it can be found at soln/SolnBudgetComponentForm.spec.js

The form element is completed in the BudgetForm component with its html template. We will use the following steps to test that these elements exist in the DOM, have the appropriate attributes, and call the appropriate methods when certain events are invoked.

The feature we will be testing at this step is the form used to update the overall Budget Amount.

You will be implementing the contains submitBudgetAmountForm element spec found in src/components/__tests__/BudgetForm.spec.js.

If at any point, you would like to preview the solution, it can be found at soln/SolnBudgetComponentForm.spec.js

The form element is completed in the BudgetForm component with its html template. We will use the following steps to test that these elements exist in the DOM, have the appropriate attributes, and call the appropriate methods when certain events are invoked.

The feature we will be testing at this step is the form used to update the create budget items that deduct from the overall budget.

You will be implementing the contains submitBudgetItemForm element spec found in src/components/__tests__/BudgetForm.spec.js.

If at any point, you would like to preview the solution, it can be found at soln/SolnBudgetComponentForm.spec.js

Now that you have experience writing tests for an existing Vue component, you are welcome to look at any other tests under the src/__tests__/ directory. These are available that the subdirectories of the path above.

These tests test other components found in this Budgeting Application.

It is interesting to see how to pass props when creating your wrapper component as well as using wrapper.vm.$options.props to expect on what props should be expected and defined. options on a Component object can be used to access any of the options that are used to define the component.

You can also do wrapper.text() to return the text content within the wrapper to make sure certain text appears.

You will also see in the other tests instances of wrapper.findAllComponents({Some Component}). This will return a WrapperArray of all matching Vue Components.

In M04_App/ specs, you may see the use of mount({Some Component}) instead of shallowMount({Some Component}). The difference between these two ways of getting a Wrapper of the mounted and rendered component is that shallowMount will only contain stubbed child components.

For more information on Wrapper, Component, HTMLElement, and other testing features please see Vue Test Utils.