Test Single-page Application Components

We’ll be looking at class-based single-page application (SPA) components. Angular, React, and Vue all support class-based components.

SPA components generally expose lifecycle hooks (or methods) that can be used to do specific actions at certain times. For example, wait until the component is initialized (or mounted/displayed) before making a call to the API to fetch some data. And at the time of its destruction (or unmount), stop any further processing.

Click the following links for examples of component lifecycle hooks from the aforementioned SPA frameworks: :

• Angular docs
• React docs
• Vue docs

‘ArticleComponent’

For this lesson, we’ll use an SPA component that displays an article, like in a blog. It loads the article at the time of its initialization. At the time of its destruction, it marks itself destroyed and doesn’t show the article.

In the code playground below, there’s an implementation of ArticleComponent and its tests. Let’s run them and see their breakdown below.