Guided: 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 npm run test:unit run BudgetForm command. This way you will have the freedom to run the tests.

The app can be run at anytime by clicking the Run button or by running the command npm run dev -- --host within the Terminal. You can view the app'ss webpage in the Web Browser tab using the Refresh icon button.

By the end of this lab, you will 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 state data.

In this step, you will test that the internal data state is initialized correctly. You will implement the correctly sets initial data spec found in src/components/__tests__/BudgetForm.spec.js.

If you would like to preview the solution, it can be found in the soln/SolnBudgetComponentForm.spec.js file. As you learn about Vue Testing, you'll review certain objects and methods provided to you.

In the upcoming tasks, use shallowMount with the component that you are testing as the argument.

shallowMount returns a Wrapper object. You will often save this object as a variable titled, wrapper. This way you can use this instance variable to query the rendered component.

The variable wrapper that you create contains the mounted and rendered Vue component that was passed to shallowMount.

The variable wrapper is of type Wrapper as defined in Vue Test Utils documentation.

For this step, it is important to note that the Wrapper object has the property vm of type Component. You can access instance methods and properties of our BudgetForm component with wrapper.vm. Within the data() function of BudgetForm.vue, an object is created that contains an empty description, an item amount of 0, and a budget amount of 0.

You will test that when the component is mounted, these component properties are initialized correctly.

Like many JavaScript testing libraries, Vitest incorporates methods such as describe, it, and expect. You can leverage a Jest like API to confirm that you are getting expected values using methods like toBe, toEqual, toBeTruthy, toHaveBeenCalled, and toContain. You'll be making use of these methods in the forthcoming tasks and steps to finalize the tests.

For an in-depth understanding of Vitest and the methods it offers, refer to Vitest Expect.

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

In this step, you will test that calling BudgetForm’s submitBudgetAmountForm emits the set-budget-amount event with the correct budgetAmount value.

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

If you would like to preview the solution, it can be found in the soln/SolnBudgetComponentForm.spec.js file.

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

In this step, you will test that BudgetForm’s submitItemForm emits the add-item event with the correct description and itemAmount values.

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

If you would like to preview the solution, it can be found in the soln/SolnBudgetComponentForm.spec.js file.

The last part in the BudgetForm component to test is the HTML template. You will use the following steps to test that each HTML element:

• Exists in the DOM
• Contains the appropriate attributes
• Calls the appropriate methods when certain events are invoked

In this step, you will test the form used to update the overall Budget Amount.

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

If you would like to preview the solution, it can be found in the soln/SolnBudgetComponentForm.spec.js file.

The last part in the BudgetForm component to test is the HTML template. You will use the following steps to test that each element:

• Exists in the DOM
• Contains the appropriate attributes
• Calls the appropriate methods when certain events are invoked

In this step, you will test the form used to update the created budget items that deduct from the overall budget.

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

If you would like to preview the solution, it can be found in the soln/SolnBudgetComponentForm.spec.js file.

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 to test other components found in this Budgeting Application. In these tests, you will see examples of the following:

• Passing props when creating the wrapper component.
• Using wrapper.vm.$options.props to predict what props should be expected and defined.
• How options on a Component object can be used to access any of the options that are used to define the component.
• Using wrapper.text() to return the text content within the wrapper to make sure certain text appears.
• Using wrapper.findAllComponents({Some Component}) to return a WrapperArray of all matching Vue Components.
• Using mount({Some Component}) instead of shallowMount({Some Component}). The difference between mount and shallowMount 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.