Vue Unit Testing #13 - Activity form component test (spies)

Summary

In this lesson, the focus is on writing tests for an activity form component to ensure it creates a new activity upon submission. The process involves using a spy object to monitor the call to the 'create activity' function, which is triggered when the form is submitted. The test checks if the function is called with the expected argument and mocks the function's implementation for testing purposes. The lesson also covers the importance of restoring mocks to avoid test interference. The test suite passes successfully, and the video concludes with an invitation to explore the source code.

Takeaways

• 😀 Spies are used in tests to monitor if specific functions, like 'createActivity', are being called during execution.
• 😀 The spy is created using the 'jest.spyOn' method, which monitors the function from a specified module.
• 😀 A form is rendered in the test, and its submission triggers the call to the 'createActivity' function.
• 😀 Mock implementations are used to replace the original function with a custom one for testing purposes.
• 😀 The 'createActivity' function should be tested for being called with specific arguments, such as an object with 'id', 'name', and 'secondsToComplete' properties.
• 😀 The ID value in the test is randomly generated, so the test doesn't check for its exact value but its type (e.g., string).
• 😀 The 'expect.any' method is used to test that an argument's value is of a specific type without needing to match the exact value.
• 😀 After running the test, the mock implementation is removed using 'restoreAllMocks()' to prevent interference with other tests.
• 😀 Test success is confirmed when all assertions pass, ensuring that 'createActivity' is called once with the expected arguments after form submission.
• 😀 By using spies and mocks, the test ensures that the activity creation process behaves as expected without needing to execute the actual functionality.
• 😀 It's important to ensure that the mock doesn't affect other tests by properly restoring all mocks after the test is done.

Q & A

What is the primary objective of the test being written in the script?

The primary objective is to test the functionality of the activity form component, specifically to verify that submitting the form correctly creates a new activity.

What is the purpose of using the spy object in the test?

The spy object is used to monitor and track whether the `createActivity` function is called during the form submission process, allowing the test to verify that the function is executed as expected.

How does the spy object work in this context?

The spy object is created using the `jest.spyOn()` method, which allows monitoring a specific function from a module. In this case, it tracks the `createActivity` function in the `activities` module to ensure it is called during the test.

What happens after the spy for the `createActivity` function is set up?

After setting up the spy, the test triggers the form submission by simulating user actions. It checks if the `createActivity` function is called and ensures that it is called with the correct arguments.

What is the significance of the `mockImplementation` method used with the spy?

The `mockImplementation` method allows modifying the behavior of the `createActivity` function in the test. By using it, the original function implementation is replaced with a mock, helping to isolate the test from external dependencies.

Why is the `any` method used when checking the value of the `ID` property in the test?

The `any` method is used to indicate that the test should not check the exact value of the `ID` property, but rather ensure that it is of the correct type. This is useful because the `ID` value is generated randomly in each test run.

How does the test ensure that the `createActivity` function is called with the correct arguments?

The test uses the `toHaveBeenCalledWith()` matcher to verify that the spy was called with the expected arguments. This includes checking that the function was called with an object containing specific properties like `ID`, `name`, and `secondsToComplete`.

What happens if the expected arguments for the `createActivity` function are modified?

If the arguments are modified by adding or removing properties, the test will fail. This ensures that the `createActivity` function is always called with the correct structure and values.

What is the importance of restoring mocks at the end of the test?

Restoring mocks at the end of the test ensures that the spy and any mock implementations do not interfere with other tests. This is done using `jest.restoreAllMocks()` to reset the mock behavior.

What is the result of running all tests after the mock restoration?

After restoring the mocks, the test suite runs all tests, and if everything is correctly implemented, all tests should pass, ensuring the functionality works as expected without any side effects from the mocks.