Vue Unit Testing #21 - Timeline indicator component test

Summary

In this tutorial, the process of writing tests for Vue components is explored. The video covers creating tests for both the activities and progress empty state screens, emphasizing the importance of checking text, image attributes, and class elements. It also dives into the `TimelineIndicator` component, explaining how to mock window height and calculate the `top` offset dynamically. The video provides insights into handling asynchronous DOM updates with Vue, ensuring proper test synchronization, and follows a clear structure: Preparation, Action, and Expectation. It highlights how to ensure the reliability of component behavior through systematic test creation and validation.

Takeaways

• 😀 The script focuses on writing tests for empty state screens and a timeline indicator in a Vue.js application.
• 😀 The process involves duplicating an existing test for the activities empty state screen and adapting it for the progress empty state screen.
• 😀 A key task is to ensure that the correct text, image properties (alt-text, source), and class are rendered on the empty state screen.
• 😀 The timeline indicator is a horizontal line that moves based on the current time, and the test verifies the correct offset (top value) of the indicator.
• 😀 For the timeline indicator, the window height is mocked in the test, and the offset is calculated based on a formula involving the current time of day.
• 😀 The test for the timeline indicator involves mocking `getBoundingClientRect` to return a predefined height, allowing control over the DOM element's properties.
• 😀 In order to ensure the test passes, the script makes use of Vue's `nextTick` to handle asynchronous DOM updates.
• 😀 The tests include scenarios where the timeline indicator's position is verified against an expected offset, ensuring the correct value is applied to the component.
• 😀 The script demonstrates how to simulate failure cases, such as removing critical style attributes or tweaking the formula for the `topOffset`, to confirm the test fails appropriately.
• 😀 The script emphasizes good testing practices, such as isolating tests with mock functions, checking computed properties, and restoring mocks after each test.
• 😀 At the end of the script, the tests for both the empty state screens and timeline indicator pass, and the tests are run across the entire project to ensure everything works correctly.

Q & A

What is the primary focus of the video transcript?

The primary focus of the transcript is on writing tests for empty state screens and the timeline indicator component within a Vue.js application.

How is the test for the empty state screen on the activities page structured?

The test for the activities empty state screen involves checking the displayed text, the proper image with alt text, and the class attribute of the image. It also includes adjustments to match the proper image and alt text values.

What is the role of the 'progress empty state' screen in the tests?

The progress empty state screen is similar to the activities empty state screen, and the test for it mirrors the activities test, except with changes to the displayed text and imported component.

How is the image checked in the empty state test?

The test verifies that the proper image is displayed with the correct alt text. The alt text and image source are fetched by inspecting the element in the browser, ensuring that they match the expected values.

What is the purpose of the 'timeline indicator' component in the test?

The 'timeline indicator' component renders a red horizontal line that moves downward as time progresses, and the test ensures that the component's offset correctly reflects the current time of the day.

How is the window height used in the test for the timeline indicator?

The window height is used to calculate the offset of the timeline indicator. The test predefines a random window height and uses it to simulate the offset based on the current time of day.

Why is the 'getBoundingClientRect' method mocked in the test?

The 'getBoundingClientRect' method is mocked to return a predefined height, allowing the test to control the DOM height value and simulate how the timeline indicator behaves with that height.

What is the significance of the 'nextTick' function in Vue.js tests?

The 'nextTick' function is used to wait for Vue.js to finish updating the DOM asynchronously. It ensures that the test doesn't check values before the DOM updates, preventing premature assertions.

What is the role of 'flushPromises' in the test?

'flushPromises' is another way to wait for asynchronous DOM updates in Vue.js. It ensures that any pending promises are resolved before running assertions, similar to 'nextTick'.

How is the test made to fail intentionally for verification?

The test can be made to fail by either removing the 'style' attribute from the timeline indicator, which removes the 'top' offset, or by tweaking the formula used to calculate the offset. These changes simulate incorrect behavior to ensure the test is properly verifying logic.